読み書きプログラミング

日常のプログラミングで気づいたことを綴っています

Google Earthコンテンツの作り方 (2) ーWebkitバルーンー

KML

Google EarthのコンテンツはKML(Keyhole Markup Language)で記述されたドキュメントです。
KMLはXMLベースの言語なので、タグで文字列をくくるなど、HTMLとよく似た言語です。
言語の基本からリファレンスまで、以下のサイトに情報があります。

https://developers.google.com/kml/?hl=ja

言語仕様が比較的小さいので、興味が持てたらリファレンスを一通り目を通すといいかもしれません。


直接KMLを書いてもいいのですが、パソコン版Google EarthにはGUIで色々なオーサリング機能がついていますのでそれを使います。
道頓堀のグリコの看板を見に行きましょうか。「戎橋」と検索して、検索結果の該当項目をダブルクリックします。すると、戎橋が中央に表示されます。
(道頓堀　グリコで検索したら出てきましたが場所がずれていたので、戎橋で検索しました。)

上辺のツールバーの目印アイコン(画びょうのアイコン)をクリックして、目印を作ってみましょう。
中央にアイコンが現れて、情報入力ウィンドウが現れますので、名前に「グリコの看板」、説明に「ここからグリコの看板を見たい。」と入れてみました。
編集やアクセスに便利なように場所ペイン(ウィンドウの中の分割部分のことです)のアクティブなフォルダにも目印アイコンが現れます。
目印アイコンをクリックすると、説明が表示されます。

さて、スマートデバイスでこの情報を見てみるには、まず、目印のKMLを出力します。場所ペインにできたアイコンを右クリックして下さい。メニューが現れます。

名前をつけて場所を保存をクリックしてください。保存ウィンドウが現れます。

デフォルトのフォーマットがKmz(圧縮ファイル)になっています。中身を見るためにKmlに変更してから保存して下さい。
中身を見てみましょう。

<?xml version="1.0" encoding="UTF-8"?> <!-- XMLであることの宣言をしています。 -->
<kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2" xmlns:kml="http://www.opengis.net/kml/2.2" xmlns:atom="http://www.w3.org/2005/Atom"> <!-- KMLタグ内で使用する名前空間が定義されてします。 -->
<Document> <!-- Styleなど共通要素とコンテンツを合わせる時にDocumentタグを使います。 -->
	<name>glico.kml</name>
	<Style id="s_ylw-pushpin"> <!-- 目印など表示要素の表示方法を規定します。 -->
		<IconStyle>
			<scale>1.1</scale>
			<Icon>
				<href>http://maps.google.com/mapfiles/kml/pushpin/ylw-pushpin.png</href>
			</Icon>
			<hotSpot x="20" y="2" xunits="pixels" yunits="pixels"/>
		</IconStyle>
	</Style>
	<StyleMap id="m_ylw-pushpin"><!-- 表示要素の状態(ポインタが重なっているかどうか)に応じてスタイルを割り当てます。 -->
		<Pair>
			<key>normal</key>
			<styleUrl>#s_ylw-pushpin</styleUrl>
		</Pair>
		<Pair>
			<key>highlight</key>
			<styleUrl>#s_ylw-pushpin_hl</styleUrl>
		</Pair>
	</StyleMap>
	<Style id="s_ylw-pushpin_hl">
		<IconStyle>
			<scale>1.3</scale> <!-- ハイライトの時(ポインタが重なっている時)、アイコンを大きくするように設定されています。 -->
			<Icon>
				<href>http://maps.google.com/mapfiles/kml/pushpin/ylw-pushpin.png</href>
			</Icon>
			<hotSpot x="20" y="2" xunits="pixels" yunits="pixels"/>
		</IconStyle>
	</Style>
	<Placemark> <!-- Placemarkは目印のことです。 -->
		<name>グリコの看板</name>
		<description>ここからグリコの看板を見たい。</description>
		<LookAt> <!-- ビューの定義です。 -->
			<longitude>135.5013609991555</longitude> <!-- 経度 -->
			<latitude>34.6690560015825</latitude> <!-- 緯度 -->
			<altitude>0</altitude> <!-- 高度 -->
			<heading>-1.175052746512015e-09</heading> <!-- 北から時計回りにどれだけ首を振るか -->
			<tilt>44.99973704799301</tilt> <!-- 見下ろした向きからどれだけ頭を上げるか -->
			<range>1015.544176816404</range> <!-- 見る場所からカメラまでの距離 -->
			<gx:altitudeMode>relativeToSeaFloor</gx:altitudeMode> <!-- 高度の定義選択 -->
		</LookAt>
		<styleUrl>#m_ylw-pushpin</styleUrl>
		<Point>
			<coordinates>135.5013609991555,34.66905600158249,0</coordinates> <!-- 経度、緯度、高度 -->
		</Point>
	</Placemark>
</Document>
</kml>

タグがたくさんあるとややこしく見えますが、よく見るとわかりやすいですね。


