第29回　Windows Phone 7.5でBing連携のアプリ開発

Windows Phone 7.5 & Bing!

2011年7月末、日本でのWindows Phone 7.5（Mango）の発売が発表されました（日本初となるWindows Phone 7.5搭載「Windows Phone IS12T⁠」⁠、9月以降に発売⁠）⁠。Windows Phone 7.5では、これまで国外で発売されているWindows Phone 7から多数の機能が追加・強化されています。Windows Phoneから利用できるBingサービスについても機能の追加や新しいサービスが提供される見込みです。今回はBingの新機能と、Bingと連携したWindows Phone 7のアプリ開発を紹介します。

今回紹介している内容は、App Hubに登録した開発者向けに提供されているWindows Phone SDK 7.1 Beta 2 Refreshを元にしています。製品版と内容が異なる場合がありますので、注意してください。

Windows PhoneのBing検索

Windows Phoneには検索ボタンがあり、Bing検索を呼び出せます（図1⁠）⁠。この検索ボタンは、Marketplace画面であればマーケット内のアプリ検索になるなど機能が変わります。

Windows Phone 7.5では、従来のWeb検索に加えて次の機能が追加されています。

音声による検索
カメラによるQRコードやバーコードの読み取り、CDやDVDのジャケットの読み取り
OCRによるテキストの翻訳と検索
鼻歌など音声による音楽の検索
周辺施設の検索（Bing Maps連携機能）

Windows Phone 7.5リリース時、これらの機能のうち、QRコードなどの認識とOCR機能のみが、日本で利用できる見込みです。このカメラを利用した機能は、Bing Visionと呼ばれています。

図2は、QRコードをWindows Phoneで読み取った画面です。カメラをかざすだけで結果がリスト表示されます。

テキストの翻訳・検索は、撮影後に図3のようにテキストの箇所が表示されます。ここから翻訳結果の表示やテキストを選択して検索が可能です。

Windows PhoneのBing Maps

Windows Phoneには、地図アプリが付属しBing Mapsが利用できます。Windows Phone 7.5では機能が追加されていますが、日本でどの程度サポートされるかは不明です。

地図の表示や検索に加えて搭載された機能は次のものがあります。

音声による検索
GPSナビゲーション
交通情報の表示
電話の向きに合わせて地図の回転
お気に入りの場所の登録、タイルへの表示
周辺施設の検索

現時点では、Windows Phoneの地域・言語の設定を日本にすると、上記のどの機能も利用できません。

乗り換え案内については、サードパーティ製のアプリがWindows Phone 7.5の発表に併せて日本向けに登場しています。

Bing検索アプリの開発

さて、Bingと連携したアプリの開発をみていきましょう。残念ながら、Windows PhoneのBing検索で新しく提供されたサービスに関するAPIやSDKは発表されていません。Web検索であれば、これまで同様にBing APIを利用してアプリから検索が可能です。

Bing APIはWindows PhoneやSilverlightなどに依存したAPIではないため、HTTPアクセスとテキスト処理ができれば、どのプラットフォームからも利用できます。Windows Phoneアプリ開発ではVisual Studioを使用するため、「⁠プロジェクト」メニューの「サービス参照の追加」からWebサービスの利用が簡単です。

サービス参照の追加で次のアドレスを入力します（図2⁠）⁠。BingAppIdの部分は、あらかじめBing Developer Centerで取得したBing App IDを設定します。

http://api.bing.net/search.wsdl?AppID=BingAppId&Version=2.2

デザイナ画面でXAMLを次のように編集します。検索用のTextBoxとButton、結果を表示するListBoxを追加しています。

<Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
        <TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <TextBox x:Name="QueryTextBox" />
            <Button Grid.Column="1" Content="Search" Click="Button_Click" />
        </Grid>
    </StackPanel>

    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <ListBox x:Name="ResultListBox" />
    </Grid>
</Grid>

C#のコードは次のように記述します。今回は、単に検索結果のWebページのタイトルのみ表示しています。

// （追加する using ステートメント)
// using BingSearch.ServiceReference1; // BingSearch はプロジェクト名から付いた名前空間

