地図を表示する
これで地図を表示するデータの準備が整いました。最後に、地図を表示するためのプログラミングを行います。
まず、app.onactivatedに代入される関数の中に、Mapモジュールを読み込むためのプログラムを書きます
app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
～中略～
args.setPromise(WinJS.UI.processAll());
// 連載 第6回 地図の表示
Microsoft.Maps.loadModule('Microsoft.Maps.Map', { callback: showMap });
～中略～
}
}
次に地図を表示するためのプログラムshowMapを作成します。
// 連載 第6回 地図の表示
function showMap() {
// 1. 緯度経度を取得する
var map_location = area.value.split(",");
// 2. オプション情報を定義する
var options =
{
credentials: '*****ここに取得したBing Maps Keyを入力する*****',
center: new Microsoft.Maps.Location(map_location[0], map_location[1]),
zoom: 4
};
// 3. 地図を表示する
var map = new Microsoft.Maps.Map(document.getElementById('map'), options);
}
では、プログラムの説明に入ります。
1.緯度経度を取得する
旅行先の選択するリストボックスareaに登録した緯度と経度の情報を、変数map_locationに代入します。カンマ区切りでデータを登録しますので、次の値が格納されます。
| 値 | 説明 |
|---|---|
| map_location[0] | 経度 |
| map_location[1] | 緯度 |
2.オプション情報を定義する
地図を表示するために必要な情報を定義していきます。
| 変数名 | 説明 |
|---|---|
| credentials | 取得したBing Maps Keyを設定する |
| center | 地図の中心の経度と緯度を指定する。ここではmap_location[0]とmap_location[1] を指定 |
| zoom | 地図の縮尺を指定する（0～20の値） |
3.地図を表示する
default.htmlの中で定義したid属性がmapのdiv要素に地図を表示させます。
これで地図を表示するプログラムが作成できました。最後に旅行先を選択するリストボックスareaの値が変更されたときに、地図の表示場所を変更するために次のようにプログラムを修正します。
app.onactivated = function (args) {
～中略～
// 連載 第5回 ListViewコントロール表示
showInfo();
var list1 = document.getElementById("area");
list1.addEventListener("change", showInfo, false);
// 連載 第6回 地図の変更
list1.addEventListener("change", showMap, false);
}
};
これでプログラミングは終わりましたので、［F5］キーを押してデバッグを行います。次のように、旅行先の地図が表示されます。
今回の旅行カタログでは、地図を表示するWeb APIを使いましたが、地図以外にもホテルのシーズン料金や空室情報などの情報を提供するWeb APIなど公開されています。本連載で紹介した簡単なサンプルを、これらのWeb APIをつかってアプリケーションを自由にカスタマイズしてみてください。
2013年10月18日にWindows 8.1がリリースされました。スタートメニューなどの画面が変わったほか、Windowsストアアプリの開発においても、Window 8とWindows 8.1では異なる部分が多く出てきます。
しかしながら、Windows 8.1で動作する新しいVisual Studio 2013 Expressには、旧来のWindows 8版のストアアプリをWindows 8.1で動作させるようにストアアプリを作り変える「再ターゲット」という機能が備わっています。
本連載で作成したアプリは、Windows 8で動作するストアアプリをVisual Studio 2012 Expressで開発することを前提に記載していますが、この再ターゲットの機能を使えば、次の手順で作成したサンプルアプリをWindows 8.1の環境で動作させることができます。
まず、Windows 8.1の環境にインストールしたVisual Studio 2013 ExpressでサンプルアプリのTravelSample.slnを開きます。
すると再ターゲットを促すダイアログが表示されますので、［OK］ボタンをクリックします。
次に、ソリューションエクスプローラでプロジェクトを選択し、右クリックします。右クリックすると［Windows 8.1に再ターゲット］というメニューが表示されるので、これを選択します。
確認ダイアログが表示されるので、［OK］ボタンをクリックします。
問題なく再ターゲットができたら、ソリューションエクスプローラで以下の表示になっていることを確認します。
おわりに
本連載では、Webサイトは作ったことがあるけどアプリケーション開発って難しいそう……と感じられている方に、HTML5／JavaScriptを使ったWindowsストアアプリの作成方法をご紹介しました。WindowsストアアプリをHTML5／JavaScriptを使って作成すると、Webサイトを作成するような手軽さでアプリケーションができます。
さらにWindowsストアアプリで本格的なゲームや多くのデバイスを活用するアプリケーションを作成したいときは、C#またはC++とXAMLを使って作成できます。このように、アプリケーションの機能や用途によって開発言語を自由に選択できることは、Windowsストアアプリの強みだと思っています。
Windowsストアアプリの代表的なコントロールである、ListViewコントロールを使ってさまざまな情報を自由に操作できるようになれば、Windowsストアアプリ開発の初心者からは卒業です。これからも、たくさんの便利で楽しいWindowsストアアプリを作ってくださいね。
