クリエイター手抜きプロジェクト[233]ストリートビューもどき編(2)ブラウザで360度見渡せる機能を作る/古籏一浩

投稿:  著者:  読了時間:6分(本文:約2,600文字)


自分でストリートビューもどきを作る二回目です。前回は画像を用意するところまで説明しました。今回は、Webブラウザで表示するためのスクリプトです。プログラムの細かい説明は頭が痛くなる人がいるでしょうから、原理的な話だけにします。

まず、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/ >

photo
改訂第4版 JavaScript ポケットリファレンス
技術評論社 2006-10-18
おすすめ平均 star
star実用的で分かり易い
starJavaScriptを使ったプロジェクトのお供に是非
starJavaScript仮免者以上の方へ
starバランスの良いバイブル
star中級者向けです。

改訂第6版 HTML&スタイルシート ポケットリファレンス (POCKET REFERENCE) [改訂版] PHP ポケットリファレンス (Pocket reference) 正規表現ポケットリファレンス (POCKET REFERENCE) JavaScriptワークブック―ステップ30 (情報演習 (5)) JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス



photo
組版時間を半減する! InDesign自動処理実例集
技術評論社 2008-11-25
おすすめ平均 star
starこんな本を探してました
starプログラミング経験のない方も気軽に挑戦してほしいです

1ランク上の技を身につけるInDesignの強化書 (MYCOMムック +DESIGNING Professional Bible) InCopyとInDesignによるワークフロー革命 CS4 & CS3 対応 for Macintosh & Windows InDesign CS3の仕事術 InDesignレイアウト手帖 これからはじめる InDesignの本 〈InDesignI CS3対応〉 (自分で選べるパソコン到達点)