2011年2月11日開催の「Silverlightを囲む会 in 大阪 ＃16」の勉強会にてWindows Phone 7とBing Mapsを使ってどのようなアプリが作れるかについて、お話をさせて頂きました。

1. Bing Maps Controlから
Windows Phone 7を楽しもう！
Silverlightを囲む会 in 大阪#16
CH3COOH(酢酸)

2. 自己紹介
 CH3COOH（酢酸）
 大阪で働く 雑食系プログラマ
 デバドラからアプリ、業務系バッチまで
 最近は、ずっとiPhoneアプリ開発中心
 ブログ http://d.hatena.ne.jp/ch3cooh393/
 サイト http://ch3cooh.jp/

3. 本日のアジェンダ
 VS2010で Bing Maps をぽとぺた
 Bing Maps Controlの基本的な機能
 実機で Bing Maps をみてみましょう
 デバイスとBing Maps Controlの連携
 タスクとBing Maps Controlの連携
 おまけ

4. Bing Maps Controlを
使ってみよう

5. VS2010からBing Mapを使う
 ToolBoxからMapを選んで
デザイナに貼り付けて、実行するだけ

6. Bing Maps Controlの
基本的な機能

7. Bing Maps Silverlight Control
for Windows Phone
 標準コントロールとして提
供されている
 ピンチイン・アウトによる
ズームや、パンによるスク
ロールなど基本的な地図と
しての機能を持つ

8. 地図の表示モード
地図表示
 Modeプロパティの設
定に、『Road』を設定

9. 地図の表示モード
航空写真表示
 Modeプロパティの設
定に、『Aerial』を設定

10. 地図の表示モード
航空写真+ラベル表示
 Modeプロパティの設
定に、
『AerialWithLabels』を
設定

11. PushPin
 プッシュピンを刺すの
には、PushPinクラスを
使う
 PushPinクラスを継承
することで、任意の表
示のピンが作れる

12. Polyline と Polygon
 地図上に線を引くには、
MapPolylineクラスを
使う
 Polygonを使うと、矩形
を描画することが出来
ます

13. Layer
 地図上に画像を置くに
は、MapLayerを用意し
ます
 ImageLayerの上に
Imageを置き、地図に
設定するだけ

14. GPSと地図を連携させる

15. GPSと地図の連携
 GPSから位置情報を取得して、プッシュピ
ンを立ててみましょう
 GPSを使って位置測位するための準備
 System.Device.dllを参照して、
System.Device.Location名前空間の
GeoCoordinateWatcherクラスを使う

16. 位置情報を取得する
 GeoCoordinateWatcher watcher;
// GeoCoordinateWatcherの初期化を行う
watcher = new GeoCoordinateWatcher
( GeoPositionAccuracy.High );
// 位置変更イベントのイベントハンドラを追加
// watcher_PositionChanged
watcher.PositionChanged += 省略
// データの取得を開始する
watcher.Start();

17. 位置情報の通知を受け取る
 コントロールへの操作はメインスレッドで行
う必要がある
 イベントハンドラでは、メインスレッドへ
Dispatchして処理をデリゲートします
 Deployment.Current.Dispatcher.BeginInvok
e(() => MyPositionChanged(e));

18. 位置情報をもとにピンを刺す
 // 位置情報を取得する
GeoCoordinate co = watcher.Position.Location;
// プッシュピンを作る
var pin = new Pushpin() { Location = co };
map1.Children.Add(pin);
// 位置測位を終了
watcher.Stop();

19. PhotoChooserTaskと地図を
連携させる

20. Bing Maps上に画像を配置
 地図上に写真を配置していくにはどうしよ
う？
 写真を取得する
 写真を地図上に配置する

21. どうやって画像を取得しよう？
 アプリからファイルシステムにアクセスす
る方法が提供されていません
 Microsoft.Phone.Tasks名前空間にある
「Launcher」と「Chooser」を通す
 静止画像の選択にはPhotoChooserTask
を使う

22. PhotoChooserTask
 Microsoft.Phone.Tasks名前空間に各タ
