http://tif.tokyo/

夏に行われるTOKYO IDOL FESTIVAL2015をよりスムーズに予習できるためのサイトを作成しました。

http://tif.tokyo/

◼︎企画編

今回のサイトで出来る事としては

・マイタイムテーブル作成
・作成したタイムテーブルをシェア・画像としてダウンロード
・タイムテーブルをみながらアーティストのYoutubeをお手軽に視聴

みたいな感じ。
タイムテーブル作成はどっちかっていうとオマケで、Youtube視聴が主にやりたかった。タイムテーブル→アーティスト公式→ページ内検索→試聴みたいなプロセスってタイムテーブル組もうとするたびに何回もしちゃうんだけど、参照しながらさくっと聴けちゃえばショートカットかなみたいな。でもグレーゾーンの動画も出てきてしまうので敬意としてできるかぎり公式の動画が出てくるようにはしました。

◼︎実装編

データ取得に際して150組み超えの出演者を考えると手動入力はありえない。

幸いにもスマフォ向けページに出演者一覧が載ってるので
まずは出演アーティストをPython + BeautifulSoup4の組み合わせでスクレイピングしてとってくる。
アーティスト名を一覧化したら、それぞれにYoutubeChannnelがあるかどうかをチェックしてある場合はchannelIDを取得する。
parser.add_argument(“–q”, help=“Search term”, default=[ArtistName])とかでアーティスト名を引数に youtube.search().list() して search_result[“id”][“channelId”]があったらchannelIDをアーティスト名と共にjsonで一時保存。
そのjsonを再び読み込んで、channelIDを持ってるものはchannelの動画を、channelがないものはアーティスト名で検索した動画をjsonに保存。
これで公式をできるだけ多めに出すというルールに沿うことができる。

あとは別途タイムテーブルをまとめたjsonもスクレイピングで作成。ビュー側でタイムテーブルjsonとYoutube情報jsonを読み込み、お互いのアーティスト情報を紐づけるKeyはアーティスト名の英語表記があったのでそれを使用。

ビュー側はjade + gulp + stylusで普通に作る。
タイムテーブルなどの時間周りの処理はmoment.jsに
スマフォのスワイプなどはhammer.jsなどを使ってお手軽に。

取り急ぎメモ代わりに。
また追記する、かもしれません。