PR

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

2014年1月17日(金)
薬師寺 国安

このアプリについて

今回のアプリは、「出発点」、「中継点」、「到達点」の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:「構成マネージャ」からプラットフォームを設定する(クリックで拡大)
Think IT会員限定特典
  • 目的地までの距離を計算してキャラクターが音声で教えてくれるアプリ

    『Windows 8.1+Visual Studio 2013によるWindows ストア・アプリ開発実例集』 第3回のサンプルプログラムです。
薬師寺国安事務所

薬師寺国安事務所代表。Visual Basic プログラミングと、マイクロソフト系の技術をテーマとした、書籍や記事の執筆を行う。
1950年生まれ。事務系のサラリーマンだった40歳から趣味でプログラミングを始め、1996年より独学でActiveXに取り組む。1997年に薬師寺聖とコラボレーション・ユニット PROJECT KySS を結成。2003年よりフリーになり、PROJECT KySS の活動に本格的に参加、.NETやRIAに関する書籍や記事を多数執筆する傍ら、受託案件のプログラミングも手掛ける。Windows Phoneアプリ開発を経て、現在はWindows ストア アプリを多数公開中

Microsoft MVP for Development Platforms - Client App Dev (Oct 2003-Sep 2012)。Microsoft MVP for Development Platforms - Windows Phone Development(Oct 2012-Sep 2013)。Microsoft MVP for Development Platforms - Client Development(Oct 2013-Sep 2014)。Microsoft MVP for Development Platforms-Windows Platform Development (Oct 2014-Sep 2015)。

連載バックナンバー

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

他にもこの記事が読まれています

指定した目的地までの距離をキャラクターが教えてくれるアプリを作ろう | Think IT(シンクイット)

Think IT(シンクイット)

サイトに予期せぬエラーが起こりました。しばらくたってから再度お試しください。