はじめに
7月13日に日本のBingが正式サービスになりました。皆さんは新しくなってから使ってみましたか？ 「ホバープレビュー」
残念ながら日本版のBingにはまだまだ利用できない機能があります。この連載で紹介しているBing Map Appについても英語のサービスしかありません。Bing Map App SDKはそのMap Appを作る開発者向けキットのBeta版です。今回もMap Appの開発について紹介します。日本でのサービス化を期待しつつ、
さて、
Map Appのスタイル
前回はパネルを使用したMap Appを紹介しました。パネルはSilverlightのユーザーコントロールとして作成しているので、
よりMap Appらしくするためには、
Map Appプロジェクトの作成
それでは見た目をBing Mapに合わせたデザインのMap Appを作成してみましょう。Map Appの作り方は前回までを参照して、
Bing Map App SDKをインストールすると、
Static Resourcesの使用
用意されたStyleを適用するにはふたつ方法があります。ひとつはコントロールのXAMLに直接Styleプロパティに指定する方法です。たとえばボタンのスタイルを変更する場合、
<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を定義していませんので、
ボタン以外にもスクロールバーや何かしらの処理中であることを示すインジケーターなどのスタイルも用意されています
<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>
StyleProviderContractの使用
スタイルを変更するもうひとつの方法は、
これまでと同様にプラグイン クラスにContractを定義します。
[ImportSingle("Microsoft/StyleProviderContract", ImportLoadPolicy.Synchronous)]
public StyleProviderContract StyleProviderContract { get; set; }このプロパティを使用して、
var style = parent.StyleProviderContract.GetResource("App.H1.Highlight") as Style;
StyleTextBlock.Style = style;今回のコードでは、
<StackPanel>
<TextBlock Text="見出し" x:Name="StyleTextBlock" Margin="10" />
<ComboBox Style="{StaticResource App.ComboBox}"
x:Name="StyleComboBox" Margin="10" />
</StackPanel>定義したStyleProviderContractプロパティはプラグイン クラスのプロパティです。また通常は、
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 = "見出し１ ハイライト" },
new StyleItem { Name = "App.H1", DisplayMember = "見出し１ 既定の色" },
new StyleItem { Name = "App.H2.Highlight", DisplayMember = "見出し２ ハイライト" },
new StyleItem { Name = "App.H2.Neutral", DisplayMember = "見出し２ 中間色" },
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のようになります。
今回紹介したもの以外にもスタイルが用意されています。一覧はSDKの文書を確認してください。公式のMap AppやBing Mapsと同様のデザインにするためには、
Map Appの登録
ここでMap Appの登録についてみてみましょう。Map Appは作成後すぐに公開できるわけではなく、
執筆時点では、
Map Appのアップロード
作成したMap Appは、
サインイン後、
入力欄は、
そして、
最後にBing map app submission addendumの内容を確認し承諾したうえでSubmitボタンをクリックします。以上で、
Map Appの公開ステータスの確認
Map Appが公開に至るまでの状態は、
上図のCreatedの部分がステータスを表しています。アップロードした時点で、
Succeededの状態からPublishをクリックすると、
審査完了後、
Map Appの必要条件
次にMap Appの必要条件についてみておきましょう。Map Appを公開するためには、
一意なDLLファイル名
Map AppのDLLファイル名は ほかのMap Appの名前と被らない一意になるような名前付けが求められています。命名規則は特にありませんが、
許可されていないAPIの利用
ネットワークアクセスなどSilverlightアプリケーションとしては使用できる機能でも、
コード分析
コード分析エラーがないことも条件です。Visual Studioの上位Editionには、
FxCopは、
FxCopの使い方については、
その他の条件
そのほかにも
- ファイルサイズが100KB以下
- アンチウィルスチェックのパス
- DoS
（Denial of Service） テストのパス - 最新のバージョンのアセンブリファイルを参照しているか
- 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から読み込んで使用すること。
上記のように多くの事項があります。通常の開発ではあまり気を付けない点についても触れられているのではないでしょうか。できるだけ小さくすることが、
その他のパフォーマンスに関する事項
サイズ以外にも、
これ以外にも、MSDN LibraryにはSilverlightのパフォーマンスに関して記載がありますので参照するとよいでしょう。
おわりに
Map AppのようなBing Mapsと連携したアプリケーションはBing Maps Silverlight Control SDKを利用しても可能です。この場合、
一方Map AppはBing Maps上で公開されてはじめて多数の人が利用可能になるものであるため、
以上のことを考えると、
それでは今回はここまでです。次回もまたMap Appについて紹介する予定です。