10秒でMashUpが作れる「MashUp Freak!」

ここのところBay Areaは異常に暑い日が続いてて、日中は20度以上と初夏の勢いである。通常1～3月は雨季で寒い日が続くらしいのだが、今年はあっさり雨季も終了してしまった様子。
と、それは置いといて、「MashUp Freak!」というサービスを作った。
MashUp Freak!

MashUpしたいサービス名をクリックして、順番を適当に並べ替えるだけで即席MashUpを作ることができる。使い方はヘルプの中にも書いたんだけど、Winkでチュートリアルムービーも作ってみた。
即席MashUpを作って、はてブに登録するまでのムービー
Mash Up Award the 2nd応募用に作った、ってか、ホントはもっとさっさと完成させて、「こんなのたたみラボが作れよ」とか大口叩くつもりだったのが、UI部分に手間取って結局ぎりぎりに投稿。なお、UIなしのプロトタイプが完成したあたりでYahoo! Pipesが発表されてちょっと凹んだのは内緒だ。

今回のMash Up Awardは17社から30ものAPI（WEBサービス）が提供されているのが特徴である。前回のエントリでも書いた通り、これはすごいことだ思うのだが、Remixerからすれば、これだけの素材をどう調理したらいいのか、非常に難しい問題である。加えて、今の世の中、他にも公式・非公式、企業・非企業を問わず、大量のWEBサービスが提供されている。AmazonとGoogleしかなかった4年ほど昔と比べれば大変Happyな環境なのだが、それこそ組み合わせの妙、センスが問われるわけで、実に悩ましい。というわけで、「センス」の部分をあっさり諦めて、何でもありのサービスにしたというわけだ。

スクリプトの内容的には、大半をJavaScriptで書いている。今回はブログに貼付けるツールとかじゃないのでPrototype.jsを使ったが、今更その便利さに感動。うむ、実に時代に取り残されている。サーバーサイドはPHPで書いているが、APIからデータを取ってくるだけで時間がかかってしまうので、一部を除いてあまり複雑なことはしていない。全体の仕組みとしては、WEBサービス毎にAPIのURI、返してくる内容、次のサービスに投げるパラメータ、等々を前もって定義しておき、何番目に実行すればいいか、というMash UpのレシピをGUIから受け取って、順々に実行しているだけ。この辺はPlaggerがYAMLをベースに動いているのとちょっとだけ似ている。

Google Mapsについては、Ver2になってから初めて使ってみたので、ほとんどサンプルコードそのまま（笑）。ただ、「Bidders MapAds」（懐かしい）同様、Nakamura-KU ADDICTさんのinvGeocoderサービスを使わせてもらって、地図が動くたびに住所を調べるようにしている。Geocoderの方はGoogle提供のものを使っているが、このあたりは他にも色々サービスがあるので、別のものに差し替えたり、併用したりするかもしれません。

一番手間取ったUI部分には米Yahoo!のUIライブラリを使っている（Y!UIを使ってDrag & Dropを作る方法は、Diasparさんのサンプルを参考にさせて戴きました。有り難うございます）。jQuery.jsの派生版であるinterfaceを使おうかとも思ったが、jQueryの良さである「軽さ」が失われてしまうのでやめた。というわけで、YouTube検索の表示結果をクリックするとThickbox風に表示される部分はjQueryを使わず自作している。U2B Playerの方もjQueryを使ってるとLightboxとのConflictが生じたりするので、その内完全自作版に変更する予定。

仕組みについては他にも色々書きたいこともあるけど、このくらいで。MashUp Freak!自体は、あくまで簡単にMash Upが作れることを目指したものなので、実用性は低い。レゴで言えば幼児向けの、動物の形や木の形をした大きなブロックが入った詰め合わせみたいなもの。作りたいものが概ね簡単にできるんだけど、凝ったものを作ろうとすると物足りない、そんな感じ。でも、Mash Upサービスを作る際に、組み合わせの違いで随分テイストが変わってくることが分かってもらえると思う。例えば、同じGoogle MapsとHotPepperのMash Upでも、順番が違うとこんなに印象が違う。
Google Maps->HotPepper
HotPepper->Google Maps

これに関連して、Mash Upサービスのポイントだとか何とかも簡単に整理してみたんだけど、それはまた今度。
ちなみに、MashUp Freak!で使えるWebサービスは今後もどんどん追加予定です。ご感想・ご意見・ご要望等について、コメントやトラックバックで戴けると有り難いです。