Goolge EarthのバルーンはHTMLで記述でき、そこからのアンカーのリンク先はGoolge Earth内のブラウザで開かれますので、HTML5に準じた表現力豊かなコンテンツを用意することができます。既にGoogleマップでストリートビューを見ましたね。YouTubeも見ることができます。HTML5のゲームとか動きます。試してみましょう。
オンラインゲームのsplax.netさんがiPhone/Android用のゲームも色々ご提供されていますので、1つ拝借しました。iPad/iPhoneで以下のURLにアクセスしてお楽しみください。
http://y-ich.github.io/kml/game-load.kml
iOS用です。パソコン版ではリンク先がトップページにリダイレクトされるようです。Android版ではどうなるのでしょうか?
Google EarthのバルーンやブラウザはWebkitでレンダリングされるのですが、いくつかの制約があります。
- アンカータグのtargetは未サポート
- alert/confirmなどのダイアログボックスは未サポート
- CSSのurl関数は未サポート
- localStorageは未サポート。(applicationCacheは?)
更にモバイル版の場合、
- ウィンドウサイズが固定
- (内部ブラウザでなく)バルーンの場合、KMZ内のjsを相対URLで読み込むことができない。
さて、バルーンやブラウザの中のインタラクションを見ましたが、目印間でも何らかのインタラクションが欲しいですね。アンカータグの形で用意されています。
Google Earth内のWebkitは、アンカータグのURLの拡張子がkml/kmzだったり、typeがapplication/vnd.google-earth.kml+xmlの時には、クリックされると処理をGoogle Earth本体に渡し、本体はkml/kmzを読み込みます。その時、URLにフラグメント(#id名)が付いていると、そのid名のFeatureにジャンプします。これによって目印間の移動が可能になります。
例を見てましょう。スイスの山々を見たので、負けずに日本の三大岩稜を題材にしました。
http://y-ich.github.io/kml/ridge-load.kml
パソコン版Google Earthで見ていただくと、バルーンの中のアンカーリンクで別の目印に移動できることを確認して下さい。
中身は以下の通りです。
<?xml version="1.0" encoding="UTF-8"?> <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"> <Document> <name>ridge.kml</name> <StyleMap id="msn_track"> <Pair> <key>normal</key> <styleUrl>#sn_track</styleUrl> </Pair> <Pair> <key>highlight</key> <styleUrl>#sh_track</styleUrl> </Pair> </StyleMap> <Style id="sn_track"> <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> <BalloonStyle> <text><![CDATA[<h3>$[name]</h3> $[description]]]></text> </BalloonStyle> <ListStyle> </ListStyle> </Style> <Style id="sh_track"> <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> <BalloonStyle> <text><![CDATA[<h3>$[name]</h3> $[description]]]></text> </BalloonStyle> <ListStyle> </ListStyle> </Style> <Folder> <name>三大岩稜</name> <open>1</open> <Placemark id="hodaka"> <name>穂高岳</name> <description><![CDATA[<a href="#tsurugi">剱岳にGo!</a>]]></description> <LookAt> <longitude>137.6534067547421</longitude> <latitude>36.28608603502574</latitude> <altitude>0</altitude> <heading>11.49156950225207</heading> <tilt>64.59160323302423</tilt> <range>8107.54193495845</range> <gx:altitudeMode>relativeToSeaFloor</gx:altitudeMode> </LookAt> <styleUrl>#msn_track</styleUrl> <Point> <coordinates>137.6480560177238,36.289167005804,0</coordinates> </Point> </Placemark> <Placemark id="tsurugi"> <name>剣岳</name> <description><![CDATA[<a href="#tanigawa">谷川岳にGo!</a>]]></description> <LookAt> <longitude>137.6137058223657</longitude> <latitude>36.61131307739188</latitude> <altitude>0</altitude> <heading>11.93472255443647</heading> <tilt>65.31669940396245</tilt> <range>4418.920346075673</range> <gx:altitudeMode>relativeToSeaFloor</gx:altitudeMode> </LookAt> <styleUrl>#msn_track</styleUrl> <Point> <coordinates>137.617072998593,36.62331099878913,0</coordinates> </Point> </Placemark> <Placemark id="tanigawa"> <name>谷川岳</name> <description><![CDATA[<a href="#hodaka">穂高岳にGo!</a>]]></description> <LookAt> <longitude>138.9350227376156</longitude> <latitude>36.83205127562792</latitude> <altitude>0</altitude> <heading>-94.05479804179602</heading> <tilt>35.23905537428566</tilt> <range>2293.433224821648</range> <gx:altitudeMode>relativeToSeaFloor</gx:altitudeMode> </LookAt> <styleUrl>#msn_track</styleUrl> <Point> <coordinates>138.931310825322,36.83312412925407,0</coordinates> </Point> </Placemark> </Folder> </Document> </kml>
これを使えば、世界を旅しながら色々できそうでしょ?
ところが、このKML、iOS版Google Earthではうまく行きません。以下の不具合があるようです。
- リンクをタッチする度に、KMLを読み込み、目印などが重複していく。
- 対応する目印のビューに移動せずに、全目印の重心に移動する。
早く不具合に対応してもらえたら嬉しいですね。
擬似的に同じようなことをiOS版でやろうと思うと、以下のように非常時の目印毎のKMLを別途用意する方法があります。
http://y-ich.github.io/kml/ridge-ipad-load.kml
<?xml version="1.0" encoding="UTF-8"?> <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"> <Document> <name>ridge.kml</name> <StyleMap id="msn_track"> <Pair> <key>normal</key> <styleUrl>#sn_track</styleUrl> </Pair> <Pair> <key>highlight</key> <styleUrl>#sh_track</styleUrl> </Pair> </StyleMap> <Style id="sn_track"> <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> <BalloonStyle> <text><![CDATA[<h3>$[name]</h3> $[description]]]></text> </BalloonStyle> <ListStyle> </ListStyle> </Style> <Style id="sh_track"> <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> <BalloonStyle> <text><![CDATA[<h3>$[name]</h3> $[description]]]></text> </BalloonStyle> <ListStyle> </ListStyle> </Style> <Folder> <name>三大岩稜</name> <open>1</open> <Placemark id="#hodaka"> <name>穂高岳</name> <description><![CDATA[<a href="tsurugi.kml#tsurugi">剱岳にGo!</a>]]></description> <LookAt> <longitude>137.6534067547421</longitude> <latitude>36.28608603502574</latitude> <altitude>0</altitude> <heading>11.49156950225207</heading> <tilt>64.59160323302423</tilt> <range>8107.54193495845</range> <gx:altitudeMode>relativeToSeaFloor</gx:altitudeMode> </LookAt> <styleUrl>#msn_track</styleUrl> <Point> <coordinates>137.6480560177238,36.289167005804,0</coordinates> </Point> </Placemark> <Placemark id="#tsurugi"> <name>剣岳</name> <description><![CDATA[<a href="tanigawa.kml#tanigawa">谷川岳にGo!</a>]]></description> <LookAt> <longitude>137.6137058223657</longitude> <latitude>36.61131307739188</latitude> <altitude>0</altitude> <heading>11.93472255443647</heading> <tilt>65.31669940396245</tilt> <range>4418.920346075673</range> <gx:altitudeMode>relativeToSeaFloor</gx:altitudeMode> </LookAt> <styleUrl>#msn_track</styleUrl> <Point> <coordinates>137.617072998593,36.62331099878913,0</coordinates> </Point> </Placemark> <Placemark id="#tanigawa"> <name>谷川岳</name> <description><![CDATA[<a href="hodaka.kml#hodaka">穂高岳にGo!</a>]]></description> <LookAt> <longitude>138.9350227376156</longitude> <latitude>36.83205127562792</latitude> <altitude>0</altitude> <heading>-94.05479804179602</heading> <tilt>35.23905537428566</tilt> <range>2293.433224821648</range> <gx:altitudeMode>relativeToSeaFloor</gx:altitudeMode> </LookAt> <styleUrl>#msn_track</styleUrl> <Point> <coordinates>138.931310825322,36.83312412925407,0</coordinates> </Point> </Placemark> </Folder> </Document> </kml>
hodaka.kml
<?xml version="1.0" encoding="UTF-8"?> <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"> <Document> <name>hodaka.kml</name> <StyleMap id="msn_track"> <Pair> <key>normal</key> <styleUrl>#sn_track</styleUrl> </Pair> <Pair> <key>highlight</key> <styleUrl>#sh_track</styleUrl> </Pair> </StyleMap> <Style id="sn_track"> <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> <BalloonStyle> <text><![CDATA[<h3>$[name]</h3> $[description]]]></text> </BalloonStyle> <ListStyle> </ListStyle> </Style> <Style id="sh_track"> <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> <BalloonStyle> <text><![CDATA[<h3>$[name]</h3> $[description]]]></text> </BalloonStyle> <ListStyle> </ListStyle> </Style> <Placemark id="hodaka"> <name>穂高岳</name> <visibility>0</visibility> <description><![CDATA[<a href="#tsurugi">剱岳にGo!</a>]]></description> <LookAt> <longitude>137.6534067547421</longitude> <latitude>36.28608603502574</latitude> <altitude>0</altitude> <heading>11.49156950225207</heading> <tilt>64.59160323302423</tilt> <range>8107.54193495845</range> <gx:altitudeMode>relativeToSeaFloor</gx:altitudeMode> </LookAt> <styleUrl>#msn_track</styleUrl> <Point> <coordinates>137.6480560177238,36.289167005804,0</coordinates> </Point> </Placemark> </Document> </kml>
tsurugi.kml
<?xml version="1.0" encoding="UTF-8"?> <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"> <Document> <name>tsurugi.kml</name> <StyleMap id="msn_track"> <Pair> <key>normal</key> <styleUrl>#sn_track</styleUrl> </Pair> <Pair> <key>highlight</key> <styleUrl>#sh_track</styleUrl> </Pair> </StyleMap> <Style id="sn_track"> <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> <BalloonStyle> <text><![CDATA[<h3>$[name]</h3> $[description]]]></text> </BalloonStyle> <ListStyle> </ListStyle> </Style> <Style id="sh_track"> <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> <BalloonStyle> <text><![CDATA[<h3>$[name]</h3> $[description]]]></text> </BalloonStyle> <ListStyle> </ListStyle> </Style> <Placemark id="tsurugi"> <name>剣岳</name> <description><![CDATA[<a href="#tanigawa">谷川岳にGo!</a>]]></description> <LookAt> <longitude>137.6137058223657</longitude> <latitude>36.61131307739188</latitude> <altitude>0</altitude> <heading>11.93472255443647</heading> <tilt>65.31669940396245</tilt> <range>4418.920346075673</range> <gx:altitudeMode>relativeToSeaFloor</gx:altitudeMode> </LookAt> <styleUrl>#msn_track</styleUrl> <Point> <coordinates>137.617072998593,36.62331099878913,0</coordinates> </Point> </Placemark> </Document> </kml>
tanigawa.kml
<?xml version="1.0" encoding="UTF-8"?> <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"> <Document> <name>tanigawa.kml</name> <StyleMap id="msn_track"> <Pair> <key>normal</key> <styleUrl>#sn_track</styleUrl> </Pair> <Pair> <key>highlight</key> <styleUrl>#sh_track</styleUrl> </Pair> </StyleMap> <Style id="sn_track"> <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> <BalloonStyle> <text><![CDATA[<h3>$[name]</h3> $[description]]]></text> </BalloonStyle> <ListStyle> </ListStyle> </Style> <Style id="sh_track"> <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> <BalloonStyle> <text><![CDATA[<h3>$[name]</h3> $[description]]]></text> </BalloonStyle> <ListStyle> </ListStyle> </Style> <Placemark id="tanigawa"> <name>谷川岳</name> <visibility>0</visibility> <description><![CDATA[<a href="#hodaka">穂高岳にGo!</a>]]></description> <LookAt> <longitude>138.9350227376156</longitude> <latitude>36.83205127562792</latitude> <altitude>0</altitude> <heading>-94.05479804179602</heading> <tilt>35.23905537428566</tilt> <range>2293.433224821648</range> <gx:altitudeMode>relativeToSeaFloor</gx:altitudeMode> </LookAt> <styleUrl>#msn_track</styleUrl> <Point> <coordinates>138.931310825322,36.83312412925407,0</coordinates> </Point> </Placemark> </Document> </kml>
「Google Earthコンテンツの作り方」いかがでしたでしょうか?
ネタが尽きましたので、また見つけましたら追加記事を書きたいと思います。ありがとうございました。