前回までの連載で、Chrome Web Storeの概要やWeb Appsの作成方法と公開までをご紹介しました。今回より、いよいよ実際のWebアプリの作成を通して、各種APIの詳細を解説していきたいと思います。
Webアプリの概要
今回作成するWebアプリは、地図上で目的地を設定し、目的地と現在地との距離を計算する「Odometer(距離計)」という単純なものを考えてみます。また、目的地までの距離が近づくとデスクトップにポップアップを表示して残りの距離を通知する機能なども付け加えていきます。Packaged Appsとして作成し、現在地の取得などにはGeolocation API、デスクトップへの通知にはNotification APIを利用します。地図データとのマッピングにはGoogle Mapsを利用しますが、本連載では解説しませんので詳細についてはこちらを参照してください。
また、本稿で作成するWebアプリは実際のWebアプリとしては作り込みが甘い部分もありますが、解説の都合上ご了承ください。
Webアプリの構成
Webアプリを構成するファイルを以下のように配置します。
Packaged Appとして作成するため“app”フィールドの“launch”には、“local_path”を設定します。今回は、Webアプリのトップページとしてmain.htmlを指定しています。また、Geolocation APIとNotification APIを利用するため、“permissions”に“geolocation”と“notifications”を指定しています。これによって、各APIを利用する際に許可を求める通知が表示されていたものが暗黙的に許可されます。
Geolocation API
Geolocation APIは、緯度や経度といった位置情報を取得するAPIです。window.navigator.geocation以下のメソッドを使って取得することができます。Webアプリの実際のソースコードを例に解説します。
位置情報の取得
まずは、Geolocation APIを使って最初に現在地を取得して表示します。現在地を取得している部分は、以下の通りです。
現在の位置情報を取得する場合は、navigator.geolocation.getCurrentPositionメソッドを使用します。第1引数に取得成功時のコールバック、第2引数に取得失敗時のコールバック、第3引数にオプションを指定します。成功時のコールバックメソッドの引数に与えられるイベントオブジェクトから位置情報を取り出します。ここでは成功時のコールバックにinitメソッドを指定しています。
initメソッド内では、createMapメソッドでGoogle Mapsを使って地図を作成しています。HTMLに位置情報を表示しているのはshowCurrentPositionメソッドになります。ここでは、イベントオブジェクト内の各プロパティをHTMLにセットしているだけです。取得可能な位置情報は緯度、経度といった基本的な情報に加え、精度や移動方向、移動速度なども取得することができます。詳細は下記表を参照してください。注意点として、navigator.geolocation.getCurrentPositionメソッドでは移動している状態を認識していないため、移動方向、移動速度を取得することができません。これらを取得するには、navigator.geolocation.watchPositionメソッドを使って継続的に位置情報を取得する必要があります。navigator.geolocation.watchPositionメソッドについては後述します。
表1 位置情報のイベントオブジェクト
プロパティ |
説明 |
coords.latitude |
緯度 |
coords.longitude |
経度 |
coords.accuracy |
精度(誤差をメートル単位で表示) |
coords.altitude |
高度(GPS高度) ※標高ではないことに注意 |
coords.altitudeAccuracy |
高度の精度(誤差をメートル単位で表示) |
coords.heading |
移動方向(真北を0度とした右回りの角度) |
coords.spped |
移動速度(m/s) |
timestamp |
取得日時(数値) ※本来の仕様上はDate型を返す |
目的地の設定と距離の算出
目的地の設定は、地図上をクリックすることによって行います。Google Mapsのクリックイベントから緯度と経度を取得することができるので、現在地情報の表示と同様にshowDestinationPositionメソッドで目的地の緯度、経度を表示します。また、同時にshowDistanceメソッドで目的地までの距離を算出して表示します。
目的地までの距離の算出については、厳密な計算方法は非常に複雑なため、ここでは緯度1度あたり111km、経度1度あたり91kmの概算で計算しています。そのため、日本以外の場所では誤差が大きくなります。
位置情報の自動更新
次に、現在地が移動などによって更新された場合に、位置情報と目的地までの距離を再計算するようにしたいと思います。位置情報の自動更新にはnavigator.geolocation.watchPositionメソッドを使用します。使い方はnavigator.geolocation.getCurrentPositionメソッドと同様ですが、位置情報が更新されるたびに第1引数のコールバックが呼び出されます。自動更新を停止するには、navigator.geolocation.clearWatchメソッドを使用します。引数には、navigator.geolocation.watchPositionメソッドの戻り値である識別IDを指定します。
実際の動きですが、「自動更新開始」ボタンをクリックするとnavigator.geolocation.watchPositionメソッドを呼び出し、コールバックの中で現在地情報と目的地までの距離を更新しています。また、watchIdという変数に識別IDを保持しておき、次回の「自動更新停止」ボタンをクリックした際に、navigator.geolocation.clearWathメソッドで自動更新を停止しています。
ここまでで、最初に現在地を表示し、目的地を設定して目的地までの距離を表示すること、移動することによってリアルタイムに内容が更新されるところまでが実現できました。
表2 Geolocation API (navigator.geolocation)
メソッド |
説明 |
getCurrentPosition(onSuccessCallback, onErrorCallback, options) |
位置情報を取得する |
watchPosition(onSuccessCallback, onErrorCallback, options) |
位置情報を継続的に取得する。戻り値として、自動更新停止のための識別IDを返す |
clearWatch(watchId) |
位置情報の自動更新を停止する |
表3 位置情報取得のオプション
オプション |
説明 |
enableHighAccuracy |
高精度を要求する(真偽値) |
timeout |
タイムアウト(ミリ秒) |
maximumAge |
キャッシュ有効期限(ミリ秒) |
Notification API
Odometerに新たな機能として、目的地までの距離が近づくとNotification APIを使ってデスクトップにポップアップを表示し、残りの距離を通知する機能を実装します。
Notification APIは、デスクトップ上に通知用のポップアップを表示するAPIです。window.webkitNotifications以下のメソッドを利用します。
デスクトップへの通知
まずは、汎用的に利用できるように、notifiyメソッドを定義し、navigator.geolocation.wachPositionメソッドで登録したコールバック内からnotifiyメソッド呼び出すように変更します。
webkitNotifications.checkPermissionメソッドは、Notification APIの許可や未許可、拒否などのステータスを返すメソッドですが、マニフェストファイルの“permissions”で“notifications”を指定しているため、ここでは必ず許可されていることになります。
もし、未許可や拒否などのステータスの場合、webkitNotifications.requestPermissionメソッドを使って許可を求めるようにしています。ただし、webkitNotifications.requestPermissionメソッドは、ボタンなどのクリックイベント内でしか動作しませんので注意が必要です。
デスクトップへの通知用のポップアップは、webkitNotifications.createNotificationメソッドを使用して作成します。第1引数にアイコンのURL、第2引数にタイトル、第3引数に本文を指定します。作成したNotifiationオブジェクトのshowメソッドで実際に通知を行い、cancelメソッドで通知をキャンセルします。ここでは、5秒後にポップアップが閉じるようにsetTimeoutメソッドを使ってcancelメソッドを使用しています。
そのほかにも、HTMLを通知用のポップアップに表示するwebkitNotifications.createHTMLNotificationメソッドもあります。通知する情報量などが多い場合には、こちらを利用してください。
位置情報が更新されるたびに通知されるのは冗長ですので、1km未満の場合は200mごと、10km未満の場合は1kmごと、それ以外の場合は10kmごとに通知されるようにしています。また、一度通知を行った距離では、再度通知しないようnotifiedという変数に通知済みの距離を保持しています。
これで、位置情報の取得からデスクトップへの通知までが完成しました。
表4 Notification API(webkitNotifications)
メソッド |
説明 |
checkPermission() |
デスクトップへの通知に対する許可、未許可、拒否などのステータスを取得する |
requestPermission() |
デスクトップへの通知の許可を求める |
createNotification(iconURL, title, message) |
通知用のポップアップを作成する |
createHTMLNotification(htmlURL) |
通知用のポップアップをHTMLから作成する |
表5 Notificationオブジェクト
メソッド |
説明 |
show() |
デスクトップへ通知する |
cancel() |
デスクトップへの通知をキャンセルする |
onclick |
通知ポップアップのクリックイベントのコールバック |
onclose |
通知ポップアップの閉じるイベントのコールバック |
ondisplay |
通知ポップアップの表示イベントのコールバック
※ドラフト仕様では、onshow |
onerror |
エラー時のコールバック |
まとめ
今回は、OdometerというWebアプリの作成を通して、Geolocation API、Notification APIの詳細を解説しました。次回は、このOdometerにさらに機能を追加していく形で各種APIを解説していきたいと思います。本稿で作成したOdometerは、下記リンクからダウンロードできますので宜しければ参考にしてください。
また、本連載で取り上げているChrome Web Store/Appsは、「Chrome API Developers JP」という開発者コミュニティでも議論されています。こちらも覗いてみてはいかがでしょうか。
参考