CodeZine(コードジン)

特集ページ一覧

gaedirectを利用したAndroidからの緊急連絡とサーバプッシュ表示の実装

gaedirectを使用した応用例

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2011/09/16 14:00

目次

スマートフォン画面への対応

 ということで、最初にスマートフォンへの画面レイアウト対応を簡単に見てみます。図3や図4、図5左の画面はスマートフォン用にレイアウトされた画面になっていますが、レイアウト指定は(S1)のメタタグ指定と(S2)のスタイル指定で行われています。

 (S1)では画面の横幅サイズをスマートフォン実機と同じになるように指定し、(S2)のスタイルシート指定では、テキストボックスやボタンのサイズを大きくしています。

Channel API

 次にChannel APIですが、この部分はあまりご存じない方も多いと思うので、少し詳しく見ていきます。

 Channel APIを使用する場合は、次の外部JS指定を最初に行います。

<script type="text/javascript" src="/_ah/channel/jsapi"></script>

 処理コードでは、GoogleのレファレンスにはChannel APIのコードは<body>と</body>の間に記述するように書かれていますが、この記述スタイルはコードの見通しが良くないため、サンプルではheadのスクリプトタグ内に記述しています。このような記述スタイルでも動作上は問題ありません。ただし、すべてのChannel API処理はjQueryの$(function(){} 内に記述し、タグ・スクリプト記述のロード完了後に実行されるようにします。

(1)Channel APIの初期化処理

 (C1)ではChannel APIを行うための初期化処理を行っています。

clientId = ""+Math.floor(Math.random()*1000000);

 Channel APIを行うWebクライアントは、必ずChannelクライアントを識別するためのユニークなID(clientID)を持つ必要があります。このサンプルではMath.randomで発生した乱数を文字列に変換してIDとしていますが、ユニークであれば何でも構いません。

token = getToken(clientId);

 getTokenはgaedirectの関数ですが、この関数では引数で指定されたclientIDをクラウドサーバに送信し、clientIDから生成されるtokenをサーバから受信します。

channel = goog.appengine.Channel(token);

 goog.appengine.Channelはtokenを引数にとってChannelサーバにリクエストを送信し、

createChannel()

で返される内容からchannelオブジェクトを生成します。またChannelサーバ側ではキャッシュ(memcache)を使用して処理スピードの向上を計っています。

socket = channel.open():

 このWebクライアントに対するchannelをオープンし、socketオブジェクトを返します。socketの取得によってクライアント側の初期化処理は完了します。

 socketオブジェクトにはChannelサーバからのコールバックレスポンスによって処理を行うメソッドが定義されており、次のような処理内容になっています。

socket.onopen       //(C2)

 socketでのメッセージ受信ができるようになるとコールバック関数が起動されます。

socket.onmessage    //(C3)

 socketがChannelサーバからのサーバプッシュメッセージを受信するとコールバック関数が起動されます。

 コールバック関数の引数には受信したJSONフォーマットのメッセージがセットされており、サンプルでは$.parseJSONでJavaScriptオブジェクトに変換して表示処理を行っています。

socket.onerror      //(C4)

 socketでエラーが発生した時に呼び出されます。

socket.onclose      //(C5)

 socketがクローズされたとき呼び出されます。ソケットがクローズされるとコールバックメッセージを受信することはできません。Channeオブジェクトのopenメソッドを再実行することによって新しいsocketを生成することができます。

サーバプッシュメッセージの送信

 サーバプッシュメッセージの送信は「データ送信」ボタン(ID値="send")のクリックによって行われます(1)

 channelサーバとの接続と、Geolocationが有効であることを確認後(2)、getCurrentPositionメソッドでスマートフォンの現在位置を取得して(3)、氏名、携帯番号と緯度、経度情報を変数にセットし(4)Channelサーバへの送信準備を行います。サーバへ送信するデータフォーマットは、前回紹介したgaedirectからデータストアへ書き込む場合と同様になっていますが、ここでは、kind名、クライアントID(clientId)およびプロパティ名の並び(id)とその値(val)を連想配列(query)にセットします(5)。ここで、kindで指定される値は送信されたメッセージをデータストアに書き込むときのkind名になっていますが、この値を"none"にした場合には、データストアへの書き込みは行われず、サーバプッシュ処理のみが行われます

postsyn : Channel API用のgaedirect関数

 Channel APIでサーバプッシュ用のメッセージをクライアントから送信する場合は、コールバック関数を引数に持つような、非同期通信関数は使用できません。従ってここではpostsyn関数でサーバへの非同期送信を行っています(6)。postsynはgaedirectで用意されているPOST/同期型の関数ですが、Channel API通信の場合は、第1引数にcapi()、第2引数に用意した連想配列(query)のみ指定すればよく、大変シンプルで送信処理に対するサーバからのレスポンスは関数の戻り値として返され、ここではresにセットされます。

 ただし、送信したメッセージのサーバプッシュでのレスポンスは、前に紹介したsocket.onmessageのコールバック関数が起動されることによって処理されます。

Geolocation

 Geolocationの処理についてはChannel APIのところでも簡単に見てきましたが、ここでGeolocationの処理を中心に確認してみます。

gears_init.js

 AndroidでGPS情報を扱えるようにするためには「gears_init.js」を外部JSとしてインクルードする必要があります。

<script type="text/javascript" src="/jslib/gears_init.js"></script>

 gaedirectにはgears_init.jsが外部JSとしてセットされているのでダウンロードの必要はありませんが、他の用途で使用する場合はGoogleサイトのGears APIからダウンロードしてください(注)。

 プログラム処理では、navigator.geolocationでスマートフォンのGeolocation対応を確認・処理(S3)後、getCurrentPositionメソッドで現在位置を取得します(S4)。getCurrentPositionの引数は匿名関数になっていますが、第1引数の匿名関数は引数に位置情報を保持するオブジェクトがセットされており(S5)、このオブジェクト(pos)からpos.coords.latitudeで緯度を(S6)、pos.coords.longitudeで経度の値を(S7)取得しています。

注)

 Gears APIのページはDeprecatedになっています。GoogleではGearsで提供されるすべての機能をHTML5のようなWeb標準に移行する作業を行っているようですが、記事執筆時点ではまだ完成に至っていないようです。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:サーバ側コーディング不要のGoogle App Engine開発ツール「gaedirect」

著者プロフィール

  • 清野 克行(セイノ カツユキ)

    慶應義塾大学工学部電子物理専攻卒。日本IBM、日本HPで、製造装置業を中心とした業務系/基幹業務系システムのSE/マーケティングや、分散アプリケーションによる社内業務システム開発などに携わる。現在は、クラウドやAjax関連の/ソフト開発/書籍執筆/セミナー講師/コンサルティング、などを行っている。情...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5