Silverlightから Bing Mapsに触れる

Microsoft MVP for Device Application Development CH3COOH(酢酸)

CH3COOH（酢酸） @ch3cooh

大阪で働く 雑食系プログラマ 携帯電話は、ドライバからミドル、アプリまで

業務系では基幹システムのバッチとか

最近は、iPhoneアプリ開発しかやってません！

自己紹介

時計Viewer for WM

某美人時計とそのクローンのViewer

Pixiq for WM

Pixiv Viewer。フリック対応の2を出す予定だったが、WP7の登場と共に熱意が……

Library Guide for iPhone

図書館の蔵書と貸出状況が調べられるアプリ ＭＡ６で楽天賞を頂きました

今までに作ったアプリとか

アジェンダ

Silverlightとは

使うだけなら No programing でOK

簡単な操作は JavaScript と組み合わせ

複雑な操作は C#、VB.NET etc で

Silverlight (On Browser)編

Windows Phone 7とは

VS2010で Bing Maps をぽとぺた

WP7版のBing Maps Controlの機能

実機で Bing Maps をみてみましょう

Bing Maps Controlとの連携

おまけ

Windows Phone編

Silverlight編

Web Browser Plugin

数秒でインストール完了！

クロスプラットフォームで、 OSやブラウザなど実行環境に依存しない

対応ＯＳ：Windows 、 Mac、Linux

対応ブラウザ：IE、Firefox、Safari、Chrome

Silverlight とは

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 - ○ ○ ○

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

今年の春には、 Silverlight5がリリース

Windows Phone 7もSilverlightを採用

アウトオブブラウザ（ブラウザ外実行）で、COM AutomationやP/Invokeに対応

マイクロソフト的に、今後の主力をSilverlightとし

て、ブラウザだけでなくデスクトップやモバイルでの展開を想定している ・・・のかも？

マイクロソフトの本気

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

No programing

地図の表示はプログラミング丌要

With JavaScript

簡単な操作は JavaScript で可能

Silverlight programing

地図アプリケーションの作成

C#, Visual Basic, etc…

Silverlight Control

<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

" />

地図を使いたいだけなら これでＯＫ

<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>

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;

地図の表示座標を大阪、名古屋、東京を数秒ごとに変更しています

JavaScriptでBing Mapsのobjectを取ってきて、移動させているだけ

簡単な操作であれば これだけでＯＫです

for End-User

User Experience

for Developer

.NET Languages

豊富な Class Libraries

Silverlight Control の特徴

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) 有料プラン

参考価格

Visual Web Developer 2010 Expression

Silverlight 4 Tools for Visual Studio 2010

※有料プランとの違いは、VSSとの統合、バグトラッキング、 ビルドの自動化が出来ない(Professional)、 コードカバレッジ、コード分析、UIテストが使えない(Premium)

開発環境 (2/2) 無料プラン

XAMLで記述

地図の表示

xmlns:m="clr-

namespace:Microsoft.Maps.MapControl;assembly=Mic

rosoft.Maps.MapControl“

<m:Map x:Name="MyMap" CredentialsProvider=“Bing

maps key" >

Pushpin の追加

Polygon and Polyline の追加

Silverlight Control の追加

まとめてデモをご覧ください

エンティティを追加

地図のプラットフォームとして使用可能で、 ゼロからオリジナルの地図を作ることが可能

MapMode FlatMapMode平面で表現

MercatorMode: 円筒で表現

RoadMode（道路表示）、 AerialMode （航空写真表示）

3Dの概念も用意(MapMode3D) Pitch, Heading

Map Platform としての Map Control

MercatorModeを継承すると、真っ白で何もない地図モードを作れる

その上に、日本地図を適当に点を引いて書いてみました

Ｄｅｍｏ

Remove the Base Map Tile

オリジナルの地図を自分で作るのは大変！

エアリアルモードを継承して、ズーム可能な範囲と表示範囲を限定するくらいであれば、難しくはない

Demo

Custom Map Mode

