Windows Phoneアプリケーション開発入門

第20回 Bing Mapsで遊んでみよう!(1)

この記事を読むのに必要な時間:およそ 3 分

はじめに

RTWのリリース後,今までWindows Phone 7アプリケーションはC#でしか開発ができませんでしたが,VB.NET開発者向けに「Microsoft Visual Basic CTP for Windows Phone Developer Tools」が9月23日にリリースされています。

Windows Mobile 6.5でVB.NETを使っていた方々にも,Windows Phone 7アプリケーション開発へ参入していけるのではないかと思っています。まだCTP版ということでMarketplaceへは登録ができないようです。ただC#のRTWと環境的には変わりありませんので,アドインの完成までにVB.NETでアプリケーションを作っておくのもよいかもしれませんね。

RTWからの新しいコントロール「Bing Maps」

さて,Windows Phone Develop Tools RTWから標準コントロールとして,Bing Maps Contorlが追加されました。今回はBing Maps Controlを使って少し遊んでみましょう。

実際にVisual Studio上からの操作に入る前に,MapコントロールにBing Maps Keyを設定しておかないと,アプリケーションの実行時に以下のスクリーンショットのようにエラーが表示されてしまいます。

図1 エラーが表示されたBing Maps

図1 エラーが表示されたBing Maps

Bing Maps Keyを取得する

Bing Mapsの利用にはKeyが必要になりますので,Bing Maps Account Centerより取得しましょう。Windows Live IDをお持ちの方は,オレンジ色のボタン「Sign in」をクリックしてください。Windows Live IDをお持ちでない方は「Create」を選択してください。

図2 既にWindows Live IDがある場合は「Sing in」

図2 既にWindows Live IDがある場合は「Sing in」を

必要事項を明記のうえ,Mapsアカウントを作成します。

図3 Mapsアカウントの作成

図3 Mapsアカウントの作成

アカウントの作成が問題なく完了すると,アカウントの詳細情報が書かれた画面へ遷移しますが,ここでは特に必要な情報はありません。

図4 アカウントの詳細情報

図4 アカウントの詳細情報

左端にあるメニューの中から「Create or view keys」を探してください。Bing Maps Keyの発行を行いましょう。

図5 ⁠Create or view keys」をクリックします

図5 「Create or view keys」をクリックします

過去にBing Maps Keyを発行したアプリについても情報が記載されています。今回は新しくKeyを作成しましょう。⁠Application name」⁠Application URL」⁠Application Type」の欄を記入し,右下の「Create key」をクリックしてください。

図6 Bing Maps Keyの発行

図6 Bing Maps Keyの発行

こちらもキーの作成が問題なく完了すると,同じ画面の下の方にBing Maps Keyが表示されます。のちほどこのKeyを使います。

図7 Bing Maps Keyが表示されます

図7 Bing Maps Keyが表示されます

Bing Maps Sampleアプリを作ってみよう

ツールバーの[File]⁠⁠New Project]を選択します。Mapコントロールで遊ぶだけですので,Windows Phone Applicationを選択しましょう。名前は適当に「Bing Maps Sample」と付けましょう。

ToolboxからMapコントロールを選び,ドラッグアンドドロップでMainPageに配置してください。以下のようなXAMLになっているかと思います。

<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <my:Map Height="596" HorizontalAlignment="Left" 
            Margin="0,6,0,0" Name="map1" 
            VerticalAlignment="Top" Width="450" />
</Grid>

CredentialsProviderプロパティに先ほど取得したBing Maps Keyを入れてください。

<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <my:Map Height="596" HorizontalAlignment="Left" 
            Margin="0,6,0,0" Name="map1" 
            VerticalAlignment="Top" Width="450" 
            CredentialsProvider="【Bing Maps Keyを入れる】" />
</Grid>

さてアプリを実行してみましょう。エラーが消えているのが確認できましたでしょうか。

図8 

図8 

著者プロフィール

和田健司(わだけんじ)

1982年10月12日生まれ。大阪で働くプログラマ。Microsoft MVP for Device Application Development(Jul 2010 - Jun 2011)。Windows Mobileに傾倒し今に至る。Windows Mobile向けのTipsを書いています。iPhoneアプリ開発を始めました。嫌いな食べ物はカレー。

URL: http://ch3cooh.jp/
Blog: http://d.hatena.ne.jp/ch3cooh393/

コメント

コメントの記入