Pano2VRもHTML5/CSS3に対応したファイル書き出しで、ipadやiphoneでの表示ができます。基本的には、フラッシュとほとんど変わらない作業で、簡単です。いくつかのパノラマを組み合わせたツアーも、フラッシュだけでなく、そのままHTML5/CSS3ファイルとして出力できます。

 私自身、まだまだわからないことも多いのですが、基本的な操作を整理しておきます。

1.「HTML5/CSS3」を選ぶだけ

 単純には、出力フォーマットで「HTML5/CSS3」を選び、詳細設定を行って出力するだけです。視野設定、作成者情報、ホットスポット、サウンドなど、フラッシュで使用できる全ての機能もそのまま反映されますので、とても簡単。

pano2vr
▲出力フォーマットで「HTML5/CSS3」を選びます。

2.「セッティング」タブ

 「セッティング」タブは、フラッシュでの出力と基本的に同じ。出力が、SWFから、XMLに変わっているのが、一番重要なところでしょう。Window(フラッシュ)が、Display(HTML5)に変わっていますが、これはどういう意味でしょう。
 オートローテートとスキンは、フラッシュと同じ。ただ、スキンに関しては、フラッシュと全く同じままでは使えないことがあるようです。要検討。< pano2vr
▲「セッティング」は基本的にフラッシュと同じような設定です。

3.「アドバンスド・セッティング」タブ

 「コントロール」はよくわかりません。デフォルトのままでOK。「ホットスポット・テキスト・タブ」はホットスポットの表示サイズでしょう。HTML5では使ったことがないのですが・・。

pano2vr
▲「アドバンスド・セッティング」はデフォルトのままでスタート。

4.「モバイル」タブ

 デバイスのモニタのサイズによって、読み込ませる画像のサイズを変える、重要なところです。デフォルトでは何の表示もなく、「セッティング」タブで指定したサイズだけを参照して適切なタイルサイズの画像が出力されるようです。(1500指定で、1581ピクセル角)
 これは通常のPCサイズ(ちょっと画素数が不足ぎみですが)で、ipadやiphoneでは読み込みに時間が余分に必要になるのでしょう。たぶん。
 なので、それぞれのデバイスのモニタのサイズ毎に、適切なサイズの画像を用意し、それぞれを読み込ませるような仕組みではないかと思います。
 Pano2VRのサイトによると、次のような設定になっていましたので、これに準じるのがよいかと思います。
 マックス・スクリーン・サイズ/タイル・タイズ/イメージ・クォリティの順で、上から
 1024/800/80(ipad用かな)
 960/640/80(iphone4用かな)
 480/300(iphone用?)

pano2vr
▲「モバイル」タブでは、画素数などを適切に設定します。

5.「HTML」タブ

 ここで、サイトに表示される形式を指定できますが、テンプレートは今のところ「nomal」しかないようです。そのままでも問題ありませんから、デフォルトでOK。書き出されたファイルを自分でいじれば、オリジナルの表示にもできるのでしょう。
 ちょっと注意が必要なのはファイル名で、フラッシュなどを同時に出力する場合は、それらのHTMLファイルと異なる名前になるように指定しておきます。そうしないと、フラッシュ用のHTMLが上書きされたりしますので。

pano2vr
▲「HTML」タブで、表示スタイルを指定します。

6.出力ファイルはこんな感じ

 出力の例を示します。画像ファイルのみ捨てていますが、他のファイルはこのようになります。
 サウンドファイル(mp3)、Pano2VRの設定ファイル(p2vr/これはアップしないでよい)、imagesフォルダにはパノラマ画像とスキン画像が入っています。
 xmlファイルに表示の諸々の指定が入っていて、htmlはサイト表示用、jsファイルはパノラマを動かすためのスクリプト。という内容です。

pano2vr
▲出力ファイルの内容です。

●「images」フォルダの中は?
 imagesフォルダには、パノラマ画像のタイルとスキンが入っています。パノラマ画像に重複があるのは、「モバイル」タブで指定した3種類のサイズの画像と、「セッティング」タブで指定したサイズのタイル画像です。

pano2vr
▲出力ファイルの内容です。

●完成画像はこちらから
 HTML5/CSS3ですから、通常のブラウザでは正常に表示されません。ipadやiphoneでご覧ください。
 表示の詳細はこちらを参照してください。

pano2vr
▲HTML5/CSS3ですから、通常のブラウザでは正常に表示されません。

・・・・・今回はここまで。