スクは扱い方がほぼ一緒で使いやすい
 var task = new PhotoChooserTask();
// タスクが完了すると、イベントハンドラが呼び出される
task.Completed += (sx, ex) => ｛省略｝
task.Show();

23. アルバムの中から写真の
選択結果を受け取る
 // 取得できていれば、Imageに設定
var bmp = new BitmapImage();
bmp.SetSource(ex.ChosenPhoto);
// Imageの表示時の設定
var image = new Image() { Source = bmp };
var imageLayer = new MapLayer();
var position = PositionOrigin.BottomLeft;
// 画像レイヤーにUIElement(Image)を追加
imageLayer.AddChild(image, map1.Center, position);
// 地図に画像レイヤーを追加します
map1.Children.Add(imageLayer);

24. Bing Maps Controlに
足りないものを足してみる

25. Bing Map Controlの
地図はかなり残念・・・
 大人の事情のせいか、
日本の地図はかなり残念
このままでは、WP7
が、日本で受け入れ
てもらえない！！
大阪駅付近の詳細地図

26. Google Maps on Bing Maps Control
 地図と言えばGoogle Mapでしょ？
 良いところ取りしちゃいましょう
 WP7にはGoogle Mapのコントロールが無い
 だったら、Bing Maps Controlを使おう
 Bing Map for WP7の地図が残念
 だったら、Google Mapのタイルを使おう

27. どうやって作る？
 Bing Mapsでは、最大ズーム時で
1,073,741,824ピクセルｘ1,073,741,824ピクセル
の超高画質の地図を使っているみたい
 このBing Maps Controlでは、『Deep
Zoom』と呼ばれる技術が使われています

28. Deep Zoomとは
 超高画質の画像を256ピクセルｘ256ピク
セルのような小さな単位（タイル）にします
 表示に必要な部分だけのタイルを読み込
んで、操作をスムーズにします

29. 細かく分割されたタイル
より詳細に
 地図をズームレベルに応じて、範囲を狭く、そして詳細に

30. タイルの単位は 256 x 256
 Google Mapsのタイルの大きさは、
 256 x 256
 Bing Mapsのタイルの大きさも、
 256 x 256
 あとは、お察しの通り。。。

31. 具体的にどうやって作るの？
 Bing Maps Controlは、表示したい位置座
標を元にして、タイルが格納されている
サーバーからDLしてる
 このタイル画像のURLを、生成しているメ
ソッドをオーバーライドすれば、Google
Mapsのタイル画像が使える！

32. GetUriメソッドでURLを作ってる
 Microsoft.Phone.Controls.Maps名前空間の
TileSourceクラスの以下のメソッド
 Uri GetUri(int x, int y, int zoomLevel)
 http://mt{server}.google.com/vt/lyrs={ty
pe}&x={x値}&y={y値}&z={zoom-level}

33. Google Map on Bing Map Control
デモ
 実際にアプリの動きをみてみましょう

34. 実行結果

35. ご使用上の注意
 Google Mapのライセンス的にNGなような気
がしますが、容量・用法を守って正しくお使
いください

36. 本セッションの補足資料
 Bing Maps Silverlight Control for Windows Phone
 http://msdn.microsoft.com/en-us/library/ff941096%28v=VS.92%29.aspx
 How to: Use the Bing Maps Silverlight Control for Windows Phone
 http://msdn.microsoft.com/en-us/library/ff941093%28v=VS.92%29.aspx
 Working with Pushpins in the Map Control
 http://msdn.microsoft.com/en-us/library/gg588383%28v=VS.92%29.aspx
 Differences Between Silverlight and Silverlight for Windows Phone
 http://msdn.microsoft.com/en-us/library/ff426930%28VS.95%29.aspx

37. スマートフォン勉強会の告知
 スマートフォン勉強会は、関西と関東で開
催しています
 過去には、会津や九州でも開催しました
 2/19 Windows Phone 7 ブーストアップ
 2/26 スマートフォン勉強会＠関東＃11
 3/26 スマートフォン勉強会＠関西＃14

38. ご清聴ありがとうございました