PR

Yahoo!ローカルサーチAPIを使って地図上にランドマークを表示させるプログラムを作る

2013年9月20日(金)
薬師寺 国安

コントロールの配置

ツールボックスからデザイン画面上にMapコントロールを1個配置します。すると自動的にMapsという名前空間が要素内に追加されます。
タイトルを表示するTextBlockコントロールを1個、Frameコントロール、戻るボタンとなるButtonコントロールを1個ずつ配置します。

書き出されるXAMLコードをリスト2のように編集します。レイアウトは図4のようになります。

リスト2 書き出され編集されたXAMLコード(MainPage.xaml)

(1)要素内にMapsという名前空間が定義されている。
(2)名前がmyMapという、要素を配置し、CredentialsプロパティにBing Maps Account Centerで取得したBing Maps Keyを指定します。Bing Maps Keyの取得方法は後述しています。
(3)Textプロパティに「日本のお城」と指定した、要素を配置しておきます。
(4)後ほど作成するWebBrowserPageに遷移するための、名前がmyFrameという要素を配置します。
(5)名前がbackButtonという

<Page
  x:Class="JapaneseCastle.MainPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="using:JapaneseCastle"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  xmlns:Maps="using:Bing.Maps"(1)
  mc:Ignorable="d">
  <Grid Background="{StaticResourceApplicationPageBackgroundThemeBrush}">
    <Maps:Map Credentials="Bing Maps Account Centerで取得したBing Maps Key"x:Name="myMap" Margin="53,0,0,0" />(2)
    <TextBlockHorizontalAlignment="Left" Height="92" Margin="549,10,0,0" TextWrapping="Wrap" Text="日本のお城" VerticalAlignment="Top" Width="410" FontFamily="Meiryo UI" Foreground="Crimson" FontSize="72" FontWeight="Bold"/>(3)
    <Frame x:Name="myFrame" Margin="53,0,0,0"/>(4)
    <Button x:Name="backButton" Style="{StaticResourceBackButtonStyle}" Margin="0,0,0,720"/>(5)
  </Grid>
</Page>
図4:各コントロールをレイアウトした(クリックで拡大)

Bing Maps Keyの取得方法

Bing Mapsを使用するには下記URLのBing Maps Account Centerに行って専用のライセンスキーを取得する必要があります。
→ Bing Maps Account Center

Windows Live IDを持っている方はSign Inします。持っていない方はCreateからWindows Live IDを作成してSign Inしてください。

表示される画面の左にあるCreate or view keysをクリックします。

Create keyの画面が表示されますので、必要な項目を入力してSubmitしてください。筆者はすでにキーを持っていますので、キーはすでに表示されています。Key typeはBasicとなっています。
BasicでPublic websiteの場合は、「アプリケーションが制限なしに利用され、500,000 のトランザクションの任意の種類の 12 ヶ月の期間内を超えない、公開ウェブサイトです。」となっているようです。

詳細については、「自分の現在位置を取得して表示するサンプルプログラム」を参照してください。

「場所」へのアクセス許可

ソリューションエクスプローラー内のPackage.appxmaifestファイルをダブルクリックして開き、「機能」タブ内の「機能:」にある「場所」にチェックを付けます(図5)。

図5:「場所」にチェックを付ける(クリックで拡大)

「空白のページ」の作成(WebBrowserPage.xaml)

お城のデータをウィキペディアで表示するページです。

VS2012のメニューの「プロジェクト(P)/新しい項目の追加(W)」と選択します。
「新しい項目の追加」ダイアログボックスが開きますので、「空白のページ」を選択します。
「名前(N)」にWebBrowserPage.xamlと入力し、[追加(A)]ボタンをクリックします。

コントロールの配置

ツールボックスからWebBrowserコントロールを1個配置します。

書き出されるXAMLをリスト3、レイアウトは図6のようになります。

リスト3 書き出されたXAMLコード(WebBrowserPage.xaml)

(1)WebBrowserコントロールを配置すると、要素内に、自動的にControlsという名前空間が定義されます。
(2)名前がWebBrowser1という要素が配置されています。

<Page xmlns:Controls="using:WinRTXamlToolkit.Controls"(1)
  x:Class="JapaneseCastle.WebBrowserPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="using:JapaneseCastle"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="d">
  <Grid Background="{StaticResourceApplicationPageBackgroundThemeBrush}">
    <Controls:WebBrowserx:Name="WebBrowser1"/>(2)
  </Grid>
</Page>
図6:コントロールを配置した(クリックで拡大)

次に、ソリューションエクスプローラー内のMainWindow.xamlを展開して表示される、MainWindow.xaml.vbをダブルクリックしてリスト4のコードを記述します。

ロジックコードを記述する

リスト4 (MainWindow.xaml.vb)

  Option Strict On

Bing Mapsに関するクラスの含まれる、Bing.Maps名前空間をインポートします。

  Imports Bing.Maps

UIに関するクラスの含まれるWindows.UI名前空間をインポートします。文字の色を設定する場合等に必要です。

  Imports Windows.UI

アプリケーションウインドウやウインドウ対話を作成し管理するサポートと、ウインドウ上の入力イベントを処理するクラスの含まれる、Windows.UI.Core名前空間をインポートします。

  Imports Windows.UI.Core

最新のHTTPアプリケーション用のプログラミング インターフェイスを提供するクラスの含まれる、System.Net.Http名前空間をインポートします。

  Imports System.Net.Http

コンテキストメニューおよびメッセージダイアログのサポートを提供するクラスの含まれる、Windows.UI.Popups名前空間をインポートします。

  Imports Windows.UI.Popups

  Public NotInheritable Class MainPage
    Inherits Page

Windowsランタイムコアイベントメッセージディスパッチャーを提供するクラスである、CoreDispatcherクラスのメンバ変数、myCoreDispacherを宣言します。

    Dim myCoreDispacher As CoreDispatcher

YahooのアプリケーションIDで初期化された、文字列型定数メンバ変数AppIDを宣言します。

    ConstAppID As String = "YahooのアプリケーションID"

XML要素を表すXElementクラス型のメンバ変数xmldocを宣言します。

    Dim xmldoc As XElement
 
    Dim no As Integer = 0
  • 地図上にランドマークを表示させるプログラム

薬師寺国安事務所

薬師寺国安事務所代表。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 Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

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