ipad ２.VR５で、html5とflashaを切り換えられるパノラマを作る。

　ｉｐａｄでは、フラッシュのパノラマを見られません。Pano2vrやkrpanoでは、それぞれｉｐａｄで見られる「ｈｔｍｌ５」に対応しているのですが、前者は、フラッシュとの自動切り替えができない。後者は、音楽を載せられない、という一長一短があるそうです。

　で、いいのがあるよ。ｖｒ５ってのが。と、T-Photoworksの谷口さんに教えていただきました。

　というわけで、使用方法の覚書。
　こういうの、すぐに忘れちゃうのですよ。うんうん。

１．ＶＲ５とは？

　サイトはこちら。
　作者（Ninoslav Adzibabaさん）のプロフィールはサイト内にありますが、セルビア、１９８０年生まれだそうです。個人でやっているかしらん？

　これまた外国語で詳しくはわからないのですが、個人使用なら無料。ただし、ロゴなどの書き換えは不可だそうです。ロゴなどを書き換えてオリジナルにしたり、商用利用の場合は、２０ドルの寄付が必要とのこと。安い！　

　

▲クリックすると、VR5のサイトに。

２．ＶＲ５のファイル構成。

　ＶＲ５のサイトからダウンロードしたファイルを解凍すると、説明書きと「ｖｒ5.script」というフォルダが入っています。必要なのは、「ｖｒ5.script」だけで、こちらのフォルダの中身を多少いじって、このフォルダごとサーバーにアップすることになります。

▲「ｖｒ5.script」の中身です。

　「ｖｒ5.script」の中には、二つのフォルダと「index.html」が入っています。
　パノラマデータのリンク先は、この「index.html」を指定します。そうすると、ＶＲ５の中で、フラッシュとｈｔｍｌ５の自動切り換えが行われ、通常のＰＣならフラッシュ、ｉｐａｄやｉｐｈｏｎならｈｔｍｌ５のデータにリンクされ、いずれも上手く表示される仕組みです。

　「ｖｒ5」フォルダの中身はよくわかりません。触らぬ神に祟りなし。
　「ｖｒ_files」フォルダは、画像を差し替えたり、フラッシュパノラマのＵＲＬを指定するなど、いろいろ触る項目があります。

▲「ｖｒ5」フォルダの中身です。これらは触りません。

　　「ｖｒ_files」フォルダには、３つのフォルダと、「config.js」というファイルが入っています。
それぞれカスタマイズに使用します。

▲「ｖｒ_files」フォルダの中身です。この中をいじります。

３．カスタマイズする！

　基本的な作業は、次の通り。

「cube_faces」フォルダ・・画像（合計１２カット）を差し替える。
「sound」フォルダ・・・・・・mp3データを差し替える。
「styling」・・・・・・・・・・・・・スキン画像・・・・・フリー版では触らない。
「config.js」・・・・・・・・・・・パノラマ表示の設定を行います。

●●●画像を差し替える。

　「cube_faces」フォルダの中には、六面体（キューブ）の画像が２セット入っています。１セットは、１０２４×１０２４ピクセルでｉｐｏｄ用、もう１セットは４８０×４８０ピクセルでｉｐｈｏｎｅ用です。

　ファイル名（写真真の位置と数字）を間違わないように差し替えます。
　正面（０）、右（１）、後ろ（２）、左（３）、上（４）、下（５）です。上下のカットは、正面の写真の上下につながる配置です。

※Ｐａｎｏ２ＶＲを使えば、エクイレクタングラーをキューブに変換する時に、ナンバリングが自動で行えます。後述します。

▲「cube_faces」フォルダの画像を差し替えます。

●●●音楽データを差し替える。

　「sound」フォルダに入っているｍｐ３データは、空っぽみたい。他の音に差し替えます。もちろんファイル名は同じにして上書きします。

VR5

▲「sound」フォルダの音楽データを差し替えます。

●●●「config.js」で、フラッシュパノラマのURLを指定する。

　「config.js」は、拡張子がｊｓですから、ジャバスクリプトなんですかね？　これをテキストエディットなどで開けば、カスタマイズできます。

　一番大切なのは、フラッシュパノラマのＵＲＬの設定です。
「var flashPage=・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・」の、点々の中にURLを書き込みます。 /*------ALTERNATIVE---------------*/と囲まれた部分はコメントで、この部分にサンプルが記されています。この中身はいじらなくてもOKです。

