warning: Creating default object from empty value in /var/www/drupal-5.23/modules/taxonomy/taxonomy.module on line 1418.

Google Maps BBS

v\:* { behavior:url(#default#VML); }v\:* { behavior:url(#default#VML); }

Posted on 2005-11-02 by yas |

ブログ (Movable Type) と Google Map を組み合わせる

今回取り組む内容の仕様としては、以下の通りである。

ブログを利用する。
ブログに自分の好きな地域（どこかは予め決めておく）の地図を表示する。
地図にはマーカーが表示される。
マーカーの情報は AJAX (XMLHttpRequest) の非同期通信により、サーバーから XML ファイルを読み込んだものである。
マーカーをクリックすると吹き出しにその地点の情報が出る。
吹き出し中の「続きを読む」リンクをクリックすると、ブログエントリにジャンプする。
マーカーは自分独自のアイコンを使う。

まずは、実例をみてイメージをつかんでもらった方がいいだろう。

拙作のサイト→ yas の部屋「ベイエリアレストランガイド」

このサイトで動作している JavaScript は以下のものである。

//<![CDATA[

var BASE_URL = "https://2kids.net";    
var GMAP_FILE = "/yas/gmap.xml";
var ICON_DEFAULT = "/yas/images/icon_restaurant.png";
var ICON_SHADOW = "/yas/images/icon_restaurant_shadow.png";

var map;
var baseicon;
var xmlHttp;

function init() {

    map      = new GMap(document.getElementById("map")); // 地図オブジェクトを生成
    baseicon = new GIcon();  // アイコンオブジェクトを作成
    xmlHttp  = GXmlHttp.create(); // XmlHttpRequest オブジェクトを作成

    // 地図を設定
    map.addControl(new GLargeMapControl()); // 拡大縮小のボタン
    map.addControl(new GMapTypeControl());  // 地図と衛星の切り替え
    map.centerAndZoom(new GPoint(-122.0745, 37.4170), 7); // ベイエリアを表示
    
    // アイコンを設定
    baseicon.image            = BASE_URL + ICON_DEFAULT;
    baseicon.shadow           = BASE_URL + ICON_SHADOW;
    baseicon.iconSize         = new GSize (16, 16);
    baseicon.shadowSize       = new GSize (34, 20);
    baseicon.iconAnchor       = new GPoint( 8,  8);  // <- (icon_width / 2, icon_height)
    baseicon.infoWindowAnchor = new GPoint( 9,  2);
    baseicon.infoShadowAnchor = new GPoint(18, 25);
    
    // マーカーを設定: XML データを読み込んで表示
    xmlHttp.open("GET", BASE_URL + GMAP_FILE,  true);
    xmlHttp.onreadystatechange = showMarkers;
    xmlHttp.send(null); 
}

function showMarkers() {

    if (xmlHttp.readyState == 4) {

        var xmlDoc = xmlHttp.responseXML;
        var marker = xmlDoc.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < marker.length; i++) {
            addMarker(marker[i]);
        } // End of for
    }
}

function addMarker(xml) {

    var point  = new GPoint(xml.getAttribute("lng"),
                            xml.getAttribute("lat"));
    baseicon.image = BASE_URL + xml.getAttribute("icon");
    var icon   = new GIcon(baseicon);
    var marker = new GMarker(point, icon);
    map.addOverlay(marker);
    var html   = '<div id="InfoWindow">'
               + '<img src="' + baseicon.image + '" alt="icon"> '
               + '<a href="' + xml.getAttribute("site") + '">'
               + xml.getAttribute("name")
               + '</a><br />'
               + xml.getAttribute("street") + '<br />'
               + xml.getAttribute("city")   + '<br />'
               + xml.getAttribute("phone")  + '<br />'
               + '<a href="' + BASE_URL + xml.getAttribute("link") + '">'
               + 'レビューを読む'
               + '</a><br />'
               + '</div>';
    GEvent.addListener(marker, "click", function() {
    //  marker.showMapBlowup(3);  // 吹き出しに地図が表示される模様。
    //  map.centerAndZoom(p, 3);
        marker.openInfoWindowHtml(html);
    });  // click のイベントリスナ登録
}
//]]>

このスクリプトは以下のようなフォーマットの XML データを利用する。

<markers>

    <marker
        lng="-121.9485855102539" lat="37.318707484418496"
        icon="/yas/images/icon_mexican.png"
        name="Chevys Winchester"
        site="https://www.chevys.com/"
        link="/yas/archives/cat60/#a000761"
        street="550 S. Winchester"
        city=" San Jose, CA 95128"
        phone="(408) 241-0158"
    />

<!-- 以下、上と同じデータの繰り返し。必要なだけ増やす。-->

</markers>

さて、それでは仕組みについてひとつひとつ説明していこう。今回の動作確認済み環境としては、以下の通りである (2005/10/28 現在)。

Movable Type 3.2 Release 2 (日本語版)
Firefox 1.0.7 または IE 6.0SP2 または Safari 2.0.1

というわけでここでは Movable Type 3.2 Release 2 (日本語版) と Firefox 1.0.7 を例に取って話を進める。以下は必要な手順である。

アイコンの作成 (Google Map に表示するマーカーのこと)
JavaScript 作成 (Google Map 用)
map.xml の作成 (XMLHttpRequest を使ってマーカーの情報を読み込む)
ブログテンプレートの修正
スタイルシートの設定
ブログエントリの追加

それではまずはアイコンについ説明しよう。

Google Map API では、マーカーと呼ばれるポイントを指し示すアイコンが必要となる。Google が用意したデフォルトのマーカーアイコンはオレンジ色の水玉を逆さにしたような感じのものだが、これは自由にカスタマイズできる。
アイコンの実体は画像ファイルである。画像のフォーマットは、JPEG、GIF、PNG が使えるが、PNG がいいだろう。
なぜなら、アイコンには影を付けられるのだが、この影は、αチャネルを透過にした PNG を使うことになっているからだ (まぁ、どの画像フォーマットを選ぶかは実際は好みの問題だ)。
ちなみにアイコンの影は、オリジナルのアイコンに対して45度の傾きを付けるのが、Google からのガイドラインのようである。実際影をつけるのは結構難しかった。私の場合はオリジナル画像をグレー処理し、その後何度かソフト処理をし、ぼかしをかけた…という感じで、この作業に多くの時間を取ってしまった＾＾；

以下、JavaScript からのアイコン部分生成に関する抜粋だ。要は、GIcon オブジェクトに用意されているいろいろなプロパティを設定してあげれば、自分で作ったアイコンが表示されるのである。

var BASE_URL = "https://2kids.net";
var baseicon;

function init() {

    baseicon = new GIcon();  // アイコンオブジェクトを作成

    // アイコンを設定
    baseicon.image            = BASE_URL + "/yas/images/icon_restaurant.png";
    baseicon.shadow           = BASE_URL + "/yas/images/icon_restaurant_shadow.png";
    baseicon.iconSize         = new GSize (16, 16);
    baseicon.shadowSize       = new GSize (34, 20);
    baseicon.iconAnchor       = new GPoint( 8,  8);  // <- (icon_width / 2, icon_height)
    baseicon.infoWindowAnchor = new GPoint( 9,  2);
    baseicon.infoShadowAnchor = new GPoint(18, 25);
    baseicon.image = BASE_URL + xml.getAttribute("icon");
}

function addMarker(xml) {

    var point  = new GPoint(xml.getAttribute("lng"),
                            xml.getAttribute("lat"));
    baseicon.image = BASE_URL + xml.getAttribute("icon");
    var icon   = new GIcon(baseicon);
    var marker = new GMarker(point, icon);
    map.addOverlay(marker);
}
//]]>

次に肝心の JavaScript であるが、Movable Type のテンプレート作成機能を利用する。Movable Type で、環境設定 / テンプレート－モジュールと選択していき、「モジュールを新規作成」をクリックして以下のように作成（設定）し、保存する。



テンプレート名: gmap.js (←ここは実は何でもいい)
このテンプレートにリンクするファイル: gmap.js (別のテンプレートから使用するファイル名)
モジュールの内容: 冒頭の JavaScript

JavaScript を保存したら、

map.xml

というファイル名で、XML ファイルを保存する。以下に XML ファイルの内容 (属性) を説明しよう (属性は独自に設定したものです)。

<markers>

    <marker
        lng="-121.9485855102539" lat="37.318707484418496" <font color="blue">← ここは、</font><b><font color="orange">経度</font><font color="blue">・</font><font color="red">緯度</font></b><font color="blue">の順で入る</font>
        icon="/yas/images/icon_mexican.png" <font color="blue">← アイコン画像へのルートからのパス + ファイル名 (https:// は、JavaScript 中の最初に記述済み)</font>
        name="Chevys Winchester" <font color="blue">← 吹き出し中の一番上に表示される、マーカーの名前</font>
        site="https://www.chevys.com/" <font color="blue">← マーカーの名前をクリックすると表示されるウェブページ</font>
        link="/yas/archives/cat60/#a000761" <font color="blue">← Movable Type のブログのエントリへのリンク※</font>
        street="550 S. Winchester" <font color="blue">← マーカーの住所 (サンプルはアメリカなので番地が先)</font>
        city=" San Jose, CA 95128" <font color="blue">← マーカーの住所 (サンプルはアメリカなので市町村がが後)</font>
        phone="(408) 241-0158" <font color="blue">← 電話番号</font>
    />

<!-- 以下、上と同じデータの繰り返し。必要なだけ増やす。-->

</markers>

※…「Movable Type のブログのエントリへのリンク」とあるのは、個別ブログについている ID である。個々のブログエントリのソースを見ればわかると思う。これでスクリプト & XML データの準備が整うので、テンプレートを修正する。環境設定 / テンプレートで、

メインページ
アーカイブ → カテゴリーアーカイブ
アーカイブ → 日付アーカイブ
アーカイブ → 個別エントリーアーカイブ

のすべてのテンプレートにおいて、

<head>
…
<script src="https://maps.google.com/maps?file=api&v=1&key=ここにあなたが取得した Google Map API のキーが入る" type="text/javascript"</script>

<script src="/ルートからブログへのパス/gmap.js" type="text/javascript"></script>
</head>

<body onLoad="init()">
…
</body>

のように修正する。onLoad="..." で最初に呼ばれる関数を指定しないと、IE ではうまく動作しなかった。また、吹き出し中に表示されるリンクをクリックすることによって、個別のブログエントリにジャンプできるように、テンプレートを少し修正する。ブログエントリのタイトルを表示する箇所を見つけ、以下のように... タグをはさむ。

<a name="a<$MTEntryID pad="1"$>">
<h3 id="a<$MTEntryID pad="1"$>"><$MTEntryTitle$></h3>
</a>

また、個別エントリから地図に戻れるように、以下の部分の最後に「地図に戻る」リンクを追加する。「#a000835」とある部分は、個別ブログエントリで、Google Map を表示したいブログエントリの ID である。

<p class="posted">
投稿者 <$MTEntryAuthor$> : <a href="<$MTEntryPermalink valid_html="1"$>"><$MTEntryDate format="%Y/%m/%d"$></a>
<MTEntryIfAllowComments>
| <a href="<$MTEntryPermalink archive_type="Individual"$>#comments">コメント (<$MTEntryCommentCount$>)</a>
</MTEntryIfAllowComments>
<MTEntryIfAllowPings>
| <a href="<$MTEntryPermalink archive_type="Individual"$>#trackbacks">トラックバック</a>
</MTEntryIfAllowPings>
| <a href="#a000835">地図に戻る</a>
</p>

続いてスタイルシートも設定してしまおう。Movable Type のテンプレート→スタイルシートで、スタイルシートの最後に以下の内容を追加する。

#map {

    font-family: "Trebuchet MS", Trebuchet, verdana, arial, sans-serif;
    text-align: center;
}

#InfoWindow {

    font-family: "Trebuchet MS", Trebuchet, verdana, arial, sans-serif;
}

