特集 マッシュアップ開発環境「Microsoft Popfly」 Popflyでマッシュアップの面白さを体感しよう！ 宮崎 昭世 Microsoft MVP for ASP/ASP.NET 2008/01/25
Page1 Page2 Page3

■Popflyでマッシュアップ

　今回は「twittervision」のようにTwitterのコメントを地図上に表示してみたい。twittervisionとはTwitter APIとGoogle Maps APIをマッシュアップさせ、Twitterの最新のコメントをGoogle Maps上につぎつぎと表示するサービスである（Twitterについては「いまだからこそTwitterの楽しさを知るべきです！」を参照してほしい）。

twittervision

実際に「twittervision」を訪れて見てみてほしい。

　今回Twitter APIとPopflyで利用しやすい地図サービスであるVirtualEarth APIをマッシュアップしtwittervisionと同様のサービスを作成してみよう。

　まずは、マッシュアップを作成するためのページを開く。上部中央の「Create a Mashup」リンクをクリックする。

マッシュアップを作成するページを開く

　すると、次のような「Mashup Creator」ページが開く。

「Mashup Creator」ページ

Visual Studioと同様に、左側にツールボックスのような部品が並んでいる領域（Blocks）が表示され、中央にデザインを行う領域が表示される。

　「Mashup Creator」ページでは、“Block”と呼ばれる部品を貼り付けていき、それらを関連付けることによりマッシュアップを作成する。

　まずは、「Twitter」Blockと「VirtualEarth」Blockを貼り付けよう。貼り付け方法は次の画面を参照してほしい。

Blockの貼り付け

Blocksで［Social Networks］タブを展開し、［Twitter］をクリックすると、デザイン領域に「Twitter」Blockが張り付く。同様に、［Maps］タブで［VirtualEarth］Blockをクリックする。

　2つのBlockが張り付いたので、次の画面を参考に、これらを関連付けてみよう。

Blockの関連付け

「Twitter」Blockの青い丸をクリックすると、マウス・カーソルを移動すると関連付けることができるポイントがオレンジの丸に変わる。「VirtualEarth」Blockのオレンジの丸をクリックすると、矢印が引かれ関連付けられる。

　これで「Twitter」Blockと「VirtualEarth」Blockが関連付いたが、次の画面のように「VirtualEarth」Blockには警告マークが表示される。

Blockの関連付けの警告

「Twitter」Blockの出力が「VirtualEarth」Blockに必要な入力を自動設定できない場合には警告マークが表示される。

　この警告は、「VirtualEarth」Blockで必要な情報が「Twitter」Blockから取得できないために表示されている。実際に「VirtualEarth」Blockで必要となっている項目を確認してみよう。

　「VirtualEarth」Blockの右上のレンチ・アイコンをクリックすると、次の画面が表示され、「VirtualEarth」Blockの設定を確認できる。

「VirtualEarth」Blockの設定

「VirtualEarth」Block右上のレンチ・アイコンをクリックすると、「VirtualEarth」Blockの設定を確認できる。このページを閉じるには右上の大きなレンチ・アイコンをクリックすればよい。lastitudeとlongitudeの項目に「*」マークが付いており、緯度・経度情報が取得できていないことが分かる。

　「VirtualEarth」Blockの設定を見てみると、緯度・経度情報（lastitudeとlongitude）が取得できていないことが分かる。そこで、「VirtualEarth」Blockで経度・緯度情報を使えるように1つBlockを加えてほしい。

　まずは、いまつなげた関連付けを削除する。これには次の画面のように、矢印をクリックすればよい。

関連付けの削除

矢印をクリックすると関連付けた矢印を削除できる。

　次に、次の画面を参考にして「GeoNames」Blockを貼り付けてほしい。

「GeoNames」Blockの貼り付け

Blocksで［Maps］タブを展開し、［GeoNames］をクリックすると、デザイン領域に「GeoNames」Blockが張り付く。

　次に3つのBlockを関連付ける。「Twitter」Blockから「GeoNames」Blockと「VirtualEarth」Blockへ、「GeoNames」Blockから「VirtualEarth」Blockへ向かう矢印を引くようにそれぞれ関連付けてほしい。

3つのBlockの関連付け

「Twitter」Blockの青い丸をクリックし、「GeoNames」Blockのオレンジに変わった丸をクリックすると、「Twitter」Blockから「GeoNames」Blockへの関連付けが行われる。同様に、「GeoNames」Blockの青い丸をクリックし、「VirtualEarth」Blockのオレンジに変わった丸をクリックする。最後に「Twitter」Blockの青い丸をクリックし、「VirtualEarth」Blockのオレンジに変わった丸をクリックする。

　これで、すべての関連付けは完了だ。最後に、「VirtualEarth」Blockの設定を行う。「VirtualEarth」Blockの右上のレンチ・アイコンをクリックして、次の画面と表の内容に設定してほしい。

「VirtualEarth」Blockの設定

下の表のように設定する。latitude、longitudeは自動で設定されているはずである。また、value値はsource値を設定すると最適なものが自動で設定され、変更しなくてよい値もある。

項目 source value latitude GeoNames latitude longitude GeoNames longitude url Twitter imageUrl title Twitter screenName description Twitter text centerMapOnPushpin [custom] true

　右上の大きなレンチ・アイコンをクリックすれば、「VirtualEarth」Blockの設定ページを閉じることができる。

　これで完成だ。実際に動作させてみよう。デザイン領域の上部にある［Preview］ボタンをクリックすると、次の画面のような実行結果が表示される。

マッシュアップの実行結果

　twittervisionのような複雑そうなページでも、いとも簡単に作成できることに驚いたのではないだろうか。これがマッシュアップの面白さだ。

　最後に作成したマッシュアップを保存する方法を紹介しておこう。

INDEX
	［特集］マッシュアップ開発環境「Microsoft Popfly」
	Popflyでマッシュアップの面白さを体感しよう！
	1．Popflyの利用準備
	2．Popflyでマッシュアップ
	3．マッシュアップの保存

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