スマートデバイスで見るにはいくつかの方法があるかと思います。

  1. 添付ファイルにしてスマートデバイスで使っているアドレスにメールして開く。
  2. Dropboxなどファイル共有サービスを使って開く。
  3. ウェブサーバーにアップロードしてからダウンロードする。
  4. Googleマップのマイマップに登録する。

どれでもお好きな方法でお試しください。


目印は見えたでしょうか？バルーンは見えたでしょうか？

実はiOS版のGoogle Earthには今のバージョン(6.2.1)では不具合があり、1から3の方法だとバルーンの中身が表示されません。
表示させるには2つの方法があることがわかっています。

  1. Googleマップのマイマップに登録する。
  2. glico.kmlへのネットワークリンク(KMLファイルをロードするタグ)を含むKMLファイルを用意して、上記の方法のいずれかでそれを開く。

では、ネットワークリンクを含むKMLを作りましょう。これもGoogle Earthで作ることができます。場所ペインで右クリックをすると現れるポップアップメニューの一番上に「追加(A)　▶」という項目があります。そこにマウスを持って行くとサブメニューが現れます。その中の一番したのネットワークリンクをクリックして下さい。

情報入力ウィンドウが現れますので、名前を適当につけて下さい。(glico-loadとしました。)リンクには先ほどのファイルglico.kmlを置く予定のURLを入れて下さい。
できたら、OKをクリックして先ほどと同様にしてKMLファイルとして保存し(glico-load.kmlとしました)、2つのファイルをウェブサーバーにアップロードして下さい。

Safariからkml-load.kmlにアクセスして、Google Earthで開くと今度はバルーンの中身も見えるはずです。直接読み込むと表示されなくて、ネットワークリンクを介すと表示されるなんて不思議な不具合ですね。次回のバージョンアップで修正される予定とのことです。


とにもかくにも重要な情報提供手段であるバルーンが見えるようになりましたので、ここでどんなものが表示できるかの例として、ストリートビューの表示をしましょう。(そう、戎橋ではなくてグリコの看板が見たかったのです！)

バルーンはWebkitでレンダリングされるので、ウェブページにストリートビューを埋め込むのと同じことをします。目印の説明を以下の内容に変更して下さい。

<html>
<head>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script> <!-- Google Maps APIをロードします -->
<style>
#streetview {
  width: 500px;
  height: 500px;
}
</style>
</head>
<body>
<div id="streetview"></div>
<script type="text/javascript">
window.onload = function() {
var glico = new google.maps.LatLng(34.669056, 135.501361); //目印の緯度、経度を引数にします
var panoramaOptions = {
  position: glico,
  pov: {
    heading: 200, //グリコの看板は南南西方向です
    pitch: 20, // 少し見上げます
    zoom: 1
  }
};
var panorama = new  google.maps.StreetViewPanorama(document.getElementById("streetview"), panoramaOptions);
map.setStreetView(panorama);
};
</script>
</body>
</html>

HTMLの埋め込みJavaScriptに緯度、経度を入れる必要がありますが、Google Earthでは緯度、経度の表示がデフォルトでは度、分、秒表示です。JavaScriptでは10進法を使うので、Google Earthの環境設定の3Dビュータブでの「緯度/経度を表示」の項目を変更しておくと便利です。

パソコン版で動作確認はできましたか？


では、スマートデバイスで試してみましょう。試す時に少しコツがあります。

スマートデバイス版Google EarthではKMLを読み込むと目印など情報が追加されていきます。
先ほど、グリコの目印を読み込んだので、同じことをすると、グリコの目印が２つ重なって現れます。これを避けるためには、新しいkmlを読み込む前に一度情報をリセットしましょう。Google Earthの上辺の設定アイコンをタッチすると、「地図を消去」という項目があります。これをタッチしてください。これでそれまで読み込んだ情報がすべて消えます。
では、スマートデバイス版Google Earthストリートビューが表示されるか確認して下さい。

このようにバルーンの中にHTMLページを表示することができます。
表示がちょっと小さいですね。残念ながらパソコン版と違い、スマートデバイス版のバルーンが大きさが固定です。しかし、バルーンにアンカータグを用意してウェブページにアクセスできるようにしておくと、ウェブページは大きく表示されます。それを試してみましょう。

以下の行を、説明の</body>の前に追加して下さい。

<a href="http://maps.google.co.jp/">Googleマップ</a>


先ほどと同じように、それまでの目印を消去してこれを読み込むとバルーンの中にGoogleマップへのリンクが出ますので、これをタッチします。
GoogleマップのサイトがGoogle Earth上で見えたでしょうか？

表示できるのは外部のサイトだけではありません。
圧縮フォーマットkmzを使うとkmz内のHTMLページも同様に大きく表示できるので、情報をたくさん盛り込みながらもスタイルを工夫することが可能です。


次回は共通のスタイルを定義して、コンテンツとしての統一感を出す方法を書きます。

おまけ

iPad用に航空写真ではなく国境情報での地球儀アプリがあります。

Globe for iPad

各国が英語版Wikipediaのその国のページにリンクが張られて、地理の勉強に良さげです。日本語版もあるといいですね。