では、今回から実際にマッシュアップを作る工程に入ります。とは言え、いきなりプログラム的なことを始めるわけではありません。まずは簡単にマッシュアップを作成できるソフトウエアやライブラリーを使って、プログラムを書かずに作ってみましょう。今回は一番マッシュアップの素材として利用されることが多いであろう「Google Maps API」を利用します。
まず紹介したいのは「GoogleMapsEditor」というソフトウエアです。このソフトウエアはオープンソースとして公開されており、Google Maps APIを使ったマッシュアップを手軽に作ることができます。なお、動作するOSはWindowsのみになります。
まず、GoogleMapsEditorの公式サイトへアクセスし、ダウンロードします。今回は2007年8月現在の最新版であるVer. 1.06を利用します。公式サイトからZIPで圧縮されたファイルをダウンロード、解凍して起動します。このソフトウエアを利用するためには、マイクロソフトの「.NET Framework 1.1」が必要になります。もし起動できない場合は、.NET Framework 1.1をマイクロソフトのサイトからダウンロード、インストールして下さい。GoogleMapsEditorのサイトから.NET Framework 1.1のダウンロードページにリンクが貼られています。
上記画面が起動した直後の画面になります。まず、Google Maps APIのAPI Keyを取得します。この作業も、GoogleMapsEditorからほぼ自動で取得可能です。「ブラウザメニュー」の「Google Maps API Keyを取得する」を選択してください。
画面の下半分にGoogleのサイトが表示されます。その中に書かれた利用規約を読んだ上、問題なければ画面の最下部にある「I have read and agree with the terms and conditions (printable version)」にチェックを入れて、「My web site URL」に「http://localhost」と入力して「Generate API Key」ボタンを押します。
すると問題なければ上記のような「API Keyを自動的に転記しました」と言うダイアログが表示されます。何らかの問題があって自動転記されなかった場合は、「Your key is:」の下に書いてある緑色の英数字を全てコピーし、「地図データ生成」タブにある「API Key」という欄に貼り付けてください。
なお、先ほどURLを入れる欄に「http://localhost」と記述しました。これは、自分のパソコンでGoogle Maps APIを使うという意味になります。もしもインターネット上にある自分のホームページやブログなどで利用する場合は異なるAPI Keyが必要になります。再度API Keyを取得し直してください。
では準備は終わりました。マッシュアップを作ってみましょう。「位置情報編集」タブに切り替えます。
例えば、自宅から勤務先までを直線で引くマッシュアップを作ってみます。「位置情報編集」タブで「緯度経度を割り出したい住所」の欄に自宅の住所を入力し、「位置判定」ボタンを押します。「地図確認」のチェックボックスが付いていると、地図が表示されるかと思います。もしずれている場合は正しい位置をダブルクリックして地図の中央に来るようにした上で、「ブラウザメニュー」の「表示中の地図の座標を取得する」を選択してください。位置の確認が終わったら、「位置情報編集」タブに戻り、ジャンルや名称、住所、アドレス、画像、説明といった項目を入力してください。それが終わったら「登録・修正」ボタンを押してください。
勤務先についても同じ操作です。登録が終わると、自宅と勤務先の2つがソフトの上部にある表の箇所に登録されているかと思います。
それが終わったら、「地図データ生成」タブに戻ってください。「地図に線を引く」ですべて順番に繋ぐを選択してください。後は右側のタイトルや制作者名等を適当に入力して「地図データ生成」ボタンを押してください。ファイルの保存先が聞かれますので、好きな場所に保存してください。これで完了です。慣れればものの5分で終わってしまうくらい簡単な作業です。
では実際にファイルを開いてみましょう。自宅と勤務先が見事一本の線で結ばれているでしょうか。Google Maps APIを使って、自分の好きなデータを地図上に配置できました。点はいつでも追加できます。途中駅を追加すれば、もっと細かく滑らかな線になります。
GoogleMapsEditorを使えば、旅行先で訪れた場所を写真と一緒に載せたり、ジョギングしたルートを載せたりといった使い方もできるようになります。ごく簡単にマッシュアップが作れると分かれば、あとはアイディア次第です。
次はもう少し高度な楽しみ方を紹介します。自分のホームページ上で動作させます。
最近は無料のホームページ作成サービスであっても、PHPが利用できるものが多くなっていると思います。ここではそのPHPを使い、PHP製のWikiであるPukiwikiを使って簡単マッシュアップをはじめてみましょう。
紙面の都合もありますので、ここではPukiwiki本体のセットアップに関しては省略させてもらいます。インターネット上に様々な情報源がありますし、データベースを使わないWikiエンジンなので、ほとんど手間はかからないと思います。
 |
 |
