ゆーすけべー日記

はてなBlogってどーなの!?

CDやアーティスト別にYouTube動画をスライドショー感覚で見れる「ZonTube beta2」を公開しました

以前作った「AmazonとYouTubeの音楽マッシュアップサイト ZonTube」 の新しいバージョン「beta2」を公開しました。 ZonTube beta2 は 音楽 CD のトラック別、 もしくはアーティストの人気の曲別などで YouTube の動画をスライドショー感覚で楽しめるサイトです。 トップページこそ「beta1」に似ていますが、 音楽映像を見るという点でリッチな体験ができるようにユーザーインターフェースを改良しました。 気になった CD ジャケットやアーティスト写真をクリックすると、 それにマッチした YouTube の映像の一覧が表示されるので、 選択すると映像の再生がスライドショー感覚で再生されます。 また、LastFM との連動しているので、もしアカウントを持っていれば、 フォームに自分のユーザー名を入力すれば最近聞いた曲やアルバムも同じように映像とともに見ることができるというサイトです。(注意: 今のところ Firefox と SafariIE に最適化されています )

ZonTube beta2
zontube

使ってみればすぐわかるように心がけて作りましたが、簡単に新機能の説明と使い方を紹介します。

アルバム YouTube 動画 一覧

カテゴリ別閲覧や検索などでみつけたアルバムのジャケットをクリックすると そのアルバムページに飛びます。 すると(情報が取得できれば)、 アルバムの全トラック、それぞれ関係する YouTube の動画をひとずつ一覧で 見ることができます。 アルバム全体を YouTube の動画で構成したらどうなるかを俯瞰する感じですね。 もちろん、気になった曲がある場合、左側のトラック名を選択すればより多くの映像を楽しめます。

zontube

YouTube 動画スライドショー再生

今回一番力を入れたのがここです。 YouTube のサムネイル画像をクリックすると、 「うにょーん」とウィンドウいっぱいの画面がでてきて、 自動的に再生が始まります。そして、再生が終わると次の曲が自動的に始まるという仕掛けです。 お分かりの通り Shadowbox という JavaScript のライブラリを使って実現しています。 今まで YouTube で一般的に提供されている embed タグを使ってこのような埋め込みを実現していましたが、この機能を使ってでっかく動画を表示させると大迫力ですごくいい感じです。

zontube

ダウンロード&ListPodに追加機能

気にいった動画があれば、YouTubeMP4でダウンロードしたり、ListPod のマイリストに登録しましょう。 ワンクリックで飛ぶようにしました。 もちろんもっと気に入ったら CD も買うことを忘れずにしましょうね。

zontube

LastFM との連動

今回は「Amazon x YouTube」というマッシュアップに加え、Last.fm も連動させるようにしました。 Last.fm アカウントをお持ちの方は上のフォームにアカウント名を入れると、 自分が最近聞いている曲やアルバム、アーティストの一覧がでるので、 上記した通り同じように音楽を YouTube 映像とともに楽しむことができます。

zontube

Cooliris 対応

これはおまけ的な機能。 Cooliris という Firefox の addon で、ちょーかっこいいスライドショーが体験できる ソフトがあるのですが、それに対応しています。 アルバム、アーティストページで「Launch Cooliris!」というリンクから起動することができます。

zontube

ということで、簡単に新機能を紹介してきました。 わかる人がもしかしているかもですが、この beta2 。 miyagawa さんが作ってる動画フィードアグリゲータ「Remedie」をかなり参考にして、 作っています。 Remedie で使っている JavaScript のライブラリを眺めて、これは使えそうだ、 といろいろ入れ込んでボリュームたっぷりになっておりますw なので、環境によっては重たいと感じるかもしれませんが、その辺り、 ご了承ください。

ちなみに。 当分の間放置していたこの ZonTube をなぜいまさらバージョンアップさせたかという経緯が あって、きっかけは全く知らない海外の方から急に飛び込んできたメールでした。 ということで超意訳。

ヘロー
私はマッシュアッププログラミングを勉強中のビギナーです
勉強のためにいろいろ探してたら、あなたのウェブサイト(ZonTube)を見つけて
ベリーインタレスティングなんだよ。
どっか勉強できるいいサイトない?
教えてくれたら嬉しいな。
サンクス!
ジョン

このメールをもらった瞬間すごく嬉しくなって、 「こうなったら今まで汚く作ってた ZonTube を簡潔に奇麗に作り直して、 ソース公開してみせてやるわ」というテンションになったわけです。 で、作り始めたら止まらなくなって、 結構規模のでかいアプリケーションになってしまい、ソース公開はちゅうしょしちゃうけど(><)、 とりあえずできたよ←いまここ。という具合です。

ジョンに気に入ってくれるかはさておき、なかなかいいできになっているので、よろしければ、 Enjoy!

See also

参考書籍

俺流amazonの作り方―Amazon Webサービス最新活用テクニック
posted with yusukebe.com::AmazonSearch on 2009.6.16
  • 水野 貴明
  • 単行本 / アスキー
  • Amazon 売り上げランキング: 12472
  • Amazon おすすめ度の平均: 4.5
    • 4 webプログラマ向けの本
    • 5 この本を買って、PHPでサイトを構築しました
    • 4 OOP-Perlがわかるならお勧め
Amazon.co.jpで詳細を見る