PR

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

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連携とマッシュアップ

クラウド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/

連載バックナンバー

データ解析技術解説

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

2012/2/6
gaedirectで実現するクラウドWebサービス(スマートクラウド)
データ解析技術解説

クラウドWebサービスの概要とサンプル画面操作

2012/1/31
gaedirectで実現するクラウドWebサービス(スマートクラウド)

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

他にもこの記事が読まれています

サンプルのプログラムコード解説 | Think IT(シンクイット)

Think IT(シンクイット)

サイトに予期せぬエラーが起こりました。しばらくたってから再度お試しください。