使ってみよう! Bing API/SDK

第31回 はじめよう!Metro スタイル アプリ開発──使ってみよう!Bing Maps for JavaScript

この記事を読むのに必要な時間:およそ 8.5 分

JavaScriptでMetro スタイル アプリ開発

Windows 8からの新しい種類のアプリ「Metro スタイル アプリ」は,JavaScriptで作れます。前回は,Visual BasicとC#でMetro スタイル アプリの地図アプリ開発について紹介しましたが,今回はJavaScriptでBing Mapsと連携したMetro スタイル アプリを開発してみましょう。

JavaScriptでBing Mapsを利用する場合は,この連載で何回も登場した,Bing Maps AJAX Controlを利用します。Metro スタイル アプリの場合も,同様の機能が利用できますが,少し勝手が異なる部分もあります。それらも踏まえつつ,JavaScriptでのMetro スタイル アプリ開発を紹介していきます図1)⁠

図1 Windows 8 Metro スタイル アプリの開発

図1 Windows 8 Metro スタイル アプリの開発

前回の繰り返しになりますが,Metro スタイル アプリの地図アプリ開発の紹介となりますので,Metro スタイル アプリの開発全般については,デベロッパー センターのMetro スタイル アプリ開発も参照してください。

開発環境の準備

最初に開発環境を準備しましょう。開発は,Windows 8 Release PreviewVisual Studio 2012 RCで行います。

無償で提供されているVisual Studio Expressをインストールする場合は,Metro スタイル アプリ開発用の,Visual Studio Express 2012 RC for Windows 8を選択します。早期リリースバージョンであるVisual Studio 2012 RCは,すべてのエディションが無償で使えます。

Bing Maps SDK

以前に紹介したBing Maps AJAX Controlでは,JavaScriptのライブラリをWebページからscriptタグで参照して利用していましたが,Metro スタイル アプリを開発する場合,Bing Maps SDKをあらかじめインストールします。現在,Bing Maps SDK for Metro style apps (RP)が提供されています。

Bing Maps SDK for metro style appsのダウンロードおよびインストールは,Visual Studioの「ツール」メニューの「拡張機能と更新」から行えます図2)⁠Webサイトからダウンロードしてインストールもできます。

図2 Bing Maps SDKのダウンロードとインストール

図2 Bing Maps SDKのダウンロードとインストール

インストールを行うと,Visual Studioを再起動します。

Bing Maps Keyの取得

Bing Maps SDKの地図コントロールを使うには,これまでの連載と同じくBing Maps Keyが必要です。Bing Maps Account CenterにサインインしてBing Maps Keyを取得します。はじめて使う場合は,アカウントの登録が必要です図3)⁠また,Metro スタイル アプリの利用規約Terms of Userは,これまでのBing Maps APIの利用規約とは別に用意されていますので注意してください。

図3 アカウントの登録

図3 アカウントの登録

Bing Maps Keyは,メニューの「Create or view keys」から新しく作れます図4)⁠Application typeは,⁠Metro style app (BETA)」を選びます。Submitボタンをクリックすると,新しくキーが生成され同じページにキーのリストが表示されます。

図4 Bing Maps Keyの作成

図4 Bing Maps Keyの作成

Metro スタイル アプリ プロジェクトの作成

それでは,Visual StudioでMetro スタイル アプリのプロジェクトを新規作成しましょう。Metro スタイル アプリは,C++,C#,Visual Basic,JavaScriptのどれでも開発できます。Bing Maps SDKを利用する場合も,どの言語でも開発できます。

今回は,JavaScriptを使います。メニューの「ファイル」ー「新しいプロジェクト」から,図5のように「Windows Metro style」「空のアプリケーション」を選択して,プロジェクトを作成します図5)⁠ここではアプリ名を「SampleMapAppJS」としました。

図5 プロジェクトの新規作成

図5 プロジェクトの新規作成

Bing Maps SDKの参照

プロジェクトでBing Maps SDKを利用するため,プロジェクトからSDKを参照します。メニュー「プロジェクト」「参照の追加」から,参照マネージャーを開きます。図6のように,Windowsの拡張子にある「Bing Maps for JavaScript 1.0 (RP)」をチェックし,OKボタンをクリックして完了です。

図6 Bing Maps for JavaScriptの参照

図6 Bing Maps for JavaScriptの参照

以上で,地図アプリのためのプロジェクトができました。

著者プロフィール

松江祐輔(まつえゆうすけ)

日本システムウエア株式会社 勤務。現在,ハードウェア設計・検証業務を担当。大学生・大学院生時代はベンチャー企業 有限会社ミレニアムシステムズにプログラマーとして従事。趣味はプログラミング。好きな言語はVisual Basic。Microsoft MVP for Windows Live Platform(Jul 2010 - Jun 2011),Windows Live(Jul 2011 - Jun 2013)。

URL:http://katamari.jp

コメント

コメントの記入