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

• ウタダヒカループ

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

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

今回のWebアプリの制作理由をざっくりまとめると以下の2点です。

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

上の画像にもあるキャッチコピー「すぐに、ずっと、ぼんじゅーる。」はこういう意図で付けてみました。

（追記 2011/08/11 22:35） もう1つ大事なことを書き忘れていました。このウタダヒカループで再生されるPVは、閲覧者全員が同じ曲目・同じ再生時間で視聴できます。ですので、みんなで同じ曲を聴きながら、ぼんじゅーるメッセージ（現在は一時停止中、後述）やTwitterのツイートを介して、ちょっとだけライブ感覚で楽しむことができます。

現在はメッセージ機能を一時停止中

Twitterでは既にお知らせして、ウタダヒカループのトップ画面でも説明文にその注釈を入れましたが、本来はリアルタイムに閲覧者全員に送受信されるぼんじゅーるメッセージ機能を一時的に停止しています。

上記の通り、基本機能である「宇多田ヒカルのPVビューアー」としては現在も利用可能です。

ご迷惑をおかけしてすみませんが、完全復旧までしばらくお待ちください。

権利関係は大丈夫？

今回のWebアプリを公開後に散見された、心配してくれるコメントには「権利関係は大丈夫？」や「非公式だからすぐ消えそう」などがありました。

確かに若干グレーな印象を与えかねないWebアプリですが、制作者としては以下の3つの理由により、その点についてはクリアできていると判断して制作しました。

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

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

権利者やAPI提供者から警告が出たら潔く終了するつもりですが、そうならないことを祈るばかりです。*2

Node.js、Flash、Socket.io

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

Node.js

Node.jsについて色々調べていく中で、Flashとの相性の良さが確かだと思えたのは、@Jxck_さんのこの記事を読んだ時でした。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というライブラリ自体が多くのことをカバーしてくれるので、初心者でも比較的簡単に扱えるようになっていました。

ベータ版ではGoogle+を活用

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

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

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

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

• @func09 さん　 http://www.func09.com/wordpress/
• @junya さん　 http://journal.sooey.com/
• @mochiz さん　 http://mochizblog.heroku.com/
• @7kamura さん　 http://d.hatena.ne.jp/r7kamura/
• @monoooki さん　 http://maedaseisaku.com/blog/
• @june29 さん　 http://june29.jp/
• @deeeki さん　 http://d.hatena.ne.jp/deeeki/
• @komagata さん　 http://docs.komagata.org/
• @marutanm さん　 http://d.hatena.ne.jp/marutanm/
• @heavenshell さん　 http://d.hatena.ne.jp/heavenshell/
• @satococoa さん　 http://www.223soft.net/
• @rono23 さん　 https://sites.google.com/site/rono23/
• @machida さん　 http://kuroigamen.com/
• @yoshuki さん　 http://saikyoline.jp/weblog/
• @d_akatsuka さん　 http://firn.jp/

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

アワード、転職、執筆

ここでは個人的な話や願望について触れているので、Webアプリの話からはちょっと逸れます。

アワード

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

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

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

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

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

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

転職

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

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

執筆

これも個人的な願望なんですが、本や雑誌で執筆してみたいと昔から思っていて、うまいかヘタかは別として、文章を書くことは好きです。

過去のブログ記事の中で、一番気合いを入れて書いた文章は、以下の10回シリーズのHeroku入門記事です。

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

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

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

最後に。

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

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

2011年8月8日、活動休止発表から1年が経過したこの日、僕は個人として、1ファンとして、非公式なサービスとして、ただ単に自分が欲しかったという理由で制作し「ウタダヒカループ」をリリースしました。

このウタダヒカループは、時間が経てば経つほど、意味のある、価値のあるサービスになってくれると思っています。*4

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

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

ツイートする

Permalink | コメント(2) | トラックバック(4)