Streetsideは、Google MapsのStreet View

Bird’s eyeは、鳥観

Demo

Extented Mode Betaが更新されておらず、今のところSilverlight 4では使えない

Streetside and Bird’s eye

簡単に地図が使えることが分かりました

JavaScriptからも.NETからも操作は簡単

MapControlは、地図のカスタマイズも可能 自分がどこにいて、どの角度で、どの方角を向いているのか、情報は持っているので、どんな地図でも作れるはずだが・・・

SilverlightでのBing Maps まとめ

Windows Phone 7

Microsoftからリリースされた 新しいスマートフォンプラットフォーム

２０１０年１２月にアメリカで発売されました

開発環境の提供やライセンス形態は、 ほとんどiPhoneと同じ

アプリは、Silverlightを使って開発します

Windows Phone 7 とは

日本では現時点では未発売

現時点では、日本語が使えないので どのキャリアからも発売予定は、無し！

我慢出来ずにうっかりする人が多数。。。

開発ツールは無償で提供されている Expression Blend for Windows Phone（デザイン）

Visual Studio 2010 Express for Windows Phone（コード）

アプリケーションの開発は、全て『無料』でxap（WP7での実行形式）まで作れます

ただし、実機転送とアプリ公開は、 AppHubメンバーにしかできず『有料』

開発環境

http://www.microsoft.com/downloads/en/details.aspx?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

Visual Studio 2010 Express Edition for Windows Phone

プログラマ向けの開発ツールの王道

WP7向け専用のエディション

Microsoft Expression Blend for Windows Phone

デザイナ向けのツール

Expreesionシリーズで唯一無料で使える(？)

開発環境(VS)がなくても、デバイスへのデプロイが可能

複雑なXAMLもStoryBoardで簡単に

WP7向けアプリストア

サービスが開始してから3ヶ月で7,000本オーバーを達成！

Windows Phone 7 Marketplace

開発したアプリを公開するのは

野良アプリの存在が許されていません 相手がアンロックした端末を持っているのであれば、

xapを渡して、自前でデプロイしてもらう方法があります

「XAPでくれ！」

一般のユーザーに使ってもらう為には、 正規の手順でAppHubへSubmitする

iOS Developer Programのようなもの

WP7、Xbox 360での実機デバッグ Marketplaceへのアプリリリースが可能

会費は、99$ USドル/年

学生は無償でメンバーシップになれます 詳しくは、DreamSpark Programを

AppHub メンバーシップ

Bing Maps Controlを 使ってみよう

ToolBoxからMapを貼り付けて、実行するだけ

1StepでWP7アプリでMap Controlが使えます

VS2010からBing Mapを使う

DEMO1 実行結果

Bing Maps Controlの 基本的な機能

標準コントロールとして提供されている

ピンチイン・アウトによるズームや、パンなど基本的な地図コントロールとしての機能を持つ

Bing Maps Silverlight Control for Windows Phone

Modeプロパティの設定に、『Road』を設定

地図の表示モード 地図表示

Modeプロパティの設定に、『Aerial』を設定

地図の表示モード 航空写真表示

Modeプロパティの設

定に、『AerialWithLabels』を設定

地図の表示モード 航空写真+ラベル表示

プッシュピンを刺すのには、PushPinクラスを使う

PushPinクラスを継承

することで、任意の表示のピンが作れる

PushPin

地図上に線を引くには、MapPolylineクラスを使う

Polygonを使うと、矩形

を描画することが出来ます

Polyline と Polygon

地図上に画像を置くには、MapLayerを用意します

ImageLayerの上にImageを置き、地図に設定するだけ

Layer

GPSと地図を連携させる

GPSから位置情報を取得して、 プッシュピンを立ててみましょう

GPSを使って位置測位するための準備

System.Device.dllを参照して、System.Device.Location名前空間のGeoCoordinateWatcherクラスを使う

GPSと地図の連携

位置情報取得開始

位置変更イベント

地図へピンを刺す

ザックリとはこんな感じ

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