こんな具合である。#map と #infoWindow を自由にいじってみて欲しい (#InfoWindow は実は JavaScript 中にそのように設定できるように記述してある)。最後はブログエントリの追加である。ブログの本文に、以下の1行を追加すれば Google Map が表示される。width と height は地図の大きさなので自由に設定して欲しい。

<div id="map" style="width: 500px; height: 400px;"></div>

今回取り組む内容の仕様としては、以下の通りである。

ブログを利用する。
ブログに自分の好きな地域（どこかは予め決めておく）の地図を表示する。
地図にはマーカーが表示される。
マーカーの情報は AJAX (XMLHttpRequest) の非同期通信により、サーバーから XML ファイルを読み込んだものである。
マーカーをクリックすると吹き出しにその地点の情報が出る。
吹き出し中の「続きを読む」リンクをクリックすると、ブログエントリにジャンプする。
マーカーは自分独自のアイコンを使う。

まずは、実例をみてイメージをつかんでもらった方がいいだろう。

拙作のサイト→ yas の部屋「ベイエリアレストランガイド」

このサイトで動作している JavaScript は以下のものである。

//<![CDATA[

var BASE_URL = "https://2kids.net";    
var GMAP_FILE = "/yas/gmap.xml";
var ICON_DEFAULT = "/yas/images/icon_restaurant.png";
var ICON_SHADOW = "/yas/images/icon_restaurant_shadow.png";

