自分でストリートビューもどきを作る二回目です。前回は画像を用意するところまで説明しました。今回は、Webブラウザで表示するためのスクリプトです。プログラムの細かい説明は頭が痛くなる人がいるでしょうから、原理的な話だけにします。
まず、360度の画像を表示するための領域を用意します。ポイントとしては、画像は< img >タグではなく< div >タグの背景画像にするということです。というのも、ブラウザのスタイルシートの機能で、背景画像を繰り返し配置できるからです。これは標準で背景画像が繰り返し表示されるため、360度の画像を背景画像として指定するだけでできあがりです。
HTML
次に、画像をぐるぐる見渡せるようにするためにスライダーを用意します。これは、jQueryというライブラリで使うことができるスライダー機能を利用しています。スライダー以外は通常のJavaScriptの書き方にしてあります。GPSデータはJSON形式にしてあります。JSON形式であれば、他のファイルや他サイトにあるファイルを手軽に利用することができるからです。
jQueryライブラリ
< http://jquery.com/
>
jQuery UI
< http://jqueryui.com/
>
まず、360度の画像を表示するための領域を用意します。ポイントとしては、画像は< img >タグではなく< div >タグの背景画像にするということです。というのも、ブラウザのスタイルシートの機能で、背景画像を繰り返し配置できるからです。これは標準で背景画像が繰り返し表示されるため、360度の画像を背景画像として指定するだけでできあがりです。
HTML
次に、画像をぐるぐる見渡せるようにするためにスライダーを用意します。これは、jQueryというライブラリで使うことができるスライダー機能を利用しています。スライダー以外は通常のJavaScriptの書き方にしてあります。GPSデータはJSON形式にしてあります。JSON形式であれば、他のファイルや他サイトにあるファイルを手軽に利用することができるからです。
jQueryライブラリ
< http://jquery.com/
>
jQuery UI
< http://jqueryui.com/
>
var x = 0;
var stepX = 0;
var limit = 1774;
var gpsData = null;
var map;
function scrollView(){
var img = document.getElementById("contents");
img.style.backgroundPosition = x + "px 0px";
x+=stepX;
if (x > limit) x = 0;
setTimeout("scrollView()", 100);
}
$(function(){
scrollView();
$("#slider").slider({
min: -50,
max: 50,
value : 0,
slide : function(evt, ui){
stepX = -ui.value;
}
});
// データ読み込み
$.getJSON("./data.js", function(json){ gpsData = json; setGoogleMaps(); });
});
最後にグーグルマップを表示します。グーグルマップにはver2とver3がありますが、ここでは最新のver3を使いました。マップ上にはマーカーを表示するのですが、これはJSONデータに記録された緯度経度を元にして表示していきます。これをデータの数だけ繰り返せばできあがりです。
// グーグルマップ表示
function setGoogleMaps() {
map = new GMap2(document.getElementById("gmap"));
map.setCenter(new GLatLng(35.9659179, 137.8142582), 10);
ctrlObj = new GLargeMapControl();
map.addControl(ctrlObj);
for(var i=0; i<gpsData.length; i+=2){
var lat = gpsData[i];
var lon = gpsData[i+1];
var marker = new GMarker(new GPoint(lon, lat));
map.addOverlay(marker);
GEvent.addListener(marker, "click", function(obj){
var lat = (""+obj.lat()+"0000000").substr(0, 10);
var lon = (""+obj.lng()+"0000000").substr(0, 11);
var src = "photo/"+lat+","+lon+".jpg";
var img = document.getElementById("contents");
img.style.backgroundImage = "url("+src+")";
});
}
}
実際に撮影してみると、写り込みもありますし画質もよいとは言えません。屋外だけでなく、室内でも使い方によっては有益かもしれません(旅館やホテルの間取り、不動産関係など)。
撮影は徒歩か電動自転車が楽です。観光名所などを360度撮影して、掲載しておくというのもよいかもしれません。なお、上記のプログラムは自由に改変して使って構いませんし、そのまま使っても問題ありません。
【古籏一浩】openspc@po.shiojiri.ne.jp
< http://www.openspc2.org/
>
さらに、このカメラの動画撮影機能を使って360度の映像を撮影、処理して動く360度映像も作成済み。これは、また某所のネタで登場予定。FlashでなくHTML 5 videoの機能を使って作ってあります。
毎度同じみアスキーの連載もよろしく。Bridgeネタの最終回です。
・BridgeのGUIをJavaScriptで操ろう!
< http://ascii.jp/elem/000/000/500/500608/
>
ハイビジョン映像素材も、ちょこちょこ追加してます。EOS 5D mark IIのファームウェアがアップデートされるみたいなので、これまで撮影した30Fとこれから撮影するものでは、フレームレートが違ってしまいますが、そこらへんは、まあ仕方ないということで。
・ハイビジョン映像素材(60i, 30F, 24f)
< http://www.openspc2.org/HDTV/
>
- 改訂第4版 JavaScript ポケットリファレンス
- 技術評論社 2006-10-18
- おすすめ平均
- 実用的で分かり易い
- JavaScriptを使ったプロジェクトのお供に是非
- JavaScript仮免者以上の方へ
- バランスの良いバイブル
- 中級者向けです。