Google Developer Day 2008 レポート(後編)
ちょっと間が空いてしまいましたが、遅ればせながら Google Developer Day 2008 のレポートの続きです。「マッシュアップアプリケーションと Google API」、「Mashup から Mapplets へ」の 2 つのセッションに参加しました。座った位置が悪くて、残念ながら写真が撮れませんでした。文章だけでご勘弁ください。
マッシュアップアプリケーションと Google API
「マッシュアップアプリケーションと Google API」はリクルートの川崎さんによる Google API を使ったマッシュアップについてのセッションです。
まずは Google APIs の紹介。 Google Code のページで Google API の数をカウントする JavaScript コード(アドレスバーに入力して使う)で API の数をカウント。なんと 60 もあるそうです。そしてこのセッションで使っているプレゼンテーションツールは amachang 氏の S6 と Google Language API をマッシュアップして、テキストをリアルタイムで翻訳できるとのこと。翻訳機能のコアの紹介。翻訳自体は1行の呼び出しで実現できる。
マッシュアップとは元々音楽業界の用語で、複数の曲のパートを組み合わせて別の曲を作ること。それに倣い、複数のサービスを組み合わせて別のサービスを構築することをいう。現在、ProgrammableWeb に登録されているだけで 775 くらいのマッシュアップアプリケーションある。リクルートも14媒体のAPIを提供。
Google Maps API + HotPepper を組み合わせたマッシュアップ。制作時間2時間くらい。 Google Maps 上で Hotpepper のデータが検索できる。 Google Maps の表示は 10 行程度のコードで実現できる。エリア選択などのコンボボックスはライブラリ側で提供しており、開発者は 1 行コードを書くだけ。要のマッシュアップ部分は20行くらいか。 HotPepper のほかにも、リクルートの Web サービスのうち 9 種を JavaScript から利用できるようにした。 BSD ライセンスなので商用サイトでも安心。
Google Maps API のロード方法は従来の SCRIPT タグを使う方法と Google AJAX API の流儀に従った方法の 2 種類がある。後者の方が名前空間を汚染しないので望ましい。 YouTube-style embeddable Map (Google Maps で「このページのリンク」をクリックしたときに表示される HTML スニペット)や Google Chart API の紹介。
最後にハードウェアとのマッシュアップ(?)。 Gainer というチップの紹介。多数のポートを装備した汎用チップで、これを使うと簡単にセンサーなどの出力を PC に取り込める。そしてその出力を HTTP 経由で取り出せるサーバーを開発し、 Web ページ上で利用するデモ。 Wii リモコンを傾けると canvas API で描画された画面上の Wii リモコンも傾く。これはなかなか面白い。
ところで、 Google Developer Day の次の日にはじめてのGainerプログラミングガイドのお勧めメールが Amazon さんから送られてきたのですが、これってこのセミナーの影響でしょうかね(^^;
Mashup から Mapplets へ
次は Google の David Day 氏による Mapplets のセッションです。私は今まで食わず嫌いで Google Maps 関連の API には手を出してこなかったので、これを機会にそのあたりを勉強できたらと思って参加したのですが、これが大当たり。 Google ガジェットの知識があれば、このセッションを見ただけで Mapplets も理解できる内容でした。個人的には、 Google Developer Day 2008 最大の収穫です(笑)
さて、セッション内容に入りましょう。まずは Mapplets の紹介。 Google Maps 上に複数の情報を同時に表示できる。例えば賃貸物件、交通機関、犯罪情報の Mapplets を同時に表示し、条件の良い物件を探すといった活用が可能。また、 Google ガジェット同様の国際化システムがあるので、日本の Google Maps では(日本語のメッセージ・バンドルを用意すれば)日本語のメッセージを表示できる。
Mapplets の仕組み。 Mapplets = Google ガジェット + Google Maps API 。Google Maps の中の IFrame で Mapplets を動かす。そしてさらにその中に maps.google.com ドメインの非表示 IFrame を作り、それを使って Google Maps 本体と通信している。従って、 Google Maps に対するすべての操作は非同期になる。これが Maps API との最大の違い。 Maps API では普通に関数を呼ぶだけで現在位置が取得できるが、 Mapplets ではコールバックを使わなければならない。
Mapplets の作り方。通常の Google ガジェットに <Require feature="sharedmap" /> を追加するだけで Mapplets になる。さらに地図を特定の地点に移動するのは、わずか 3 行でできる。たぶんこんな感じだったと思う。
var map = new GMap2(); var point = new GLatLng(35.68095, 139.76725); map.setCenter(point, 16);
マーカー、ポリライン、ポリゴンなどはすべてオーバーレイという形で抽象化されている。例えばマーカーなら、 new GMarker でマーカーを作り、 map.addOverlay で追加することでマップに表示される。マップのクリックイベントを設定するには、 GEvent.addListener(map, 'click', clickFunc) を使う。コールバックは func(marker, point) の形式。marker はそれがマーカーかどうかで、 point はクリックされた位置。これらを組み合わせて、マップ上をクリックするとマーカーを設置し、それを再度クリックすると削除という機能が以下のコードで実現できる。
GEvent.addListener(map, 'click', function(marker, point) { if(marker) { map.removeOverlay(marker); } else { map.addOverlay(new GMarker(point)); } });
GAsync という関数で複数のコールバックを一度に実行できる。けっかはひとつのコールバックで取得できる。その他、 _IG_FetchContent, _IG_FetchXMLContent, _IG_GetImage, _IG_GetCachedUrl なども利用可能。というか、たぶんほとんどのガジェット API が使えると思われる。 Maps API から Mapplets への移行は簡単。しかし非同期で行われることには注意。
Mapplets の公開方法。 Mapplets ディレクトリに登録する。もしくは、 http://maps.google.co.jp/maps/mpl?moduleurl=〜 の URL で Mapplets に直リンクできる(元のスライドでは maps.google.com ドメインでしたが、それだと英語版 Google Maps に飛んでしまうので、 .co.jp に直しました)。
そして Mapplets 作成に便利なリソースの紹介。
- API Reference - Google Maps 上で Mapplets API のリファレンスが参照できる。
- Mapplet ScratchPad - Google Maps 上でコードを書いて直接実行できる。
- Developer Mapplet - Mapplet のリロードが可能になる。Mappletはキャッシュされるので、これを使ってキャッシュをフラッシュする。
以上でセッションは終わりだったのですが、あまりにも簡単そうだったので、帰宅してからさっそく作ってみました。クリックした位置の緯度・経度を表示する Mapplet です。以前codeなにがしに投稿した Hello World! ガジェットをベースにして、不要部分を削った以外は実質 6 行の追加でできてしまいました。素晴らしい。
以下のリンクをクリックすると、実際に Google Maps で実行できます。マイマップに登録されるわけではないので、安心してお試しください。
ソースコードはこちら。
Maps API や Mapplets のいいところは、 Google Maps という優れたシステムが土台にあるおかげで、ゼロから作ったらとんでもなく手間のかかるアプリケーションが簡単に作れてしまうところです。さらにユーザーは複数の Mapplets を組み合わせることができますから、簡単な Mapplets でも意外と便利だったりします。私のように今まで手を出してこなかった方、これを機会にぜひ Mapplets 作成に挑戦してみてください!
詳しくはこちらの記事をどうぞ!
この記事にコメントする