var map;
var baseicon;
var xmlHttp;

function init() {

    map      = new GMap(document.getElementById("map")); // 地図オブジェクトを生成
    baseicon = new GIcon();  // アイコンオブジェクトを作成
    xmlHttp  = GXmlHttp.create(); // XmlHttpRequest オブジェクトを作成

    // 地図を設定
    map.addControl(new GLargeMapControl()); // 拡大縮小のボタン
    map.addControl(new GMapTypeControl());  // 地図と衛星の切り替え
    map.centerAndZoom(new GPoint(-122.0745, 37.4170), 7); // ベイエリアを表示
    
    // アイコンを設定
    baseicon.image            = BASE_URL + ICON_DEFAULT;
    baseicon.shadow           = BASE_URL + ICON_SHADOW;
    baseicon.iconSize         = new GSize (16, 16);
    baseicon.shadowSize       = new GSize (34, 20);
    baseicon.iconAnchor       = new GPoint( 8,  8);  // <- (icon_width / 2, icon_height)
    baseicon.infoWindowAnchor = new GPoint( 9,  2);
    baseicon.infoShadowAnchor = new GPoint(18, 25);
    
    // マーカーを設定: XML データを読み込んで表示
    xmlHttp.open("GET", BASE_URL + GMAP_FILE,  true);
    xmlHttp.onreadystatechange = showMarkers;
    xmlHttp.send(null); 
}

