3.2 PC用画面のサンプルコード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css"> <!--（1）：ここから-->
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map { height: 70% }
</style> <!--（1）：ここまで-->
<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="/jslib/gears_init.js"></script>
<script type="text/javascript" src='/_ah/channel/jsapi'></script>
<script src="http://maps.google.com/maps/api/js?v=3&sensor=false" type="text/javascript" charset="UTF-8"></script>
<title>Channel API テスト</title>
<script type="text/javascript">
var token = "";
var clientId = "";
var socket = "";
var initialized = false;
var connected = false;
var requestToken = false;
$(function(){
if(!navigator.geolocation){
navigator.geolocation = google.gears.factory.create('beta.geolocation');
}
clientId = ""+Math.floor(Math.random()*1000000);
token = getToken(clientId);
channel = new goog.appengine.Channel(token);
initialized = true;
socket = channel.open();
$("#status").text("初期化が完了しました。serverからの応答待ちです。");
$("#send").click(function(){
if(!connected){
$("#status").text("接続未完了でデータを送信できません");
return;
}
navigator.geolocation.getCurrentPosition(
function (pos) {
var name = $("#name").val();
var tel = $("#tel").val();
var lat = pos.coords.latitude;
var lon = pos.coords.longitude;
var id = "name,tel,lat,lon";
var val = name+"<p>"+tel+"<p>"+lat+"<p>"+lon;
var query = {};
query["clientId"] = clientId;
query["id"] = id;
query["val"] = val;
var res = postsyn(capi(), query);
},
function () {
alert("位置情報の取得に失敗しました");
},{
enableHighAccuracy: true
}
);
});
$("#cinit").click(function(){
cInit(clientId);
});
$("#close").click(function(){
if(socket == "" || initialized == false || connected == false){
$("#status").text("まだ接続されていません");
return;
}
cClose(clientId);
socket.close();
socket = "";
initialized = false;
connected = false;
token = "";
clientId = "";
$("#status").text("接続を終了しました");
});
socket.onopen = function(){
connected = true;
$("#status").text("接続が開始されました。データ受信できます。");
}
socket.onmessage = function(msg){
var res = $.parseJSON(msg.data);
var name = res.name;
var tel = res.tel;
var lon = res.lon;
var lat = res.lat;
var date = res.date;
$("#name").val(name);
$("#tel").val(tel);
$("#lat").text(lat);
$("#lon").text(lon);
$("#date").text(date);
var msg = "姓名："+name+" "+"携帯TEL："+tel;
$("#msg").val("");
var latlng = new google.maps.LatLng(lat, lon); //（2）：ここから
var opts = {
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: latlng
};
map = new google.maps.Map(document.getElementById("map"), opts); //（2）：ここまで
var markerOpts = { //（3）：ここから
position: new google.maps.LatLng(lat, lon),
map: map,
title: "marker test"
};
var marker = new google.maps.Marker(markerOpts); //（3）：ここまで／（3－1）
var infowin = new google.maps.InfoWindow({content: msg}); //（4）：ここから／（4－1）
google.maps.event.addListener(marker, 'mouseover', function(){
infowin.open(map, marker);
});
google.maps.event.addListener(marker, 'mouseout', function(){
infowin.close();
}); //（4）：ここまで
}
socket.onerror = function(err){
$("#status").text("Serverでエラー発生。 内容：" + err.description + " エラー：" + err.code);
}
socket.onclose = function(){
$("#status").text("接続が正常に終了しました。");
connected = false;
initialized = false;
}
});
</script>
</head>
<body>
<h2>Channel API&Geolocationサンプル</h2>
<div id="status"></div><br/>
<div>
<input type="button" id="send" value="データ送信" />
<input type="button" id="cinit" value=" 初期化 " />
<input type="button" id="close" value="接続終了" />
</div>
<p>名前と携帯TEL番号を入力して「データ送信」をクリック</p>
<dov>姓名:<input type="text" id="name"> 携帯TEL:<input type="text" id="tel"></div>
<div>緯度:<span id="lat"></span> 経度:<span id="lon"></span> 日時:<span id="date"></span></div>
<p id="map"></p>
</body>
</html>
PC用の場合もスマートフォン用の場合と基本的な処理の流れは同じですが、スマートフォン画面への対応処理を行っていない点と、特にGoogle Maps APIでの地図情報表示を行っている点が違っていますが、ここでは地図情報表示の部分について見ていきます。
（1） styleタグでのcss設定
地図表示の前に（1）でスタイル指定を行っています。これは必須ではないですが、このような指定によって画面横幅に合わせて地図が表示されるようになり、スマートフォンでの表示の場合も違和感がなくなります。
（2） 地図表示
ここではGoogle Mapsでの地図表示の初期設定と地図表示を行っています。Geolocationで取得した緯度、経度の値を「center」で地図の中心に指定し、「zoom」で地図のズームを12に指定しています。 最小値0は世界地図全体を表し、値が大きくなるほどズームが大きくなります。「mapTypeId」は地図の種類を表しますが、ROADMAPは一般に使用されている市街地図を表示します。他に、衛星写真などもありますが、表1の指定で表示されます。
| HYBRID | 衛星写真/航空写真と道路地図のハイブリッド |
| ROADMAP | 市街地図 |
| SATELLITE | 衛星写真や航空写真 |
| TERRAIN | 地形や樹木などの地形的特徴を持つ地図 |
（3）マーカ表示
（3）はマーカ表示の設定です。 マーカオプション（markerOpts）では、マーカの表示位置（positon）をGeolocationで取得した緯度、経度に指定し、mapでは表示するタグノードのID値を指定しますが、この値もmapであるため、map:map となっています。titleはマーカも下に表示されるテキスト文字です。
最後に（3－1）の実行でマーカが表示されます
（4）マウスオーバで吹き出し表示
吹き出し表示用のオブジェクトは（4－1）で作成され、引数で指定されるcontentの値（msg）が吹き出し内に表示されるメッセージになります。あとは、イベントリスナの指定でマウスオーバでの吹き出し表示とマウスアウトでの非表示を行います。
今回は、gaedirectでのchannel APIを使用した応用サンプルを紹介しました。Channel APIはGAEのサービス機能の中でも比較的新しく公開されたモジュールで、機能的にも高度な部類に属すると思います。
しかし、このような高度な機能もgaedirectを使用すればJavaScriptの記述だけで使用できるようになり、またHTML5との組み合わせなどによって面白いアプリケーション、実用面でも有効なアプリケーションも作れるはずです。今回はそのサンプルの一つとして「スマートフォンからの緊急連絡とサーバプッシュ表示」を紹介してみました。前にも触れていますがこのサンプルはスマートフォン画面用は
PC画面用は
にアクセスして動作を確認することができます。
また、感想その他ありましたら、ハッシュタグ #gaedirect でツィートして貰えればと思います。
