JavaScriptでGitHubAPIを叩き、HTMLで表示した。リポジトリ一覧ページの基礎ができた。
成果物
開発環境
- Windows XP Pro SP3 32bit
- Firefox 50.0
- angular.js 1.5.8
- angular-sanitize 1.5.8
実行
- ブラウザでGithubRepos.htmlを開く
ytyaru
ユーザのリポジトリ一覧が表示される
設定
request.jsのvar targetUser = "ytyaru";
の値を任意のユーザ名に変更すると、そのユーザのリポジトリ一覧が表示されるはず。
ソースコード
構想
現状
成果物一覧ページを手動で作成していたが、面倒で更新をやめてしまった。2016-08-31から放置している。
自動化
GitHubAPIを使って自動化しようと考えた。
まずはWebAPIを叩く方法から調査してきた。GitHubへアップロードするスクリプト作成に力を注いでいたので、一覧ページ作成は進んでいなかった。
日付 | 内容 |
---|---|
2016-12-09 | http://ytyaru.hatenablog.com/entry/2016/12/09/100000 |
2016-12-08 | http://ytyaru.hatenablog.com/entry/2016/12/08/100000 |
2016-12-07 | http://ytyaru.hatenablog.com/entry/2016/12/07/100000 |
2016-12-06 | http://ytyaru.hatenablog.com/entry/2016/12/06/100000 |
2016-11-20 | http://ytyaru.hatenablog.com/entry/2016/11/20/100000 |
2016-09-09 | 成果物まとめ一覧ページを自動作成したい - やってみる |
2016-08-27 | はてなブログを書くのに時間がかかってしまう - やってみる |
2016-06-15 | できたもの一覧 - やってみる |
前回、JavaScriptでGitHubAPIを使ってHTMLをつくればいいと気づいた。
今回
XMLHttpRequest
まずWebAPIを叩くためのライブラリを探した。
JavaScriptならXMLHttpRequest
を利用するらしい。しかし、別のドメインへアクセスできないという致命的な問題がある。セキュリティ上そうしているらしい。ドメインをまたぐことをクロスドメインというらしい。
JSONP
JSONPという形式の通信ならばクロスドメインでも利用できるらしい。
AngularJS
AngularJSはGoogle製のMVCフレームワークらしい。
今回はAngularJSを使って実装した。 以下のようなことをするのに使っている。
- HTTP通信
- DOM操作
- JavaScriptでHTML文字列を生成して埋め込む
JavaScriptでWebAPIを叩く方法をググっていたら、AngularJSやらJSONPやらが見つかった。詳しいことはさっぱりわからないが、かなり簡単にJSONP通信できた。
課題
GitHub
オンラインストレージ
- MEGAなど他のアップロード先の取得
所感
これでリポジトリ一覧ページの基礎ができた。
課題は多いが、とりあえず形になったので一段落。