▲「config.js」をテキストエディタで書き換えます。

　音楽を鳴らす場合は、この上のＡＵＤＩＯの項目の一番下、var enableSound=の「ｆａｌｓｅ」を「ｔｒｕｅ」に書き換えます。

　以上でカスタマイズは完了。「vr_script」フォルダをアップして、この中の「index.html」をパノラマのリンク先にするだけです。

　見ている人の環境によって、フラッシュとｈｔｍｌ５が自動的に切り替わります。

４．キューブ画像を作るには？

●●●Pano2VRを使う。
　エクイレクタングラーから、六面体のキューブ画像を作るには、Pano2VRが便利です。なにしろ、設定さえちゃんと行えば、VR5に適合したファイル名になります。

▲種類、名称、画像サイズと、出力ファイルの名前を正しく設定します。

▲VR5に適合したファイル名になります。

●●●krpano。
　ｋｒｐａｎｏでは、「SPHERE to CUBE（ＪＰＥＧ）　ｄｒｏｐｌｅｔ」を使います。設定さえ上手くできればファイル名も揃えることができるのかもしれませんが、方法がわかりません。
　ただ、画像サイズを指定する方法は以下の通りです。１０２４と４８０のドロップレットを作っておけばワンタッチです。ドロップレットの名前も書き換えておけば分かりやすいです。

▲ドロップレットをテキストエディタで開き、左の箇所に「-outsize=1024」と書き加えます。これだけ。

VR5

▲ドロップするだけで、指定サイズのキューブに変換してくれます。

５．完成画像はこちらから。

　通常ＰＣの方は、下の画像をクリック。ｉｐａｄなどでは、画像をタップ！
　ipad版は音楽も鳴りますのでご注意。（フラッシュ版は鳴りません。）

▲同じ画像から、フラッシュにもｈｔｍｌ５にも対応できるのがミソ。なので、コンテンツを別々にすることも可能。

　簡単といえば簡単ですが、なんだかなー。といった感じ。ｉｐａｄでフラッシュが見られるようになれば済むのに・・・ぶつぶつ。

