AJAXでヴァーチャルツアーを実現する

08/20

2008

さて、本日は午前と午後に分けて、今週末のイベントでお話する内容のうち、AJAXで実現するパノラマVRプレゼンテーションについて、お話します。
フランスで活躍するウェブデベロッパ「OpenStudio」は、ウェブサイト開発のエキスパートとしてその世界ではよく知られています。
また彼らは、AJAXフレームワーク「jQuery」の使い手としても有名です。
そんな彼らが、jQueryを使った２種類のパノラマVRコンテンツを実現していますので、ご紹介します。

第１弾は、円筒パノラマ画像にクリッカブルマップを埋め込み、パノラマ画像をループスクロールさせて、画像中のホットスポットをクリックすると詳細画像が出てくる、というAJAXならではの挙動のバーチャルツアーコンテンツです。

■ jQuery virtual tour
http://www.openstudio.fr/jquery-virtual-tour/

デモサイトは一式がダウンロードできますので、ぜひご一読下さい。

ファイルの中に入ってるJavaScriptファイルは以下の通り。

jquery.js
jquery.panorama.js
jquery.advanced-panorama.js
cvi_text_lib.js
cvi_text_lib.js
thickbox.js

このうち「cvi_text_lib.js」は文字コードを制御するライブラリ、「jquery.flipv.js」は縦書き変換、そして「thickbox.js」は画面内ポップアップのライブラリです。
なので、重要なのは基本ライブラリの「jquery.js」に、OpenStudio独自開発の「jquery.panorama.js」「jquery.advanced-panorama.js」ですね。
「jquery.panorama.js」は、パノラマ表示とループスクロールを、「jquery.advanced-panorama.js」はクリッカブルマップ表示を機能させます。
cssも、thickbox用とjquery.panorama用が特別に導入されます。

<head>内に挿入するコードは以下のような感じでしょうか。

<link rel="stylesheet" type="text/css" href="css/thickbox.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/jquery.panorama.css" media="screen" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.panorama.js"></script>
<script type="text/javascript">
　$(document).ready(function(){
　　$("img.advancedpanorama").panorama({
　　　auto_start: 0,
　　　start_position: 1527
　　　});
　　});
</script>
<script type="text/javascript" src="js/cvi_text_lib.js"></script>
<script type="text/javascript" src="js/jquery.advanced-panorama.js"></script>
<script type="text/javascript" src="js/jquery.flipv.js"></script>
<script type="text/javascript" src="js/thickbox.js"></script>
<script type="text/javascript">
　tb_pathToImage = "css/loadingAnimation.gif";
</script>

この中で特に記述されているパラメーターは、
「auto_start: 0」
「start_position: 1527」
ですね。
上は起動時の自動回転のon/off（「0」でoff、「1」でon）を、下は起動時のポジションを画像の座標で指定しています。

またスクロールのスピードは「jquery.panorama.js」の14行目
「speed: 20000」
の数値を変えることで制御できます。この数値は1周するのにかかる時間をミリ秒で表してます。「20000ミリ秒＝20秒」ですね。
またこのライブラリのヘッダ部には、このコンテンツを制御する様々な変数が与えられています。
「viewport_width」表示横幅（画角）（ピクセル）
「direction」左右の回転方向を制御（left/right）
「control_display」矢印などのインターフェイス部の表示の有無（true/false）
「start_position」起動時のポジション（ピクセル）
「auto_start」自動回転（true/false）
「mode_360」ループさせるかどうか？（true/false）

そして更に、<body>内に挿入するコードは以下のような感じになります。

<img src="img/sculpteur.jpg" class="advancedpanorama" width="2448" height="375" usemap="testmap" alt="Atelier du sculpteur" />
<map id="testmap" name="testmap">
　<area shape="rect" coords="1653,72,1839,255" href="salleformation.html" alt="vers la salle de formation" />
　<area shape="rect" coords="2013,114,2091,210" href="img/statue1.jpg" alt="statues" class="thickbox" />
　<area shape="rect" coords="1920,276,2070,351" href="img/gouges.jpg" alt="gouges" class="thickbox" />
</map>

画像そのものは円筒パノラマの画像サイズそのものを指定し、画面に表示される部分は「jquery.panorama.js」で指定された画角幅です。
クリッカブルマップのエリアを指定すると、パノラマ画像内に自動的に枠が入ります。これもJavaScriptで制御してるようですね。

意外と簡単に導入できるパノラマVRコンテンツです。
FlashもQTVRも表示できないiPhone用サイトには、ピッタリかもしれません。ウチでも導入してみようかな。
ループの横スクロールスクリプト、というだけでも価値あるかも、ですよ！

2008年8月23日(土)15:00〜17:00 参加無料のイベントです。お気軽にお越し下さい！
親睦会（参加費6,000円）の参加申込もこちらからどうぞ

アイコンをクリックして、iPhoneで使えるパノラマアプリを体感しよう！

Panorama ¥1,200- ★★★	Pano ¥350- ★★★	PanoLabo free ★★★★★	PanoLabo Pro ¥600- ★★★★	TripStitch ¥1,200- ★
PangeaVR free ★★★★★	PangeaVR Pro ¥2,300- ★★★★★	Cube World free ★★★★