無料で360°パノラマ写真を「Pixabay」からダウンロードして、「Pannellum」を使って360°VRコンテンツとしてブログ上に公開する方法を紹介します。北海道VRも?
はじめに
WebVRを使ってブラウザーのみで360°VRの絶景が楽しめるサイトは以下です。
![北海道VR散歩](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-13-at-16.02.21-1024x652.jpg)
今回は、ブログ上に360°VRコンテンツを簡単に表示することを目的として、「Pannellum」を使って「Pixabay」から無料でダウンロードした360°パノラマ写真をブログ上に表示する方法を紹介します。
「Pannellum」はWordPressプラグインではないので軽いですが、XserverのFTP機能を使ってブログサイト上にアップロードする必要がありますが・・・
今回の作業の結果は以下です。
Pixabayから360°パノラマ写真をダウンロード
以下のサイトに行きます。
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-17-at-18.08.12-1024x583.jpg)
商用利用が可能でライセンスフリーな高画質画像が無料でダウンロードできます。
私はブログに使うフリー画像などでよく使うので、Googleアカウントでログインして使っています。
今回は、以下の360°パノラマ写真をダウンロードしました。
サンフランシスコ カリフォルニア州 >>> Pixabayサイトへ
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-17-at-18.12.00-1024x587.jpg)
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-17-at-18.12.49.png)
6988×3494のJPG画像なので7.5MBの容量があります。
ちなみに、ブログ上に直接表示する軽い1280×640画像は以下です。
![](https://chrome-vr.com/wp-content/uploads/2020/05/san-francisco-2131952_1280-1024x512.jpg)
他の例としては、以下のような360°パノラマ写真がありますが・・・
pixabay.com/i-3531358
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/
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
WebVR/ARコンテンツをiPhoneで表示する時の問題
iOS12.2からデフォールトでジャイロセンサーが使えなくなった問題については以下の記事が参考になります。iOS13以降では解決したようですが・・・
WebARとWebVRのユーザビリティに影響を及ぼしていた、iOS12.2でのデバイスモーションの設定がデフォルトオフ問…
そこで、今回はそれを回避するひとつの方法として「Pannellum」を使って360°パノラマ写真をブログ上に公開する方法を紹介します。
Pannellumの使い方
以下の記事を参考にしました。
サイトに埋め込んでいた360°画像が、iOS13以降のiPhoneのSafariでジャイロセンサーに連動して動かなくなっ…
Pannellum自体をブログサイト上のフォルダーにFTPでアップロードする必要があり、実際の360°パノラマ写真をブログ上に表示する際にはHTMLで記述するので、初心者にはややハードルが高いかもしれません。
Pannellum公式サイト
以下のサイトに行きます。
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-18-at-10.17.14-1024x625.jpg)
ここに表示されている図書館の360°パノラマ写真をVRとしてマウスドラッグで360°をぐるりと見渡せます。
さらに、「i」アイコン上にマウスカーソルを置くとテキストの説明が表示され、矢印アイコンをクリックすると次のシーンに移動できます。
WordPressプラグインを使わないので動作が軽いですが、ビュワーのコードをブログサイト上にFTPでアップロードする必要があります。今回は、XserverのFTP機能を使います。
ビュワーコードのダウンロードと展開
トップメニューの「Download」をクリック。
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-18-at-10.23.42-1024x720.png)
「Download Pannellum 2.5.6」をクリック。最後の数字はバージョンなので、時期によって変化します。
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-18-at-10.28.19.png)
「保存」をクリック
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-18-at-10.29.48.png)
zipファイルをダブルクリックして展開します。
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-18-at-10.31.32.png)
「pannellum」フォルダーを「ダウンロード」フォルダーにコピーしておきます。
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-18-at-10.33.52.png)
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-18-at-10.36.08.png)
Xserverのブログサイトにアップロード
Xserverにログインしてサーバーパネルに移動し、対象ドメイン(今回はchrome-vr.com)に入ります。
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-18-at-10.39.59.png)
「FTP > サブFTPアカウント設定」をクリック。設定していない場合は「関連マニュアル」を参考にして設定してください。
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-18-at-10.42.47.png)
「ログイン」をクリック。
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-18-at-10.45.08.png)
「chrome-vr.com」をクリック。
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-18-at-10.46.20.png)
フォルダーを次々と「/chrome-vr.com/public_html/wp-content/themes/cocoon-child-master/」まで開きます。
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-18-at-10.52.39.png)
右下の「作成」で「pannellum」というフォルダーを作ります。
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-18-at-10.53.35.png)
「フォルダ作成」をクリック。
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-18-at-10.53.56.png)
「pannellum」をクリック。
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-18-at-10.54.27.png)
右の「ファイルのアップロード」から「ダウンロード > pannellum」内のすべてのファイルをアップロードします。
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-18-at-15.41.30.png)
「アップロード」をクリック。
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-18-at-15.42.08.png)
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-18-at-15.43.58.png)
「アップロード」をクリック。
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-18-at-15.44.19.png)
以上でコードなどのファイルのアップロードは完了です。
ここで、後でHTMLでコンテンツを記述するときに必要となるURLを右上からコピーしておきます。
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-18-at-15.48.32.png)
テキストエディターに貼り付けておきます。
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-18-at-15.49.39.png)
Xserverからログアウト(WebFTP/サーバー/インフォパネル)しておきます。
360°パノラマ写真をブログ記事に埋め込む
参考記事のHTMLのiframeの記述例に従って、HTMLでブログ記事に埋め込みます。
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-18-at-15.56.04.jpg)
今回の記述は以下です。コピーしておいたコードフォルダーのURLから「/public_html」を削除したURLと、アップロードしておいたパノラマ写真のURLを貼り付けています。
画像サイズはとりあえず「800×600」にしました。
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-18-at-16.34.17.png)
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-18-at-16.00.56-1024x574.jpg)
![](https://chrome-vr.com/wp-content/uploads/2020/05/Screenshot-2020-05-18-at-16.01.30.png)
今回Pixabayからダウンロードしたパノラマ画像をブログにアップロードすると、jpgだったので「EWWW Image Optimizer」という画像圧縮プラグインで自動的に圧縮されてしまいましたが・・・
作業結果 – サンフランシスコの風景(360°VR)
以下がそのHTMLのiframeを記事に埋め込んだ結果です。
全画面表示にすると多少画質が粗く感じますが、ブログ表示の軽さを考えると、このぐらいがちょうど良いと思います。
まとめ
今後はもう少し試行錯誤して最適化や「i」アイコンや矢印アイコンの追加などを試してみたいです。
最初は「Pannellum」コードをブログサイトにアップロードする作業が面倒に感じますが、その後はHTMLのiframeコードをコピーして書き換えれば良いので手軽に360°パノラマ写真をVR化できるので便利です。
ではでは、きらやん