でじたるのもり

PCやスマホでできることをあれこれ見つけて書いてます

Sony HDR-GW77で撮ったパノラマ写真をPC用・スマホ用ブログに埋め込む

最近は360度パノラマ写真が当たり前のように出回っていている。2013年11月には360度の全天球撮影が可能なカメラ「THETA360」がRICOHから発売され、撮影の手軽さやネット共有・サイトへの埋め込みのカンタンが受けて、かなり話題になっている。

360度パノラマ写真といえば、ちょっと前までは複数の写真をつなぎ合わせてぐるっと一周、っていうのがほとんどだったのだけれど、そのうちフィッシュアイレンズをつなげるようになったり、半天球まるごと撮影できるようなキットが出てきたり、スマホで撮って公開できるようになったりと、結構な速さで進歩してきた。最近ではGoogleマップにも埋め込めるようになったので、今後パノラマ写真人口はさらに増えそうだ。

実際、機材があれば誰でも撮れるし、アプリがあれば加工や埋め込みも簡単。でも、PCサイトに埋め込むのは簡単でも、未だFLASHへの対応が半端なスマホ向けサイトへの埋め込みは難しい。そういう点ではスマホサイトでも閲覧できるTHETAの表示・共有サイト「theta360.com」は優秀だとつくづく思う。

即席のパノラマ写真を自サイトで公開する

我が家には360度撮影のできる機材はないので、昔は16方位写真にとって、ソフトでつなげてアップしていたのだけれど、手間がかかる上にスマホサイトでは閲覧できなかった。それに、思い出の映像を手軽にパノラマ撮影して残しておきたいという程度なら、SonyHDR-GW77の即席パノラマ撮影でも十分なので、それを簡単に公開できないものかと思い、方法を探していた。

そんな中、「HTML5+CSS3」を用いて、FLASH無しでもiPhoneAndroidスマホでも閲覧できるようにしてくれるソフト「pano2VR」(GardenGnomeSoftware)の話を聞いたので、試してみた。

16方位の写真を撮ってつなげて、とやっていた時はPanoweaverPTGuiを使ってパノラマ合成の作業から始めていたが、最初からパノラマ画像の状態であれば、埋め込みに使えるような状態にしてくれる機能があればそれでいい。

pano2VRで行う公開までの最低限の手順

pano2VRのインターフェースは至ってシンプルなので、あまり迷うことはない。パノラマ写真をドロップして、視野設定を行い、「HTML5+CSS3」形式で出力する。

f:id:joribab:20140308150641j:plain

座間味港のパノラマ(4912×1080)をドロップ。

f:id:joribab:20140308151119j:plain

視野設定はHDR-GW77で撮ったパノラマが実際には視野角何度ぐらいなのかがわからないので、とりあえず210度ぐらいにした。

f:id:joribab:20140308151447j:plain

 

出力フォーマットの「HTML5」を追加。中身はウインドウサイズとコントローラを指定する程度から始めて、あとはいろいろいじって試した。

f:id:joribab:20140308152125j:plain

とりあえずは最低限の操作で埋め込み用セットを作成。で、あとはファイル群を設置して、ブログ上にiFrameで埋め込むだけ。実際に埋め込んでみるとこうなる。

スクリプトの扱いはブログによりけり

しかし、残念ながらスマホサイトでのスクリプトの動きはブログサイトやレンタルサイトによって異なる。また、スクリプトを含めたファイルを設置できるブログは少ない。

フリーのブログサイトでFTP接続可のもの、例えば@pagesとかSITEMIXとか、FTPを許可しているところなら大丈夫。livedoorブログもファイル置き場があるのでOK。

有料サーバーでも、スマホ用には使えないものも稀にある。ある有料サーバではスマホ用サイトのJSがどうしても動かなかった。

スマホで動くことはとても重要

埋め込みコンテンツに関しては、何を選ぶにしても、選択条件としてスマホに対応しているかどうかは重要な要因だ。今やスマホ用サイトを持っていない、プログレッシブでないサイトの方が少ないほど、みんなスマホを意識して作るようになってきている。ペタリと貼り付けるだけでPCとスマホで動的に変化してくれるようなコンテンツが多くなってくるのかもしれない。