20110212 Silverlight から Bing Maps に触れる

2011年2月12日開催の「Google and Bing Maps Hackthon in Japan」の勉強会にてOn BrowserとWindows Phone 7からBing Mapsはどのように操作出来るかについて、お話をさせて頂きました。

Transcript

1. Silverlightから Bing Mapsに触れる Microsoft MVP for Device Application Development CH3COOH(酢酸)
2.  CH3COOH（酢酸） @ch3cooh  大阪で働く 雑食系プログラマ  携帯電話は、ドライバからミドル、アプリまで  業務系では基幹システムのバッチとか  最近は、iPhoneアプリ開発しかやってません！ 自己紹介
3.  時計Viewer for WM  某美人時計とそのクローンのViewer  Pixiq for WM  Pixiv Viewer。フリック対応の2を出す予定だったが、 WP7の登場と共に熱意が……  Library Guide for iPhone  図書館の蔵書と貸出状況が調べられるアプリ ＭＡ６で楽天賞を頂きました 今までに作ったアプリとか
4. アジェンダ
5.  Silverlightとは  使うだけなら No programing でOK  簡単な操作は JavaScript と組み合わせ  複雑な操作は C#、VB.NET etc で Silverlight (On Browser)編
6.  Windows Phone 7とは  VS2010で Bing Maps をぽとぺた  WP7版のBing Maps Controlの機能  実機で Bing Maps をみてみましょう  Bing Maps Controlとの連携  おまけ Windows Phone編
7. Silverlight編
8.  Web Browser Plugin  数秒でインストール完了！  クロスプラットフォームで、 OSやブラウザなど実行環境に依存しない  対応ＯＳ：Windows 、 Mac、Linux  対応ブラウザ：IE、Firefox、Safari、Chrome Silverlight とは
9.  http://www.microsoft.com/getsilverlight/get-started/install/default.aspx 正式なサポートではないが、実質OperaやLinuxでも動作する（らしい） 対応OS/ブラウザの組み合わせ ＯＳ Internet Explorer 8+ Firefox 3+ Safari 3+ Chrome 4+ Windows 7 ◦ ◦ - ◦ Windows Vista ◦ ◦ - ◦ Windows XP SP2 ◦ ◦ - ◦ Mac OS X - ◦ ◦ ◦
10. HTML5との違い Browser Technology Web Desktop Mobile Out of Browser ・COM Automation ・Web Browser ・P/Invoke Streaming, Live Streaming Media Printing Web Camera Mic Controls Business
11.  今年の春には、 Silverlight5がリリース  Windows Phone 7もSilverlightを採用  アウトオブブラウザ（ブラウザ外実行）で、COM AutomationやP/Invokeに対応  マイクロソフト的に、今後の主力をSilverlightとし て、ブラウザだけでなくデスクトップやモバイル での展開を想定している ・・・のかも？ マイクロソフトの本気
12. Bing Maps Controlを ブラウザ上で使ってみよう！
13.  No programing  地図の表示はプログラミング丌要  With JavaScript  簡単な操作は JavaScript で可能  Silverlight programing  地図アプリケーションの作成  C#, Visual Basic, etc… Silverlight Control
14.  <ifram>  Ｄｅｍｏ No Programing <iframe width="512" height="512" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://dev.virtualearth.net/embeddedMap/v1/silverl ight/road?zoomLevel=15&center=35.1813139560218_1 36.9064892&pushpins=35.1813139560218_136.9064892 " />
15. 地図を使いたいだけなら これでＯＫ
16.  <object> With JavaScript(1/2) <object id="control" data="data:application/x-silverlight" type="application/x-silverlight-2" width="512" height="512"> <param name="source" value="http://dev.virtualearth.net/silverlight/mapcontrol/v1/Micr osoft.Maps.MapControl.xap" /> <param name="enableHtmlAccess" value="true" /> <param name="initParams" value="ApplicationId=BingMapKey"/> </object>
17.  JavaScript  Ｄｅｍｏ With JavaScript(2/2) var control = document.getElementById("control"); var map = control.Content.map; var mode = control.Content.services.createObject("Microsoft.Ma ps.MapControl.AerialMode"); map.Mode = mode;
18.  地図の表示座標を大阪、名古屋、東京を 数秒ごとに変更しています  JavaScriptでBing Mapsのobjectを取って きて、移動させているだけ 簡単な操作であれば これだけでＯＫです
19.  for End-User  User Experience  for Developer  .NET Languages  豊富な Class Libraries Silverlight Control の特徴
20.  Visual Studio 2010 Professional  Expression Studio Ultimate 4.0(Option)  ¥123,400 + ¥63,093 = ¥186,493  Silverlight 4 Tools for Visual Studio 2010 ※DreamSpark（学生）、BizSpark(ベンチャー)なら無償でOK 開発環境 (1/2) 有料プラン 参考価格
21.  Visual Web Developer 2010 Expression  Silverlight 4 Tools for Visual Studio 2010 ※有料プランとの違いは、VSSとの統合、バグトラッキング、 ビルドの自動化が出来ない(Professional)、 コードカバレッジ、コード分析、UIテストが使えない(Premium) 開発環境 (2/2) 無料プラン
22.  XAMLで記述 地図の表示 xmlns:m="clr- namespace:Microsoft.Maps.MapControl;assembly=Mic rosoft.Maps.MapControl“ <m:Map x:Name="MyMap" CredentialsProvider=“Bing maps key" >
23.  Pushpin の追加  Polygon and Polyline の追加  Silverlight Control の追加  まとめてデモをご覧ください エンティティを追加
24.  地図のプラットフォームとして使用可能で、 ゼロからオリジナルの地図を作ることが可能  MapMode  FlatMapMode平面で表現  MercatorMode: 円筒で表現  RoadMode（道路表示）、 AerialMode （航空写真表示）  3Dの概念も用意(MapMode3D)  Pitch, Heading Map Platform としての Map Control
25.  MercatorModeを継承すると、真っ白で何もな い地図モードを作れる  その上に、日本地図を適当に点を引いて書い てみました  Ｄｅｍｏ Remove the Base Map Tile
26.  オリジナルの地図を自分で作るのは大変！  エアリアルモードを継承して、ズーム可能な範 囲と表示範囲を限定するくらいであれば、難し くはない  Demo Custom Map Mode
27.  Streetsideは、Google MapsのStreet View  Bird’s eyeは、鳥観  Demo  Extented Mode Betaが更新されておらず、今 のところSilverlight 4では使えない Streetside and Bird’s eye
28.  簡単に地図が使えることが分かりました  JavaScriptからも.NETからも操作は簡単  MapControlは、地図のカスタマイズも可能  自分がどこにいて、どの角度で、どの方角を向いているの か、情報は持っているので、どんな地図でも作れるはずだ が・・・ SilverlightでのBing Maps まとめ
29. Windows Phone 7
30.  Microsoftからリリースされた 新しいスマートフォンプラットフォーム  ２０１０年１２月にアメリカで発売されました  開発環境の提供やライセンス形態は、 ほとんどiPhoneと同じ  アプリは、Silverlightを使って開発します Windows Phone 7 とは
31. 日本では現時点では未発売  現時点では、日本語が使えないので どのキャリアからも発売予定は、無し！  我慢出来ずにうっかりする人が多数。。。
32.  開発ツールは無償で提供されている  Expression Blend for Windows Phone（デザイン）  Visual Studio 2010 Express for Windows Phone（コード）  アプリケーションの開発は、全て『無料』で xap（WP7での実行形式）まで作れます  ただし、実機転送とアプリ公開は、 AppHubメンバーにしかできず『有料』 開発環境
33.  http://www.microsoft.com/downloads/en/details.asp x?FamilyID=04704acf-a63a-4f97-952c-8b51b34b00ce  2011年1月度アップデートで、コピペに対応  http://www.microsoft.com/downloads/en/details.as px?FamilyID=49B9D0C5-6597-4313-912A- F0CCA9C7D277  地図関係では、Bing Mapsのパフォーマンスが向上 Windows Phone Developer Tools
34. Visual Studio 2010 Express Edition for Windows Phone  プログラマ向けの開発 ツールの王道  WP7向け専用のエディ ション
35. Microsoft Expression Blend for Windows Phone  デザイナ向けのツール  Expreesionシリーズで唯一 無料で使える(？)  開発環境(VS)がなくても、デ バイスへのデプロイが可能  複雑なXAMLもStoryBoardで 簡単に
36.  WP7向けアプリストア  サービスが開始して から3ヶ月で7,000本 オーバーを達成！ Windows Phone 7 Marketplace
37. 開発したアプリを公開するのは  野良アプリの存在が許されていません  相手がアンロックした端末を持っているのであれば、 xapを渡して、自前でデプロイしてもらう方法があります  「XAPでくれ！」  一般のユーザーに使ってもらう為には、 正規の手順でAppHubへSubmitする
38.  iOS Developer Programのようなもの  WP7、Xbox 360での実機デバッグ Marketplaceへのアプリリリースが可能  会費は、99$ USドル/年  学生は無償でメンバーシップになれます 詳しくは、DreamSpark Programを AppHub メンバーシップ
39. Bing Maps Controlを 使ってみよう
40.  ToolBoxからMapを貼り付 けて、実行するだけ  1StepでWP7アプリでMap Controlが使えます VS2010からBing Mapを使う
41. DEMO1 実行結果
42. Bing Maps Controlの 基本的な機能
43.  標準コントロールとして提 供されている  ピンチイン・アウトによる ズームや、パンなど基本的 な地図コントロールとして の機能を持つ Bing Maps Silverlight Control for Windows Phone
44.  Modeプロパティの設 定に、『Road』を設定 地図の表示モード 地図表示
45.  Modeプロパティの設 定に、『Aerial』を設定 地図の表示モード 航空写真表示
46.  Modeプロパティの設 定に、 『AerialWithLabels』を 設定 地図の表示モード 航空写真+ラベル表示
47.  プッシュピンを刺すの には、PushPinクラスを 使う  PushPinクラスを継承 することで、任意の表 示のピンが作れる PushPin
48.  地図上に線を引くには、 MapPolylineクラスを 使う  Polygonを使うと、矩形 を描画することが出来 ます Polyline と Polygon
49.  地図上に画像を置くに は、MapLayerを用意し ます  ImageLayerの上に Imageを置き、地図に 設定するだけ Layer
50. GPSと地図を連携させる
51.  GPSから位置情報を取得して、 プッシュピンを立ててみましょう  GPSを使って位置測位するための準備  System.Device.dllを参照して、 System.Device.Location名前空間の GeoCoordinateWatcherクラスを使う GPSと地図の連携
52. 位置情報 取得開始 位置変更 イベント 地図へピ ンを刺す ザックリとはこんな感じ
53.  GeoCoordinateWatcher watcher; // GeoCoordinateWatcherの初期化を行う watcher = new GeoCoordinateWatcher ( GeoPositionAccuracy.High ); // 位置変更イベントのイベントハンドラを追加 // watcher_PositionChanged watcher.PositionChanged += 省略 // データの取得を開始する watcher.Start(); 位置情報を取得する
54.  コントロールへの操作はメインスレッドで行 う必要がある  イベントハンドラでは、メインスレッドへ Dispatchして処理をデリゲートします  Deployment.Current.Dispatcher.BeginInvok e(() => MyPositionChanged(e)); 位置情報の通知を受け取る
55.  // 位置情報を取得する GeoCoordinate co = watcher.Position.Location; // プッシュピンを作る var pin = new Pushpin() { Location = co }; map1.Children.Add(pin); // 位置測位を終了 watcher.Stop(); 位置情報をもとにピンを刺す
56. PhotoChooserTaskと地図を 連携させる
57.  地図上に写真を配置していくにはどうしよ う？ Bing Maps上に画像を配置 Chooserの立 ち上げ Complated イベントで画 像を取得 画像をレイ ヤーに配置 地図にレイ ヤーを設定
58.  アプリから直接ファイルシ ステムにアクセスする方 法が提供されていません  「Chooser」を通す必要が あり。静止画像の選択に はPhotoChooserTaskを 使う どうやって画像を取得しよう？
59.  Microsoft.Phone.Tasks名前空間に各タ スクは扱い方がほぼ一緒で使いやすい  var task = new PhotoChooserTask(); // タスクが完了すると、イベントハンドラが呼び出される task.Completed += (sx, ex) => ｛省略｝ task.Show(); PhotoChooserTask
60.  // 取得できていれば、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); アルバムの中から写真の 選択結果を受け取る
61. Bing Maps Controlに 足りないものを足してみる
62.  ＭＳと地図提供会社との 大人の事情のせいか、 日本の地図はかなり残念 このままでは、WP7 が、日本で受け入れ てもらえない！！ Bing Map Controlの 地図はかなり残念・・・ 大阪駅付近の詳細地図
63.  Google and Bing Maps Hackathonなので、 2つのそれぞれ良いところを頂きます！  WP7にはGoogle Mapのコントロールが無い  だったら、ベースにはBing Maps Control  Bing Map for WP7の地図はとても残念  だったら、Google Mapの地図を使おう Google Map on Bing Map Control
64.  Bing Mapsでは、最大ズーム時で 1,073,741,824ピクセルｘ1,073,741,824ピクセル の超高画質の地図を使っているみたい  このBing Maps Controlでは、『Deep Zoom』と呼ばれる技術が使われています どうやって作る？
65.  超高画質の画像を小さな単位（タイル）に します  表示に必要な部分だけのタイルを読み込 んで、操作をスムーズにします Deep Zoomとは
66.  地図をズームレベルに応じて、範囲を狭く、そして詳細に タイルのイメージ より詳細に
67. タイルの単位は 256 x 256  Google Mapsのタイルの大きさは、  256 x 256  Bing Mapsのタイルの大きさも、  256 x 256  あとは、お察しの通り。。。
68.  Bing Maps Controlは、表示したい位置座 標を元にして、タイル画像が格納されて いるサーバーからダウンロードしてる  このタイル画像のURLを、生成しているメ ソッドをオーバーライドして書き換えれば、 Google Mapsのタイル画像が使える！ 具体的にどうやって作るの？
69.  Microsoft.Phone.Controls.Maps名前空間の TileSourceクラスの以下のメソッド  Uri GetUri(int x, int y, int zoomLevel)  Google MapsのタイルURLは以下の通り  http://mt{server}.google.com/vt/lyrs={ty pe}&x={x値}&y={y値}&z={zoom-level} URLはGetUriメソッドで作ってる
70.  実際にアプリの動きをみてみましょう Google Map on Bing Map Control デモ
71. 実行結果
72.  Google Mapのライセンス的にNGなような気 がします。容量・用法を守って正しくお使いく ださい ご使用上の注意
73.  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 本セッションの補足資料
74.  スマートフォン勉強会のスタッフ  既にユーザーの方や興味のある方と、 スマートフォンアプリの開発者をつなぐ勉強会  関西と関東は定期開催  関西は奇数月に、関東は偶数月に スマートフォン勉強会
75.  2/19 Windows Phone 7 ブーストアップ  2/26 スマートフォン勉強会＠関東＃11  3/26 スマートフォン勉強会＠関西＃14 スマートフォン勉強会の告知
76. ご清聴ありがとうございました  本セッションについて何かありましたら  blog http://d.hatena.ne.jp/ch3cooh393/  site http://ch3cooh.jp/  Twitter @ch3cooh