テレビのように連続で動画を観られる「ももクロチャンネル」を作りました

この３連休を利用して「ももクロチャンネル」をつくりました。（chrome推奨、私chromeしか使わないから）

ももクロチャンネルとは何かといいますと一言で言えば、’’テレビのように延々と、ももクロの動画を見続けるためのサイト’’です。

’’テレビのように’’というのがポイントで、つまり電源を入れてチャンネルをまわせばあとはダラダラ見るだけという操作性、これをPCでも実現したかったのです。さらに、自分の好きなコンテンツをテレビのようにみることができればテレビよりも快適！もうももいろクローバーZなんて長い名前をYoutubeで検索なんてしなくていい・・・ということで作ったのが「ももクロチャンネル」です。

それでは、どうやって実装していったかを書きましょう。
まず、仕組みとしては１）YoutubeAPIを使い、２）ももクロ関連のワードをAjaxで検索し、動画を取得したのち、３）連続再生する仕組みをつくり、４）DOMをごちゃごちゃいじりながらフロントで成形していくといった感じです。
ご覧の通り、サーバーサイドの言語を使ってないので言語としては
・HTML
・CSS
・Javascript（jQuery）
の３つしか使ってないです。

まず１）ですが、こちらがYoutubeAPIのリファレンスです。
もちろん英語ですが、ドットインストールさんの「Youtubeでジュークボックスを作る」レッスンを見れば十分かもしれません。

２）はAjaxで検索をかけるところが少しめんどうでしたが、ここでもまたドットインストールさんの「Youtubeでジュークボックスを作る」レッスンのおかげでずいぶん楽に実装できました。

３）の連続再生のコツはYoutubeAPIのEVENTからENDEDを取得することです。これも「Youtubeでジュークボックスを作る」レッスンを見て下さい。

４）はjQueryの良い練習になりました。jQueryのリファレンスを使い倒しましょう。

こんなところです。要するにドットインストールにちょっと塩とコショウを振りかけて味付けしたというだけのことですね
。

あと、スタイルシートにBlueTripというFrameworkを使っていますが、これはゆーすけべーさんが以前「CSS Frameworkを持つ」というブログで紹介していたのを思い出したのでお試し感覚で使ったというだけです。特にデザイン上で恩恵は受けらていませんが（笑）

大体こんな感じなんですが１つこだわったところと言えば’’ボタン’’です。

サイトに飛んでもらえばわかるんですが、最初は押せるボタンが１つしかありません。
これはテレビに近づけるための工夫で、電源を押す→テレビがつく→チャンネルを回せば番組が見られる...このUXにこだわりたかったのです。
ただ、そこで少々苦戦しました。というのも実装上、必要なボタンは再生、電源、次へ、戻る、の４つありました。そのうち動画をみるためには「Power/shuffleボタン」→「▷ボタン」の順で押してもらいたかったのですが、最初から画面上に４つのボタンが並んでいるとユーザーは「▷ボタン」、「次へ」、「戻る」を最初に押してしまう可能性がありました。仕様の都合上それでは正しく動きません。よって最初は何が何でも「Power/shuffleボタン」を押してもらう必要があったのです。

私はこの問題を解決するために、最初は「Power/shuffleボタン」しか表示させない策を講じました。
そうすることでユーザーは強制的にそのボタンしか押せません。さらに「Power/shuffleボタン」を押すと他の３つのボタンが表示されるようにしました。これによって４つのボタンも問題なく使用できます。こうしてボタン問題は解決です。

詳しくはサイトに飛べばわかると思いますので確認してみてください。

その他、ボタン以外にも快適に視聴するために、画面上に必要最低限の文章しか書かなかったり、ロードを速くする目的でいいねやTwitterなどのソーシャルボタンを排除したり、長い時間観ていても疲れないように黒ベースの背景にしたりと細かいところでこだわりました。

こうして完成した「ももクロチャンネル」、今日から私の大切な時間をダラダラと奪っていきそうで恐いです・・・

ご意見等は、@razokuloverまで