・・・・・今回はここまで。
試作例


	このページは、「写真道場」の久門　易氏がまとめたものですが、メモとしてここに記録てあります。本家のページは　http://www.dowjow.com/panorama/ここにあります。 ipad ２.VR５で、html5とflashaを切り換えられるパノラマを作る。　ｉｐａｄでは、フラッシュのパノラマを見られません。Pano2vrやkrpanoでは、それぞれｉｐａｄで見られる「ｈｔｍｌ５」に対応しているのですが、前者は、フラッシュとの自動切り替えができない。後者は、音楽を載せられない、という一長一短があるそうです。　で、いいのがあるよ。ｖｒ５ってのが。と、T-Photoworksの谷口さんに教えていただきました。　というわけで、使用方法の覚書。　こういうの、すぐに忘れちゃうのですよ。うんうん。１．ＶＲ５とは？　サイトはこちら。　作者（Ninoslav Adzibabaさん）のプロフィールはサイト内にありますが、セルビア、１９８０年生まれだそうです。個人でやっているかしらん？　これまた外国語で詳しくはわからないのですが、個人使用なら無料。ただし、ロゴなどの書き換えは不可だそうです。ロゴなどを書き換えてオリジナルにしたり、商用利用の場合は、２０ドルの寄付が必要とのこと。安い！　　 ▲クリックすると、VR5のサイトに。２．ＶＲ５のファイル構成。　ＶＲ５のサイトからダウンロードしたファイルを解凍すると、説明書きと「ｖｒ5.script」というフォルダが入っています。必要なのは、「ｖｒ5.script」だけで、こちらのフォルダの中身を多少いじって、このフォルダごとサーバーにアップすることになります。 ▲「ｖｒ5.script」の中身です。　「ｖｒ5.script」の中には、二つのフォルダと「index.html」が入っています。　パノラマデータのリンク先は、この「index.html」を指定します。そうすると、ＶＲ５の中で、フラッシュとｈｔｍｌ５の自動切り換えが行われ、通常のＰＣならフラッシュ、ｉｐａｄやｉｐｈｏｎならｈｔｍｌ５のデータにリンクされ、いずれも上手く表示される仕組みです。　「ｖｒ5」フォルダの中身はよくわかりません。触らぬ神に祟りなし。　「ｖｒ_files」フォルダは、画像を差し替えたり、フラッシュパノラマのＵＲＬを指定するなど、いろいろ触る項目があります。 ▲「ｖｒ5」フォルダの中身です。これらは触りません。　　「ｖｒ_files」フォルダには、３つのフォルダと、「config.js」というファイルが入っています。それぞれカスタマイズに使用します。 ▲「ｖｒ_files」フォルダの中身です。この中をいじります。３．カスタマイズする！　基本的な作業は、次の通り。「cube_faces」フォルダ・・画像（合計１２カット）を差し替える。「sound」フォルダ・・・・・・mp3データを差し替える。「styling」・・・・・・・・・・・・・スキン画像・・・・・フリー版では触らない。「config.js」・・・・・・・・・・・パノラマ表示の設定を行います。 ●●●画像を差し替える。　「cube_faces」フォルダの中には、六面体（キューブ）の画像が２セット入っています。１セットは、１０２４×１０２４ピクセルでｉｐｏｄ用、もう１セットは４８０×４８０ピクセルでｉｐｈｏｎｅ用です。　ファイル名（写真真の位置と数字）を間違わないように差し替えます。　正面（０）、右（１）、後ろ（２）、左（３）、上（４）、下（５）です。上下のカットは、正面の写真の上下につながる配置です。 ※Ｐａｎｏ２ＶＲを使えば、エクイレクタングラーをキューブに変換する時に、ナンバリングが自動で行えます。後述します。 ▲「cube_faces」フォルダの画像を差し替えます。 ●●●音楽データを差し替える。　「sound」フォルダに入っているｍｐ３データは、空っぽみたい。他の音に差し替えます。もちろんファイル名は同じにして上書きします。 ▲「sound」フォルダの音楽データを差し替えます。 ●●●「config.js」で、フラッシュパノラマのURLを指定する。　「config.js」は、拡張子がｊｓですから、ジャバスクリプトなんですかね？　これをテキストエディットなどで開けば、カスタマイズできます。　一番大切なのは、フラッシュパノラマのＵＲＬの設定です。「var flashPage=・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・」の、点々の中にURLを書き込みます。 /------ALTERNATIVE---------------/と囲まれた部分はコメントで、この部分にサンプルが記されています。この中身はいじらなくてもOKです。 ▲「config.js」をテキストエディタで書き換えます。　音楽を鳴らす場合は、この上のＡＵＤＩＯの項目の一番下、var enableSound=の「ｆａｌｓｅ」を「ｔｒｕｅ」に書き換えます。　以上でカスタマイズは完了。「vr_script」フォルダをアップして、この中の「index.html」をパノラマのリンク先にするだけです。　見ている人の環境によって、フラッシュとｈｔｍｌ５が自動的に切り替わります。４．キューブ画像を作るには？ ●●●Pano2VRを使う。　エクイレクタングラーから、六面体のキューブ画像を作るには、Pano2VRが便利です。なにしろ、設定さえちゃんと行えば、VR5に適合したファイル名になります。 ▲種類、名称、画像サイズと、出力ファイルの名前を正しく設定します。 ▲VR5に適合したファイル名になります。 ●●●krpano。　ｋｒｐａｎｏでは、「SPHERE to CUBE（ＪＰＥＧ）　ｄｒｏｐｌｅｔ」を使います。設定さえ上手くできればファイル名も揃えることができるのかもしれませんが、方法がわかりません。　ただ、画像サイズを指定する方法は以下の通りです。１０２４と４８０のドロップレットを作っておけばワンタッチです。ドロップレットの名前も書き換えておけば分かりやすいです。 ▲ドロップレットをテキストエディタで開き、左の箇所に「-outsize=1024」と書き加えます。これだけ。 ▲ドロップするだけで、指定サイズのキューブに変換してくれます。５．完成画像はこちらから。　通常ＰＣの方は、下の画像をクリック。ｉｐａｄなどでは、画像をタップ！　ipad版は音楽も鳴りますのでご注意。（フラッシュ版は鳴りません。） ▲同じ画像から、フラッシュにもｈｔｍｌ５にも対応できるのがミソ。なので、コンテンツを別々にすることも可能。　簡単といえば簡単ですが、なんだかなー。といった感じ。ｉｐａｄでフラッシュが見られるようになれば済むのに・・・ぶつぶつ。・・・・・今回はここまで。試作例 VRパノラマを楽しもう！＞ ipad ２.VR５で、html5とflashaを切り換えられるパノラマを作る。
		Back