ようやくやる気が出てきた。のでwww.sfpgmr.netページの改造に取り組むことにした。
当初考えていた通りnode.jsでYoutube API,Twitter API,Tumblr API,はてなブログAPI,etc..を叩いて自己キュレーションサイトのようなものを作る。今は各SNSのAPIのコードを書いて勉強している。最終的にはその成果をマージしてトップページを構成するつもりである。
昨日今日とYoutube DATA APIを勉強しているところである。以前からちょこちょこ触ってはいてドラッグ・アンドドロップで再生するサンプルとか作ってみたりはしていたけども、すっかり忘れている。歳を取るとほんと短期記憶力が低下する。短期ではなく中期と言うべきか。今回は出来る限り静的コンテンツでいこうと思っているので、node.jsでプリ・レンダリングするつもりである。一応いまのところの成果物はこれである。
ただのYoutube動画サムネイルであり、プレイリストも動画扱いでリンクを貼っているのでそこはエラーとなっていて改善の余地はまだまだある。サムネイルはBootstrapのサムネイル機能をまんま使っている。UIはBootstrapである。もうこれを手放せそうにない。静的コンテンツの生成作業のうち、DOM操作はd3.jsを使用している。Bootstrapはjqueryほぼ必須なのでほんとはjqueryでDOM操作したほうが効率的な気もするけど、あえて使わずd3.jsで処理することにしている。
こういうサンプルコードをいくつか書いて得た知識をマージしてトップページを作る。おそらく単純なサムネイルのページとなると思う。何か面白い工夫を施したページとしたいが今のところアイデアなしである。
Youtube Data APIはAPI Keyを取得すれば公開されている情報であれば読み取りが可能である。それ以外の情報や更新・追加・削除等の処理を行いたければOAuth2を使用する必要がある。私の場合自分の公開情報をサマリするだけなのでOAuth2は使用しない。最初はHTMLページでAPIを直接たたこうかなと思ったが、そうするとAPI Keyを晒してしまうことになるので、それはなるべく避けなければならない。
アイデアとしては以下のようなものがある。
- nginxをプロキシにしてクライアントとAPIの間に入れる。クライアントはAPI Keyを付与せずにnginxに対してAPIを呼び出す。nginxはAPIキーを付与してYoutube Data APIを呼び出し、クライアントに結果を返す。APIコールは自ドメインからのアクセスに限定する。
- API Keyを別ファイルにして読み込む。このファイルのアクセスは自ドメインに限定する。
ただいまいちな感がある。そんなに頻繁にコンテンツを更新するわけでもないのでサーバー側でAPIを呼び出し静的コンテンツとして生成するほうがAPI Keyの秘匿としてはより安全と思うので何か壁にぶち当たらない限りはこの方向でいこうと思う。