使ってみよう! Bing API/SDK

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

はじめに

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を確認してみて決定するとよいでしょう。

Map Appの登録

ここでMap Appの登録についてみてみましょう。Map Appは作成後すぐに公開できるわけではなく、Bing Mapsチームによる審査があり、許可されたものだけが利用できる状態になります。ここでは登録までの手順を紹介します。また、Map Appには満たすべき条件があります。登録時に確認することになりますが、これについてはこの後に紹介します。

執筆時点では、まだSDKが公開され間もないため、Map App SDKを利用したと思われるMap Appは登場していません。どのようなMap Appが採用されるなど詳しい情報もまだありません。そのため登録に関することは実際に試してみるしかわからない状況です。その点はご了承ください。またMap App SDKはBeta版であることにも注意です。

Map Appのアップロード

作成したMap Appは、Bing Maps Account Center図5にアップロードします。Maps Account Centerでは、Map Appの登録だけでなくBing MapsのAPIアクセスに必要なMaps Keyの管理なども行います。まだ一度もアクセスしたことがない場合、⁠New User」からアカウント登録を行いましょう。Windows Live IDアカウントによるサインインが必要です。

図5 Bing Maps Account Center 図5 Bing Maps Account Center

サインイン後、左のメニュー「Submit a map app」からMap Appの登録を行います図6⁠。

図6 Map App登録画面
図6 Map App登録画面