function showMarkers() {

    if (xmlHttp.readyState == 4) {

        var xmlDoc = xmlHttp.responseXML;
        var marker = xmlDoc.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < marker.length; i++) {
            addMarker(marker[i]);
        } // End of for
    }
}

function addMarker(xml) {

    var point  = new GPoint(xml.getAttribute("lng"),
                            xml.getAttribute("lat"));
    baseicon.image = BASE_URL + xml.getAttribute("icon");
    var icon   = new GIcon(baseicon);
    var marker = new GMarker(point, icon);
    map.addOverlay(marker);
    var html   = '<div id="InfoWindow">'
               + '<img src="' + baseicon.image + '" alt="icon"> '
               + '<a href="' + xml.getAttribute("site") + '">'
               + xml.getAttribute("name")
               + '</a><br />'
               + xml.getAttribute("street") + '<br />'
               + xml.getAttribute("city")   + '<br />'
               + xml.getAttribute("phone")  + '<br />'
               + '<a href="' + BASE_URL + xml.getAttribute("link") + '">'
               + 'レビューを読む'
               + '</a><br />'
               + '</div>';
    GEvent.addListener(marker, "click", function() {
    //  marker.showMapBlowup(3);  // 吹き出しに地図が表示される模様。
    //  map.centerAndZoom(p, 3);
        marker.openInfoWindowHtml(html);
    });  // click のイベントリスナ登録
}
//]]>

このスクリプトは以下のようなフォーマットの XML データを利用する。

