現在位置近くの病院を素早く検索するサンプルプログラム

2013年6月29日(土)
薬師寺 国安

GoogelのAPIキーを取得する

下記のURLにアクセスします。
→ Google APIs Console Help/Keys, access, security, and identity

「Topics」に「API Access pane」のリンクがありますので、これをクリックします(図6)。

図6:「API Access pane」のリンクをクリックする(クリックで拡大)

筆者はすでにAPI Keyを取得していますので、それらの情報が記載されています(図7)。
この中のAPI Keyを使用しますので、控えておく必要があります。初めて取得される方は、画面左上にあるAPI Projectの中のCreateを選択してAPI Projectを作成してください(図8)。表示されるメニューに従っていけば、大丈夫です。

図7:筆者のAPI Keyが表示されている(クリックで拡大)
図8:Createをクリックする

次に、同じAPI Projectの下に表示されている「Service」をクリックします。「All services」の画面になりますので、その中からPlaces APIをONに設定してください(図9)。

図9:Places APIをONにする(クリックで拡大)

次に画面左の「API Access」をクリックします。すると、図7の画面が表示されAPI Keyが表示されます。

使用制限

図9にも英語で記述されていますが、Google Places API には、次のようなクエリ制限があります:

  • API キーを取得済みのユーザーは、24 時間に 1000件のリクエストを実行できます。この制限を超すとAPIの利用ができなくなります。
  • API コンソールでの ID の確認が済んでいるユーザーは、24 時間に100000件のリクエストを実行できます。
    コンソールでの IDの確認では、請求を可能にするためのクレジットカードが必要です。下記のURLからクレジットカードの登録を行う必要があります。
    → https://developers.google.com/console/help/?hl=ja#Billing(英語)
    このカードにPlaces APIの使用料が請求されることはありません。

開発やテストが目的であれば通常の上限(1日に1000アクセス)で十分ですが、アプリケーションを公開するのであれば上限を上げる(1日に100000アクセス)ことをおすすめします。

実は筆者もストアで公開しているアプリでこの制限にひっかかり、上限を変更しました。ストアに公開するアプリを作成する場合は、1日100000アクセスにしておいた方が安全でしょう。

コントロールの配置

ツールボックスからデザイン画面上にMapコントロールを1個配置します。すると自動的にMapsという名前空間が要素内に追加されます。
タイトルを表示するTextBlockコントロールを1個、戻るの(
★単★)となるButtonコントロール、Frameコントロールを1個ずつ配置します。
次にマウスの右クリックで表示されるバーであるAppBarコントロールを配置し、その子要素として、WinRTXAMLToolkitのコントロールである、WatermarkTextBlockコントロールを配置します。
ツールボックスに登録されている、WatermarkTextBoxをデザイン画面上にドラッグ&ドロップすると、要素に、自動的にControls:という名前空間が追加されます。

次にButtonコントロールをWatermarkTextBoxコントロールの下に2個配置します。

書き出されるXAMLコードをリスト1のように編集します。

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

  • (1)要素内にMapsという名前空間が定義されている。
  • (2)名前がmyMapという、要素を配置し、CredentialsプロパティにBing Maps Account Centerで取得したBing Maps Keyを指定します。Bing Maps Keyの取得方法は後述しています。
  • (3)名前がTitleTextBoxという要素を配置しておきます。
  • (4)名前がAppBar1という要素を配置します。このバーはマウスの右クリックで、表示、非表示を切り替えられます。
  • (5)要素の子要素として要素を配置します。OrientationプロパティにHorizontalを指定して、オブジェクトのスタック方向を水平とします。
  • (6)要素の子要素として、WinRTXAMLToolkitの名前がWatermarkTextBoxという要素を配置しています。接頭辞であるControlsは(A)で定義されています。
    WatermarkTextプロパティに、表示しておきたい文言を指定します。この文言はWatermarkTextBoxにフォーカスが移り、入力する場合には自動的に消えます。
  • (7)同じく要素の子要素として、名前がokButtonとresetButtonという
<Page xmlns:Controls="using:WinRTXamlToolkit.Controls" (A)
  x:Class="HospitalSearch.MainPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="using:HospitalSearch"
  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="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <Maps:Map Credentials="Bing Maps Account Centerで取得したBing Maps Key" x:Name="myMap" Margin="62,0,0,0" />(2)
    <TextBlock x:Name="TitleTextBlock" HorizontalAlignment="Center" Height="49" Margin="10,14,0,0" TextWrapping="Wrap"  VerticalAlignment="Top" Width="1346" FontFamily="Meiryo UI" Foreground="Crimson" FontSize="36" FontWeight="Bold"/>(3)
    <AppBar Background="DarkGreen" Height="80" Margin="62,688,-15,0" x:Name="AppBar1">(4)
      <StackPanel Orientation="Horizontal">(5)
        <Controls:WatermarkTextBox x:Name="WatermarkTextBox" FontFamily="Meiryo UI" FontSize="22" FontWeight="Bold" WatermarkText="表示したい場所の住所を入力してください。" Width="1009" Margin="0,18"/>(6)
        <Button x:Name="okButton" Content="OK" FontFamily="Meiryo UI" FontSize="20"/>(7)
        <Button x:Name="resetButton" Content="リセット" FontFamily="Meiryo UI" FontSize="20"/>(7)
      </StackPanel>(5)
    </AppBar>(4)
  </Grid>
</Page>

レイアウトは図10のようになります。

図10:各コントロールをレイアウトした(クリックで拡大)

Bing Maps Keyの取得方法

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

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

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

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

詳細については、前回の「現在位置の住所取得」を参照してください。

次に、現在位置を取得する必要があるため、ソリユーションエクスプローラー内の、Package.manifestファイルをダブルクリックして開きます。

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

「機能」タブ内の「機能:」にある「場所」にチェックを付けます(図11)。

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

「Google Place API」の使用

今回は、下記URLの「Google Place API」を使用します。
→ Google Places API/Place Search

このAPIを使用するには、「Google」のAPIキーが必要です。前述した「■GoogelのAPIキーを取得する」より、API Keyを取得してください。

  • 現在位置近くの病院を検索するプログラム

薬師寺国安事務所

薬師寺国安事務所代表。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メルマガ会員のサービス内容を見る

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