サンプルのプログラムコード解説

データ解析

技術解説

連載 :

gaedirectによるHTML5連携とマッシュアップ

2012年2月6日(月)

清野克行

gaedirectで実現するクラウドWebサービス（スマートクラウド）

[III]　外部JavaScriptファイル

(J) Google Mapsでのチャット参加者位置情報表示

チャット画面の「Google　Maps参照」ボタンをクリックすると、このプログラムが起動され、チャット参加者の位置情報（図15）および書き込みメッセージ（図16）が表示されます。

リスト8　Google Mapsでのチャット参加者位置情報表示（gmapwin.htm）

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"/> 
<title>Google Maps API</title> 
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps API</title>
<script type="text/javascript" src="/jslib/gaedirect.js"></script>
<script type="text/javascript" src="/jslib/jquery-1.6.1.min.js"></script>
<script type="text/javascript"
  src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
window.resizeTo(630,680);
var kind = "chnlhtml5";                                                     //（1）
var id ="do:lon,do:lat,umsg";                                               //（2）
var query = qinit(kind, id);                                                //（3）
$(function(){
  //開始：地図表示
  var latlng = new google.maps.LatLng(35.688215, 139.8693558);
  var opts = {
    zoom: 7,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("map"), opts);
  //終了：地図表示
  //開始：マーカと吹き出し表示
  //（A）開始：gaedirectを使用してマーカ情報取得
  $.get(gae(), query, function(res){                                        //（4）
    if ((res).substr(0, 3) != "NO:") {
      var en = res.split("<e>");
      for (var i = 0; i < en.length; i++) {                                 //（5）
        var lon = en[i].split("<p>")[1];
        var lat = en[i].split("<p>")[2];
        var msg = en[i].split("<p>")[3];
        setMarker(lat, lon, msg);                                           //（6）
      } 
    } 
  }); 
  //（A）終了：gaedirectを使用してマーカ情報取得 
  function setMarker(lat,lon, msg){
    var markerOpts = { 
              position: new google.maps.LatLng(lat, lon),
              map: map,
              title: "チャット参加者の位置情報"
    };
    var marker = new google.maps.Marker(markerOpts); 
    var infowin = new google.maps.InfoWindow({content: msg}); 
    google.maps.event.addListener(marker, 'click', function(){
      infowin.open(map, marker);
    });
  }
  //終了：マーカと吹き出し表示
});
</script>
</head>
<body>
  <h3>チャット参加者の位置情報をマーカ表示</h3>
  <div id="map" style="width:630px; height:680px"></div>
</body>
</html>

画面ロード時

画面ロード時の初期設定では、（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
発行：秀和システム

著者

清野克行

この著者の記事一覧この著者の
記事一覧

有限会社サイバースペース

慶應義塾大学工学部電気科卒。日本IBM、日本HPなどにおいて、製造装置業を中心とした業務系／基幹業務系システムのSE／マーケティングや、3階層C/Sアーキテクチャによる社内業務システム開発などに携わる。現在は、Ajax/Web 2.0関連のセミナー講師／コンサルティング、書籍執筆などを行っている。情報処理学会会員。http://www.at21.net/

連載バックナンバー

データ解析技術解説