<markers>

    <marker
        lng="-121.9485855102539" lat="37.318707484418496"
        icon="/yas/images/icon_mexican.png"
        name="Chevys Winchester"
        site="https://www.chevys.com/"
        link="/yas/archives/cat60/#a000761"
        street="550 S. Winchester"
        city=" San Jose, CA 95128"
        phone="(408) 241-0158"
    />

<!-- 以下、上と同じデータの繰り返し。必要なだけ増やす。-->

</markers>

さて、それでは仕組みについてひとつひとつ説明していこう。今回の動作確認済み環境としては、以下の通りである (2005/10/28 現在)。

Movable Type 3.2 Release 2 (日本語版)
Firefox 1.0.7 または IE 6.0SP2 または Safari 2.0.1

というわけでここでは Movable Type 3.2 Release 2 (日本語版) と Firefox 1.0.7 を例に取って話を進める。以下は必要な手順である。

アイコンの作成 (Google Map に表示するマーカーのこと)
JavaScript 作成 (Google Map 用)
map.xml の作成 (XMLHttpRequest を使ってマーカーの情報を読み込む)
ブログテンプレートの修正
スタイルシートの設定
ブログエントリの追加

それではまずはアイコンについ説明しよう。

Google Map API では、マーカーと呼ばれるポイントを指し示すアイコンが必要となる。Google が用意したデフォルトのマーカーアイコンはオレンジ色の水玉を逆さにしたような感じのものだが、これは自由にカスタマイズできる。
アイコンの実体は画像ファイルである。画像のフォーマットは、JPEG、GIF、PNG が使えるが、PNG がいいだろう。
なぜなら、アイコンには影を付けられるのだが、この影は、αチャネルを透過にした PNG を使うことになっているからだ (まぁ、どの画像フォーマットを選ぶかは実際は好みの問題だ)。
ちなみにアイコンの影は、オリジナルのアイコンに対して45度の傾きを付けるのが、Google からのガイドラインのようである。実際影をつけるのは結構難しかった。私の場合はオリジナル画像をグレー処理し、その後何度かソフト処理をし、ぼかしをかけた…という感じで、この作業に多くの時間を取ってしまった＾＾；

var BASE_URL = "https://2kids.net";
var baseicon;

function init() {

    baseicon = new GIcon();  // アイコンオブジェクトを作成

    // アイコンを設定
    baseicon.image            = BASE_URL + "/yas/images/icon_restaurant.png";
    baseicon.shadow           = BASE_URL + "/yas/images/icon_restaurant_shadow.png";
    baseicon.iconSize         = new GSize (16, 16);
    baseicon.shadowSize       = new GSize (34, 20);
    baseicon.iconAnchor       = new GPoint( 8,  8);  // <- (icon_width / 2, icon_height)
    baseicon.infoWindowAnchor = new GPoint( 9,  2);
    baseicon.infoShadowAnchor = new GPoint(18, 25);
    baseicon.image = BASE_URL + xml.getAttribute("icon");
}

function addMarker(xml) {

    var point  = new GPoint(xml.getAttribute("lng"),
                            xml.getAttribute("lat"));
    baseicon.image = BASE_URL + xml.getAttribute("icon");
    var icon   = new GIcon(baseicon);
    var marker = new GMarker(point, icon);
    map.addOverlay(marker);
}
//]]>



テンプレート名: gmap.js (←ここは実は何でもいい)
このテンプレートにリンクするファイル: gmap.js (別のテンプレートから使用するファイル名)
モジュールの内容: 冒頭の JavaScript

JavaScript を保存したら、

map.xml

というファイル名で、XML ファイルを保存する。以下に XML ファイルの内容 (属性) を説明しよう (属性は独自に設定したものです)。

<markers>

    <marker
        lng="-121.9485855102539" lat="37.318707484418496" <font color="blue">← ここは、</font><b><font color="orange">経度</font><font color="blue">・</font><font color="red">緯度</font></b><font color="blue">の順で入る</font>
        icon="/yas/images/icon_mexican.png" <font color="blue">← アイコン画像へのルートからのパス + ファイル名 (https:// は、JavaScript 中の最初に記述済み)</font>
        name="Chevys Winchester" <font color="blue">← 吹き出し中の一番上に表示される、マーカーの名前</font>
        site="https://www.chevys.com/" <font color="blue">← マーカーの名前をクリックすると表示されるウェブページ</font>
        link="/yas/archives/cat60/#a000761" <font color="blue">← Movable Type のブログのエントリへのリンク※</font>
        street="550 S. Winchester" <font color="blue">← マーカーの住所 (サンプルはアメリカなので番地が先)</font>
        city=" San Jose, CA 95128" <font color="blue">← マーカーの住所 (サンプルはアメリカなので市町村がが後)</font>
        phone="(408) 241-0158" <font color="blue">← 電話番号</font>
    />

<!-- 以下、上と同じデータの繰り返し。必要なだけ増やす。-->

</markers>

メインページ
アーカイブ → カテゴリーアーカイブ
アーカイブ → 日付アーカイブ
アーカイブ → 個別エントリーアーカイブ

のすべてのテンプレートにおいて、

<head>
…
<script src="https://maps.google.com/maps?file=api&v=1&key=ここにあなたが取得した Google Map API のキーが入る" type="text/javascript"</script>

<script src="/ルートからブログへのパス/gmap.js" type="text/javascript"></script>
</head>

<body onLoad="init()">
…
</body>

<a name="a<$MTEntryID pad="1"$>">
<h3 id="a<$MTEntryID pad="1"$>"><$MTEntryTitle$></h3>
</a>

<p class="posted">
投稿者 <$MTEntryAuthor$> : <a href="<$MTEntryPermalink valid_html="1"$>"><$MTEntryDate format="%Y/%m/%d"$></a>
<MTEntryIfAllowComments>
| <a href="<$MTEntryPermalink archive_type="Individual"$>#comments">コメント (<$MTEntryCommentCount$>)</a>
</MTEntryIfAllowComments>
<MTEntryIfAllowPings>
| <a href="<$MTEntryPermalink archive_type="Individual"$>#trackbacks">トラックバック</a>
</MTEntryIfAllowPings>
| <a href="#a000835">地図に戻る</a>
</p>

続いてスタイルシートも設定してしまおう。Movable Type のテンプレート→スタイルシートで、スタイルシートの最後に以下の内容を追加する。

#map {

    font-family: "Trebuchet MS", Trebuchet, verdana, arial, sans-serif;
    text-align: center;
}

#InfoWindow {

    font-family: "Trebuchet MS", Trebuchet, verdana, arial, sans-serif;
}

<div id="map" style="width: 500px; height: 400px;"></div>

Posted on 2005-10-28 by yas |

Google Maps テスト

クリックすると経度・緯度が表示されます。クリックすると経度・緯度が表示されます。

Posted on 2005-10-27 by yas |

AJAX でサーバにあるファイルの内容を表示したい。

Ajax （エイジャックス）とは、Asynchronous JavaScript + XML の略で、JavaScript からブラウザのバックグラウンドで HTTP リクエストの通信をして、非同期に通信が行えるようにする技術のこと。Gmail や Google Maps が良い例。
この技術のキモは XMLHttpReqeuest という JavaScript から呼べるオブジェクトである。IE や Firefox には実は XMLHttpRequest というオブジェクトが実装されており、これを使うことによって表示されているページの裏で、＊ユーザーの操作とは非同期に＊ HTTP 通信を行うことができる。
HTTP 通信自体はその性質上、決して非同期になることはない。ブラウザ（クライアント）からリクエストしたらサーバからレスポンスが返ってくるだけである。ただし、そのレスポンスはいつ返ってくるかわからないから、通常ブラウザは結果が返ってくるまで待つ必要があるが、XMLHttpRequest.onreadystatechange = foo などのように、コールバック関数（メソッド）を指定しておけばサーバからのレスポンスが返ってきた時に呼び出される関数を指定できる。
セキュリティ上の理由により JavaScript (XMLHttpRequest) からアクセスできる URL は HTML のダウンロード元と同じドメインに限定される（Java のアプレットで言うサンドボックスモデルと同じ意味）。
多くのサイトで XMLHttpRequest を使った POST の方法は解説されているため、ここではシンプルに HTTP プロトコルの GET メソッドの使い方を提示してみた。
Note: Mac OS X Safari (Safari/412.5)　では、SSL / TLS の https:// で XMLHttpRequest.open できないことが判明 (2005/09/06 追記)

