Pano2VRを使って、QTVR埋め込みホットスポットにtarget属性を与える方法

02/19

2008

先月このブログでもお知らせして、死物狂いで探しまくった結果、見つかりましたので、早速ご報告いたします。

QuicktimeVRのオーサリングの基本として、ムービー内にホットスポットを与えてクリックしたらブラウザ画面が切り替わる、なんていうQTVRをナビゲーションインターフェイスにする時に常套手段にするような使い方をすることがありますね。
ココで一番大切なのは、ホットスポットのアクションに対して、通常の画面遷移ではなくて、新しいブラウザ画面を立ち上げたり、フレーム化しておいて別フレームの画面を切り替えたりすることが出来る事です。

フレーム化しておいて別フレームの画面を切り替える時は、以下のようにJavaScriptを使ってフレーム名を呼び出す方法を使います。

[ head側 ]

function load01(pp) { parent.『フレーム名』.location=pp; }
function load02(pp) { parent.『フレーム名』.location=pp; }
function load03(pp) { parent.『フレーム名』.location=pp; }

[ body側 ]

	<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" width="640" height="480" codebase="http://www.apple.com/qtactivex/qtplugin.cab">
	<param name="src" value="◯◯◯.mov">
	<param name="controller" value="true">
	<param name="scale" value="tofit">
	<param name="autoplay" value="false">
	<param name="cache" value="false">
	<param name="bgcolor" value="#ffffff">
	<param name="correction" value="full">
	<param name="SaveEmbedTags" value="true">
	<param name="hotspot1" value="javascript:load01('□□□01.html')" >
	<param name="hotspot2" value="javascript:load02('□□□02.html')" >
	<param name="hotspot3" value="javascript:load03('□□□03.html')" >
	<embed src="◯◯◯.mov" width="640" height="480" controller="true" scale="tofit" autoplay="false" cache="false" correction="full" bgcolor="#ffffff" pluginspace="http://www.apple.com/quicktime/download/" 
		hotspot1="javascript:load01('□□□01.html')" 
		hotspot2="javascript:load02('□□□02.html')" 
		hotspot3="javascript:load03('□□□03.html')" ></embed>
	</object>

新規画面を立ち上げる時には上記のJavaScript部分を書き換えることで可能になります。

[ head側 ]

function load01(pp) { window.open = ('pp','newWin01',''); }
function load02(pp) { window.open = ('pp','newWin02',''); }
function load03(pp) { window.open = ('pp','newWin03',''); }

両方ともIEのEolas特許問題対策してない標準的なコードですが、これで今までは何とかなってました。
このコードのミソは、QTVR内に設置するホットスポットはHTML側で指定するだけで良く、QTVR内では何ら指定しなくても良かったことです。そうすることによりメンテナンス性が非常に高く、導入が非常に簡単でした。

それが去る1/16にQuicktimeアップデートによってQuicktime内に設置されたホットスポットによるページ遷移が、HTML側での制御が出来なくなっていました。ちなみにこの問題、IEやFireFoxをはじめ主要ブラウザは全て大丈夫で、Apple純正ブラウザ「Safari」だけの問題でした。Safariの利用シェアを考えると無視したくもなりますが、さすがにApple純正技術を唱ってますので、無視できないんですよねぇ（苦笑）。

で、結局この問題の解決は、QTVRに埋め込んでいるHotSpotに直接target属性を与える方法しか見つからず、当初Qicktimeの高度オーサリングツール「LiveStagePro」しか手段は無いかと思われていましたが、何とボクが持ってるソフトの中にありました。
それが「Pano2VR」です。

■ Pano2VR
http://gardengnomesoftware.com/

さて実際にQTVRにHotSpotにtarget属性を与える方法を説明しましょう。

Pano2VRは、PRGuiなどでスティッチしたパノラマ画像をパノラマムービーに変換するソフトです。
出力結果は、QTVR、Flash8/9です。現段階ではHTMLを同時に書き出してくれないのですが、今のところβ版ということで最終リリースの際にはHTML書き出し機能も搭載されるようです。

様々な機能が用意されていますが、ココでは最初の読み込みとホットスポットの埋め込みについて説明します。

まず読み込みから。
Pano2VRを起動します。すると下記のような画面が出てきます。

（画像をクリックすると拡大します）

