使ってみよう! Bing API/SDK

第3回 Hello, Bing Map App!──Silverlightで作るBing Mapsアプリケーション(3)

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

はじめに

7月13日に日本のBingが正式サービスになりました。皆さんは新しくなってから使ってみましたか? ⁠ホバープレビュー」など,米国・英国・カナダ(英語)で利用できていた機能のいくつかが日本でも利用できるようになっています。まだ利用していない方は,ぜひ活用してみてください。詳しくは,使い方などの紹介記事が用意されていますのでそちらを参照してください。

残念ながら日本版のBingにはまだまだ利用できない機能があります。この連載で紹介しているBing Map Appについても英語のサービスしかありません。Bing Map App SDKはそのMap Appを作る開発者向けキットのBeta版です。今回もMap Appの開発について紹介します。日本でのサービス化を期待しつつ,一足先に内容をおさえておきましょう!

さて,前回まではMap Appの作り方を簡単に紹介しました。今回はよりMap Appらしくブラッシュアップする内容です。デザインの部分とパフォーマンスに関する部分を紹介します。また,Map Appの登録についても簡単に紹介します。パフォーマンスに関する部分はMap Appに限らず一般的なSilverlightアプリケーションにも当てはまる内容です。

Map Appのスタイル

前回パネルを使用したMap Appを紹介しました。パネルはSilverlightのユーザーコントロールとして作成しているので,自由にSilverlightの各種コントロールが使えます。Bing Mapsの検索結果のパネル図1や各Map Appのパネルを見てみると標準のSilverlightコントロールのスタイルとは異なっています。

図1 Bing Maps 検索結果

図1 Bing Maps 検索結果

よりMap Appらしくするためには,Bing Mapsで採用されているデザインに従って作る必要があります。Silverlightはスタイルとテンプレートを定義することで自由に見た目を変更できます。そこで,Bing Mapsのデザインに似せて独自に作成する……のではなく,既に用意されているMap App用のスタイルを作成したMap Appに適用します。

Map Appプロジェクトの作成

それでは見た目をBing Mapに合わせたデザインのMap Appを作成してみましょう。Map Appの作り方は前回までを参照して,パネルのあるプラグインを作成してください。

Bing Map App SDKをインストールすると,Visual StudioのC#のテンプレートにBing Map Appプロジェクトテンプレートが追加されています。これを使用してプロジェクトを新規作成すると、第1回第2回で扱った内容のプラグインができます。こちらも利用してみてください。

Static Resourcesの使用

用意されたStyleを適用するにはふたつ方法があります。ひとつはコントロールのXAMLに直接Styleプロパティに指定する方法です。たとえばボタンのスタイルを変更する場合,パネルのXAML内を次のように記述します。

<StackPanel>
    <Button Content="ボタン1" Style="{StaticResource App.Button1}" Margin="2" Width="100" />
    <Button Content="ボタン2" Style="{StaticResource App.Button2}" Margin="2" Width="100" />
    <Button Style="{StaticResource App.ButtonClose}" Margin="2" />
    <Button Content="Style 適用なし" Margin="2" Width="100" />
</StackPanel>

Styleプロパティ部分にStaticResourceを指定しています。プロジェクトではこのStaticResourceを定義していませんので,エディター情では波線が表示されますが,ビルドしてBing Maps上でプラグインを実行するとスタイルが適用されて表示されます図2)⁠

図2 Buttonのスタイル

図2 Buttonのスタイル

ボタン以外にもスクロールバーや何かしらの処理中であることを示すインジケーターなどのスタイルも用意されています図3)⁠

<StackPanel>
    <ListBox Margin="10" Height="50">
        <ListBox.Template>
            <ControlTemplate>
                <ScrollViewer Style="{StaticResource App.ScrollViewer}">
                    <ItemsPresenter  />
                </ScrollViewer>
            </ControlTemplate>
        </ListBox.Template>
        <ListBoxItem Content="アイテム1" />
        <ListBoxItem Content="アイテム2" />
        <ListBoxItem Content="アイテム3" />
        <ListBoxItem Content="アイテム4" />
        <ListBoxItem Content="アイテム5" />
    </ListBox>

    <CheckBox Style="{StaticResource App.CheckBox}" IsChecked="True" Content="チェックボックス" />
    <RadioButton Style="{StaticResource App.RadioButton}" IsChecked="True" Content="ラジオボタン" />
    <ContentControl Style="{StaticResource App.LoadingIndicator}" />
</StackPanel><StackPanel>
    <Button Content="ボタン1" Style="{StaticResource App.Button1}" Margin="2" Width="100" />
    <Button Content="ボタン2" Style="{StaticResource App.Button2}" Margin="2" Width="100" />
    <Button Style="{StaticResource App.ButtonClose}" Margin="2" />
    <Button Content="Style 適用なし" Margin="2" Width="100" />
