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

サンフランシスコ風景 360°パノラマ写真 VR Pannellum VR

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

はじめに

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

https%3A%2F%2Fwww.vr hokkaido - ChromebookでVR?Pixabay 360°パノラマ写真を「Pannellum」でブログ記事に埋め込んでVR化?!
北海道VR散歩:北海道の観光・絶景・地域案内(全天球360°パノラマ写真によるVR散歩案内)
北海道VRは、北海道のおすすめ観光地を360°VRで見ることができる観光ポータルサイトです。現在北海道の絶景地を3000ヵ所以上撮影し、順次公開中。海、山、花、河川、湖沼などの他、流氷をはじめ北海道でしか見られない絶景スポットを厳選公開しています。
Screenshot 2020 05 13 at 16.02.21 1024x652 - ChromebookでVR?Pixabay 360°パノラマ写真を「Pannellum」でブログ記事に埋め込んでVR化?!

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

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

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

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

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

https%3A%2F%2Fpixabay - ChromebookでVR?Pixabay 360°パノラマ写真を「Pannellum」でブログ記事に埋め込んでVR化?!
Attention Required! | Cloudflare
Screenshot 2020 05 17 at 18.08.12 1024x583 - ChromebookでVR?Pixabay 360°パノラマ写真を「Pannellum」でブログ記事に埋め込んでVR化?!

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

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

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

https%3A%2F%2Fpixabay - ChromebookでVR?Pixabay 360°パノラマ写真を「Pannellum」でブログ記事に埋め込んでVR化?!
Attention Required! | Cloudflare
Screenshot 2020 05 17 at 18.12.00 1024x587 - ChromebookでVR?Pixabay 360°パノラマ写真を「Pannellum」でブログ記事に埋め込んでVR化?!
Screenshot 2020 05 17 at 18.12.49 - ChromebookでVR?Pixabay 360°パノラマ写真を「Pannellum」でブログ記事に埋め込んでVR化?!

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

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

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

他の例としては、以下のような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以降では解決したようですが・・・

24493e96470432a403f20868d00cc713 - ChromebookでVR?Pixabay 360°パノラマ写真を「Pannellum」でブログ記事に埋め込んでVR化?!
iOS13でWebARとWebVRにおけるデバイスモーション設定が改善しました! - bagelee(ベーグリー)
WebARとWebVRのユーザビリティに影響を及ぼしていた、iOS12.2でのデバイスモーションの設定がデフォルトオフ問題が解決されました! ブラウザ側で制御できるようになり、WebARとWebVRでのユーザビリティが向上しています。その対応内容も含め解説します。

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

Pannellumの使い方

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

38eb7441ed54138e564a1164c8e2b4cb - ChromebookでVR?Pixabay 360°パノラマ写真を「Pannellum」でブログ記事に埋め込んでVR化?!
360°画像をサイトに表示させたいときのおすすめパノラマビューワー Pannellum
サイトに埋め込んでいた360°画像が、iOS13以降のiPhoneのSafariでジャイロセンサーに連動して動かなくなってしまったので、指で動かすタイプのビューワーに切り替えた。フリーのおすすめプログ

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

Pannellum公式サイト

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

https%3A%2F%2Fpannellum - ChromebookでVR?Pixabay 360°パノラマ写真を「Pannellum」でブログ記事に埋め込んでVR化?!
Pannellum
Screenshot 2020 05 18 at 10.17.14 1024x625 - ChromebookでVR?Pixabay 360°パノラマ写真を「Pannellum」でブログ記事に埋め込んでVR化?!

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

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

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

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

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

Screenshot 2020 05 18 at 10.23.42 1024x720 - ChromebookでVR?Pixabay 360°パノラマ写真を「Pannellum」でブログ記事に埋め込んでVR化?!

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

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

保存」をクリック

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

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

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

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

Screenshot 2020 05 18 at 10.33.52 - ChromebookでVR?Pixabay 360°パノラマ写真を「Pannellum」でブログ記事に埋め込んでVR化?!
Screenshot 2020 05 18 at 10.36.08 - ChromebookでVR?Pixabay 360°パノラマ写真を「Pannellum」でブログ記事に埋め込んでVR化?!

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

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

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

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

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

ログイン」をクリック。

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

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

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

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

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

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

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

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

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

pannellum」をクリック。

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

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

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

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

Screenshot 2020 05 18 at 15.42.08 - ChromebookでVR?Pixabay 360°パノラマ写真を「Pannellum」でブログ記事に埋め込んでVR化?!
Screenshot 2020 05 18 at 15.43.58 - ChromebookでVR?Pixabay 360°パノラマ写真を「Pannellum」でブログ記事に埋め込んでVR化?!

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

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

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

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

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

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

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

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

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

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

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

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

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

Screenshot 2020 05 18 at 16.34.17 - ChromebookでVR?Pixabay 360°パノラマ写真を「Pannellum」でブログ記事に埋め込んでVR化?!
Screenshot 2020 05 18 at 16.00.56 1024x574 - ChromebookでVR?Pixabay 360°パノラマ写真を「Pannellum」でブログ記事に埋め込んでVR化?!
Screenshot 2020 05 18 at 16.01.30 - ChromebookでVR?Pixabay 360°パノラマ写真を「Pannellum」でブログ記事に埋め込んでVR化?!

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

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

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

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

まとめ

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

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

ではでは、きらやん

(Visited 11 times, 1 visits today)

コメント