使ってみよう! 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

コメント

コメントの記入