Earth on Cubic-Sight

Google Earth(TM) 地図サービスのオススメスポット・Wiki更新状況・おもしろい情報の紹介などを書き綴っていきます。

土曜日, 10月 10, 2009

Town Market For Google Earthの紹介

以前コメントをいただいていて紹介しようと思っていましたが、週末になってしまいました。
リクルートWEB APIのタウンマーケット WEBサービスをKML化したものです。作者fujisan777さんのブログ記事からKMLをダウンロードすることができます。

GE Maniacsさんの記事でも紹介されています。

普段はコンテンツだけ楽しませていただいてKMLの中身はあまり見ないのですが、紹介させていただくということでKMLの中身を見てみたところ、大変興味深かったです。特に印象深かったのは、SchemaやExtendedDataを使った好例だというところでしょうか。
手前味噌な話で恐縮ですが、以前、参加させていただいた本でたまたま僕がSchemaやExtendedDataの部分を担当しました。その時に率直に感じたのは、SchemaやExtendedDataは作成したKMLを他で利用するのに便利な機能ということです。
今回のマッシュアップでは読み込むKMLのコード量が少なくなるというメリットも感じました。僕もGE Maniacsさん同様、descriptionに内容を突っ込んで「ハイおしまい」みたいな作り方をするものですから、見習わなければなりません。

あと、javascript関係でコメントをいただきましたが、僕の書いた内容はWEB製作の基本がGoogleEarthでも使えるかどうかの確認ですので、参考にしたというのは気を遣っていただいたものでしょうwお心遣いありがとうございます。
投稿者 Takashi.U 時刻: 9:56 午後 2 コメント

土曜日, 9月 26, 2009

prototype.jsを使ってバルーン内にHTMLを表示する

　前回までのタイトルは「バルーン内でjQueryを使ってみる」でしたが、その実、クロスドメインがらみの話としてネットワークリンクを使用するのが肝という話でした。
　今回はそれを踏まえて、他ファイルのHTMLを表示させてみたいと思います。また、この記事ではprototype.jsを使用してみました。prototypeもGoogle AJAX Libraries APIから呼び出すことが出来ます。

　まずは、基になるHTMLがこちらです。これは、本ブログの記事をダウンロードしてきたHTMLです。（外部のサイト（ページ）を引っ張ってくる場合にはクロスドメイン対策を講じる必要があります。）
　ブラウザ（Google Chrome）で動作確認すると、自分の環境では問題なく表示されました。コードは次のとおりです。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" language="javascript">
google.load("prototype", "1.6.0.3");
 
google.setOnLoadCallback(function() {
  Event.observe('ballon_html', 'click', load_html);
  
  function load_html(){
    var body_element = new Ajax.Request( 
         "jquery_24.html", 
         { 
             "method": "post", 
             onComplete: function(html) { 
                 $('BodyElement').innerHTML = html.responseText; 
             }
         } 
     );
  }
}); 
</script>

（中略）

</head>
<body id="BodyElement">
<input id="ballon_html" type="button" value="表示" />
</body>
</html>

　HTMLのタグbody以下の情報しか取得できないので、headにて記載されているCSS関連が抜けてしまい、そのままでは見た目的に問題があるので、あらかじめheadの内容はコピペしてしまっています。中略の部分はそのコピペ部分になります。

　次に、バルーン内で同じコードを表示させたいと思います。KMZファイルはこちらです。
　ブラウザでの確認と違い、スタイルシートが反映されていません。以前、FirefoxやIEで異なる表示をする旨を書きましたが、WebkitベースのChromeでも異なることもあるようです。（原因はよくわかりませんが…）

【参考：KMLリファレンスより】
Google Earth 5.0 では、プレーン テキスト コンテンツの他に、HTML と JavaScript を説明バルーン内に使用できます。description タグのコンテンツは WebKit オープンソース ウェブブラウザ エンジンによってレンダリングされ、WebKit ベースのブラウザで表示するときと同じように表示されます。

　というわけで、あらかじめhead部分でCSSを読むというアプローチがダメということで、次はJavaScript（prototype.js）を使ってスタイルを追加するというアプローチを試してみます。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" language="javascript">
google.load("prototype", "1.6.0.3");
 
google.setOnLoadCallback(function() {
  Event.observe('ballon_html', 'click', load_html);
  
  function load_html(){
    var body_element = new Ajax.Request( 
         "jquery_24.html", 
         { 
             "method": "post", 
             onSuccess :function(html) { 
                 $('BodyElement').innerHTML = html.responseText; 
             },
             onComplete : function(){
              var body = $('BodyElement');
        Element.setStyle(body, { 
            'color':'red', 
        });
             }
         } 
     );
  }
}); 

</script>
</head>
<body id="BodyElement">
<input id="ballon_html" type="button" value="表示" />
</body>
</html>

　HTMLの読み込みが成功（onSuccess）したら、body全体の文字を赤にするというものです。KMZファイルはこちらです。
　この試みはうまくいきました。

