使ってみよう! Bing API/SDK

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

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

My Photo Map Appの開発

前回はBing Map Appのコンテストで受賞・応募作品を紹介しました。Bing公式のコンテストは終了してしまいましたが,Mashup Awards 6が開催されています。こちらの対象APIには,Map App SDKや,その他のBing API/SDKがありますので,腕に自信のある方は応募されてみるといいかもしれませんね。

さて今回と次回は,これまでの内容を(すべてではありませんが)踏まえつつ,簡単なMap Appを作成します。それがMy Photo Map Appです図1)⁠このアプリは,ユーザーが写真をBing Maps上に表示でき,次のような機能を持っています。

  • ユーザーの写真を地図上とパネルに表示
  • 写真のサムネイルと経緯度情報を取得して使用
  • パネルの写真を選択するとその場所に移動
  • プッシュピンをクリックすると写真をポップアップ表示
  • 追加した写真情報の保存
    • 図1 My Photo Map App

      図1 My Photo Map App

      ユーザーのPCからの写真の読み込みや,ブラウザーへのファイルのドラッグ&ドロップ操作など,Silverlightの機能も活用していきます。また,見た目も図のようにBingのスタイルに合うように作成します。写真のWebアップロードは行わず,ユーザーのPC上でのみ楽しめるものとします。

      プラグインの作成

      それでは,これまでと同様にSilverlightクラスプロジェクトから,プラグイン クラスを作成しましょう。また,プッシュピンなどのエンティティを表示するレイヤー クラスも用意しておきます。各クラス ファイルの内容は次の通りです。

      プラグイン クラス(MyPhotoPlugin.cs)

      namespace MyPhotoMapApp
      {
          using Microsoft.Maps.Core;
          using Microsoft.Maps.Plugins;
          using Microsoft.Maps.MapControl;
      
          public class MyPhotoPlugin : Plugin
          {
              [ImportSingle("Microsoft/MapContract", ImportLoadPolicy.Synchronous)]
              public MapContract DefaultMap { get; set; }
      
              [ImportSingle("Microsoft/LayerManagerContract", ImportLoadPolicy.Synchronous)]
              public LayerManagerContract LayerManagerContract { get; set; }
      
              [ImportSingle("Microsoft/PushpinFactoryContract", ImportLoadPolicy.Synchronous)]
              public PushpinFactoryContract PushpinFactoryContract { get; set; }
      
              [ImportSingle("Microsoft/PopupContract", ImportLoadPolicy.Synchronous)]
              public PopupContract PopupContract { get; set; }
      
              public MyPhotoLayer MainLayer { get; set; }
              
              public override void Initialize()
              {            
                  base.Initialize();
                  this.MainLayer = new MyPhotoLayer(this.Token, this);
              }
      
              public override void Activate(System.Collections.Generic.IDictionary<string, string> activationParameters)
              {
                  if (LayerManagerContract.ContainsLayer(this.MainLayer))
                  {
                      LayerManagerContract.BringToFront(this.MainLayer);
                  }
                  else
                  {
                      LayerManagerContract.AddLayer(this.MainLayer);
                  }
              }
          }
      }
      

      レイヤー クラス(MyPhotoLayer.cs)

      namespace MyPhotoMapApp
      {
          using Microsoft.Maps.Core;
          using Microsoft.Maps.Plugins;
          using System;
       
          public class MyPhotoLayer : Layer
          {
              private MyPhotoPlugin plugin;
       
              public MyPhotoLayer(PluginToken pluginToken, MyPhotoPlugin plugin)
                  : base(pluginToken)
              {
                  this.plugin = plugin;
                  this.Title = "My Photo";
       
                  var panel = new MyPhotoPanel(plugin);
                  this.Panel = panel;
              }
          }
      }
      

      パネルとなるSilverlightユーザーコントロールもプロジェクトに追加します。今回のアプリの方針として,ほとんどの処理をこのパネルコントロールのコードビハインドに記述(MyPhotoPanel.xaml.csに記述)します。

      地図の参照やプッシュピンの追加などContractによって提供されている機能や,レイヤーの参照などは,プラグイン クラスのプロパティから参照します。そのため,レイヤー クラスを通してパネルでもプラグイン クラス(MyPhotoPlugin)を参照できるように記述します。

      パネル コントロール(MyPhotoPanel.xaml.cs)

      namespace MyPhotoMapApp
      {
          using Microsoft.Maps.Core;
          using Microsoft.Maps.Plugins;
          using Microsoft.Maps.Network;
          using Microsoft.Maps.MapControl;
          using System.Collections.Generic;
          using System.Collections.ObjectModel;
          using System;
          using System.IO;
          using System.Windows;
          using System.Windows.Controls;
          using System.Windows.Input;
          using System.Windows.Media;
          using System.Windows.Media.Imaging;
      
          public partial class MyPhotoPanel : UserControl
          {
              private MyPhotoPlugin plugin;
      
              public MyPhotoPanel(MyPhotoPlugin plugin)
              {
                  InitializeComponent();
      
                  this.plugin = plugin;
              }
          }
      }
      

      MyPhotoPanel.xamlのほうは,後で編集します。以上がプラグインを構成する基本となるクラスです。

著者プロフィール

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

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

URL:http://katamari.jp

コメント

コメントの記入