<html><head>

<script type="text/javascript">
<!--
// ^^^^^ 単に <script> と書いても良い。

var xmlhttp;

// 特に IE に対応するために、XMLHttpRequest オブジェクトをブラウザによって作成
function createXmlHttp() {

    try {
        return new ActiveXObject ("Msxml2.XMLHTTP");
    } catch(e) {
        try {
            return new ActiveXObject ("Microsoft.XMLHTTP");
        } catch(e1) {
            try {
                return new XMLHttpRequest();
            } catch(e2) {
                return null;
            }
        }
    }
}

// メイン部分。HTML <body> タグの onload のところで関連付けられている。
// よって、ブラウザが HTML を読み込むと同時にこの関数（メソッド）が実行される。
function getContent() {

    if ((xmlhttp = createXmlHttp()) == null) {
        window.alert("XMLHTTP Initialization Failed.");
    } else {
        xmlhttp.abort();    // 連続して HTTP 通信する場合は必ず呼び出す。
    }

    // 1. handleHttpEvent() のように指定すると動かないので注意。
    xmlhttp.onreadystatechange = handleHttpEvent;

    // 2. 第3パラメータの true / false は、true = 同期, false = 非同期
    // なお、セキュリティ上の理由により open で指定できる URL は
    // HTML のダウンロード元と同じドメインに限定される。
    // （Java のアプレットで言うサンドボックスモデルと同じ意味）
    xmlhttp.open('GET', 'https://perltips.twinkle.cc/ajax_result.txt', true);

    // 3. ここはオプショナル。
    xmlhttp.setRequestHeader("Content-Type", "text/html");

    // 4. GET のとき: send(null) / POST のとき: send(a variable)
    xmlhttp.send(null);
}

// コールバック関数。
// 上の xmlhttp.onreadystatechange = handleHttpEvent; で関連付けられている。
function handleHttpEvent() {

    // readyState の番号の意味は以下の通り。
    // 0 = uninitialized
    // 1 = loading
    // 2 = loaded
    // 3 = interactive
    // 4 = complete
    if ( xmlhttp.readyState == 1) {
        // "data" とは、<body> の中の、<span id="data"> の部分
        // よって、この部分に "Loading..." が表示される（表示は一瞬だけとなる）
        document.getElementById("data").innerHTML = "Loading...";
    }
    else if ( xmlhttp.readyState == 2) {
        // "data" とは、<body> の中の、<span id="data"> の部分
        // よって、この部分に "Loaded." が表示される（表示は一瞬だけとなる）
        document.getElementById("data").innerHTML = "Loaded";
    }
    else if (xmlhttp.readyState == 4
         &&  xmlhttp.status == 200) {    // 200 は、HTTP プロトコルにおける正常終了
        document.getElementById("data").innerHTML = xmlhttp.responseText;
    }
}

// -->
</script>
</head>

<body onload="getContent()">
<div class=content>
<p><span id="data"></span></p>
</div>
</body>
</html>

サーバ側のファイル (ajax_result.txt) は以下の通り。

This is the server-side HTML.

参考になるサイト・リンク

Ajax （エイジャックス）とは、Asynchronous JavaScript + XML の略で、JavaScript からブラウザのバックグラウンドで HTTP リクエストの通信をして、非同期に通信が行えるようにする技術のこと。Gmail や Google Maps が良い例。
この技術のキモは XMLHttpReqeuest という JavaScript から呼べるオブジェクトである。IE や Firefox には実は XMLHttpRequest というオブジェクトが実装されており、これを使うことによって表示されているページの裏で、＊ユーザーの操作とは非同期に＊ HTTP 通信を行うことができる。
HTTP 通信自体はその性質上、決して非同期になることはない。ブラウザ（クライアント）からリクエストしたらサーバからレスポンスが返ってくるだけである。ただし、そのレスポンスはいつ返ってくるかわからないから、通常ブラウザは結果が返ってくるまで待つ必要があるが、XMLHttpRequest.onreadystatechange = foo などのように、コールバック関数（メソッド）を指定しておけばサーバからのレスポンスが返ってきた時に呼び出される関数を指定できる。
セキュリティ上の理由により JavaScript (XMLHttpRequest) からアクセスできる URL は HTML のダウンロード元と同じドメインに限定される（Java のアプレットで言うサンドボックスモデルと同じ意味）。
多くのサイトで XMLHttpRequest を使った POST の方法は解説されているため、ここではシンプルに HTTP プロトコルの GET メソッドの使い方を提示してみた。
Note: Mac OS X Safari (Safari/412.5)　では、SSL / TLS の https:// で XMLHttpRequest.open できないことが判明 (2005/09/06 追記)