入力欄は、Map app name(アプリケーション名⁠⁠、Map app description(アプリケーションの説明⁠⁠、Publisher(発行者名)がまずあります。Type of map app(アプリケーションの種類)の選択は、連載で紹介したものはCustom map appになります。Startup parameters は連載で紹介していませんが、初期化時に指定するパラメーターを指定できます。この項目だけオプションです。Iconには、Map Appのアイコン画像を指定します。

そして、Map app filesには、Map AppのDLLファイルをZIP形式で圧縮したファイルを指定します。もしMap App SDK以外のライブラリーに依存している場合はそのDLLファイルも含めたZIPファイルを指定します。

最後にBing map app submission addendumの内容を確認し承諾したうえでSubmitボタンをクリックします。以上で、Map Appの登録が完了します。まだこの時点ではBing Mapsチームによる審査に進むわけではありません。

Map Appの公開ステータスの確認

Map Appが公開に至るまでの状態は、左メニューのView my map apps図7からわかります。

図7 Map Appのステータス確認
図7 Map Appのステータス確認

上図のCreatedの部分がステータスを表しています。アップロードした時点で、Map Appの自動チェックが開始し、何かしらのエラーがある場合はFailedへとステータスが変わります。そのエラー内容はInspection resultsから確認できます。UpdateからMap Appの登録画面に戻り、何度でもMap Appの更新が可能です。チェックが問題ない場合、Succeededへとステータスが変わります。

Succeededの状態からPublishをクリックすると、いよいよ審査待ちとなります。これには10営業日程度までかかるようです。ステータスはPendingに遷移します。

審査完了後、問題があれば拒否されステータスはRejectedになり問題点をinspection reportから確認し、Map Appの修正後Updateから再登録し再審査という流れになります。承認された場合、ステータスがPublishedになりBing MapsのMap App Galleryで公開されます。

Map Appの必要条件

次にMap Appの必要条件についてみておきましょう。Map Appを公開するためには、いくつかの要件を満たす必要があります。全項目はSDKの文書を参照して頂くとして、そのいくつかを紹介します。ただし、文書からでは不明確な点も多く、実際にMap Appの公開作業を行い、その結果から知るしかない部分もあります。

一意なDLLファイル名

Map AppのDLLファイル名は ほかのMap Appの名前と被らない一意になるような名前付けが求められています。命名規則は特にありませんが、.NET Frameworkの名前に関するガイドラインが参考になるでしょう。また、Map Appが依存しているライブラリーのDLLファイルも一意である必要があり、複数のMap Appで同じライブラリーを使用している場合、ひとつだけアップロードするようにします(複数のMap Appから同じライブラリーを共有する⁠⁠。

許可されていないAPIの利用

ネットワークアクセスなどSilverlightアプリケーションとしては使用できる機能でも、Map Appでは禁止されているものがあります。もしContractとして用意されている場合は、それを使用するか、禁止されている機能を使用しない設計にする必要があります。現在のところ具体的な禁止されている項目は不明で、Map App登録時の自動チェックとInspection resultsのレポート結果から知るしかありません。

コード分析

コード分析エラーがないことも条件です。Visual Studioの上位Editionには、静的コード分析の機能があり、利用できます。Visual Web Developer 2010などを使用している場合は、無償のFxCop図8というツールも利用可能です。Visual StudioとFxCopの分析内容には少し違いがあります。

図8 FxCop
図8 FxCop

FxCopは、Microsoft Windows 7.1 SDKにインストーラーが含まれています。FxCopを利用する場合は、SDKのインストール後、C:\Program Files\Microsoft SDKs\Windows\v7.1\Bin\FXCop フォルダにあるFxCopSetup.exeを実行してインストールを行います。

FxCopの使い方については、この連載では説明しません。FxCopを実行すると多くの警告が表示されますが、すべて修正する必要はありません。それぞれ内容を確認し修正を検討しましょう。Map Appに関連する条件は、これも実際に登録してチェックして確認するしかありません。

その他の条件

そのほかにも

  • ファイルサイズが100KB以下
  • アンチウィルスチェックのパス
  • DoS(Denial of Service)テストのパス
  • 最新のバージョンのアセンブリファイルを参照しているか
  • Bing Mapsチームの審査のパス

などが条件になります。

パフォーマンス

最後に必要条件ではありませんが、Map Appのパフォーマンスについて紹介しておきます。SDKに含まれている文書にはアプリケーションのパフォーマンスの重要性について記載されています。述べられている内容は、主にMap Appのサイズをいかに小さくおさえるかです。

ファイルサイズはアプリケーションの起動時間に直結します。また、多くのユーザーの環境での実行を考えた場合、グラフィックスのエフェクトなど処理時間のかかる機能の使用は抑える必要があるでしょう。SDKの文書を読むと、多数のユーザーがアクセスするこのBing Mapsサービスを運営するうえで、どのような視点でアプリケーションを開発すべきかを、少しうかがい知ることができます。

サイズ

Map Appの満たすべき条件にあったようにMap Appのサイズは100KB以下である必要があります。サイズを少なくする方法として次のものが紹介されています。

  • アセンブリの難読化。難読化処理はメソッド名や変数名などを意味のない短い名前に置き換えるためサイズを減らすのに有効です。ただし、有償ツールなどを使用する必要があります。

  • コード分析用のコードやメタデータをアセンブリに含めないこと。

  • System.Xml.LinqやSytem.Jsonの使用を避けること。Silverlight Toolkitなどのサイズを肥大化させるライブラリーの使用を避けること。必要な場合は、余分な機能を除いた小さい専用のライブラリーを作成して使用すること。

  • XAMLのサイズを減らすこと。特にExpression Blendが生成したコードはより単純に記述できる場合があります。XAMLのサイズを縮小する有償ツールなどもあります。

  • LINQやラムダ式の使用は慎重に行うこと。これらを使用するとコードの記述は単純になりますが、コンパイラが多くのコードを生成している可能性がありサイズ増大の原因になります。

  • 可能であればADO.NETやWCFプロキシークラスの代わりにRESTサービスを使用すること。これもVisual Studioが自動的にコードを生成し記述は楽になりますが、その分サイズ増大の原因になります。

  • プラグインに動画像のリソース埋め込みを行うのではなく、Webから読み込んで使用すること。

上記のように多くの事項があります。通常の開発ではあまり気を付けない点についても触れられているのではないでしょうか。できるだけ小さくすることが、重要であることがわかります。

その他のパフォーマンスに関する事項

サイズ以外にも、パフォーマンスを考慮する事項があります。SDK文書では下記の事項が述べられています。

これ以外にも、MSDN LibraryにはSilverlightのパフォーマンスに関して記載がありますので参照するとよいでしょう。

おわりに

Map AppのようなBing Mapsと連携したアプリケーションはBing Maps Silverlight Control SDKを利用しても可能です。この場合、自前のWebサーバーに配置して使うことになりますので自由に公開が可能です。

一方Map AppはBing Maps上で公開されてはじめて多数の人が利用可能になるものであるため、審査が通らないことにはどうしようもありません。まだSDKのBeta版が出たところであり、情報も少ないのが現状であり、今後どのようなアプリケーションが公開され、または拒否されるのかは不明です。

以上のことを考えると、Map Appの機能に依存しないアプリケーションの機能は別のライブラリー化しておくなど、Map AppやSilverlight Controlの両対応も可能な設計も必要になってくるかもしれませんね。

それでは今回はここまでです。次回もまたMap Appについて紹介する予定です。

おすすめ記事

記事・ニュース一覧