Mashup Camp で「MAP★THE★RAPPER」を５時間で開発してみた。#MA6

今年も、Mashup Awards のシーズンがやってきました。
MA6 では、開発者向けイベント の新企画として、『Mashup Camp』を始めました。
9月11日（土）にその第１回 Maps Day を開催しました。
開発者が同じ会場に集まって時間と場所を共有し、チームごとに協力して、あるいは個人個人で、
と思い思いに集中して開発に取り組む日帰り開発合宿形式のイベントです。
「ハッカソン」ともいいます。もちろん、自称ハッカーでない方も参加歓迎です。
　
今回の Mashup Camp は川崎も作品制作に挑戦してみました。
『MAP★THE★RAPPER』という、地図＋音楽のマッシュアップです。
　

http://www.kawa.net/works/ma6/maprap.html

あそびかた

1. ページ左下の nudge のドラムマシンで BGM を作って再生する
2. 地図上で、適当な都道府県をクリックする
3. ダブルクリックすると、その都道府県名を連呼します
4. 歌詞が出来たら「Beat this」ボタンをクリックする
5. 少し待つと、再生が始まります

とりあえず試すなら、右端の「DEMO」ボタンも使ってね。

今回の API（地図＋音声）利用のポイント

ヤフーさんの YOLP（よるぷ、と読む。Yahoo! Open Local Platform）の API と、
音声読み上げ API の VDS こと おしゃべりっち を使っています。

まず、地図は YOLP の JavaScript マップを使って表示しています。

地図上のクリックとダブルクリックのイベントを捕捉して、緯度経度を取得し、
リバースジオコーダ（ジオデコーダ）の API を使って、都道府県名に変換します。
マウスのクリックに応じて、歌詞に都道府県名を加えていきます。
ジオデコーダをクリックの度に呼び出すと遅いので、5km 単位でキャッシュしています。

さて、出来上がった歌詞のテキストを「おしゃべりっち」に投入して再生しています。
「おしゃべりっち」の音声は Flash 経由で再生されていて、一度取得した内容を
キャッシュするやり方は、今日の時間だけでは分かりませんでした。

nudge のドラムマシンの実体はブログパーツは、BGM 再生用のオマケです。
ページを開いたときにから自動的に再生開始してくれるといいけど、調べてません。

話題の Mixi チェックと、Twitter のボタンも付加したので、ソーシャル対応です。w

100% の完成度にはなっていませんが、とりあえず、デモできるようになった。

ちなみに、今回の作品では使ってないですが、ヤフー地図は、主要な地域で、
地下街レイヤーの地図を１階層持っていて、API からも利用可能だそうです。
（Google Maps には、地下街はないよね？）
将来的には、ビルなど複数階層のマルチレイヤーにも対応するのはジオな人の夢！？

Mashup Camp 面白かった

Mashup Camp は我々も初めての試みで、運営などまだ試行錯誤中のところがあります。

まず、木曜日の夜（今週のみ。通常は水曜日）に集まって事前 MTG を行いました。
ここでは、どんなことができるか、チーム単位に企画のブレストを行ないます。

そして、土曜日の Camp 当日までの間は、個別に情報収集などします。

土曜日の Camp 当日は（チームで分担して or 個人チームで）開発に集中して作業します。
このローテーションを、毎週ゆるめのテーマを設置しつつ回していきます。

今回の『MAP★THE★RAPPER』は、土曜日の実質５時間くらいの開発時間で、
事前 MTG で予定していた内容を概ね実装することができました。
作品タイトル検討や画像作成など手伝ってもらったチームメンバーに感謝。

また、ヤフーから参加された皆さんにも、API の使い方など細かくアドバイス頂きました。
ありがとうございました。こんなプロのチューターが付く開発イベントないっす。

Mashup Camp ぜひご参加ください

『Camp』と言っても、屋外ではなくて、東京・銀座にあるメディアテクノロジーラボの
会場を使います。無線 LAN・電源・エアコン完備の快適な開発環境です。
Mashup Camp は、これから、ほぼ毎週のように、週末・土曜日に開催しています。

以前の Mashup Awards に応募された経験がある方も、
他の人が隣で開発しているのを見て、プログラムの勉強をしてみたい方も、
プログラムは得意でなくても、企画やロゴ画像作成などで参加できる方も、
ぜひ、お気軽に参加してみてください。（無料です）

お待ちしています。