JavaScriptでMetro スタイル アプリ開発
Windows 8からの新しい種類のアプリ
JavaScriptでBing Mapsを利用する場合は、
![図1 Windows 8 Metro スタイル アプリの開発 図1 Windows 8 Metro スタイル アプリの開発](/assets/images/dev/serial/01/bing-sdk/0031/thumb/TH800_001.png)
前回の繰り返しになりますが、
開発環境の準備
最初に開発環境を準備しましょう。開発は、
無償で提供されているVisual Studio Expressをインストールする場合は、
Bing Maps SDK
以前に紹介したBing Maps AJAX Controlでは、
Bing Maps SDK for metro style appsのダウンロードおよびインストールは、
![図2 Bing Maps SDKのダウンロードとインストール 図2 Bing Maps SDKのダウンロードとインストール](/assets/images/dev/serial/01/bing-sdk/0030/thumb/TH800_002.png)
インストールを行うと、
Bing Maps Keyの取得
Bing Maps SDKの地図コントロールを使うには、
![図3 アカウントの登録 図3 アカウントの登録](/assets/images/dev/serial/01/bing-sdk/0030/thumb/TH800_003.png)
Bing Maps Keyは、
![図4 Bing Maps Keyの作成 図4 Bing Maps Keyの作成](/assets/images/dev/serial/01/bing-sdk/0030/thumb/TH800_004.png)
Metro スタイル アプリ プロジェクトの作成
それでは、
今回は、
![図5 プロジェクトの新規作成 図5 プロジェクトの新規作成](/assets/images/dev/serial/01/bing-sdk/0031/thumb/TH800_005.png)
Bing Maps SDKの参照
プロジェクトでBing Maps SDKを利用するため、
![図6 Bing Maps for JavaScriptの参照 図6 Bing Maps for JavaScriptの参照](/assets/images/dev/serial/01/bing-sdk/0031/thumb/TH800_006.png)
以上で、
地図の表示
ソリューションエクスプローラーを見てください
![図7 ソリューションエクスプローラー 図7 ソリューションエクスプローラー](/assets/images/dev/serial/01/bing-sdk/0031/thumb/TH400_007.png)
default.
default.htmlの編集
さて、
<script src="ms-appx:///Bing.Maps.JavaScript//js/veapicore.js"></script>
src属性を見てください。Bing Maps for JavaScriptライブラリは、
Bing Maps AJAX Controlのすべての機能を利用するには、
<script src="ms-appx:///Bing.Maps.JavaScript//js/veapimodules.js"></script>
続いて、
<body>
<div id="map" style="position: relative; width: 100%; height: 100%;"></div>
</body>
ここまでの内容は図8のようになります。
![図8 default.htmlの編集 図8 default.htmlの編集](/assets/images/dev/serial/01/bing-sdk/0031/thumb/TH800_008.png)
地図コントロールの初期処理
次はJavaScriptの記述です。地図コントロールを利用するために必要な初期処理を行います。必要な作業とコードは、
var map;
Microsoft.Maps.loadModule('Microsoft.Maps.Map', { callback: initMap });
function initMap() {
var options =
{
credentials: 'BingMapsKey',
center: new Microsoft.Maps.Location(35.71, 139.8107),
zoom: 8
};
map = new Microsoft.Maps.Map(document.getElementById('map'), options);
}
Mapオブジェクトの生成は、
3つのコードを、
(function () {
"use strict";
// (省略)
})();
コードは、
地図コントロールの初期処理を行うタイミングは、
今はまだコントロールを追加していませんが、
args.setPromise(WinJS.UI.processAll().done(
function () {
Microsoft.Maps.loadModule('Microsoft.Maps.Map', { callback: initMap });
}));
そして、
(function () {
"use strict";
var app = WinJS.Application;
var activation = Windows.ApplicationModel.Activation;
WinJS.strictProcessing();
var map; // (追加)
app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
} else {
}
// (以下のように編集)
args.setPromise(WinJS.UI.processAll().done(
function () {
Microsoft.Maps.loadModule('Microsoft.Maps.Map', { callback: initMap });
}));
}
};
app.oncheckpoint = function (args) {
};
// (以下の関数を追加)
function initMap() {
try {
var options =
{
credentials: 'BingMapsKey', // 取得した Bing Maps Key を設定すること
center: new Microsoft.Maps.Location(35.71, 139.8107),
zoom: 8
};
map = new Microsoft.Maps.Map(document.getElementById('map'), options);
}
catch (e) {
var md = new Windows.UI.Popups.MessageDialog(e.message);
md.showAsync();
}
}
app.start();
})();
initMap関数内のBingMapsKeyは、
アプリの実行
ようやく、
![図9 デバッグの実行 図9 デバッグの実行](/assets/images/dev/serial/01/bing-sdk/0030/thumb/TH400_009.png)
アプリが起動して、
ここで、
![図10 シミュレーターでのデバッグ 図10 シミュレーターでのデバッグ](/assets/images/dev/serial/01/bing-sdk/0031/thumb/TH800_010.png)
アプリの地図を見るとわかるように、
var options =
{
credentials: 'BingMapsKey', // 取得した Bing Maps Key を設定すること
center: new Microsoft.Maps.Location(35.71, 139.8107),
zoom: 8,
showDashboard: false // ダッシュボードを非表示
};
位置情報を使った地図の操作
次は、
プッシュピンの追加など、
アプリ マニフェストの編集
Metro スタイル アプリで位置情報を取得するには、
アプリ マニフェストは、
位置情報を取得する場合、
![図11 アプリ マニフェストの編集 図11 アプリ マニフェストの編集](/assets/images/dev/serial/01/bing-sdk/0031/thumb/TH800_011r.png)
位置情報の取得
Metro スタイル アプリでは、
Metro スタイル アプリでは、
さて、
var loc;
function displayPosition() {
if (loc == null) {
loc = new Windows.Devices.Geolocation.Geolocator();
}
if (loc != null) {
// 位置情報の取得
loc.getGeopositionAsync().then(
// 取得が成功した場合に呼ばれる関数
function (pos) {
// 位置情報から経緯度を参照し Location オブジェクトを生成
var center = new Microsoft.Maps.Location(pos.coordinate.latitude, pos.coordinate.longitude);
// PushPin オブジェクトの生成
var pin = new Microsoft.Maps.Pushpin(center);
// 地図上からオブジェクトを削除してから、新しいプッシュピンを追加
map.entities.clear();
map.entities.push(pin);
// 地図をプッシュピンの位置まで移動
map.setView({
center: center,
zoom: 15
});
},
// 例外が発生した場合に呼ばれる関数
function (e) {
var md = new Windows.UI.Popups.MessageDialog(e.message);
md.showAsync();
});
}
}
initMap関数内の最後にdisplayPositionを呼び出すコードを追記して動作を確認してください。
displayPosition();
はじめてアプリを実行すると、
![図12 位置情報の取得の確認ダイアログ 図12 位置情報の取得の確認ダイアログ](/assets/images/dev/serial/01/bing-sdk/0030/thumb/TH800_013.png)
コード中のthenメソッドに着目してください。これはMetro スタイル アプリの非同期プログラミングで、
W3C Geolocation APIの利用
位置情報の取得にWindowsランタイムのAPIではなく、
var nav;
function displayPosition() {
if (nav == null) {
nav = window.navigator;
}
var geoloc = nav.geolocation;
if (geoloc != null) {
geoloc.getCurrentPosition(
function (pos) {
var center = new Microsoft.Maps.Location(pos.coords.latitude, pos.coords.longitude);
var pin = new Microsoft.Maps.Pushpin(center);
map.entities.clear();
map.entities.push(pin);
map.setView({
center: center,
zoom: 15
});
},
function (e) {
var md = new Windows.UI.Popups.MessageDialog(e.message);
md.showAsync();
}
);
}
}
このようにJavaScriptによるMetro スタイル アプリでは、
アプリ バーの追加
Metro スタイル アプリでは、
図13 Windows 8の地図アプリのアプリ バー
![図13 Windows 8の地図アプリのアプリ
バー 図13 Windows 8の地図アプリのアプリ
バー](/assets/images/dev/serial/01/bing-sdk/0030/thumb/TH800_014.jpg)
アプリ バーは、
作成済みのdisplayPosition関数を呼び出して、
それでは、
default.
<div data-win-control="WinJS.UI.AppBar" data-win-options="">
<button data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{id:'cmdMe',label:'現在地',icon:'home',section:'global',tooltip:''}">
</button>
</div>
アプリ バーと、
![図14 アプリ バーのボタン 図14 アプリ バーのボタン](/assets/images/dev/serial/01/bing-sdk/0031/thumb/TH400_014.png)
このように、
イベントの登録
次は、
イベントの登録も、
args.setPromise(WinJS.UI.processAll().done(
function () {
var button = document.getElementById("cmdMe");
button.addEventListener("click", displayPosition, false);
Microsoft.Maps.loadModule('Microsoft.Maps.Map', { callback: initMap });
}));
ボタンのclickイベントハンドラーとして、
ボタンのアイコンの変更
アプリ バーのボタンには、
また、
![図15 文字コード表 図15 文字コード表](/assets/images/dev/serial/01/bing-sdk/0030/thumb/TH800_017.png)
文字コード表で、
アプリのライフサイクル
Metro スタイル アプリのライフサイクルについて紹介します。Metro スタイル アプリでは、
![図16 アプリのライフサイクル 図16 アプリのライフサイクル](/assets/images/dev/serial/01/bing-sdk/0031/thumb/TH800_016.png)
中断状態はOSによって行われます。アプリが切り替わった時や、
OSはいつでも、
終了するとアプリはメモリからアンロードされ、
このため、
アプリ状態の保存
JavaScript用Windowsライブラリには、
セッションデータを保存するタイミングは、
app.oncheckpoint = function (args) {
WinJS.Application.sessionState.center = map.getCenter();
WinJS.Application.sessionState.zoom = map.getZoom();
WinJS.Application.sessionState.mapTypeId = map.getMapTypeId();
};
中断時の処理は以上です。
アプリ状態の復元
次は、
復元方法も簡単です。自動的に終了した状態から再アクティブ化した場合、
// セッションデータからアプリ状態の復元
var state = WinJS.Application.sessionState;
var center = state.center;
var mapTypeId = state.mapTypeId;
var zoom = state.zoom;
var options =
{
credentials: 'BingMapsKey', // 取得した Bing Maps Key を設定すること
center: center || new Microsoft.Maps.Location(35.71, 139.8107),
mapTypeId: mapTypeId || Microsoft.Maps.MapTypeId.road,
zoom: zoom || 8,
showDashboard: false
};
map = new Microsoft.Maps.Map(document.getElementById('map'), options);
これで、
アプリの中断から終了、
![図17 中断とシャットダウン 図17 中断とシャットダウン](/assets/images/dev/serial/01/bing-sdk/0031/thumb/TH400_019.png)
アプリの状態が復元されるか確認してみてください。
おわりに
今回は、
今回はあまり登場しませんでしたが、
ただし、