連載一覧へ

.NETを知らない人でも分かるSilverlight入門（5）

Windows Live APIをSilverlightでマッシュアップ！

松原晋啓
2008/6/30

 

「Virtual Earth」とSilverlightのマッシュアップ・サンプル

　次に、「Virtual Earth」との連携が面白そうなので紹介しましょう。とはいえ、現時点でSilverlight 1.0をベースとしている本記事では組み合わせるくらいのサンプルしか紹介できませんが、Silverlight 2であればより密な連携が可能なので、おいおい紹介したいと考えています。サンプルは、以下の図1のようになります。

　操作としては、最初はSilverlightで作成したボタンだけが表示されている状態で、それをクリックするとVirtual Earthが起動し地図が表示されるというだけのサンプルです。

図1　Virtual Earth with Silverlightサンプル（実際にSilverlightで見たい場合は画像をクリック！）※サンプルを動かすには、事前に実行環境のインストールが必要です。→ダウンロードページ

　Silverlightのコードについてはいまさら説明するまでもないかと思いますので割愛しますが、Virtual Earthの表示コードについてだけ少し触れます。

　まず、Virtual Earth APIを使用するためにJavaScriptの宣言を、表示するHTMLファイルに追加しています。

<script type="text/javascript"   src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.1&mk t=ja-jp"> </script>

　Virtual Earth APIを使用するための準備はこれで完了です。後は、実際表示する個所（ここでは、<div id=’myMap’>の領域）に対して、以下のコードでロードしてやるだけです。このサンプルでは、この地図情報のロードはSilverlightのクリックイベントで行うようにしています。

function GetMap() {     map = new VEMap('myMap');     map.LoadMap(LA, 14, VEMapStyle.Hybrid, false,         VEMapMode.Mode3D, true, 1);     AddPin(); }

　VEMap.LoadMapクラスには地図の初期データを設定する必要があります。それが、VEMap.LoadMapクラスの引数に設定されている値になり、以下のような設定が必要となります。

表1　VEMap.LoadMapのパラメータ

プロパティ 詳細 デフォルト値 VELatLong マップの中心を表すVELatLongクラスオブジェクト null zoom 表示するズームレベルを設定。値の範囲は1〜19 4 Style マップスタイルを設定。VEMapStyle列挙体の値を使用 VEMapStyle.Road fixed 固定マップとして表示するか設定 false mode マップの表示を2Dモードか3Dモードかを設定。VEMapMode列挙体の値を使用 VEMapMode.Mode2D showSwitch マップモードの切り替えボタンをダッシュボードコントロール上に表示するか設定 true tileBuffer マップ読み込み時に使用するタイルバッファの量を設定。3Dモードでは、無視 0 mapOptions そのほかのマップオプションを指定するVEMapOptionsクラスオブジェクト nul;l

　たったこれだけのことですが、いままでかなり複雑で難しかった地図情報が表示できます。実行するとすぐに気付くと思いますが、普通はHTML上に地図情報を表示するのでコンテキストメニュー（右クリックメニュー）はWebサイトと同じようになるはずですが、今回のサンプルはSilverlight上にVirtual Earthを表示したので、Silverlightのメニューが出てきます。

　Virtual Earthは、ほかにも多くの機能を持っていますし、さらに「Live Search」と組み合わせて住所などから地図情報の検索もできるので、便利に活用できるのではないかと思います。 このサンプルのソースコードはこちらになります。

WPFとSilverlightは、やがて統合する？

　今回は、Windows Liveと組み合わせることの意味や実際のサンプル例も一部紹介しましたが、いかがでしたでしょうか。

　以前のマイクロソフトは「ソフトウェア」のみに着目し、ベースプラットフォームとして「Windows」を提供してきましたが、現在は「ソフトウェア＋サービス」という考え方を主体としてベースプラットフォームを提供しています。これは、あらゆる状況に対しても変わらないエクスペリエンスを提供することが可能なプラットフォームという位置付けで、オフラインとオンラインの両方を対象にしているようです。

　これだけ電子機器が乱立している現在において、常にオンライン状態で電波を飛ばし続けることができるとは考えられません。そのため、GearsやAdobe AIRなどのテクノロジーもそうですが、オンライン利用のサービスを主体としつつも、必ずオフライン利用のソフトウェアが必要になります。

　こう考えると、「ソフトウェア＋サービス」とは、従来のソフトウェアプラットフォームである「Windows」に加え、サービスプラットフォームである「Windows Live」、そしてモバイルプラットフォームの「Windows Mobile」の3つをベースプラットフォームとすることなのでしょう。それらの上に動作するアプリケーションプラットフォームはすべて「.NET」の下に集約され、スムーズな相互利用を可能とすることが狙いなのではないでしょうか。

図2　UIデザインとプラットフォーム

　「ソフトウェア＋サービス」におけるリッチなUIを表現するテクノロジーとして、「Windows」と密接にかかわるのが「WPF（Windows Presentation Foundation）」であり、「Windows Live」や「Windows Mobile」と密接にかかわるのが「Silverlight」なのでしょう（図2）。先日発表されたSilverlight 2 Beta 2でWPFとSilverlightの互換性が上がっていたので、筆者は、おそらくWPFとSilverlightは最終的にはほぼ同じテクノロジーとして集約されるのではないかと予想しています。

　次回は、今回紹介し切れなかったWindows Liveサービスとのサンプル例などを紹介します。お楽しみに！

■ ＠IT関連記事

Silverlightは次世代のJavaScriptフレームワーク？ ついに正式リリース！ いまこそ知りたい!!　どの環境でも動くマイクロソフトのRIA技術Silverlightについて、実際に動く2つのサンプルを見ながら、その特徴と技術を解説 「リッチクライアント ＆ 帳票」フ ォーラム 2007/9/7

Popflyでマッシュアップの面白さを体感しよう！ 特集：マッシュアップ開発環境「Microsoft Popfly」　Web開発の新潮流「マッシュアップ」とは？ Web上で提供される開発環境を使って手軽にマッシュアップを試してみよう 「Insider.NET」フォーラム 2008/1/25

Silverlightと株価ビジュアライゼーション 連載：Flash観測所（2）　マイクロソフト発の新動画再生技術のSilverlightと、複雑な株価データを効果的に見せるFlashアプリサービスを紹介する 「リッチクライアント ＆ 帳票」フ ォーラム 2007/5/9

プロフィール

松原 晋啓（まつばら のぶあき） SE、コンサルタント、エバンジェリストを経て、現在はソリューションスペシャリストとして活動。その傍ら、イベントや記事寄稿を通じてマイクロソフトのテクノロジーや製品の普及に努めている。 趣味は小学校から続けているバスケットボールで、4年前にチームを作り、現在もリーダーとして活動を行っている

1-2-3

INDEX
.NETを知らない人でも分かるSilverlight入門（5） Windows Live APIをSilverlightでマッシュアップ！
	Page1 Windows Live API／プラットフォームとの連携 生きているWindows？ 「Windows Live」とは？ Windows LiveのWeb APIには、どんなものがあるの？
	Page2 「Live Search」とSilverlightのマッシュアップ例
	Page3 「Virtual Earth」とSilverlightのマッシュアップ・サンプル WPFとSilverlightは、やがて統合する？

リッチクライアント＆帳票 全記事一覧へ

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）