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

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 (On Browser)編
 Silverlightとは
 使うだけなら No programing でOK
 簡単な操作は JavaScript と組み合わせ
 複雑な操作は C#、VB.NET etc で

6. Windows Phone編
 Windows Phone 7とは
 VS2010で Bing Maps をぽとぺた
 WP7版のBing Maps Controlの機能
 実機で Bing Maps をみてみましょう
 Bing Maps Controlとの連携
 おまけ

7. Silverlight編

8. Silverlight とは
 Web Browser Plugin
 数秒でインストール完了！
 クロスプラットフォームで、
OSやブラウザなど実行環境に依存しない
 対応ＯＳ：Windows 、 Mac、Linux
 対応ブラウザ：IE、Firefox、Safari、Chrome

9. 対応OS/ブラウザの組み合わせ
ＯＳ Internet Firefox 3+ Safari 3+ Chrome 4+
Explorer 8+
Windows 7
○ ○ - ○
Windows Vista
○ ○ - ○
Windows XP SP2
○ ○ - ○
Mac OS X
- ○ ○ ○
 http://www.microsoft.com/getsilverlight/get-started/install/default.aspx
正式なサポートではないが、実質OperaやLinuxでも動作する（らしい）

10. HTML5との違い
Media
Streaming,
Web Live Streaming
Web Camera
Desktop Mic
Out of Browser
・COM Automation
Browser Mobile ・Web Browser
Technology ・P/Invoke
Printing
Controls
Business

11. マイクロソフトの本気
 今年の春には、 Silverlight5がリリース
 Windows Phone 7もSilverlightを採用
 アウトオブブラウザ（ブラウザ外実行）で、COM
AutomationやP/Invokeに対応
 マイクロソフト的に、今後の主力をSilverlightとし
て、ブラウザだけでなくデスクトップやモバイル
での展開を想定している ・・・のかも？

12. Bing Maps Controlを
ブラウザ上で使ってみよう！

13. Silverlight Control
 No programing
 地図の表示はプログラミング丌要
 With JavaScript
 簡単な操作は JavaScript で可能
 Silverlight programing
 地図アプリケーションの作成
 C#, Visual Basic, etc…

14. No Programing
 <ifram>
<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. With JavaScript(1/2)
 <object>
<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. With JavaScript(2/2)
 JavaScript
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. Silverlight Control の特徴
 for End-User
 User Experience
 for Developer
 .NET Languages
 豊富な Class Libraries

20. 開発環境 (1/2)
有料プラン
 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

21. 開発環境 (2/2)
無料プラン
 Visual Web Developer 2010 Expression
 Silverlight 4 Tools for Visual Studio 2010
※有料プランとの違いは、VSSとの統合、バグトラッキング、
ビルドの自動化が出来ない(Professional)、
コードカバレッジ、コード分析、UIテストが使えない(Premium)

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. Map Platform としての
Map Control
 地図のプラットフォームとして使用可能で、
ゼロからオリジナルの地図を作ることが可能
 MapMode
 FlatMapMode平面で表現
 MercatorMode: 円筒で表現
 RoadMode（道路表示）、 AerialMode （航空写真表示）
 3Dの概念も用意(MapMode3D)
 Pitch, Heading

25. Remove the Base Map Tile
 MercatorModeを継承すると、真っ白で何もな
い地図モードを作れる
 その上に、日本地図を適当に点を引いて書い
てみました
 Ｄｅｍｏ

26. Custom Map Mode
 オリジナルの地図を自分で作るのは大変！
 エアリアルモードを継承して、ズーム可能な範
囲と表示範囲を限定するくらいであれば、難し
くはない
 Demo

27. Streetside and Bird’s eye
 Streetsideは、Google MapsのStreet View
 Bird’s eyeは、鳥観
 Demo
 Extented Mode Betaが更新されておらず、今
のところSilverlight 4では使えない

