20110211 Silverlightを囲む会 in 大阪 ＃16「Bing Maps ControlからWindows Phone 7を楽しもう！」

Transcript

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.  ToolBoxからMapを選んで デザイナに貼り付けて、実行するだけ VS2010からBing 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.  地図上に線を引くには、 MapPolylineクラスを 使う  Polygonを使うと、矩形 を描画することが出来 ます Polyline と Polygon
13.  地図上に画像を置くに は、MapLayerを用意し ます  ImageLayerの上に Imageを置き、地図に 設定するだけ Layer
14. GPSと地図を連携させる
15.  GPSから位置情報を取得して、プッシュピ ンを立ててみましょう  GPSを使って位置測位するための準備  System.Device.dllを参照して、 System.Device.Location名前空間の GeoCoordinateWatcherクラスを使う GPSと地図の連携
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.  Microsoft.Phone.Tasks名前空間に各タ スクは扱い方がほぼ一緒で使いやすい  var task = new PhotoChooserTask(); // タスクが完了すると、イベントハンドラが呼び出される task.Completed += (sx, ex) => ｛省略｝ task.Show(); PhotoChooserTask
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.  大人の事情のせいか、 日本の地図はかなり残念 このままでは、WP7 が、日本で受け入れ てもらえない！！ Bing Map Controlの 地図はかなり残念・・・ 大阪駅付近の詳細地図
26.  地図と言えばGoogle Mapでしょ？  良いところ取りしちゃいましょう  WP7にはGoogle Mapのコントロールが無い  だったら、Bing Maps Controlを使おう  Bing Map for WP7の地図が残念  だったら、Google Mapのタイルを使おう Google Maps on Bing Maps Control
27.  Bing Mapsでは、最大ズーム時で 1,073,741,824ピクセルｘ1,073,741,824ピクセル の超高画質の地図を使っているみたい  このBing Maps Controlでは、『Deep Zoom』と呼ばれる技術が使われています どうやって作る？
28.  超高画質の画像を256ピクセルｘ256ピク セルのような小さな単位（タイル）にします  表示に必要な部分だけのタイルを読み込 んで、操作をスムーズにします Deep Zoomとは
29.  地図をズームレベルに応じて、範囲を狭く、そして詳細に 細かく分割されたタイル より詳細に
30. タイルの単位は 256 x 256  Google Mapsのタイルの大きさは、  256 x 256  Bing Mapsのタイルの大きさも、  256 x 256  あとは、お察しの通り。。。
31.  Bing Maps Controlは、表示したい位置座 標を元にして、タイルが格納されている サーバーからDLしてる  このタイル画像のURLを、生成しているメ ソッドをオーバーライドすれば、Google Mapsのタイル画像が使える！ 具体的にどうやって作るの？
32.  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} GetUriメソッドでURLを作ってる
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. ご清聴ありがとうございました