|
|
| 「PukiWiki」の紹介ページ |
|
セットアップが完了したら、Google Maps APIを手軽に使うためのプラグインを入手します。
|
 |
|
|
| 「PukiWikiでGoogleMap2」のページ |
|
上記サイトのEUC-JP版またはUTF-8版のうち、自分の環境に合った方をダウンロード、解凍します。そして中にある5つのファイル全てを、Pukiwikiの「plugin」フォルダーの中に入れます。そして、「googlemaps2.inc.php」の42行目付近にある、
define ('PLUGIN_GOOGLEMAPS2_DEF_KEY', 'BQIAAAAf7-dqFMDwmXt8xWmNirC7hT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTg8flfKFwUuURkC5EKRKVAc_CNeg');
という部分を、新しく取得したGoogle Maps APIのAPI Keyに書き換えます。以下は例です。
define ('PLUGIN_GOOGLEMAPS2_DEF_KEY', 'BQIAAAAf7-dqFMDwmXt8xWmNirC7hT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTg8flfKFwUuURkC5EKRKVAc_CNeg');
これで準備完了です。Pukiwikiの画面を開いてみましょう。
「新規」のリンクをクリックして、適当なページ名を入力します。今回は「Google Maps APIテストページ」としています。まずは、
&googlemaps2(width=300px, height=200px, mapctrl=small);
と入力して、プレビューボタンを押してみましょう。
このような表示になったでしょうか。なっていない場合はAPI Keyの書き換えや、プラグインのインストールがうまくいっていない可能性がありますので確認してください。英単語そのままですが、widthは幅、 heightは高さ、mapctrlは地図のコントローラの意味になります。幅を400pxなどと変更すれば、地図もそのように変更されますので試してみてください。続けて、
&googlemaps2(width=300px, height=200px, mapctrl=small);
-&googlemaps2_mark(35.039379, 135.729248, title=金閣寺, caption=足利義満の別荘。先日変な男が光ケーブルを接続するために車で突っ込んだ。東側の門は暇そうな警備員が守りを固めている。（長文サンプル）, image=http://reddog.s35.xrea.com/img/googlemaps/img_kinkaku.jpg);
のように書き換えてみます。この状態で再度プレビューボタンを押します。下の画面のように金閣寺の所にアイコンが表示されましたでしょうか。また、地図の下に説明書きが表示されているかと思います。
この状態で地図の下にある金閣寺のリンクをクリックすると、説明書きが表示されます。
公式サイトには他にもサンプルがたくさん登録されています。例を挙げると、複数の地図を同時に表示したり、写真（オーバービュー）表示をデフォルトに設定する、マーカーをオリジナルのものを表示し、さらにチェックボックスでフィルタリングする、図形の描画、住所から地図を検索して表示、センタークロス、マーカーの吹き出しを最大化、ズームレベルに応じてマーカー表示を切り替える…などと言った数多くの機能が全くプログラムを書くことなく実現できます。これを実際にプログラムで実現するとなると非常に大変なものになります。
このプラグインを使えば、地図情報サイトのようなものは簡単に作ることができるはずです。
最後に紹介するのはつい昨日リリースされたGoogleマップの新機能を利用したものになります。これを使ってもまた、簡単に地図を使ったマッシュアップを作ることができます。
ここではGoogleマップのマイマップを使って、新機能を試してみます。新機能は、自分のホームページに簡単に地図を埋め込めるというものです。マイマップはGoogleマップの上にアイコンを置いたり、線を引いたりできる機能です。例えば今回はWeb APIを提供している企業を地図上にマッピングする「Web API提供企業地図」という地図を作成しました。
地図ができあがったら、画面の右上にある「このページのリンク」をクリックします。すると「HTMLを貼り付けてサイトに地図を埋め込みます」が見えるかと思います。このHTMLタグをそのまま埋め込むだけで自分のホームページに地図を埋め込めるようになります。
こちらはカスタマイズの画面です。地図の大きさを変更可能です。
いかがでしょうか。こうしたツールを使えば、一行もプログラムを書くこともなくマッシュアップを作れるのが分かっていただけたでしょうか。もちろん、全ての Web APIに対してこうしたツールが提供されている訳ではありません（むしろこれだけ秀逸なツールが提供されるのは稀で、Googleマップが非常に便利だという証明と言えます）。ですが、作る工程を簡素化する方法はいくつも存在します。それらを組み合わせれば簡単にマッシュアップを作ることはできます。
次回はさらに手を動かしつつマッシュアップを作ってみたいと思います。