位置情報を取得する

コントロールへの操作はメインスレッドで行う必要がある

イベントハンドラでは、メインスレッドへDispatchして処理をデリゲートします

Deployment.Current.Dispatcher.BeginInvoke(() => MyPositionChanged(e));

位置情報の通知を受け取る

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

位置情報をもとにピンを刺す

PhotoChooserTaskと地図を 連携させる

地図上に写真を配置していくにはどうしよう？

Bing Maps上に画像を配置

Chooserの立ち上げ

Complatedイベントで画像を取得

画像をレイヤーに配置

地図にレイヤーを設定

アプリから直接ファイルシステムにアクセスする方法が提供されていません

「Chooser」を通す必要が

あり。静止画像の選択にはPhotoChooserTaskを使う

どうやって画像を取得しよう？

Microsoft.Phone.Tasks名前空間に各タスクは扱い方がほぼ一緒で使いやすい

var task = new PhotoChooserTask(); // タスクが完了すると、イベントハンドラが呼び出される

task.Completed += (sx, ex) => ｛省略｝task.Show();

PhotoChooserTask

// 取得できていれば、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);

アルバムの中から写真の 選択結果を受け取る

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

ＭＳと地図提供会社との大人の事情のせいか、 日本の地図はかなり残念

このままでは、WP7

が、日本で受け入れてもらえない！！

Bing Map Controlの 地図はかなり残念・・・

大阪駅付近の詳細地図

Google and Bing Maps Hackathonなので、 2つのそれぞれ良いところを頂きます！

WP7にはGoogle Mapのコントロールが無い だったら、ベースにはBing Maps Control

Bing Map for WP7の地図はとても残念 だったら、Google Mapの地図を使おう

Google Map on Bing Map Control

Bing Mapsでは、最大ズーム時で 1,073,741,824ピクセルｘ1,073,741,824ピクセル

の超高画質の地図を使っているみたい

このBing Maps Controlでは、『Deep Zoom』と呼ばれる技術が使われています

どうやって作る？

超高画質の画像を小さな単位（タイル）にします

表示に必要な部分だけのタイルを読み込んで、操作をスムーズにします

Deep Zoomとは

地図をズームレベルに応じて、範囲を狭く、そして詳細に

タイルのイメージ

より詳細に

タイルの単位は 256 x 256

Google Mapsのタイルの大きさは、

256 x 256

Bing Mapsのタイルの大きさも、

256 x 256

あとは、お察しの通り。。。

Bing Maps Controlは、表示したい位置座

標を元にして、タイル画像が格納されているサーバーからダウンロードしてる

このタイル画像のURLを、生成しているメ

ソッドをオーバーライドして書き換えれば、Google Mapsのタイル画像が使える！

具体的にどうやって作るの？

Microsoft.Phone.Controls.Maps名前空間のTileSourceクラスの以下のメソッド

Uri GetUri(int x, int y, int zoomLevel)

Google MapsのタイルURLは以下の通り

http://mt{server}.google.com/vt/lyrs={type}&x={x値}&y={y値}&z={zoom-level}

URLはGetUriメソッドで作ってる

実際にアプリの動きをみてみましょう

Google Map on Bing Map Control デモ

実行結果

Google Mapのライセンス的にNGなような気

がします。容量・用法を守って正しくお使いください

ご使用上の注意

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

本セッションの補足資料

スマートフォン勉強会のスタッフ

既にユーザーの方や興味のある方と、 スマートフォンアプリの開発者をつなぐ勉強会

関西と関東は定期開催

関西は奇数月に、関東は偶数月に

スマートフォン勉強会

2/19 Windows Phone 7 ブーストアップ

2/26 スマートフォン勉強会＠関東＃11

3/26 スマートフォン勉強会＠関西＃14

スマートフォン勉強会の告知

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

本セッションについて何かありましたら

blog http://d.hatena.ne.jp/ch3cooh393/

site http://ch3cooh.jp/

Twitter @ch3cooh