開発者Blog FB × DTIでタグ「Webカメラ」が付けられているもの

WebカメラとGoogleマップのマッシュ...

2008年5月 2日 20:47 DreamHUBチーム | | コメント(0) | トラックバック(0)
こんにちは、DreamHUBチームです。

今まで、デモ画面としてWebカメラとGoogleマップとマッシュアップをいろいろお見せしてきましたが、どうやっているのか教えてほしいという声を聞きますので、今回は簡単なデモページを用意し、解説したいと思います。

■デモページ


このデモページは、Googleマップの上に、マーカーを設定し、クリックすると吹き出しにWebカメラの画像が表示されるというものです。

分かりやすく説明するために、非常にシンプルな構成としました。
それでは、解説していきましょう。

【 STEP.1   :   GoogleマップのAPIキーを取得します 】
まず、GoogleマップのAPIを利用するには以下のページより、APIキーを取得する必要があります。これはGoogleがどのページで利用されているのか、把握をするためになります。このAPIキーが無いとGoogleマップを利用できないので、かならず取得をおこなってください。
■マップAPI

【 STEP.2   :   HTMLの作成とGoogleマップAPIキーの埋め込み 】
デモページを参考に、HTMLを作成します。
 STEP1で取得したGoogleマップAPIキーは、HTMLソースで言う以下の部分に埋め込みます。

api_source.gif
【 STEP.3   :   WEBカメラの画像へアクセスするURLの確認 】
Webカメラの画像を取得するために以下の形式のURLを作成します。

http://snapi.dream.jp/sn/ノード名/_pub/@fbx.webcam.capture/

例：
http://snapi.dream.jp/sn/dreamhub-node/_pub/@fbx.webcam.capture/

上記を参考に、ノード名のみ自分のノード名もしくは、WebカメラがつながっているPCに設定したノード名を書き換えて利用してください。

【 STEP.4   :   WEBカメラの画像を表示するURLの組み込み 】
あとは、Googleマップを使ったHTMLにWebカメラ画像のURLを組み込むのみです。
デモページでは、以下のようにしています。

ここからは、JavaScriptを使って作り込んでいきます。

api_source2.gif
"var url="として、WebカメラのURLを設定し、吹き出しの中に表示するHTML部分に組み込んでいます。

よくわからない場合は、このurl部分を書き換え、openInfoWindowHtmlの中の部分を表示したい内容に置き換えてみてください。文字の大きさを変えたり、文字数を増やしたりすると、吹き出しからはみ出たりレイアウトが崩れたりといったことがあり試行錯誤が必要かもしれませんが、ぜひおためしください。

使った感想はぜひコメントで聞かせてくださいね！



タグ: