グーグルハッカソン レポート「Geo API (Google Maps API)」
2008年10月10日に行われたグーグルハッカソン (Google Hackathon) に行ってきました。ということで、何となくレポートを書いておこうと思います。グーグルハッカソンの雰囲気などが分かればよいかなと。もし、よければハッカソンは以後も開催されるので、プログラマの方は挑戦してみるとよいでしょう。
また、グーグルマップAPIに関しては以下にグループがあります。グーグルマップのハッカソンがあればグーグルコード以外に以下のページでもアナウンスされます。
【Google-Maps-API-Japan】
Google-Maps-API-Japan
会場に行く前に解錠
まず、例によって渋谷セルリアンタワーの6Fにあるグーグルの受付に向かいます。ドアには鍵がかかっていて、受付の方に気づいてもらわないと入れてもらえません。無事に解錠されたら、規約にサインなどをしてハッカソン会場へと入ります。一番奥の部屋でハッカソンが行われますが、今回の参加者は私を含めて9人。みな、凄腕のプログラマやエンジニアに見えます（汗）。
どう見ても私が一番のご老体。やっぱり若い人でないとハッカソンは務まらないということかもしれません。が、まあ要はGoogle Maps APIなどを使って何か作ればよいので気軽に構えてました。
さて、自己紹介した後にパメラさんのGoogle Mapsのプレゼンが始まりました。
作成前にプレゼンとランチ
実際の制作に入る前にパメラさんのグーグルマップのTipsのプレゼン「Tips for developing Maps API Apps」がありました。今回は交流会と違って同時通訳がないので全部英語・・・。Google Map is my Lifeだったかの言葉は聞き取れたけど後は全然駄目。英語が分からなくてもプロジェクターで映し出されたものを見て、把握すると言ったところ。
プレゼンが終了したら早速プログラム開始とはならずに「昼食」になりました。食堂が混まないうちに食事するのがハッカソンの掟だそうです（嘘）。予定表を見ると昼食の後にグループ分けとあるけど、先にグループに分かれていたような気も。まあ、ハッカソンなので結構適当なのかも（？）
さて、気になるグーグル日本法人の昼食（ランチ）ですが、米国とは違って豪華ではありません。健康志向（？）なバイキング形式の食事といった感じです。健康志向ということで、日頃あまり食べる機会の少ない豪華そうな肉をたくさんとりました。しじみ汁も何年かぶりに目にするような。ご飯は何かまざっていて五穀米なのかお赤飯なのか、何かが入っている白くないご飯でした。
書いていて昼食に何か足りなかったと思っていたら今判明。お茶がなかったんです。自販機にはあるんですが、まあ野菜ジュース買って飲みました。ちなみに、お菓子は食べたい放題です。でも、都こんぶはずっと残っていて食べる人が少ないようです。
食堂でお菓子を持って行っても、実際のハッカソン現場では、そんなに食べているだけの余裕がなかったりするんですけど・・・
グループ分け
食事から戻るとグループ分けとなります。グーグルハッカソンでは基本的に決められたジャンル内（今回はGeo、つまりGoogle MapsやStreet View、グーグルアースなど）で何かを作り出すといったことが行われます。チームで何か１つのものを作成することもありますし、同じグループになっても個別にテーマを用意し作成することもあります。ここらへんは、明確に決まっているわけでなくグループ分けした際の「なりゆき」「雰囲気」で決まります（結構、いい加減）。
グループ分けは、作りたいものに応じて分けられますが、今回私は「モバイル」グループに入りました。モバイルグループは私と直鳥さんと荻野さんの３人でした。ただ３人でまとまって何か１つのものを作るというのではなくて、グーグルマップのスタティックマップ（通常のグーグルマップではなく１枚の画像として生成されるもの）を使って作るという方向になりました。まあ、モバイルだとスタティックマップになってしまいがちというのはありますが。
ハッカソンでは何を作るかは事前にプレゼンしたり発言する必要はありません。というのも、何か作ればよく途中で違うものになってしまうことがあるためだそうです。
私の場合は最初の自己紹介のところで「iPhoneでGoogle Mapを使ってゲーム作ります」と言ってしまった都合上ゲームを作ることに。
【荻野さんの作成されたサイト】http://www.date2.jp/
【直鳥さんの作成されたサイト】http://ongmap.com/v2/full
コーディング開始
コーディング時間は午後1時〜午後5時までの4時間です。目の前にAPI開発者がいるので不明点は質問すれば返答してくれるというプログラマにとっては非常に都合のよい環境になっています。不要な邪魔も入らないというのも大きな利点かもしれません。
普通の椅子にあきたら、巨大なゴムボールを持ってきて椅子代わりにすることもできます。途中でお菓子や飲み物（全部無料）を持ってきて食べても大丈夫。ただし、制限時間内に何も成果がない場合には、食べた金額の分だけグーグルで働かされます（嘘）。
作るネタはゲームで背景をスタティックマップにすれば背景付きのシューティングゲームがすぐにできるはずです。1時からはじめて2時には終わる予定だったんですが、結局5時まで作っていました。
スタティックマップの制限
通常のグーグルマップと異なりスタティックマップは１枚の画像です。ゲームの背景として使うのですが、この背景は上から下にスクロールしていきます。ここで、スタティックマップのちょっとした制限によって、あまりスクロールできないという事態になってしまいました。背景付きでスクロールさせる場合、divタグではなくbodyタグの背景画像、つまりページ全体の背景画像として表示することを考えていたので、なるべく縦長のスタティックマップを生成する必要がありました。
しかし、スタティックマップは最大でも640×640ピクセルまでしか生成できません。iPhone 3Gの縦方向のピクセルサイズ、おおよそ480ピクセル弱（メニューバーなどがあるのでもっと少ない）からすると140ピクセルスクロールしただけで背景画像が終わってしまいます。ここでdivタグに背景画像としてスクロールさせるか、それとも別の手法を採るべきか。divタグであればスタティックマップを連続して貼り付けていけばいいのですが、座標の計算とか面倒くさそうなのと、どうも色味が変わってしまうらしいので（写真の場合は大丈夫なはずだけど未検証）、スクロールし終わりそうになったら背景画像をフェードアウトさせて白くして、その間に次の背景画像を読み込み切り替えるといった手法を使うことにしました。
この方法は知っている人の方が少ないかもしれませんが、1986年にタイトーが発売したゲームセンターのゲーム（アーケードゲームといった方が聞こえはいいかも）のスクランブルフォーメーションと同じやり方です。
＊スタティックマップには他にも表示回数制限があります。
【スクランブルフォーメーション】
http://www.taito.co.jp/csm/title/2007/taito_memories2/j-09.html
http://ja.wikipedia.org/wiki/スクランブルフォーメーション
やはりナスカの地上絵の上を飛ばないと
とりあえずiPhone 3Gでスムーズにスクロールする段階のものを見せると「お〜！」という声（ちょっと嬉しい）。ということで、昔の私のこと（mz-700の時代のこと）を知っている人がいまして予想通り言われました。
「ナスカの地上絵を出さないと」
なぜ、ナスカの地上絵なのかというと昔、ナムコが発売したゼビウスというゲームにナスカの地上絵が背景として出てくるからです。で、そのゼビウスをSHARPの8ビットコンピューターmz-700に移植したのが私だからです。なんですが、移植したmz-700版はもろもろの都合でナスカの地上絵がありませんf(^^;
まあ、そういうことで今回は実写のナスカの地上絵も出すことになりました。で、今回制作までに時間がかかったのは、この時にせっかくだからゼビウスの戦闘機（ソルバルウ）を描いて動かしたらどうだろう、ということで関係ないところに一生懸命労力を注いでいたためです・・・。実際に飛ばしてみると、1982年のゼビウスの地上絵のような雰囲気。なんてやっているうちに、もう４時近くに。
＊作ったゲームのナスカの地上絵でのシーン
【ゼビウス】
http://namco-ch.net/namco_museum_arcade_hits/xevious/index.php
http://ja.wikipedia.org/wiki/ゼビウス
http://qtchicks.hp.infoseek.co.jp/namco_xevious.html
http://www.youtube.com/watch?v=MaDaunzjUr8
世界の名所を探せ
背景の移動と切り替え、自機の移動は完成。問題は敵の動きで、もう時間がなかったのでランダムに出現して適当な速度で適当な方向に動くだけになりました。というより前に作ったレースゲームの敵の処理をそのまま流用。レーザーと敵の接触判定などを追加して、おおよそ完成。
ただ、背景があっという間にスクロールし切り替わってしまうため8種類しかないと、すぐに終わってしまいます。そこで、グーグラーやまわりの人に世界の名所を言ってもらって、いくつか登録。とりあえず11種類登録。万里の長城などは上から見ると見栄えがしないのでパス。あと、グーグルマップは異なる撮影日時のマップをくっつけているためつなぎ目が目立つものもパスしました。
意外と難関だったのがゲームのタイトル。思いつかないのでGMshotにしました。Google Mapsを使ったShootingゲームという安直なものです。適当にタイトル画像を作成して一応完成。敵は1種類しかないし、まあ手抜きなゲームですが一応時間内にできたということで。
＊名所じゃないけど東京都庁
夕食とりながらプレゼン
ハッカソンでは作成したアプリケーションやサービスがどのようなものかをプレゼンしなければなりません。プレゼンというのはやった事がないので、先に他の人の様子を見つつ、なるべく後回しになるように画策（iPhone 3Gが充電中ということにして時間稼ぎ^^;）。プレゼンまでには時間があったので、他の人のを聞きながら夕食をいただきましたf(^^;
次々とプレゼンしていくのですが、持ち時間はだいたい5〜10分くらい。プレゼンして問題になったところや苦労したところなどを話しますが、API開発者が目の前にいるので、プレゼンの最中に解決していくという事もありました。
私の場合、サービスでも役立つアプリケーションでもないゲームというジャンルなので一人浮いていたかも。やはりスタティックマップではサイズ制限があるので、もっと大きいサイズ（1000×1000ピクセルとか、それ以上）も生成できるようにして欲しいとリクエストしておきました。
通常のグーグルマップじゃ駄目なの、と言われましたがやってみると読み込みが間に合わないのでNGです。スタティックマップでも1秒間、読み込むまでの時間を持たせているけど、間に合わないこともあります。昔は強引にマップサーバーにアクセスして表示先の画像を表示したりしていましたが、もっと手軽にできれば楽です。
アンドロイド携帯の現物
ハッカソンに参加すると社内の一部を見学できるのと今回は特別にアンドロイド携帯の現物をいじらせてもらうことができる特典（？）付き。社内見学はさておき、アンドロイド携帯なんですが「見た」「触った」と書くのはOKだそうですが、それ以外はNGらしいので、触れない程度に書いておきます。先にブログに載せてしまいましたが、おおよそ以下のような感じです。
・ハードウェアとしての見た目
見た目はiPhone 3Gの方が断然上。
・ソフトウェア（デスクトップ／メニュー）としての見た目
ここの写真などにもあるような画面なのですが、見た目だけならiPhone 3Gの方が上。
使いやすさは現時点では何とも。考え方が違う（アンドロイド携帯の方がPCに近い）ので使ってみないと何とも。
・キーボードと入力
キーボードはiPhone 3Gがソフトキーボードなのに対して、アンドロイド携帯はハード的なキーボード。
iPhone 3Gの初期のキーボード入力は、ひどい状態だったが、OS ver 2.1ではかなり改善されたので、今は許せる範囲かと。
素朴なところでアンドロイド携帯のようなハード的なキーボードだと柔軟に対応できないというのもあるけど、入力はやはり早くできます（ました）。
・360度ぐるぐるできるアレ
これは携帯を振り回すだけで面白い。機能が増えないと、ただそれだけだけど・・・
アレはパソコン用でなくてアンドロイド携帯用だったんでしょう・・・
・UI（ユーザーインターフェース）
感覚的にどうか、というのはiPhone 3Gの方が分かりやすいかなと思います。アンドロイド携帯がどこまでカスタマイズできるか不明なので何とも言えませんが。
終わりに
ハッカソンが終わった後は、それなりにお楽しみ時間ということで解散。渋谷なので、ちょうど風船で空を飛ぶイベントの場所を撮影してきました。
ハッカソンは何かアプリケーションやサービスを作ったことがあるなど実績がちょっと必要なのが条件みたいですが、プログラマなら一度は参加してみてはどうでしょうか。無茶苦茶高度なことをやらなくてもよいので（？）、自分のカバーできるAPIのハッカソンがあれば腕試しにどうぞ。何もできなかった場合でも大丈夫です。適当に言い訳しておけば問題ありません・・・（？）
【作ったゲーム】
iPhone 3G上のSafariでのみ動作します。画面をタップするとタップした位置に自機が移動します。自機の下側をあけてあるので、そこを指でドラッグ／タップするとよいでしょう。
GMshot
＊こちらはKehi氏がGMshotを改造したランキング登録バージョン。敵も増えてタイムアタック制になってます。
GMShot2
ハッカソン関連リンク