宇多田ヒカル大好き専用「ウタダヒカループ」を作ってみた

冷蔵庫で設計したWebサービス、宇多田ヒカル大好き専用「ウタダヒカループ」を8月8日にリリースしました。

UTADAHIKALOOP

すぐに、ずっと、ぼんじゅーる。

今回のWebサービスの制作理由をざっくりまとめると以下の2点です。

  • ブラウザに uhloop.com とだけ打ち込めば、すぐに、ずっと、宇多田ヒカルを聴いていられる・観ていられるサービスが欲しかった。
  • 活動休止ライブのDVD「WILD LIFE」で、宇多田さんがとても楽しそうに観客とぼんじゅーる!!を言い合っているシーンを観ていたら、自分もぼんじゅーるしたくなった。

キャッチコピー「すぐに、ずっと、ぼんじゅーる。」はこんな意図で付けました。

もう1つ大事なことを書き忘れていました。このウタダヒカループで再生されるPVは、閲覧者全員が同じ曲目・同じ再生時間で視聴できます。ですので、みんなで同じ曲を聴きながら、ぼんじゅーるメッセージやTwitterを介して、ちょっとだけライブ感覚で楽しむことができます。

権利関係は大丈夫?

今回のWebサービスを公開後に散見された心配してくれるコメントには「権利関係は大丈夫?」や「非公式だからすぐ消えそう」などがありました。 確かに若干グレーな印象を与えかねないWebサービスですが、制作者としては以下の3つの理由により、その点についてはクリアできていると判断して制作しました。

  1. 宇多田ヒカル公式のYouTubeチャンネルで無料公開されているPV27曲だけを使用している
  2. YouTubeが公式に提供しているFlash用APIを経由して上記のPVを読み込んでいる
  3. 宇多田ヒカル公式チャンネルのPVは、上記API経由での読み込みを許可してくれている1

ただし、はてブのコメント欄でも書かれていましたが、こういうのは権利者やAPI提供者がアウトと言えばそれで終了するタイプのものですので、そういう可能性もあり得ると覚悟した上で作りましたw 権利者やAPI提供者から警告が出たら潔く終了するつもりですが、そうならないことを祈るばかりです。

Node.js、Flash、Socket.io

今回のWebサービスは、新しい技術(Node.jsやSocket.io)と古い技術(Flash)を組み合わせてみたのが、ちょっと珍しいかなと自分では思っています。なにげにこの組み合わせは、技術的にもかなり相性が良いんじゃないかと作ってて思ったんですがどうなんでしょう。

Node.js

Node.jsについて色々調べていく中で、Flashとの相性の良さそうだと思えたのは、以下の記事を読んだ時でした。Node.jsの特性を理解する上でとても素晴らしい記事だったので、Node.jsに興味がある方は必見です。

Node におけるスケールアーキテクチャ考察(SSP 編) - Block Rockin’ Codes

この記事の中でNode.js+Flashが良いと書かれていたわけではありませんが、Node.jsを運用する上で、いかにサーバーサイドのCPUに負荷を与えないか、フロントエンド側でいかにして多くの処理を行うか、の重要性について書かれていました。 そして、それを読んだ自分は、Node.jsの特性とその対となるフロントエンドの技術として、Flashはかなり適していると思いました。

Flash

今回のWebサービスは、フロントエンド側で必要になるすべての要素(処理)を、最初のアクセス時のリクエストだけで済む1つのSWFファイル(176KB)内に全部閉じ込めて、その後に発生するNode.jsサーバーへのリクエストは、リアルタイム通信部分(ぼんじゅーるメッセージの送受信)のみに絞り込めました。逆に言えば、そのリアルタイム通信部分以外では、まったくNode.jsサーバーにリクエストを送っておらず、ローカルで独立しています。それが今回のWebサービスの、そしてFlashという技術を使った一番の長所ではないかなと思っています。

Socket.io

リアルタイム通信部分で使用しているSocket.ioについては、今すぐフォローすべきNoderな方たちのブログがとても参考になりました。日本語ラブ。中でも特に参考にさせてもらったのが以下の4つの記事です。

ExpressとSocket.ioを使ったチャットサンプル - 自分の感受性くらい node.jsでchatアプリっぽいもの作るメモ - すぎゃーんメモ Socket.IO v0.7 のロードマップと新機能 - Block Rockin’ Codes 50行くらいで作るnode.js + socket.io(0.7x)のサンプル - 大人になったら肺呼吸

上2つは情報としては若干古いですが、Socket.ioの構造や作法を理解する上でとても役立ちました。下2つの記事は最新に近いバージョンのSocket.ioを対象に書かれていますので、実際に動かす場合はこちらを見ると良いかもです。

今回ウタダヒカループで使用したSocket.io部分は、複雑なことはしておらず、上記に載っている情報だけで完結しています。Socket.ioというライブラリ自体が多くのことをカバーしてくれるので、初心者でも比較的簡単に扱えるようになっていました。

2013年7月現在では、バックエンドはRailsとPusherに変わっています。

ベータ版ではGoogle+を活用

7月中旬頃にはプライベートベータ版として何人かの方にウタダヒカループを使っていただいて、その感想をいただき、サービスの更なるブラッシュアップに繋げるという重要な工程を行いました。今回はそのコミュニケーション手段としてGoogle+を活用してみました。

