[III] 外部JavaScriptファイル
(J) Google Mapsでのチャット参加者位置情報表示
チャット画面の「Google Maps参照」ボタンをクリックすると、このプログラムが起動され、チャット参加者の位置情報（図15）および書き込みメッセージ（図16）が表示されます。
リスト8 Google Mapsでのチャット参加者位置情報表示（gmapwin.htm）
04 | <meta charset="utf-8"/> |
05 | <title>Google Maps API</title> |
07 | <meta http-equiv="content-type" content="text/html; charset=utf-8"/> |
08 | <title>Google Maps API</title> |
09 | <script type="text/javascript" src="/jslib/gaedirect.js"></script> |
10 | <script type="text/javascript" src="/jslib/jquery-1.6.1.min.js"></script> |
11 | <script type="text/javascript" |
13 | <script type="text/javascript"> |
14 | window.resizeTo(630,680); |
15 | var kind = "chnlhtml5"; //（1） |
16 | var id ="do:lon,do:lat,umsg"; //（2） |
17 | var query = qinit(kind, id); //（3） |
20 | var latlng = new google.maps.LatLng(35.688215, 139.8693558); |
24 | mapTypeId: google.maps.MapTypeId.ROADMAP |
26 | var map = new google.maps.Map(document.getElementById("map"), opts); |
29 | //（A）開始：gaedirectを使用してマーカ情報取得 |
30 | $.get(gae(), query, function(res){ //（4） |
31 | if ((res).substr(0, 3) != "NO:") { |
32 | var en = res.split("<e>"); |
33 | for (var i = 0; i < en.length; i++) { //（5） |
34 | var lon = en[i].split("<p>")[1]; |
35 | var lat = en[i].split("<p>")[2]; |
36 | var msg = en[i].split("<p>")[3]; |
37 | setMarker(lat, lon, msg); //（6） |
41 | //（A）終了：gaedirectを使用してマーカ情報取得 |
42 | function setMarker(lat,lon, msg){ |
44 | position: new google.maps.LatLng(lat, lon), |
48 | var marker = new google.maps.Marker(markerOpts); |
49 | var infowin = new google.maps.InfoWindow({content: msg}); |
50 | google.maps.event.addListener(marker, 'click', function(){ |
51 | infowin.open(map, marker); |
59 | <h3>チャット参加者の位置情報をマーカ表示</h3> |
60 | <div id="map" style="width:630px; height:680px"></div> |
画面ロード時
画面ロード時の初期設定では、（1）でkind名、（2）でプロパティ並びを指定し（3）で条件検索のための初期設定を行っています。
・kind名はgaedirectのChannel APIを使用する場合は"chnlhtml5"になります。
・プロパティ名の指定では、経度（lon）、緯度（lat）は、doでDouble（倍精度浮動小数点数）を指定します。
この2つのを指定してqinitを実行すればgaedirect検索の準備は完了します。ここでは条件指定が行っていなので全件参照になります。
画面ロード完了時
jQueryの「$(function())内の処理は画面ロード完了後に行われますが、この中の（A）の部分でgaedirectを使用した、マーカ情報の取得が行われています。
（4）でgaedirectを使用したBigtableアクセスが行われていますが、この場合は全件参照になります。参照成功時には、レスポンスで返されたエンティティの数だけ（5）のfor文で繰り返して、緯度、経度、メッセージを取得し、（6）のsetMarker関数の呼び出しを行っています。
[setMarker関数の処理
・マーカ表示
setMarkerではマーカ表示とマウスイベントでの吹き出し表示処理を行っていますが、maekerOptsでは、
・position でマーカの表示位置
・map でマーカを表示するマップオブジェクト
を指定しています。
・title は必須ではありませんが、マーカにマウスオーバしたときに表示されるテキストを指定します。
・吹き出し表示
InfoWindowクラス
マーカの表示はInfoWindowクラスのインスタンスを生成して行います。InfoWindowのコンストラクタは、InfoWindowOptionsを引数として取りますが、ここでは直接JSONデータを引数として指定し、contentで吹き出しに表示されるテキストを指定しています。Contentの内容は文字だけでなくHTMLで記述することもできます。
addListener
実際にマーカを表示し閉じるのは、ベントリスナを使って行います。イベントリスナではイベントが発生したときに処理を行いますが、 google.maps.event（名前空間）の addListener() を使って登録します。
addListenerでは、第一引数にイベントを検知するオブジェクト（ここではmarker）、第二引数にイベント名（ここではmouseoverとmouseout）を指定し、第一引数指定のオブジェクトで第二引数指定のイベントが検知されたときに、第三引数指定の匿名関数が呼び出されます。匿名関数内ではinfowin.openで引数指定した地図（map）上の、マーカ（marker）位置で吹き出しが表示され。infowin.openで吹き出し表示が閉じます。
第2回では、第1回に引き続きgaedirectで実現するクラウドWebサービスの例として多機能チャットのプログラミングについて解説してきました。繰り返しになりますが、GAEなどのクラウドコンピューティングは、驚異的なスケーリング機能と堅牢性をもつ大変優れたシステム環境で、かつ無料から始める低価格で、システム管理の手間を省くことができます。
問題点を敢えて言えば、サーバ側でのプログラム開発はNoSQL（Bigtable）を扱うことなどからそれほど簡単ではないという事情がありました。しかしgaedirectを使用すればその問題も解決することができます。サーバコーディング不要のgaedirectによってクラウドをWebサービス化し、GAEのBigtableアクセスの他、Channel APIを使用したサーバプッシュ送信や画像・動画ファイルのアップロードなどもJavaScriptでのプログラム記述だけによって行うことが出来るようになります。
さらにGoogle MapsとのマッシュアップやHTML5との組み合せなど、これまでにないリッチなUI機能・表現を持つWebアプリケーションを、JavaScriptという1つだけの言語に集中して開発することが出来るようになります。
「クラウドWebサービスを使用して、リッチなUI表現を持ちながら、緊急時にもサーバダウンを発生させず、アクセス数の急激な増加などにも問題なく対応できるサイトが1つでも増えればと願っています。
この記事のもとになった書籍
クラウドWebサービス入門
gaedirectによるHTML5連携とマッシュアップ
クラウド（Google App Engine）の機能をWebサービス化するgaedirectの機能を中心に、HTML5の最新機能との連携、既存Webサービスとのマッシュアップなど、広範囲にわたり解説。Webサービス化で、JavaScriptなどのクライアント技術のみで堅牢性の高いWebサイトをスピーディに立ち上げることができる。gaedirectと掲載サンプルを収録したCD-ROM付き。
清野克行 著
価格：3,360円 (本体 3,200円＋税)
発売日：2012年1月31日発売
ISBN：978-4-7980-3233-7
発行：秀和システム