28. SilverlightでのBing Maps まとめ
 簡単に地図が使えることが分かりました
 JavaScriptからも.NETからも操作は簡単
 MapControlは、地図のカスタマイズも可能
 自分がどこにいて、どの角度で、どの方角を向いているの
か、情報は持っているので、どんな地図でも作れるはずだ
が・・・

29. Windows Phone 7

30. Windows Phone 7 とは
 Microsoftからリリースされた
新しいスマートフォンプラットフォーム
 ２０１０年１２月にアメリカで発売されました
 開発環境の提供やライセンス形態は、
ほとんどiPhoneと同じ
 アプリは、Silverlightを使って開発します

31. 日本では現時点では未発売
 現時点では、日本語が使えないので
どのキャリアからも発売予定は、無し！
 我慢出来ずにうっかりする人が多数。。。

32. 開発環境
 開発ツールは無償で提供されている
 Expression Blend for Windows Phone（デザイン）
 Visual Studio 2010 Express for Windows Phone（コード）
 アプリケーションの開発は、全て『無料』で
xap（WP7での実行形式）まで作れます
 ただし、実機転送とアプリ公開は、
AppHubメンバーにしかできず『有料』

33. Windows Phone Developer Tools
 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のパフォーマンスが向上

34. Visual Studio 2010 Express Edition
for Windows Phone
 プログラマ向けの開発
ツールの王道
 WP7向け専用のエディ
ション

35. Microsoft Expression Blend
for Windows Phone
 デザイナ向けのツール
 Expreesionシリーズで唯一
無料で使える(？)
 開発環境(VS)がなくても、デ
バイスへのデプロイが可能
 複雑なXAMLもStoryBoardで
簡単に

36. Windows Phone 7 Marketplace
 WP7向けアプリストア
 サービスが開始して
から3ヶ月で7,000本
オーバーを達成！

37. 開発したアプリを公開するのは
 野良アプリの存在が許されていません
 相手がアンロックした端末を持っているのであれば、
xapを渡して、自前でデプロイしてもらう方法があります
 「XAPでくれ！」
 一般のユーザーに使ってもらう為には、
正規の手順でAppHubへSubmitする

38. AppHub メンバーシップ
 iOS Developer Programのようなもの
 WP7、Xbox 360での実機デバッグ
Marketplaceへのアプリリリースが可能
 会費は、99$ USドル/年
 学生は無償でメンバーシップになれます
詳しくは、DreamSpark Programを

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

40. VS2010からBing Mapを使う
 ToolBoxからMapを貼り付
けて、実行するだけ
 1StepでWP7アプリでMap
Controlが使えます

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. Polyline と Polygon
 地図上に線を引くには、
MapPolylineクラスを
使う
 Polygonを使うと、矩形
を描画することが出来
ます

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

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

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

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上に画像を配置
 地図上に写真を配置していくにはどうしよ
う？
Complated
Chooserの立 画像をレイ 地図にレイ
イベントで画
ち上げ ヤーに配置 ヤーを設定
像を取得

58. どうやって画像を取得しよう？
 アプリから直接ファイルシ
ステムにアクセスする方
法が提供されていません
 「Chooser」を通す必要が
あり。静止画像の選択に
はPhotoChooserTaskを
使う

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

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. Bing Map Controlの
地図はかなり残念・・・
 ＭＳと地図提供会社との
大人の事情のせいか、
日本の地図はかなり残念
このままでは、WP7
が、日本で受け入れ
てもらえない！！ 大阪駅付近の詳細地図

63. Google Map on Bing Map Control
 Google and Bing Maps Hackathonなので、
2つのそれぞれ良いところを頂きます！
 WP7にはGoogle Mapのコントロールが無い
 だったら、ベースにはBing Maps Control
 Bing Map for WP7の地図はとても残念
 だったら、Google Mapの地図を使おう

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. URLはGetUriメソッドで作ってる
 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}

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