指定した目的地までの距離をキャラクターが教えてくれるアプリを作ろう

このアプリについて

今回のアプリは、「出発点」、「中継点」、「到達点」の3点を指定して、「出発点」から「到達点」までの直線的な距離を求めるアプリです。

「出発点」、「中継点」、「到達点」の正確な住所を入力して、それぞれの［決定］ボタンをタップしていきます。最後の「到達点」の［決定］ボタンをタップすると、キャラクタが「出発点」から「到達点」までの直線的な距離を音声で喋ります（図1）。

再度トライする場合は、右隅上の［クリア］ボタンをタップして再開してください。

図1：「出発点」から「到達点」、までの直線的な距離が表示され、キャラクターが喋る（クリックで拡大）

プロジェクトの作成

VS 2013のメニューから［ファイル］−［新規作成］−［プロジェクト］と選択します。
次に、「テンプレート」から「Windows ストア」を選択し、右に表示される項目名から「新しいアプリケーション(XAML)」を選択します。
「名前」に任意のプロジェクト名を指定します。ここでは「TheDistanceBetweenTwoPoints_VS2013.xaml」という名前を付けています。

ソリューション・エクスプローラー内にImageというフォルダを作成し、キャラクタのPNG画像を配置しています。

ダウンロードされたサンプルファイルには、PNG画像は追加済みです。

「拡張機能と更新プログラム」から「Bing Maps SDK for Windows 8.1 Store apps」のインストール

Bing MapsをWindows ストアから使用するには、あらかじめ「Bing Maps SDK for Windows 8.1 Store apps」をインストールしておく必要があります。

まず、VS2013のメニューの［ツール］−［拡張機能と更新プログラム］と選択します。表示される画面の左から、「オンライン」を選択します。
「検索欄」に「Bing Maps SDK」と入力します。すると「Bing Maps SDK for Windows 8.1 Store apps」の「ダウンロード」が出てきますので「ダウンロード」をクリックしますが、筆者の環境では既にインストール済みですので、インストール済みを表す緑色にチェックのアイコンが表示されています（図2）。まだダウンロードされていない方は、「ダウンロード」をクリックすると「ダウンロード」が開始されます。
「ダウンロード」が完了すると「インストール」が出てくるので、これをクリックしてインストールします。
インストールが完了すると、「Bing Maps SDK for Windows 8.1 Store apps」の右隅上にインストール済みのアイコンが付きます。Visual Studio 2013の再起動を促されるので、それに従います。

図2：「Bing Maps SDK for Windows 8.1 Store apps」をダウンロードしてインストールする（クリックで拡大）

Bing Maps SDK for C#,C++,or Visual Basicのインストール

先と同じように、VS2013のメニューの［ツール］−［拡張機能と更新プログラム］と選択すると、「Bing Maps SDK for C#,C++,or Visual Basic」の「インストール」が表示されるので、これもインストールしておきます。筆者の場合は既にインストール済みであるため「アンインストール(U)」と表示されています（図3）。

図3：「Bing Maps SDK for C#,C++,or Visual Basic」をインストールする。筆者は既にインストール済み（クリックで拡大）

参照の追加

ソリューション・エクスプローラーの「すべてのファイルを表示」アイコンをクリックして、「参照設定」を表示させます。「参照設定」を選択状態にし、マウスの右クリックで表示されるメニューから、「参照の追加」を選択します。
表示される画面の左に表示されるWindowsを展開して「拡張」をクリックします。すると図4の画面が表示されますので、図4のように2つの名前を選択してチェックを付け、［OK］をクリックします。
「Bing Maps for C#, C++, or Visual Basic」をチェックします。また、C#とVisual Basicのプロジェクトの場合、「Microsoft Visual C++ 2013 Runtime Package」も必要なので、こちらも併せてチェックします。

図4：ソリューション・エクスプローラーの「参照設定」から「参照の追加」を選択しBing Maps関連の名前にチェックを入れて［OK］ボタンをクリックする（クリックで拡大）

すると、ソリューション・エクスプローラー内の「参照設定」内に2つの名前が追加されます。しかし名前の先頭に黄色い▲マークが表示され、まだBing Maps SDKが使用できない状態になっています（図5）。

図5：まだBing Maps SDKが使用できない状態にある（クリックで拡大）

「構成マネージャ」の設定

この状態では、まだBing Maps SDKが使用できないので、これを使用できるようにします。
まず、VS2013のメニューから［ビルド］−［構成マネージャ］と選択します。
「プラットフォーム」がAny CPUになっているので、プルダウンメニューから、該当するプラットフォームを選択します。筆者の環境では×86を選択する必要がありました（図6）。
［閉じる］ボタンをクリックすると、ソリューション・エクスプローラー内の「参照設定」にあった「Bing Maps for C#, C++, or Visual Basic 」と「Microsoft Visual C++ 2013　Runtime Package」の先頭の黄色いアイコンが消えています。これでBing Maps SDKの使用が可能になりました。

図6：「構成マネージャ」からプラットフォームを設定する（クリックで拡大）