github-issue-widget

GitHubの特定のリポジトリのIssue一覧をiframeで埋め込めるものを作りました。

以下のようにiframeのsrcにパラメータを指定して埋め込む事が出来ます。

<iframe src="https://azu.github.io/github-issue-widget/?owner=efcl&repo=efcl.github.io&limit=3&random"
        allowtransparency="true" frameborder="0" scrolling="0" width="100%"></iframe>

結果は以下のような表示です。

使い方

使い方は単純で、以下のようにiframeで https://azu.github.io/github-issue-widget/ にパラーメータをつけて埋め込むだけです。

<iframe src="https://azu.github.io/github-issue-widget/?owner=efcl&repo=efcl.github.io&random"
        allowtransparency="true" frameborder="0" scrolling="0" width="100%"></iframe>

パラメータ

パラメータに必須なのは、ownerとrepoのみです。他はオプショナルなパラメータになります。

ownerとreop

https://github.com/azu/github-issue-widget を例にすると ownerはazuで、repoはgithub-issue-widget です。

limit

limitは表示する件数の指定です。(多分取得数に限界があるので、その場合は小さいほうが優先されます)

デフォルト値は1にしています

random

random は &random という感じでvalueなしで指定(keyがあればtrueになる)する感じで使います。

これを指定した場合は、表示する順番がランダムになります。

GitHub API

他にもGitHub APIを叩く際のオプションを指定することが出来ます。

以下のようにstateで閉じているissueを取得することもできます。

<iframe src="https://azu.github.io/github-issue-widget/?owner=efcl&repo=efcl.github.io&limit=10&state=closed"
        allowtransparency="true" frameborder="0" scrolling="0" width="100%"></iframe>

基本的にGitHub APIとParametersの名前は同じになっています。

GitHub APIをJSON-P Callbacksを使って叩いているので、パラメータの詳細はParametersを見て下さい。

その他

埋め込んでいるHTMLはGitHub Pagesで公開してるものを使っているだけな感じです。

これは、以下のButtonを参考に作りました。

このブログでは次に書く候補の記事をGitHub Issueにメモしたりしてるので、記事の下にその候補を表示するようにしました。

Issues · efcl/efcl.github.io にまとめてるので興味があったらコメントや:+1しておくと参考になります。