この画面左上の「Input」スペースに、PTGuiなどで作成しPhotoshopで合成処理したパノラマ画像をドラッグ＆ドロップすれば、自動で画像フォーマットを解析して読み込んでくれます。簡単でしょ！

その下の段にある「Viewing Parameters」の「Modify」ボタンをクリックすると、デフォルトのアングルやズーム、画角の制限などを行うことができます。

（画像をクリックすると拡大します）

さらに「User Data」の「Modify」ボタンをクリックすると、QuicktimePlayerの情報閲覧機能で見られるそのムービーファイルのテキスト情報を与えることが出来ます。業務などで著作権等を主張する場合は必須作業ですね。

（画像をクリックすると拡大します）

そして最下段にある「HotSpot」の「Modify」ボタンをクリックすることで、ホットスポットを埋め込む作業を行うことが出来ます。
恐らくホットスポットを定義するための画像ファイルなんて予め用意してないでしょうから、最初に出てくるダイアログは「ホットスポット定義ファイルがありません。「◯◯◯_hs.png」というホットスポット定義ファイルを作成しますか？」という意味ですんで、すかさず「Yes」ボタンをクリックして、次に進んで下さい。

（画像をクリックすると拡大します）

ホットスポット定義ファイルが無事生成されると、いよいよホットスポット設置画面が出てきます。

（画像をクリックすると拡大します）

Type : ホットスポットのIDと名称が出てきます。この横のファイルアイコンのボタンをクリックすると新しいホットスポットを作成することができます。
Image : 原則的にイメージファイルで定義します。ここは無視して構いません。
Tool : ホットスポットの範囲を実際に書き込みます。自由ペン／長方形／角丸長方形／楕円／多角形を使って書き込み、消去は右端のツールを使います。ツールにカーソルを合わせると、各ツールの説明が出てきますので分かりやすいです（英語ですが）。
Zoom : 表示されてるパノラマ画像の表示倍率を指定します。輪郭線に沿った細かいホットスポットなどを作成する場合には拡大表示が便利ですね。
Title : ホットスポットにカーソルを合わせた時に出てくる説明文を記入します。日本語は使えません（Quicktimeの仕様です）。
URL : 相対パス／絶対パスの両方を扱うことが出来ます。ムービー内リンク（複数のムービーファイルを繋げて１つのムービーに合わせる）は現段階では利用できない様です。
Target : ココで今回の大事な命題の「target」属性を与えます。新規画面を立ち上げるなら「_blank」を、別フレームの画面きりかえをするならそのフレーム名を入力して下さい。

上記の作業が済めば「OK」ボタンをクリックして、作業を完了させます。

ここまでくればあと一歩。最後にムービーの出力です。
トップ画面の「Output」スペースにある「New Output Format」を選択肢、「+Add」ボタンをクリックすると、下記のような画面が出てきます。

（画像をクリックすると拡大します）

実際のCubicムービーの１辺の長さやJPEG圧縮率、プリロード時の挙動やムービーサイズ、そして自動回転などを与えることが出来ます。そして出力先を決めて「OK」ボタンをクリックすると、下のようなダイアログが出てきて、出力作業がプログレスバーとして出てきます。

（画像をクリックすると拡大します）

トップ画面右下にある「Open After Creation」にチェックを入れておけば、出力後にQuicktimePlayerを起動してムービーを表示させることもできます。

...とまぁ、ここまで簡単に説明してみましたが、如何でしょうか？
実際に触ってみるとお分かりの通り、挙動が不安定でしかも遅い!!
ま、β版なので仕方ないかなと思いますが、この遅さは非常にもどかしく、利用を躊躇してしまいます。QTVR変換ソフトと言えばMacでは「CubicConverter/CubicConnector」がありますが、こちらがUIも優れ軽快に動く事もあり、どうしてもこちらを優先的に使っているのが現状です。
さらに（先にも述べましたが）HTML書き出しをしないのは非常に致命的です。QTVRならまだ埋め込みスクリプトを手書きで書く事も可能ですが、Flashになるとお手上げです。もしかしたら「β」が取れない理由はこの辺にあるんじゃないかと思える程です。
いち早く開発が進み、正式版がリリースされることを待ち望みます。

業務などでQTVRのホットスポットに関する修正が必要な方がもしいらっしゃったら（かなりレアだと思いますが）、Pano2VRはぜひお試し頂きたいソフトです。