<html><head>

<script type="text/javascript">
<!--
// ^^^^^ 単に <script> と書いても良い。

var xmlhttp;

// 特に IE に対応するために、XMLHttpRequest オブジェクトをブラウザによって作成
function createXmlHttp() {

    try {
        return new ActiveXObject ("Msxml2.XMLHTTP");
    } catch(e) {
        try {
            return new ActiveXObject ("Microsoft.XMLHTTP");
        } catch(e1) {
            try {
                return new XMLHttpRequest();
            } catch(e2) {
                return null;
            }
        }
    }
}

// メイン部分。HTML <body> タグの onload のところで関連付けられている。
// よって、ブラウザが HTML を読み込むと同時にこの関数（メソッド）が実行される。
function getContent() {

    if ((xmlhttp = createXmlHttp()) == null) {
        window.alert("XMLHTTP Initialization Failed.");
    } else {
        xmlhttp.abort();    // 連続して HTTP 通信する場合は必ず呼び出す。
    }

    // 1. handleHttpEvent() のように指定すると動かないので注意。
    xmlhttp.onreadystatechange = handleHttpEvent;

    // 2. 第3パラメータの true / false は、true = 同期, false = 非同期
    // なお、セキュリティ上の理由により open で指定できる URL は
    // HTML のダウンロード元と同じドメインに限定される。
    // （Java のアプレットで言うサンドボックスモデルと同じ意味）
    xmlhttp.open('GET', 'https://perltips.twinkle.cc/ajax_result.txt', true);

    // 3. ここはオプショナル。
    xmlhttp.setRequestHeader("Content-Type", "text/html");

    // 4. GET のとき: send(null) / POST のとき: send(a variable)
    xmlhttp.send(null);
}

// コールバック関数。
// 上の xmlhttp.onreadystatechange = handleHttpEvent; で関連付けられている。
function handleHttpEvent() {

    // readyState の番号の意味は以下の通り。
    // 0 = uninitialized
    // 1 = loading
    // 2 = loaded
    // 3 = interactive
    // 4 = complete
    if ( xmlhttp.readyState == 1) {
        // "data" とは、<body> の中の、<span id="data"> の部分
        // よって、この部分に "Loading..." が表示される（表示は一瞬だけとなる）
        document.getElementById("data").innerHTML = "Loading...";
    }
    else if ( xmlhttp.readyState == 2) {
        // "data" とは、<body> の中の、<span id="data"> の部分
        // よって、この部分に "Loaded." が表示される（表示は一瞬だけとなる）
        document.getElementById("data").innerHTML = "Loaded";
    }
    else if (xmlhttp.readyState == 4
         &&  xmlhttp.status == 200) {    // 200 は、HTTP プロトコルにおける正常終了
        document.getElementById("data").innerHTML = xmlhttp.responseText;
    }
}

// -->
</script>
</head>

<body onload="getContent()">
<div class=content>
<p><span id="data"></span></p>
</div>
</body>
</html>

サーバ側のファイル (ajax_result.txt) は以下の通り。

This is the server-side HTML.

参考になるサイト・リンク

Posted on 2005-08-16 by yas |

AJAX

Google Maps BBS

ブログ (Movable Type) と Google Map を組み合わせる

Google Maps テスト

AJAX でサーバにあるファイルの内容を表示したい。

本日の上位：

総合の上位：

最近の参照：