やってみる

アウトプットすべく己を導くためのブログ。その試行錯誤すらたれ流す。

GitHubリポジトリ一覧ページの基礎ができた

JavaScriptでGitHubAPIを叩き、HTMLで表示した。リポジトリ一覧ページの基礎ができた。

成果物

GitHub MEGA

開発環境

実行

  1. ブラウザでGithubRepos.htmlを開く
  2. ytyaruユーザのリポジトリ一覧が表示される

設定

request.jsvar targetUser = "ytyaru";の値を任意のユーザ名に変更すると、そのユーザのリポジトリ一覧が表示されるはず。

ソースコード

構想

GitHubリポジトリ一覧ページがほしい。

現状

成果物一覧ページを手動で作成していたが、面倒で更新をやめてしまった。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

AngularJSGoogle製のMVCフレームワークらしい。

今回はAngularJSを使って実装した。 以下のようなことをするのに使っている。

  • HTTP通信
    • GitHubAPIの結果をJSONPで取得する(クロスドメイン制約の回避)
  • DOM操作
    • JavaScriptでHTML文字列を生成して埋め込む

JavaScriptでWebAPIを叩く方法をググっていたら、AngularJSやらJSONPやらが見つかった。詳しいことはさっぱりわからないが、かなり簡単にJSONP通信できた。

課題

GitHub

オンラインストレージ

  • MEGAなど他のアップロード先の取得

所感

これでリポジトリ一覧ページの基礎ができた。

課題は多いが、とりあえず形になったので一段落。