PR

Kinect v2のジェスチャーでBing Mapsを未来的に直感操作する

2015年1月14日(水)
薬師寺 国安

今回のサンプルは、ジェスチャーによってBing Mapsを拡大・縮小させるというものです。

今回のプログラムも、WPFアプリケーションとして作成します。まずはプロジェクトからの作成です。

プロジェクトを作成する

VS2013メニューの[ファイル]ー[新しいプロジェクト]と選択し、表示される画面から、「テンプレート」に「Visual Basic」を指定し、「WPF アプリケーション」を選択します。名前は「BingMapsKinect」と指定し、「OK」ボタンをクリックします。

参照設定

「参照の追加」からMicrosoft.Kinect.dllを追加します。手順については、連載の第2回で詳説していますので、そちらを参照してください。

画面の設計

最初に画面の設計から始めます。まずはBing Mapsコントロールを追加します。下記のURLより「Bing Maps Windows Presentation Foundation (WPF) Control, Version 1.0」をダウンロードして、インストールしてください。

Bing Maps Windows Presentation Foundation (WPF) Control

1.Bing Mapsコントロールを配置

Bing Mapsコントロールを配置します。MainWindow.xaml内に、「xmlns:WPF=”」と入力します。すると図1のように値が表示されますので、その中から、「Microsoft.Maps.MapControl.WPF(Microsoft.Maps.MapControl.WPF)」を選択します。

WPFのMapControlを選択する

図1:WPFのMapControlを選択する(クリックして拡大)

MainWindow.xaml内の「Grid」を「Canvas」に変更し、「Canvas」内に「

項目の一覧からMapを選択する

図2:項目の一覧からMapを選択する

WPF:MapのWidthとHeightの値を設定し、名前は「myMap」と指定しておきます。この時点では、後述するBing Maps Keyを取得していないので、「Unable to Contact Server. Please try again later」と表示されています(図3)。

WPF:Mapを表示したが、まだ使用できない状態

図3:WPF:Mapを表示したが、まだ使用できない状態(クリックして拡大)

Bing Maps Keyの取得方法とコントロールの配置

Bing Mapsを使用するには、Bing Maps Account Centerから専用のライセンスキー(Bing Maps Key)を取得する必要があります。

Bing Maps Account Center

ライセンスキーの取得にはWindows Live IDが必要です。持っていない方はCreateからWindows Live IDを作成してサインインしてください(図4)。

Windows Live ID でBing Maps Account Centerにサインインする

図4:Windows Live ID でBing Maps Account Centerにサインインする(クリックして拡大)

サイトの左ペインにある「Create or view keys」をクリックします(図5)。

「Create or View keys」をクリックする

図5:「Create or View keys」をクリックする(クリックして拡大)

Create keyの画面が表示されますので、必要な項目を入力してSubmitしてください。筆者は既にキーを持っていますので、下記にキーが表示されています(図6)。Key typeはBasicとなっています。

Bing Maps Keyが表示されている

図6:Bing Maps Keyが表示されている(クリックして拡大)

2.取得したキーの記述

取得したキーは、WPF:Mapの中に、下記のように記述します。

3.Canvasを配置

CanvasBodyという名前をつけたCanvasを配置します。

全て設定すると図7のようになります。

全てのコントロールを配置した

図7:全てのコントロールを配置した(クリックして拡大)

これらのコードを書き出すとリスト1のようになります。

リスト1:MainWindow.xaml

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:WPF="clr-namespace:Microsoft.Maps.MapControl.WPF;assembly=Microsoft.Maps.MapControl.WPF" x:Class="MainWindow" ■(1)
    Title="MainWindow" Height="424" Width="512">
    <Canvas>
        <WPF:Map Width="504" Height="393" x:Name="myMap" CredentialsProvider="取得したBing Maps key"/> ■(2)
        <Canvas x:Name="CanvasBody" Width="512" Height="424"  /> ■(3)
    </Canvas>
</Window>

Think IT会員限定特典
  • Kinect v2でBing Mapsを操作するプログラム

    『作りながら学ぶKinect v2プログラミング開発』 第5回のサンプルプログラムです。
薬師寺国安事務所

薬師寺国安事務所代表。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会員サービスの概要とメリットをチェック

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

Kinect v2のジェスチャーでBing Mapsを未来的に直感操作する | Think IT(シンクイット)

Think IT(シンクイット)

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