キーワードを入力するだけで作業用BGMをYouTubeからリストアップして流し続ける「FMTube!」

ネット環境とデバイスやPCさえあれば、YouTubeで音楽を聞くことができますが、仕事の前に作業用BGMを探したりするのは実は面倒なもの。そんな時に便利なのが、AngularJSの勉強をしていたらできたという、ブラウザで簡単に使える作業用BGMサービス「FMTube!」です。

FMTube!
http://yusukebe.github.io/FMTube/

「フォームにあなたの好きなアーティスト名を入れてPlayボタンを押すと 自動的にそのアーティストの曲一覧が現れ勝手にYouTube動画の再生がはじまります。 使い方はコ・レ・だ・け！」とのことなので、アーティスト名に「The Beatles」と入力し、「Play!」をクリックしてみると……

数秒でビートルズのYouTube動画がリストアップされ、自動的に再生を開始しました。

リストの中から好きなムービーをクリックして再生することもできます。

リストからクリックする時は、たまに再生されるムービーがずれてしまうことがあります。

「作業用BGM」と入力して「Play!」をクリックすれば、YouTube上の作業用BGMがリストアップされました。

作業用BGMとしてだけではなく、単に好きなアーティストの音楽をずっと聞きたい時にも良さそうです。

ちなみに、アーティスト名ではないものや音楽に関連しないキーワードではリストは生成されず、「GIGAZINE」と入力して「Play!」をクリックしても反応ナシ。

なので動物のムービーを延々と見たりすることはできませんが、作業用に音楽を探すのが面倒な時にはかなり便利なサービスになっています。

なお、作者のyusukebeさんが、どのようにして「FMTube!」が作られたのかを以下のブログで公開中。

AngularJSの勉強してたら「作業用BGMサービス」が出来た - ゆーすけべー日記 v2
http://yusuke.be/post/69873320821

AngularJSの勉強してたら「作業用BGMサービス」ができた過程はこんな感じ。

・AngularJSオフィシャルのチュートリアルは目を通すだけでいいかなと思った
・でも何かつくりたい。 あんぎゅらーじぇいえす をつかって！
・新しいWebアプリのアイデアを考えるのもいいけど仕様まで落としこむのに大変
・Webアプリのリソースとして外部のWeb APIを使うのは楽
・TwitterのSearch APIは1.1から認証必須になったしなー
・そういえば… （今のところ）YouTube Data APIなら認証もAPI KEYもいらないな…
・YouTubeといえば 君のラジオ とかでも使った実績があるなー
・まてよ、君のラジオの初期バージョンって結構簡単なロジックだったよな
・よしそれをつくってみよう！仕様も決まっているし！
・ってことでCSS FrameworkとしてTwitter Bootstrap
・JSはAngularJSと一部jQueryをAngularJS経由で叩くことにする
・フォームにアーティスト名を入れてsubmitする、のと
・リストから好きな曲を選ぶ、これだけがユースケース
・submitの際、Last.fmのAPIから取得したアーティストの toptracks を表示そして再生する感じ
・再生はYouTube Player APIのiFrame版で制御する
・今回は最初ってことでHTML全体をAngularJSの一つのControllerで制御することにした
・まぁ諸々参考に実装。分からないところをググるとかなりStackOveflowが引っかかるね
・便利というかカッコよく書けたのはLast.fm APIへリクエストを送ってそれを描画する点
・Tracks という名前で factory メソッドで登録して関数を返す
・Tracks.get メソッドはアーティスト名であるはずの query とコールバック関数 callback を受け取る
・特に $resource を使う必要はないので $http を使った

なお、AngularJSを使った「FMTube!」のコードも公開されているので、気になる人はブログから確認することができます。