前回のSASSIENCEではTwitterのダイレクトメッセージを使って、140文字程度で聞けるホントに聞きたいポイント1~2点だけをフィードバックとしていただいたんですが、今回はGoogle+を使ったことで文字数制限を気にすること無く質問することができました。

質問する際には、できるだけ相手に手間が掛からぬよう、あらかじめ感想を聞きたいポイントをリストアップし、アンケート形式でお答えいただきました。さらには、Google+の限定公開機能を利用して専用のスレッドを作り、アンケートにお答えいただいた方々に、その後のウタダヒカループのバージョンアップ内容や自分がサービスについてどう考えているか、はたまた技術的なことで自分が調べたことをシェアするために、そこで情報共有しました。こういった使い方をする場合のGoogle+はとても便利でした。

今回そのベータ版でのフィードバックにご協力いただいたのは、こちらの方々です。

みなさんサービスやアプリを作る人・ブログ等で情報発信している人ばかりで、今回僕がお願いした感想やアンケートについてもすぐに意図をご理解いただけて、お忙しい中ご協力いただきました。この場を借りてお礼申し上げます。ありがとうございました!

アワード、転職、執筆

ここからは個人的な話になるので、Webサービスの話からはちょっと逸れます。

アワード

今回のウタダヒカループは、Yahoo! JAPAN インターネット クリエイティブアワードに応募してみました。前述の権利関係の話もあり、審査の時期には既に消滅しているかもしれない危ういWebサービスですが…、可能性がちょっとでもあるなら、と期待して送信ボタンを押しました。また、1人が応募できる作品数に制限は無いようだったので、過去に作ったものもついでに送信しておきました。

ちょうど昨日お会いしてお話しした@func09さんの書かれた記事に以下の一節があります。僕はこれを真似ようと思いました。

この時期は、ネット上で見つけたアワードに出すという目標を掲げることで、短い期間で一気に作る。という事をしていました。

自分でWebサービスを作ってたら起業することになりました - func09

今回はアワードに出すつもりで作り始めたわけではないのですが、制作時期(6~7月)にネットサーフィンしてるとこのアワードのバナー広告を何度も見かけるようになり、試してみようという気持ちになりました。

また、上述の記事では次の段階としてビジネスを考えることを挙げています。自分が今まで作ってきたものにはその視点が抜け落ちており2、今後の課題だなぁと読み返しながら思いました。

転職

とても個人的な話ですが、少し前から転職活動を始めました。現在在籍しているWeb系制作会社にもその意思は報告済みで、9月上旬頃に退職する予定です。

フリーランスとして活動するか、スタートアップに参加するか、会社に正社員として所属するか、などもまだしっかりとは決めてない状態で、模索中・調査中ですが、できるだけ多くの働き方を見て、多くの選択肢の中から検討したい気持ちがあり、もし僕のブログや制作したサービスに興味を持っていただけて、そういった話があるという方がいらっしゃったら声を掛けていただけると嬉しいです。このブログのプロフィール欄にメールアドレスが載せてあります。僕ができること・やりたいことは、このブログに書かれていることと過去に作ったサービスがほぼすべてで、それらを見てもらうのが一番確実だと思います。

執筆

これも個人的な願望なんですが、本や雑誌で執筆してみたいと昔から思っていて、うまいかヘタかは別として、文章を書くことは好きです。過去のブログ記事の中で、一番気合いを入れて書いた文章は、以下の10回シリーズのHeroku入門記事です。

HerokuでWebアプリ開発を始めるなら知っておきたい10のこと

こちらについても、もしそういった機会を与えてもらえるなら喜んで受けたいので、ご連絡いただけると嬉しいです。

2年後、5年後、そしてずっと

2010年8月9日、宇多田ヒカルはアーティスト活動の休止を自身のブログで発表しました。

2年になるか、5年になるか、わからないけど、一回り大きくなって帰ってくるから。少し時間をください。

久しぶりの大事なお知らせ - Hikki’s WEBSITE

2011年8月8日、活動休止発表から1年が経過したこの日、僕は個人として、1ファンとして、非公式なサービスとして、ただ単に自分が欲しかったという理由で制作しウタダヒカループをリリースしました。このWebサービスは、時間が経てば経つほど、意味のあるサービスになってくれると思っています。

2年後、5年後、もしまだ宇多田ヒカルがアーティスト活動を再開してなかった時に、宇多田ヒカルの新曲はなく、情報も少なくなっているかも知れない状況の中で、その時も宇多田ヒカルを好きな人(自分を含む)が、昔ウタダヒカループなんてサイトがあったなぁと思い出してくれて、ブラウザにuhloop.comと打ち込んで接続し、彼女の作品を観ながら・聴きながら何気なく「ぼんじゅーる!!」と押した時、同じように宇多田ヒカルを好きな、画面の向こうのどこかの誰かが、もし「ぼんじゅーる!!」と返してくれたら、それってむちゃくちゃ最高じゃないですか。

確率は低いかもしれないけど、このウタダヒカループがそういう瞬間を生み出してくれることを願っています。

  1. 動画の権利者はYouTubeの設定でAPI経由の読み込みを不許可にすることも可能

  2. 意図的に含めてなかったとも言えます