今年前半に「ナガサキ・アーカイブ」というプロジェクトに参加してGoogle Earthを使った作品を作ったんですが、Google Earthにデータを載せるのってGUIベースで簡単なんだけど、その分表現の幅が狭いことに気づきました。
例えばPlacemarkというオブジェクト(目印のピン)。クリックすると詳細情報のバルーンが開くってのはGoogle Mapでもおなじみなんですが、このバルーンの出現位置を作り手側で指定することができません。画面上でスペースのある部分に自動的に展開されます。また、バルーンの背景は色および透明度の変更ができますが、バルーンの角丸の度合などそのデザインには限界があります。
それゆえにデータの作成が手軽だったりする部分もあるので、自由にやらせてくれ！とも言えないのですが、こだわりたい人からするとちょっと物足りない感は否めません。
というわけで、今回はGoogle EarthをWebブラウザ上で動かせるGoogle Earth APIとHTMLをjavascriptで組み合わせて、標準のGoogle Earthより少し高度(?)なサンプルを作ってみました。
スプリットビュー
iPadアプリのスプリットビューのイメージです(左右逆ですが)。左ペインでGoogle Earthそのものを操作しつつ、Placemarkの詳細情報は右ペインに表示されるという形です。デモはちょっと手抜きしてますが、右ペイン部分が予め詳細情報の表示エリアであることがわかるように予めコンテンツを入れておけば、どこに現れるかわからない標準バルーンよりわかりやすいのかなと考えます。
フローティングウインドウ
こっちは見た目としてはGoogle Earthの標準バルーンとあまり代わり映えしませんがバルーンの表示位置が画面右上に固定されています。表示以後はドラッグして自由にバルーンを移動できるようになっています。バルーン自体は完全にHTMLで作られているので、例えば背景に画像を使うなど標準バルーンより自由にデザインできると思います。
ただ、このデモには2つ問題があります。１つ目はFirefoxで正常に動かないということ、2つ目はバルーンにスクロールバーを使えないということです。特に2つ目についてですが、バルーン内に表示されるスクロールバーをマウスでドラッグすると、マウスポインタからバルーンが離れなくなるという致命的なものです。(デモでなってしまった場合はウインドウ(タブ)ごと閉じてください)
これについてはドラッグを実装しているjQuery UIでの不具合(?)なので、自分としてはどうしようもありません。なので、バルーンのサイズをはみ出さないようにコンテンツの量(高さ)を調整するしかないと思います。
まとめ
デモのソースを見てもらうとわかりますがGoogle Earth APIをjavascriptで操作しているだけで、特に複雑なことはやってません。インタラクション部分を自分で実装しなければならないので、標準のデザインを使うよりは作業量が増えますが、その分表現の幅は広がるはずなので試してみる価値はあると思います。
もしもっと面白いUIがあればぜひ教えてください。
(あと、キレイなjavascriptの書き方も教えてください)