</StackPanel>
図3 コントロールのスタイル

図3 コントロールのスタイル

StyleProviderContractの使用

スタイルを変更するもうひとつの方法は,StyleProviderContractというContractをImportして,コントロールのStyleプロパティを実行時に設定する方法です。

これまでと同様にプラグイン クラスにContractを定義します。

[ImportSingle("Microsoft/StyleProviderContract", ImportLoadPolicy.Synchronous)]
public StyleProviderContract StyleProviderContract { get; set; }

このプロパティを使用して,次のようにStyleオブジェクトを取得し,コントロールのStyleを設定します。

var style = parent.StyleProviderContract.GetResource("App.H1.Highlight") as Style;
StyleTextBlock.Style = style;

今回のコードでは,コンボボックスからTextBlockに適用するスタイルを選択し,コードからTextBlockのStyleを変更してみましょう。パネルのXAMLは次のように編集します。

<StackPanel>
    <TextBlock Text="見出し" x:Name="StyleTextBlock" Margin="10" />
    <ComboBox Style="{StaticResource App.ComboBox}"
              x:Name="StyleComboBox" Margin="10" />
</StackPanel>

定義したStyleProviderContractプロパティはプラグイン クラスのプロパティです。また通常は,パネル クラスはレイヤー クラスでインスタンス化されます。パネル クラスでStyleProviderContractを参照できるようにレイヤー クラスと,パネル クラスのコンストラクタでプラグインの参照を受け取るようにします。第2回の内容やMap Appプロジェクトのサンプルのレイヤー クラスを参考に各クラスに変更を加えてください。パネル クラスのコードは次のように記述します。

using System.Collections.Generic;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;

public class StyleItem
{
    public string Name { get; set; }
    public string DisplayMember { get; set; }
}

public partial class SamplePanel : UserControl
{
    private SamplePlugin parent;

    public SamplePanel(SamplePlugin plugin)
    {
        InitializeComponent();

        this.parent = plugin;

        var headings = new List<StyleItem>()
        {
            new StyleItem { Name = "App.H1.Highlight", DisplayMember = "見出し1 ハイライト" },
            new StyleItem { Name = "App.H1", DisplayMember = "見出し1 既定の色" },
            new StyleItem { Name = "App.H2.Highlight", DisplayMember = "見出し2 ハイライト" },
            new StyleItem { Name = "App.H2.Neutral", DisplayMember = "見出し2 中間色" },
            new StyleItem { Name = "App.P1.Base", DisplayMember = "強調する文" },
            new StyleItem { Name = "App.P2.Base", DisplayMember = "本文" },
            new StyleItem { Name = "App.P3.Base", DisplayMember = "注釈" },
            new StyleItem { Name = "App.P4.Base", DisplayMember = "フッター" },
            new StyleItem { Name = "App.P1.Web", DisplayMember = "外部サイトへのリンク" },
            new StyleItem { Name = "App.P1.Highlight", DisplayMember = "強調する文中の強調" },
            new StyleItem { Name = "App.P2.Highlight", DisplayMember = "本文中の強調" },
            new StyleItem { Name = "App.P2.Web", DisplayMember = "本文中の外部サイトへのリンク" },
            new StyleItem { Name = "App.P2.Red", DisplayMember = "本文中のエラーメッセージなどの強調" }
        };

        StyleComboBox.DisplayMemberPath = "DisplayMember";
        StyleComboBox.ItemsSource = headings;
        StyleComboBox.SelectionChanged += StyleComboBox_SelectionChanged;
    }

    private void StyleComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        var item = StyleComboBox.SelectedValue as StyleItem;
        var style = parent.StyleProviderContract.GetResource(item.Name) as Style;
        StyleTextBlock.Text = item.Name;
        StyleTextBlock.Style = style;
    }
}

実行結果は図4のようになります。

図4 TextBlockのスタイル

図4 TextBlockのスタイル

今回紹介したもの以外にもスタイルが用意されています。一覧はSDKの文書を確認してください。公式のMap AppやBing Mapsと同様のデザインにするためには,用意されているスタイルだけでは少ない印象があります。Beta版であるためかもしれませんが,テキストの色や大きさはハードコーディングするのではなく共通のスタイルを使用することを気に留めておきましょう。ただし,スタイルに関して公式のMap Appがすべて統一されているわけでもありませんので,Map Appの内容にあわせてデザインし,最低限のところだけスタイルを合わせるというのでもよいかもしれません。実際にほかのMap Appを確認してみて決定するとよいでしょう。

著者プロフィール

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

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

URL:http://katamari.jp

コメント

コメントの記入