第一回ももクロ ハッカソン に参加してustアーカイブビューア的なものをつくった

ももクロ大好き!」繋がりでid:secondlifeさんとTwitterなどを通して仲良くなりまして、ノリと勢いで「ももクロハッカソンやりましょう!」なんて言ってたら本当にやることになり。2011年9月4日、都内某所にて ももクロ好きの有志Web系エンジニア「ももいろクリエイター」で集まって「ももクロに関する何かを好き勝手作る」という趣旨のもと、「第一回ももクロハッカソン」が開催されました。
関連記事: 第一回ももクロハッカソンに参加して Acme::MomoiroClover リリースしました - 2nd life

自分が作ったもの

ぜんぜん未完成だけど、とりあえずこちらにデプロイして動かしています。
http://momoclo.no.de/
ソースコードはこちら: https://github.com/sugyan/UstCloverZ

良いプロジェクト名が思いつかなくて、とりあえず"UstCloverZ"という名前でリポジトリ作ってしまいました。何か良いネーミングあればアドバイス下さい ><
(※09/06追記 @さんにアドバイスいただき、momocloopに改名しました)

これは何?

ももいろクローバーZは、多くのライブをこなしつつも その様子をUstreamでよく放送していて、今でも公式チャンネルに動画アーカイブが数多くアップされています(ライブ動画だけでなくリーダー夏菜子がグダグダとお喋りするだけの「かなことペヤ」などのコーナーもある)。
USTREAM: momocloTV: ももいろクローバーZの夏ライブ「桃神祭」! 今年は神奈川県・日産スタジアムで2 DAYS開催!今回は“鬼ヶ島”?! 【公演詳細】 「桃神祭 2016 ~鬼ヶ島~」 会場:神奈川県・日産スタジアム 【MAP】 【DAY1】2016年8月13日(土) open 14:...
画質はそれほど良くないものの、ライブの生の声や観客の盛り上がりも観て聴くことができて、僕はこれらのアーカイブ動画が大好きなのです。一日中観ていたいくらい大好き。
アーカイブ動画だから好きなタイミングで再生して楽しむことが出来るのだけど、やっぱり一人だけで聴いてるとちょっと寂しい。同じタイミングで視聴しているヒトと盛り上がりを共有できればいいのに。
…ということで、出てくるのが「ウタダヒカループ」。
http://d.hatena.ne.jp/ruedap/20110811/uhloop
発想としてはコレとまったく同じです。つまりパクr(ry
当然のことながら、公式チャンネルのものを公式のAPIを利用しているとはいえ 問題あるようであればすぐにサービス停止します。

技術的なところ

今回使っているのはYouTubeではなくUstreamアーカイブ動画。UstreamではHTTPリクエストで動画やユーザー、チャンネルの情報などをxmljsonで取得できる「Data API」と、Flashから動画配信や再生をするための「Flash Client API」が提供されている。
Ustream Developers - Ustream Developers
これを使って、サーバ側で「今、どの動画の何分何秒を再生している」という情報を持たせておき、クライアント側でそれに合わせてFlashのプレイヤーでそこから再生することが出来れば実現できる…!ということで、ほとんど書いたことなくて不慣れなActionScript3を、まわりの人たちに教えていただきながら書いて、それ用のプレイヤーを作ったりしました。
https://github.com/sugyan/UstCloverZ/blob/master/as3/Player.as
基本的に、指定された動画を読み込んで指定した再生時間のところにseekする、というだけのもので、あとはExternalInterfaceを使ってその他の処理はJavaScriptに任せる構成。
サーバはチャットなどリアルタイム機能をたくさんつけたいという構想からNodeで。今のところ普通のテキストチャットができるだけ。ライブのコールとかMIXとかも上手いこと盛り上がるように出来たら良いなーとか考えているところ。

課題

現時点では、最初の読み込み時にだけどの動画のどの時間かを取得してseekしようとするのだけど、この時点で結構タイムラグが出てしまったりして、観てるヒトによる時間差がかなり大きい状態になってしまっている。何度かリロードすると数秒差くらいに収まると思うのだけど… もうちょっと上手い仕組みで時間差を解消できるようにしたい。
その他、音量オンオフ切り替えだとか 今再生中のものはあと何分なのか表示させる、とか Twitterログインでチャットコメントで名前出せるようにする、とか ライブだけを延々と再生し続けるモードを別に用意する、とか 色々やりたいことがまだある。 地道にアップデートを続けていきたいところ。

感想

動画再生のテストをしようとして読み込んだ動画で「夏菜子かわいいなぁ」と見とれてしまって作業が止まってしまうことがしばしばあったのが一番の問題点でしたね。
ももクロ好きなヒト同士で集まって、ももクロを聴きながら(一緒に歌ったり叫んだりしながら)作り続け、ももクロへの愛を語りつつ食事(ももいろランチ)したりして、とても楽しい一日でした。また近いうちに「第二回」を開催したいですね。参加された皆様、おつかれさまでした!