Yahoo!ローカルサーチAPIを使って地図上にランドマークを表示させるプログラムを作る
今回は、「Yahoo!ローカルサーチAPI」を使用して、日本各地にあるお城を例に、ランドマークを表示させるサンプルプログラムを作ります。
日本全国のお城のある位置に、お城のアイコンが表示されます(図1)。お城のアイコンをタップすると、住所とお城の名前、「Webで検索」ボタンが表示されます(図2)。「Webで検索」ボタンをタップするとブラウザが起動して、ウィキペディアでお城の情報が表示されます(図3)。
実際に動かした動画は下記のようになります。スマホでとった動画のため、見難い点はご了承願います。
サンプル一式は、会員限定特典としてダウンロードできます。記事末尾をご確認ください。
プロジェクトの作成
VS 2012のメニューから[ファイル(F)/新規作成(N)/プロジェクト(P)]と選択します。次に、「テンプレート」から「Windows ストア」を選択し、右に表示される項目名から「新しいアプリケーション(XAML)」を選択します。「名前(N)」に任意のプロジェクト名を指定します。ここでは「JapaneseCastle」という名前を付けています。ソリューションエクスプローラー内にImageフォルダを作成してお城のアイコンを配置しています。また、JapaneseCastleプロジェクトの配下に、リスト1のCastle.xmlを読み込んでおきます。
ダウンロードされたサンプルファイルには、お城のアイコンやCastle.xmlは追加済みです。
リスト1 XML文書ファイル(Castle.xml)
<?xml version="1.0"?> <castle> <Info> <Name>根室半島チャシ跡群</Name> <Latitude> 43.283579 </Latitude> <Longitude>145.507693</Longitude> </Info> <Info> <Name>五稜郭</Name> <Latitude> 41.796729 </Latitude> <Longitude>140.75695</Longitude> </Info> ~<Info></Info>繰り返し~ </castle>
Yahoo!ローカルサーチAPIの使用
「Yahoo!ローカルサーチAPI」の詳細については下記のURLを参照してください。
→ Yahoo!ローカルサーチAPI
この位置情報から、住所を抽出するコードは、「自分の現在位置を取得して表示するサンプルプログラム」で詳細を説明していますので、参照してください。
下記のページから「Yahoo!JAPANID」登録を行ってください。
→ Yahoo! JAPAN ID登録
「Yahoo!JAPAN ID」を登録したら、下記のページから「アプリケーションID」を登録します(必ずログイン後に下記のサイトをクリックしてください。「セキュリティ証明書に問題があります。」と表示されますが、続行してください)。
→ デベロッパーネットワーク:アプリケーションの管理
表示される画面で「新しいアプリケーション開発」ボタンをクリックして、「アプリケーション情報」を入力し、「確認」ボタンをクリックした後、「登録」ボタンをクリックしてください。これで「アプリケーションID」が発行されます。
詳細については、前述の記事「自分の現在位置を取得して表示するサンプルプログラム」を参照してください。
次にBing Mapsを使用しますので、「Bing Maps SDK for Windows Store apps」をインストールします。
「拡張機能と更新プログラム」から「Bing Maps SDK for Windows Store apps」のインストール
Bing MapsをWindows ストアから使用するには、あらかじめ「Bing Maps SDK for Windows Store apps」をインストールしておく必要があります。
まず、VS2012のメニューの「ツール(T)/拡張機能と更新プログラム(U)」と選択します。
表示される画面の左から、「オンライン」を選択します。すると「Bing Maps SDK for Windows Store apps」の「ダウンロード」が出てきますので「ダウンロード」をクリックします。
「ダウンロード」をクリックすると「ダウンロード」が開始されます。「ダウンロード」が完了すると「インストール」が出てきますので、これをクリックしてインストールします。
インストールが完了すると、「Bing Maps SDK for Windows Store apps」の右隅上にインストール済みのアイコンが付きます。
[今すぐ再起動]をクリックしてVS2012を再起動してください。
詳細については、「自分の現在位置を取得して表示するサンプルプログラム」を参照してください。
参照の追加
ソリューションエクスプローラーの「すべてのファイルを表示」アイコンをクリックして、「参照設定」を表示させます。
「参照設定」を選択状態にし、マウスの右クリックで表示されるメニューから、「参照の追加」を選択します。
表示される画面の左に表示されるWindowsを展開して「拡張」をクリックします。
「Bing Maps for C#, C++, or Visual Basic」をチェックします。また、C#とVisual Basicのプロジェクトの場合,「Microsoft Visual C++ Runtime Package」も必要ですので、併せてチェックして「OK」ボタンをクリックします。
すると、ソリューションエクスプローラー内の「参照設定」内に2つの名前が追加されます。この時点では名前の先頭に黄色い▲マークが表示され、まだBing Maps SDKが使用できない状態になっています。
「構成マネージャ」の設定
Bing Maps SDKを使用できるようにします。
まず、VS2012のメニューから「ビルド(B)/構成マネージャ(O)」と選択します。
「プラットフォーム」がAny CPUになっていますので、プルダウンメニューから、該当するプラットフォームを選択します。筆者の環境では×86を選択する必要がありました。
[閉じる]ボタンをクリックすると、ソリューションエクスプローラー内の「参照設定」にあった「Bing Maps for C#, C++, or Visual Basic 」と「Microsoft Visual C++ Runtime Package」の先頭の黄色いアイコンが消えています。
これでBing Maps SDKの使用が可能になりました。
詳細については、「自分の現在位置を取得して表示するサンプルプログラム」を参照してください。
NuGetパッケージの管理
今回はCodePlexで公開されている、WinRT XAML Toolkitに含まれているコントロールを使用します。WinRT XAML Toolkitについては下記のURLを参照してください。この原稿執筆時点でのバージョンは1.3.5となっていますが、現在では1.5にバージョンアップしています。
→ WinRT XAML Toolkit
WinRT XAML Toolkitをインストールするには、ソリューションエクスプローラー内の「すべてのファイルを表示」して、表示された「参照設定」の上でマウスの右クリックをします。
「NuGetパッケージの管理(N)」が表示されます。
表示される画面の左に表示されている、「オンライン」を選択し、検索欄にWinRTXamlToolkitと入力します。するとWinRT XAML Toolkitの[インストール(I)]画面が表示されますので、インストールをクリックします。
インストールが成功するとインストール済みのチェックアイコンが表示されます。
[閉じる]ボタンをクリックして画面を閉じます。ソリューションエクスプローラー内の「参照設定」を見るとWinRTXAMLToolkitが追加されています。
同時にWinRTXAMLToolkitの情報が記述された、packages.configも作成されます。もし、WinRT XAML Toolkitを削除して、再度「NuGetの管理(N)」からインストールしようとしても、このpackages.configが存在していると、インストール済みとなってしまいますので、このファイルも削除する必要があります。
詳細については、「自分の現在位置を取得して表示するサンプルプログラム」を参照してください。
地図上にランドマークを表示させるプログラム