private void Button_Click(object sender, RoutedEventArgs e)
{
    var client = new BingPortTypeClient();
    client.SearchCompleted += (s, args) =>
    {
        if (args.Error != null) return;
        Dispatcher.BeginInvoke(() =>
        {
            foreach (var r in args.Result.Web.Results)
            {
                ResultListBox.Items.Add(r.Title);
            }
        });
    };
    client.SearchAsync(new SearchRequest()
    {
        Sources = new SourceType[] {SourceType.Web},
        Query = QueryTextBox.Text,                
        AppId = "50A2BBFB359B16A9DBAD771F89943BF54A5F7384",
        Version = "2.2",
        Market = "ja-jp"
    });
}

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

Webサービスの参照を利用した場合、SOAPというXMLベースのプロトコルを利用します。Bing APIでは、JSON形式のデータも利用できます。通信量を削減したい場合は、JSONを利用したほうがよいでしょう。

Bing APIについては第19回と20回でも紹介しています。興味のある方はこちらも参照してみてください。

Bing APIでは、翻訳も可能です。ただし、Bing APIの利用よりも大元のAPIであるMicrosoft Translator APIを利用したほうがより細かな操作が可能です。使ってみよう！ Windows Live SDK/API 第38回で紹介していますので興味のある方はこちらも参照してみてください。

地図アプリの開発

Windows Phone 7の地図関連の開発をみてみましょう。Windows Phone 7には、専用の地図コントロール（Maps Control）が用意されています。Windows Phone 7.5以前でもMaps Controlはありましたが、Windows Phone付属のMapsアプリと異なり、なめらかに動作しないなど問題がありました。Windows Phone 7.5ではこの問題は解消され、地図アプリ開発に大いに役立つことでしょう。

また、Windows Phone 7.5からMaps Controlだけでなく、指定した位置やルート検索結果を表示するBingMapsTaskとBingMapsDirectionTaskクラスが追加されています。これらのクラスを使用すると、Map Controlを使用せずともコード数行でアプリにBing Mapsの表示機能が追加できます。Taskクラスについては、Windows Phoneアプリケーション開発入門の第33回で紹介されていますので、そちらを参照してください。

開発環境も強化されています。Windows Phone 7のエミュレーターで現在地を設定でき、GPS機能を利用したアプリ開発もできるようになっています（図6⁠）⁠。

Windows Phoneでは、A-GPS、コンパス、加速度センサーといったセンサー類の搭載がハードウェア要件になっているため、地図アプリから利用する場合も端末の差異の考慮を最小限に済ませます。

地図の表示

Maps Controlの基本的な使い方を紹介します。Visual StudioでWindows Phoneアプリケーションプロジェクトを作成し、デザイナ画面でMaps Controlをツールボックスからドラッグ＆ドロップします（図7⁠）⁠。

XAMLのコードを少し編集して次のようにします。上図は既に変更しています。

<my:Map Name="MyMap" CredentialsProvider="BingMapsKey" />

BingMapsKeyのところは、Bing Maps Account Centerで取得したBing Maps Keyを設定します。

地図の表示は以上です。実行するとBing Mapsを操作できます。

表示する位置やズームレベルの変更は、MapクラスのCenterプロパティやZoomLevelプロパティ、SetViewメソッドを使用します。XAMLで記述した場合は次のようになります。

<my:Map Name="MyMap" CredentialsProvider="BingMapsKey"
        Center="35.68,139.767"
        ZoomLevel="16" />

結果は図8のようになります。

SetViewメソッドを使用した例を示します。またコードでは、GeoCoordinateWatcherクラスを使って、現在地を表示するようにしています。

// (追加する using ステートメント)
using Microsoft.Phone.Controls.Maps;
using System.Device.Location;

public partial class MainPage : PhoneApplicationPage
{
    private GeoCoordinateWatcher GeoCoordinateWatcher;

