使ってみよう! Bing API/SDK

第30回 はじめよう!Metro スタイル アプリ開発──使ってみよう!Bing Maps SDK for Metro style apps

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

アプリ バーの追加

Metro スタイル アプリでは,コンテンツを操作するコマンドを表示する方法のひとつとして,アプリ バーがあります。Bing Maps SDKに直接かかわる内容ではありませんが,よりアプリらしくするため,アプリにアプリ バーを追加してみましょう。

図14 Windows 8の地図アプリのアプリ バー

図14 Windows 8の地図アプリのアプリ バー

アプリ バーは,コンテンツのコマンドをオンデマンドで表示するために使います。既定ではアプリ バーは非表示です。画面の下から上へスワイプ動作で表示します。マウス操作の場合,右クリックで表示します。

今回は,現在地を表示するボタンをアプリ バーに追加します。コマンドの動作は,作成済みのDisplayPositionメソッドを呼び出します。今回は1個のボタンだけですが,ボタンの配置は,タッチで操作しやすいよう両端に配置します。コマンドが少ない場合や,永続的なコマンドは,右側に配置するようガイドラインで決められています。詳しくは,Metro スタイル アプリのコマンド実行の設計を参照するとよいでしょう。

それでは,アプリにアプリ バーを追加しましょう。XAMLのコードのPageタグの中に次のように記述します。Tappedイベントで作成済みのDisplayPositionメソッドを呼んでいます。

MainPage.xaml

<Page.BottomAppBar>
    <AppBar Padding="10,0,10,0">
        <Grid>
            <Button HorizontalAlignment="Right" 
                    Tapped="DisplayPosition"
                    Style="{StaticResource HomeAppBarButtonStyle}" />
        </Grid>
    </AppBar>
</Page.BottomAppBar>

以上で,基本的なところは完了です。追加されたボタンをみてみると,Metro スタイル アプリらしい丸枠の家のアイコンになっています図15⁠。

図15 アプリ バーのボタン

図15 アプリ バーのボタン

これは定義済みのスタイルを利用しています。どこで定義されているかというと,プロジェクトのCommonフォルダーの中のStandardStyles.xamlです。この中のHomeAppBarButtonStyleを利用しました。ほかにも,基本的なボタンのスタイルが定義されています。

ただし,このままではアイコンとコマンド名がマッチしていませんので,自分でスタイルを用意しましょう。StandardStyles.xamlで定義されていないスタイルのアイコンも簡単に追加できます。Pageタグに次のような定義を追加します。

MainPage.xaml

<Page.Resources>
    <Style x:Key="LocationAppBarButtonStyle" TargetType="Button" 
       BasedOn="{StaticResource AppBarButtonStyle}">
        <Setter Property="AutomationProperties.AutomationId" Value="LocationAppBarButton"/>
        <Setter Property="AutomationProperties.Name" Value="現在地"/>
        <Setter Property="Content" Value="&#xE139;"/>
    </Style>
</Page.Resources>

Buttonタグは次のようにStyle部分を変更します。

<Button HorizontalAlignment="Right" 
        Tapped="DisplayPosition"
        Style="{StaticResource LocationAppBarButtonStyle}" />

ボタンは図16のようになります。

図16 修正後のボタン

図16 修正後のボタン

Windows 8では,Segoe UI Symbolフォントにボタンに使えそうなアイコンが定義されています。Windows 8のスタート画面を表示しているとき,⁠charmap」と入力して文字コード表を起動してください。

図17 文字コード表

図17 文字コード表

文字コード表で,イラストの確認ができます図17⁠。ステータスバーに表示される「U+E114」などの値を上記コードの「Value="&#xE139;」部分を「Value="&#xE114;」のように変更すると,そのアイコンのボタンに変更できます。

おわりに

今回は,ここまでです。いかがでしたか。Metro スタイル アプリでもこれまでと同様,簡単に地図アプリが開発できました。今回紹介した内容以外にも,次の機能なども使えます。

  • ルートや領域を示す,ポリライン・ポリゴンの表示
  • オリジナルの地図のタイル画像の表示
  • 交通情報の表示

各プラットフォームで提供されているBing Maps SDKはそれぞれ少し異なっています。今回利用したC++・C#・Visual Basic用のMetro スタイル アプリの地図コントロールは,すべての機能が詰まっているわけではありません。執筆時点では,屋内の地図の表示などは対応していないようです。

簡単にBing Mapsの地図コントロールが使えたほか,Metro スタイル アプリ自身も,C#・Visual Basicを使っていれば,比較的 簡単に開発できたのではないでしょうか。ただし,アプリは,これまでのデスクトップアプリとは,見た目も仕組みも,まったく異なります。Windowsストアで公開するため,審査に通る必要もあります。Metro スタイル アプリのためのガイドラインが,デベロッパーセンターに公開されていますので,少しずつ読み進めると良いかもしれませんね。

著者プロフィール

松江祐輔(まつえゆうすけ)

日本システムウエア株式会社 勤務。現在,ハードウェア設計・検証業務を担当。大学生・大学院生時代はベンチャー企業 有限会社ミレニアムシステムズにプログラマーとして従事。趣味はプログラミング。好きな言語はVisual Basic。Microsoft MVP for Windows Live Platform(Jul 2010 - Jun 2011),Windows Live(Jul 2011 - Jun 2013)。

URL:http://katamari.jp