フジロックの雰囲気を味わえる気がするツールを作りました
今週末はフジロックフェスティバル '07があります。僕の周りでも行くという人はちらほらいるのですが、僕は行けなかったので、せめて雰囲気だけでも味わおうとこんなものを作りました。
Fuji Rock Festival in my Room（Firefox でしか動きません）
http://lab.satoship.net/fujirockfestival_in_myroom/
これは何？
- livedoor Reader 風の UI でフジロック出演者の YouTube 動画をだらだらとみることができる Web サイトです
- カウントダウンチューブのフジロック版みたいなものです
使い方は？
- 左側にアーティスト一覧があります。その一覧からアーティストを選択すると、そのアーティストの動画が右側に表示されます。
- 動画の左横に曲の一覧があります。自動的に再生された動画以外の動画を見たい場合は、曲の一覧の中から聴きたい曲を選択してください。
- 動画の再生が終わると、次のアーティスト（現在選択されているアーティストの下のアーティスト）に移動し、自動的に次のアーティストの動画が表示されます。
もう少し詳しい説明
- アーティストの一覧は、公式ページのアーティストラインナップから作成しています。ステージ順、日付順に並んでいます。
- 曲の一覧は、「（アーティスト名） + live」をキーに YouTube を検索し、1 ページ目の 10 件だけを取得し、そのタイトルを並べています。
- よって、曲の一覧内の動画が選択したアーティストのものである保証はありません。また、上記の理由より、表示される曲の一覧はあまり変わらないと思います。
- アーティストを選択したときに、自動再生される動画は、曲一覧の中から毎回ランダムに選択しています。
注意することは？
Firefox でしか動作しません。ごめんなさい。いずれ対応したいと思っています。- 日本語のアーティストはうまく取得できません。
- 動作が不安定です。おかしな動きをしているような気がしたら、ページを再表示してみて下さい。
- 特に状態管理がとてもあやしいです
- 検索結果が 0 件のアーティストに移動すると、そこで止まります
- レイアウトが偏ってて変なのは、ボタンとか画像を配置予定のためです
技術的な話
- アーティスト一覧のリストはサーバ上から取得していますが、その他は JavaScript だけで処理しています
- YouTube の API は XML を返すので、pipes で json に変換して使っています
- iframe を使った方法を試みたり、Google Developers でやろうとしたりしましたが、pipes がシンプルかつ確実でよかった
参考にしたところ
など