    public MainPage()
    {
        InitializeComponent();

        // 現在地に移動
        this.GeoCoordinateWatcher = new GeoCoordinateWatcher();
        GeoCoordinateWatcher.PositionChanged += (s, e) =>
        {
            MyMap.SetView(e.Position.Location, MyMap.ZoomLevel);
        };
        GeoCoordinateWatcher.Start();
    }
}

プッシュピンの表示

次はプッシュピンを追加してみましょう。XAMLで記述する場合は次のようになります。

<my:Map Name="MyMap" CredentialsProvider="BingMapsKey">
    <my:Pushpin Location="35.68,139.767">
        <TextBlock Text="東京駅" Margin="3" />
    </my:Pushpin>
</my:Map>

C#コードから追加すると次のようになります。

// (追加する using ステートメント)
// using Microsoft.Phone.Controls.Maps;
// using System.Device.Location;

public MainPage()
{
    InitializeComponent();

    var pin = new Pushpin();
    pin.Location = new GeoCoordinate(35.68, 139.767);
    pin.Content = new TextBlock() { Text = "東京駅", Margin = new Thickness(3) };
    MyMap.Children.Add(pin);
}

実行結果は図9のようになります。Windows PhoneのMaps Controlのプッシュピンは、図のように吹き出しのような見た目です。

プッシュピンの中は自由にSilverlightのコントロールを自由に追加できます。MediaElementを使用して動画の表示も簡単です（図10⁠）⁠。

<my:Map Name="MyMap" CredentialsProvider="BingMapsKey"
        ZoomLevel="16"
        Center="35.807564,137.243">
    <my:Pushpin Location="35.807564,137.241769">
        <MediaElement Source="sample.mp4" Width="240" />
    </my:Pushpin>
</my:Map>

添付プロパティを使用すれば、自由にSilverlightの各種コントロールをプッシュピンのように配置できます。次はImageを使用した例です。

<my:Map Name="MyMap" CredentialsProvider="BingMapsKey">
    <Image Source="http://ecn.dev.virtualearth.net/mapcontrol/v7.0/i/poi_search.png"
           my:MapLayer.PositionOrigin="BottomCenter"
           Width="25" Height="39"
           xmlns:loc="clr-namespace:System.Device.Location;assembly=System.Device">
        <my:MapLayer.Position>
            <loc:GeoCoordinate Latitude="35.807564" Longitude="137.241769" />
        </my:MapLayer.Position>
    </Image>
</my:Map>

結果は図11のようになります。

ポリゴン・ポリラインの表示

領域を表すポリゴン（Polygon）や、ルートを表すポリライン（Polyline）の表示も可能です。MapPolygonとMapPolylineクラスを利用して描画します。

var locations = new LocationCollection() {
    new GeoCoordinate(38.22912, 137.6954),
    new GeoCoordinate(35.16438, 135.9376),
    new GeoCoordinate(36.18178, 135.6080),
    new GeoCoordinate(36.18178, 135.6080),
    new GeoCoordinate(35.36173, 136.9483),
    new GeoCoordinate(35.16438, 135.9376)
};
var polyline = new MapPolyline()
{
    Locations = locations,
    Stroke = new SolidColorBrush(Colors.Red),
    StrokeThickness = 5
};
MyMap.Children.Add(polyline);

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

グラデーション表示や線の太さや点線などの指定も簡単です。

var locations = new LocationCollection() {
    new GeoCoordinate(33.52262688242687,132.268200096829),
    new GeoCoordinate(34.43365078432897,134.223766503079),
    new GeoCoordinate(33.637037915415036,134.6137811515165),
    new GeoCoordinate(32.791436727932236,132.7570916983915)
};

var gss = new GradientStopCollection() {
    new GradientStop() { Color = Colors.Red, Offset = 0 },
    new GradientStop() { Color = Colors.Orange, Offset = 0.2 },
    new GradientStop() { Color = Colors.Yellow, Offset = 0.4 },
    new GradientStop() { Color = Colors.Green, Offset = 0.6 },
    new GradientStop() { Color = Color.FromArgb(255, 0, 0, 0x80), Offset = 0.8 },
    new GradientStop() { Color = Colors.Purple, Offset = 1 }
};
var brush = new LinearGradientBrush(gss, 0);