　他にも外部HTMLの読み込み方には方法があると思いますが、また今度試してみたいと思います。
投稿者 Takashi.U 時刻: 2:43 午後 0 コメント

木曜日, 9月 24, 2009

バルーン内でjQueryを使ってみる　その３

　前回の続きです。

　要するに、ここ数回にわたるJavaScript関連の記事で書きたかったことは『JavaScriptを使用するときは、ネットワークリンクを使うと嬉しい場合がありそう』ということです。嬉しい場合がありそうという次元ではなく、使わなければならない場合があり得ます。
　例えば、次のようなコードでXMLを読み込んで表示するとします。（ブラウザ上での確認用にHTMLをアップしています。ちなみに、確認するブラウザはGoogleChromeがオススメです。FirefoxやIEではバルーンでの挙動と異なることがあります。）

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" language="javascript">
google.load("jquery", "1.3.2");
 
google.setOnLoadCallback(function() {
  $("#ballon_location").click(function() {
   $.get("http://cubic-sight.net/kura/blog/090924/hello.xml", function(xml){
   $("#BallonLocation").append("<p>" + $(xml).find("Hello").text() + "</p>");
  });
  });
 }); 

</script>
<title>無題 1</title>
</head>
<body>
<input id="ballon_location" type="button" value="Loacation" />
<div id="BallonLocation"></div>
</body>
</html>

　まずは、こちらのKMZファイルを開いてください。上記のコードと同じHTMLですが、動かないはずです。
　次に先ほどのKMZファイルを読み込むネットワークリンクKMZを開いてください。こちらはきちんと動くと思います。

　cubic-sight.net上にあるXMLファイルを読み込んで、表示するという単純なものです。別ファイルになっているXMLを読み込むというところに留意してください。

　JavaScriptには、いわゆるクロスドメイン問題とか同一出身ポリシー問題とか言われる問題があります。前回も書きましたが、これをクリアする手法はいろいろとあります。
　ただ、それ以前の前提として、GoogleEarthのバルーン上では、ネットワークリンクを使用しなければならない場合があるということに留意しておいた方が良いでしょう。

【09.9.25追記】

　hello.xml

　ではなく、

　http://cubic-sight.net/kura/blog/090924/hello.xml

　と、指定するべきだと思い訂正しました。
投稿者 Takashi.U 時刻: 11:28 午後 2 コメント
ラベル:

水曜日, 9月 23, 2009

Google Earthのインストールパス

　GoogleEarthのインストールパスが変更されているのに気がつきました。

　急にエクセル＋GoogleEarthCOMの使用が出来なくなったという話をいただいて気づいた次第です。ちなみに、5.0から5.1にアップデートした際にこの現象が起きました。
　GoogleEarthCOMを使用するためにはレジストリの再登録が必要でした。Google Earth COM API Documentationに記載のとおりですが、パスの読み替えが必要です。

"C:\Program Files\Google\Google Earth\client\googleearth.exe" /RegServer

　僕の場合はVistaなので、コマンドプロンプトは管理者権限で実行です。
　
投稿者 Takashi.U 時刻: 3:19 午後 0 コメント
ラベル:

月曜日, 9月 21, 2009

バルーン内でjQueryを使ってみる　その２

　前回、windowオブジェクトをいくつか試してみました。今回はしつこくwindow.locationを試してみます。
　
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" language="javascript">
google.load("jquery", "1.3.2");
 
google.setOnLoadCallback(function() {
  $("#ballon_location").click(function() {
  $("#BallonLocation").append(window.location.href);
  });
 }); 

</script>
<title>無題 1</title>
</head>
<body>
<input id="ballon_location" type="button" value="Loacation" />
<div id="BallonLocation"></div>
</body>
</html>

　今回のKMZファイルはこちらです。
　前回はgoogle.setOnLoadCallbackを使わなかったり、buttonにonclickを書いたり、お行儀が悪かった点を修正していますが、やってることはwindow.location.hrefにより現在のURLを確認するというものです。

　結論から言えば動作しました。
　あたり前のことですが、KMZファイルはダウンロードして使用するわけですから、ローカル環境のパスが表示されます。

　JavaScriptでXMLを扱う場合に使用するXMLHttpRequestにはクロスドメインの問題があります。対策の一つに、自サーバーに取得したXMLをそのまま返すCGIなどを置き、そこを経由するというものがあります。ローカル環境にダウンロードしてしまうということであれば、この対策は使えません。

　しかし、先ほどのKMZファイルをネットワークリンクを介して開いてlocation.hrefを確認してみてください。今度はアップロードしてある先のURLが表示されます。
　これなら、先程の対策や、Google AJAX Feed APIの使用も問題無いように思われます。

　というわけで、JavaScriptを使用するときは、ネットワークリンクを使うと嬉しい場合がありそうという確認でした。
投稿者 Takashi.U 時刻: 2:25 午後 0 コメント
ラベル:
登録: 投稿 (Atom)