ChromebookでVR?Pixabay 360°パノラマ写真を「Pannellum」でブログ記事に埋め込んでVR化?!

無料で360°パノラマ写真を「Pixabay」からダウンロードして、「Pannellum」を使って360°VRコンテンツとしてブログ上に公開する方法を紹介します。北海道VRも?

はじめに

WebVRを使ってブラウザーのみ360°VRの絶景が楽しめるサイトは以下です。

北海道VR散歩

今回は、ブログ上に360°VRコンテンツを簡単に表示することを目的として、「Pannellum」を使って「Pixabay」から無料でダウンロードした360°パノラマ写真ブログ上に表示する方法を紹介します。

Pannellum」はWordPressプラグインではないので軽いですが、XserverのFTP機能を使ってブログサイト上にアップロードする必要がありますが・・・

今回の作業の結果は以下です。

Pixabayから360°パノラマ写真をダウンロード

以下のサイトに行きます。

Pixabay >>> 公式サイトへ

商用利用が可能ライセンスフリーな高画質画像が無料でダウンロードできます。

私はブログに使うフリー画像などでよく使うので、Googleアカウントでログインして使っています。

今回は、以下の360°パノラマ写真をダウンロードしました。

サンフランシスコ カリフォルニア州 >>> Pixabayサイトへ

6988×3494のJPG画像なので7.5MBの容量があります。

ちなみに、ブログ上に直接表示する軽い1280×640画像は以下です。

他の例としては、以下のような360°パノラマ写真がありますが・・・

pixabay.com/i-3531358
pixabay.com/i-3531360
pixabay.com/i-3531355
pixabay.com/i-2638158
pixabay.com/i-2131951
pixabay.com/i-892929
pixabay.com/i-2131952
pixabay.com/i-2115494
pixabay.com/i-2115495
pixabay.com/i-2115493
pixabay.com/i-2383930

https://pixabay.com/ja/photos/%E5%86%AC-%E3%83%91%E3%83%8E%E3%83%A9%E3%83%9E-%E5%B1%B1-%E9%9B%AA-2383930/

WebVR/ARコンテンツをiPhoneで表示する時の問題

iOS12.2からデフォールトでジャイロセンサーが使えなくなった問題については以下の記事が参考になります。iOS13以降では解決したようですが・・・

bagelee(ベーグリー)

WebARとWebVRのユーザビリティに影響を及ぼしていた、iOS12.2でのデバイスモーションの設定がデフォルトオフ問…

そこで、今回はそれを回避するひとつの方法として「Pannellum」を使って360°パノラマ写真をブログ上に公開する方法を紹介します。

Pannellumの使い方

以下の記事を参考にしました。

ジユウメモメモ

サイトに埋め込んでいた360°画像が、iOS13以降のiPhoneのSafariでジャイロセンサーに連動して動かなくなっ…

Pannellum自体をブログサイト上のフォルダーにFTPでアップロードする必要があり、実際の360°パノラマ写真をブログ上に表示する際にはHTMLで記述するので、初心者にはややハードルが高いかもしれません。

Pannellum公式サイト

以下のサイトに行きます。

ここに表示されている図書館の360°パノラマ写真をVRとしてマウスドラッグで360°をぐるりと見渡せます。

さらに、「i」アイコン上にマウスカーソルを置くとテキストの説明が表示され、矢印アイコンをクリックすると次のシーンに移動できます。

WordPressプラグインを使わないので動作が軽いですが、ビュワーのコードをブログサイト上にFTPでアップロードする必要があります。今回は、XserverのFTP機能を使います。

ビュワーコードのダウンロードと展開

トップメニューの「Download」をクリック。

Download Pannellum 2.5.6」をクリック。最後の数字はバージョンなので、時期によって変化します。

保存」をクリック

zipファイルをダブルクリックして展開します。

pannellum」フォルダーを「ダウンロード」フォルダーにコピーしておきます。

Xserverのブログサイトにアップロード

Xserverにログインしてサーバーパネルに移動し、対象ドメイン(今回はchrome-vr.com)に入ります。

FTP > サブFTPアカウント設定」をクリック。設定していない場合は「関連マニュアル」を参考にして設定してください。

ログイン」をクリック。

chrome-vr.com」をクリック。

フォルダーを次々と「/chrome-vr.com/public_html/wp-content/themes/cocoon-child-master/」まで開きます。

右下の「作成」で「pannellum」というフォルダーを作ります。

フォルダ作成」をクリック。

pannellum」をクリック。

右の「ファイルのアップロード」から「ダウンロード > pannellum」内のすべてのファイルをアップロードします。

アップロード」をクリック。

アップロード」をクリック。

以上でコードなどのファイルのアップロードは完了です。

ここで、後でHTMLでコンテンツを記述するときに必要となるURLを右上からコピーしておきます。

テキストエディターに貼り付けておきます。

Xserverからログアウト(WebFTP/サーバー/インフォパネル)しておきます。

360°パノラマ写真をブログ記事に埋め込む

参考記事のHTMLのiframeの記述例に従って、HTMLでブログ記事に埋め込みます。

今回の記述は以下です。コピーしておいたコードフォルダーのURLから「/public_html」を削除したURLと、アップロードしておいたパノラマ写真のURLを貼り付けています。

画像サイズはとりあえず「800×600」にしました。

今回Pixabayからダウンロードしたパノラマ画像をブログにアップロードすると、jpgだったので「EWWW Image Optimizer」という画像圧縮プラグインで自動的に圧縮されてしまいましたが・・・

作業結果 – サンフランシスコの風景(360°VR)

以下がそのHTMLのiframeを記事に埋め込んだ結果です。

全画面表示にすると多少画質が粗く感じますが、ブログ表示の軽さを考えると、このぐらいがちょうど良いと思います。

まとめ

今後はもう少し試行錯誤して最適化「i」アイコン矢印アイコンの追加などを試してみたいです。

最初は「Pannellum」コードをブログサイトにアップロードする作業が面倒に感じますが、その後はHTMLのiframeコードをコピーして書き換えれば良いので手軽に360°パノラマ写真をVR化できるので便利です。

ではでは、きらやん