var doubles = new DoubleCollection() { 0.5, 1, 0.5, 1 };

var polygon = new MapPolygon()
{
    Locations = locations,
    Fill = brush,
    StrokeDashArray = doubles,
    Stroke = new SolidColorBrush(Colors.Red),
    StrokeThickness = 5,
    Opacity = 0.7
};

MyMap.Children.Add(polygon);

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

表示の切り替え

Maps Controlでは、標準で道路地図と航空写真が利用できます。Bing MapsのBird's eyeやStreetsideは用意されていません。

地図の種類はMapクラスのModeプロパティで指定します。XAMLの場合はRoadまたはAerialを指定します。

<my:Map Name="MyMap" CredentialsProvider="BingMaps"
        Mode="Aerial" />

コードで記述する場合は、次のようになります。

MyMap.Mode = new RoadMode(); // または AerialMode ()

注目するところは、RoadModeやAerialModeクラスのオブジェクトを指定してしている点です。Maps Controlは、単にBing Mapsの地図を表示するだけでなく、地図のサービス基盤として利用できます。RoadModeやAerialModeクラスの継承元をたどると、地図の基本的な操作や属性を提供するMapModeクラスを継承しています。

MapModeクラスから派生したFlatMapModeやMercatorModeクラスを使用すれば、独自の地図表示も可能です。実際、Bing Maps Silverlight Control[1]では、Bird's eyeやStreetsideの機能がMapModeクラスを継承したクラスとして提供されています[2]⁠。ただし、これらの機能を駆使した地図の作成はハードルが高いでしょう。

タイルの変更

地図を構成するタイルを変更または重ね合わせも可能です。独自のタイルを追加するには次のように記述します。

var tileLayer = new MapTileLayer();
var ts = new TileSource("http://tohoku.blob.core.windows.net/layer00/{quadkey}.png");
tileLayer.TileSources.Add(ts);
MyMap.Children.Add(tileLayer);
MyMap.SetView(new GeoCoordinate(38.2732865155, 141.0216306495), 17);

実行結果は図14のようになります。サンプルでは、国土地理院で公開されている震災後の宮城県仙台市・名取市・岩沼市空中写真を重ね合わせています。

Bing Maps AJAX Controlで実現したものは、 http://tohoku.blob.core.windows.net/index.htmlで公開しています。

上記コードは、Bing Mapsで使用されているタイル番号の Quad Keyを含むURLを指定していますが、TileSourceクラスを継承したクラスを作成し、GetUriメソッドをオーバーライドすればタイル画像のURL書式は問いません。

また、Map.ModeプロパティにMercatorModeオブジェクトを指定すればタイル画像のみ表示できます。

MyMap.Mode = new Microsoft.Phone.Controls.Maps.Core.MercatorMode();

Bing Maps AJAX Controlの利用

さて、これまで連載で紹介してきたBing Maps AJAX Controlは、Windows Phone 7で利用できないのでしょうか？　Windows Phone 7にはInternet Explorer 9が搭載されていますので、AJAX Controlは表示可能です（図13⁠）⁠。

ただし、少なくともそのままでは使用できません。ブラウザー上でピンチイン・ピンチアウトの操作は、ページのズーム操作となってしまい、地図のズーム操作ができません（地図コントロールの拡大・縮小ボタンをタッチすれば可能です⁠）⁠。このため、Bing Maps AJAX Controlを使用する場合は、何かしらモバイル端末向けに処理が必要になってきます。

おわりに

今回は以上です。いかがでしたでしょうか。Windows Phone 7.5のBingサービスおよび、Bingと連携したアプリ開発を紹介しました。日本でのBingサービスは米国などに比べてとても少ないのが現状です。またAPIやSDKでは利用できない内容も多数あります。必要と感じた方はぜひ要望やフィードバックを送りましょう。

Windows Phoneによる開発は、Windows Phoneアプリケーション開発入門も参照するとよいかと思います。Windows Phone 7.5発売直前ですが、今のうちにアプリを開発して日本市場でトップを目指しましょう！