使ってみよう! Bing API/SDK

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

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

Map App SDKのアップデート

今回は,前回の続きでMy Photo Map Appの作成です。各機能の処理を記述していきますが,その前にMap App SDKのアップデートがありましたので,その紹介です。

これまで使用してきたMap App SDKおよび開発用のMap AppのMap app test toolが,9月16日にアップデートされています。

今回の更新でVisual StudioのMap Appプロジェクトテンプレートを使用した場合,Visual Studioから実行可能になっており,段違いに開発しやすくなっています。テンプレートで生成されるファイルやコードも拡充しています。

この更新に合わせて,Map app test toolも更新され,Silverlightアプリケーションで生成されるXAPファイルの指定が可能なっています。これまでと同様にDLLファイルを指定してMap Appの登録も可能です。DLLファイルを指定する際のインターフェースが使いやすく改良もされています図1)⁠

図1 Map app test tool

図1 Map app test tool

さらに,プラグインの実行時に例外が発生した場合,エラーダイアログを表示する改良や,Map App審査登録時にXAPファイルを指定可能などの変更もあります。

以前のSDKをアンインストール後,新しいバージョンをインストールしておきましょう。前回・今回の内容では新しいSDKのテンプレートを使用した内容ではありませんが,テンプレートへコード内容を移すことは難しくないと思いますのでトライしてみてください。

パネルのイベント

前回何も処理を記述していなかったパネルの各コントロールのイベントを順に実装していきましょう。イベントは次の3か所ありました。

  • リンクのクリック(HyperlinkButton_Click)
  • リストボックスのドロップ(PhotoListBox_Drop)
  • ボタンのクリック(Button_Click)

前回に作成済みのMyPhotoPanelクラス,MyPhotoPanel.xaml.csファイル内のコードを編集します。

ボタンのクリック

まず,⁠Add photo」ボタンクリックしたときの処理内容は次のように行います。

  1. ファイルを開くダイアログを表示
  2. 選択された写真(JPEG)ファイルを読み込み,PhotoEntityオブジェクトを生成
  3. PhotoEntity オブジェクトをPhotoItemsコレクションに追加
  4. PhotoEntityオブジェクトをレイヤーに追加
  5. 追加した地点へ地図を移動

PhotoEntityは前回作成したエンティティ クラス,PhotoItemsはPhotoItemのコレクションです。PhotoEntityの生成には,写真ファイルから経緯度情報とサムネイルの取得処理がありますが,これは別にメソッドを作って行います。

上記内容のコードを記述すると次のようになります。

private void Button_Click(object sender, RoutedEventArgs e)
{
    // ファイルを開くダイアログを表示
    var dialog = new OpenFileDialog();
    dialog.Filter = "写真ファイル(*.jpg, *.jpeg)|*.jpg;*.jpeg";
    if (dialog.ShowDialog() != true)
    {
        return;
    }
    
    try
    {
        // PhotoEntity 作成
        var entity = CreateEntity(dialog.File); // (CreateEntity は後で作成)
        if (entity != null)
        {
            // コレクションに追加
            PhotoItems.Add(entity);
            // レイヤーに追加
            this.plugin.MainLayer.Entities.Add(entity);
            // 追加した地点へ地図を移動
            this.plugin.DefaultMap.SetView(entity, 15);
        }
    }
    catch (Exception)
    {
        // Do nothing
    }
}

CreateEntityメソッドは後で作成します。

リストボックスへファイルのドロップ

続いてListBoxのDropイベント処理です。Silverlight 4からWebブラウザーにドロップされたファイルを開くことができるようになっています。ボタンクリック処理と同様に,リストボックスにファイルをドロップしても写真ファイルを開けるようにしましょう。

ドロップを許可するには,ListBoxのAllowDropプロパティをTrueに設定します(前回のXAMLの記述で行っています)⁠ドロップ時の処理は次のようになります。

private void PhotoListBox_Drop(object sender, DragEventArgs e)
{
    try
    {
        var files = (FileInfo[])e.Data.GetData(DataFormats.FileDrop);
        PhotoEntity lastEntity = null;
        foreach (var f in files)
        {
            var entity = CreateEntity(f);
            if (entity != null)
            {
                lastEntity = entity;
                PhotoItems.Add(entity);
                this.plugin.MainLayer.Entities.Add(entity);
            }
        }

        // 最後に追加した写真の場所へ移動
        if (lastEntity != null)
        {
            this.plugin.DefaultMap.SetView(lastEntity, 15);
        }
    }
    catch (Exception)
    {
        // Do nothing
    }
}

複数のファイルがドロップされた場合も対応しています。そのためボタンクリック時とは少し記述が異なりますが,FileInfoオブジェクトを,OpenFileDialog.Fileプロパティから得るか,DragEventArgs.Data.GetDataプロパティから得るかの違いだけです。

Silverlightアプリケーションでは,ユーザーファイルのアクセスは通常できませんが,このようにユーザー自身がダイアログを通してファイルの選択や,ブラウザーへファイルをドロップした場合は,アプリケーションからファイルアクセスが可能です。

リンクのクリック

最後にHyperlinkButtonのClickイベントの処理です。ListBox内の各アイテムはひとつのHyperlinkButtonがあり,これをクリックしたときの処理です。処理内容は,クリックしたアイテムの写真の場所への移動です。

private void HyperlinkButton_Click(object sender, RoutedEventArgs e)
{
    var entity = (PhotoEntity)((HyperlinkButton)sender).DataContext;
    this.plugin.DefaultMap.SetView(entity, 15);
}

少しわかりにくいかもしれませんが,アプリケーションをXAMLのデータバインディング機能を使用して作成し,HyperlinkButton.DataContextプロパティからPhotoEntityオブジェクトを参照できる構成となるため,上記コードのように記述すると写真の場所へ移動できます。

以上でイベント処理の記述は完了です。

著者プロフィール

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

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

URL:http://katamari.jp

コメント

コメントの記入