さて、今回は、3Di OpenViewerの画面内のアイテムをタッチし、そのアイテムのUUID(Universally Unique Identifier)をJavaScript側で表示するという方法をご紹介します。

まず、RealXtend Viewer 3Di Editionを起動し、サーバーにログインを行います。下の画面にうさぎにタッチスクリプトを埋め込んでみます。

単に、JavaScriptにタッチイベントを伝えるだけであれば、touch_startの中身は、空でも構いませんが、せっかくですから、タッチした人の名前をllDetectedName関数で検出し、llSayを使って、あいさつをさせてみました。

こんどは、HTMLページ側のJavaScirptで、タッチイベントを受け取るための準備をします。書き方は、以下のようにします。ポイントは、scriptタグの中に、for="activex" event="OnTouched(uuid)"　というパラメータを加えるところです。下の例では、タッチしたアイテムのUUIDをalert関数を使って表示させようとしています。

	<script type="text/javascript" language="javascript" 
		for="activex" event="OnTouched(uuid)">
	<!--
		alert(uuid);
	-->
	</script>

では、結果をみてみましょう。

 無事タッチされたうさぎのUUIDが表示できました。また、llSayを使って挨拶をするようにしていましたが、そちらも、ちゃんとチャット画面に表示されました。

今回は、タッチしたアイテムのUUIDをJavaScript側に伝えるというごく簡単なものですが、これだけでも、応用次第では、もっと面白いコンテンツを作ることが可能になるはずです。例えば、3Di社のEC向けデモページでは、これと同じしくみで、触ったUUIDをJavaScriptで識別してHTMLページ内にある商品説明を動的に差し替えています。最近はAjaxも使えるようになりましたから、UUIDを使って関連するDB情報を取得したり、WebAPIと連携したりといろいろと楽しめるのではないでしょうか？

前回、objectタグを使い、HTMLページの中にViewerを埋め込む方法について説明しました。

さて、今回は、HTMLフォームのボタンをクリックによって、ログインを行ってみたいと思います。

まずは、埋め込まれたViewerにJavaScriptからアクセスできるようにするため、objectタグに指定したIDをキーにして、オブジェクトそのものgetElementByIdで取得しておきます。

	var openviewer = document.getElementById('activex');

なお、このjavascriptはobjectタグよりも後に置く必要がありますから、以下のようなかんじにしておく必要があります。

	<object id="activex" type="application/x-oleobject"
	classid="clsid:AB809708-8AA8-4aa8-9E31-7A16213F46CD"
	codebase
	="http://3di-opensim.com/openviewer/product/3Di_OpenViewer.cab">
 
		<param name="WindowWidth" value="400" />
		<param name="WindowHeight" value="300" />
	</object>
	<script type="text/javascript" language="javascript">
	<!--
		var openviewer = document.getElementById('activex');
	-->
	</script>

ここまで準備ができたら、あとはボタンにログインの関数を埋め込むだけです。ログインは、取得したオブジェクト（ここではopenviewerという名前です）に対してLoginという命令を送ることで実行できます。書き方は以下のようになります。

	openviewer.Login(
	'ファーストネーム','ラストネーム','パスワード','接続サーバー','last');

HTMLのボタンをクリックしたときにログインさせるたいので、以下のようにします。

	<input type="button" value="ログイン"
	onclick="openviewer.Login('first','last','hogehoge',
		'192.168.xxx.yyy:10001','last');" />

これでおしまいです。なお、ログアウトの場合は

	openviewer.Logout();

です。いかがでしょうか？

少し前は、JavaScriptは、あまり多様すべきではないという風潮がありましたが、Google APIに代表されるAjax技術が注目されたこともあり、比較的Webデザイナーでも扱いやすいJavaScriptが見直されてきているように思います。

どんなに優れた技術であろうとも、「誰もが簡単にわかる」ということは、インターバースを普及させる上でとても大切なことだと考えています。

3Di OpenViewer のデモサイト、もうご覧になりましたか？予想以上の反響にログインしずらくなっていますが、めげずにトライしてもらえたらと思います。

そういえばgoogleさんも、O3Dを公開されましたね。まるで、パソコン通信時代が終焉しインターネットの時代へと突入したときと同じように、クローズドな仮想空間の時代が終わり、オープンな仮想空間の時代がいよいよ動き出したのではないでしょうか。

さて、今回は、少し技術的なお話を少しだけします。3Di OpenViewerのウリの１つであるHTML内のJavaScriptとの連携について、何回にわけて解説してみたいと思います。

■HTMLページの中にビューアを埋め込む

	<object id="activex" type="application/x-oleobject"
	classid="clsid:AB809708-8AA8-4aa8-9E31-7A16213F46CD"
	codebase
	="http://3di-opensim.com/openviewer/product/3Di_OpenViewer.cab">
 
		<param name="WindowWidth" value="400" />
		<param name="WindowHeight" value="300" />
	</object>

最もシンプルな書き方はこのようになります。idの箇所は、任意ですが、JavaScriptと連携する際は、このidをキーとしてViewerの様々なAPIにアクセスすることができます。

ビューアのサイズは、WindowWidthとWIndowHeightでカスタマイズできます。320x240～1024x768の範囲で調整してください。

このほかにも、たとえばプログレスバーの色をかえたり、背景画像をお好みの画像にしたりと、様々なパラメータがありますが、おいおいご説明していきたいと思います。

昨日、3Di OpenSim Enterprise 1.0 、そして、3Di OpenViewerの製品発表をしました。

昨年10月のStandard版リリースから約６ヶ月。本当に壮絶な開発でした。この場を借りて、エンジニア、および、テスト作業を支援していただいた多くの方々に深く感謝します。本当にありがとう！！

記者発表の場でも、多くの賛辞をいただきましたが、インターフェースなど、まだまだ、改善してゆきたい点は多くありますが、閲覧ということにフォーカスし、かつ、既存のウェブサービスとの連携ができる全く新しいViewerを開発するという大きな目標は、十分達成できたと感じています。

製品デモでは、3D空間内にある家具をタッチすると、それに連動して、Webページ上にその詳細情報が表示されたり、逆に、Webページ上のサムネイルをクリックすると、カメラが、3D空間内にある該当する家具をカメラフォーカスします。

3Di OpenViewerは、Javascriptと連携できる様々なAPIをもっていますから、この例以外に、もっと面白い面白いコンテンツもアイディア次第で可能となるでしょう。

＜製品発表会の様子＞ from THE SECOND TIMES