Googleストリートビュー認定フォトグラファーの、ごんたです。
自分のブログに360度画像を貼る簡単な方法をお探しですか？初心者でも簡単に、ブログや会社のHPに360度写真を表示させる方法を紹介します。
PCで加工したTHETA画像をLINEで共有する方法は別記事にまとめました。
目次
THETAなど360度カメラで撮影した画像をブログやHPにアップする方法【簡単に表示可能です】
まずは、ザックリした流れです。
- アップロード用の無料アプリをインストール
- アプリから360度画像をアップロード
- 埋め込みコードを入手
- サイトに埋め込みコードを設置
順番に作業を解説していきます。
①アップロード用の無料アプリをインストール
THETA公式ページからパソコン用アプリケーションをダウンロードします。
パソコン用アプリケーションの表にある、「基本アプリ」を見てください。
Windows用とMAC用がありますので、自分の使っているOSに合わせて基本アプリをダウロードしてください。
ダウンロードしたインストーラー「RICOH THETA Setup.exe」をPC上でクリックしてインストール作業を行います。インストール作業が完了したらTHETAアプリを起動します。
②THETAアプリから360度画像をアップロード
THETAアプリを起動しアプリ上で対象の画像を開きます。360度画像ファイルは以下いずれかの方法で開くことができます。
- ドラック＆ドロップでアプリ上に画像を持っていく
- THETAアプリの上部にあるメニューから「ファイル」→「開く」から画像を指定する
画像を開いたら、THETAアプリのメニューバーにある「theta360.com」をクリックします。「投稿（SNS共有)…」をクリックします。確認のダイアログが表示されます。
青い「投稿」ボタンをクリックしましょう。コメントは入力しなくても構いません。投稿ボタンをクリックすると、画面の右上のあるアイコンがぐるぐる回ります（数秒程度待ちましょう）。しばらくすると「投稿完了」の画面が表示されます。
360度画像のアップロードには数十秒程度の時間が掛かる場合があります。
③埋め込みコードを入手
投稿が完了した後に表示される画面上に共有先として「Facebook Twitter Trumblr Webo WeChat」と表示されますが。その下に表示されている「ブラウザで確認する」をクリックします。
アプリからTHETAの公式サイトに移動したら、投稿した360度画像の下にある緑色の「埋め込みコード」をクリックします。「埋め込みHTMLコード」と表示されますので、その中にあるHTMLコードをコピーします。このコピーしたコードをブログやホームページに貼り付ければ、360度画像のビューワーが表示されます。
自動再生は標準で「On」にチェックが入っています。自動再生がOnの状態だと、サイトに埋め込んだ360度画像が何もしなくても表示されグルグルと動作します。初めてサイトに訪れた人も「おー、これは動くのか！すごいな」と驚いてくれる仕様です。
自動再生を「Off」に設定した場合、サイト内に埋め込んだ360度画像はクリックしないと表示されない仕様です。特に理由がない限り、自動再生は「On」のままで良いでしょう。
④サイトに埋め込みコードを設置
埋め込み用のHTMLコードをWordPressに埋め込む方法
ブロガーに人気のWordPressに360度画像を埋め込む方法を紹介します。投稿機能や、固定ページを使います。HTMLエディターに切り替えて、埋め込み用のコードをそのまま貼り付けましょう。
ビジュアルエディターでは動作しません。作業はHTMLエディターで行いましょう。
HTMLタイプのホームページにコードを貼り付けたい場合
対象のHTMLファイルに先ほどのコードを貼り付ければOKです。
360度のビューワーが表示されない場合は、サイト内のjQueryが競合していないかをデベロッパーツール等で確認しましょう。
360度画像のビューワーサイズを変更するカスタマイズ
埋め込みコードを調整することで、ビューワーのサイズを自由に変更できます。以下、実際のコードでの設定例を紹介します。
横幅を変更する方法
埋め込みコード内の「data-width=”500″」が対象コードです。
この500は「500ピクセル」を意味しています。この500を任意の数値に変更しましょう。
高さ（上下の幅）の変更方法
埋め込みコードの「data-height=”375″」が対象コードです。
この375は「375ピクセル」で高さを表示することを指定したコードです。任意の値に変更しましょう。
レスポンシブコードで360度ビュワーを表示するコード
先ほど紹介し横幅と高さを以下のように指定しましょう、
- data-width=”100%”
- data-height=”auto”
data-widthは「100」ではありません。「100%」と末尾にパーセントの記号を忘れないよう注意しましょう。
その他の方法で360度画像をブログにアップする方法
WordPressでブログを運用している場合、無料のプラグインを使い360度画像を表示する方法があります。
THETAの公式サイトを利用せずに360度画像を投稿できますので、仮にTHETAのサイトのサービスが停止した場合でもブログに影響は出ません。
- 外部サービスの停止に影響を受けない
- 外部サービスを提供している会社のロゴが表示されない（自分のブランドとして宣伝可能）
- 360度画像の表示を自由にアレンジできる
- バーチャルツアーを制作できる
趣味のブログで簡単に360度画像を掲載したい。掲載したい360度画像はそれほどない、メインのコンテンツでもないという場合はTHETAのサイトを使う方式をお勧めです。
360度画像を使ったコンテンツがメインで、しっかりブランディングしたいという場合は、無料のプラグインでカスタマイズする方向性を検討しましょう。
プラグインを使いコンテンツを構築する場合は、360度画像をブログと同じサーバーに保存することになります。一定量のディスク容量が必要になり、再生させる度にデータ転送量がかかることに留意しましょう。
無料のWordPressプラグインは公式サイトのプラグインディレクトリーに公開されています。日本語化されていない英語のみのプラグインが多いのが現状ですが、高機能なものが多く非常に便利です。
中には自分で撮影した360度画像を複数利用して360度バーチャルツアーを制作できるプラグインがあります。
- WP VR
- iPanorama 360 WordPress Virtual Tour Builder
- Easy Panorama
- wp-pano
360度バーチャルツアーって何だ？
グーグルストリートビューをイメージしてください。360度画像を自由に操作しながら好きな方向を眺めることができますよね？360度画像上に矢印が表示され、その矢印をクリックするとその方向へ進み、別の場所でも回りの様子を閲覧できる仕組みです。バーチャルツアーとはまさにこの仕組みを利用したコンテンツです。
自分で撮影した360度画像を素材に、無料のWordPressプラグインでバーチャルツアーを作りブログ内に埋め込みことができますのでぜひチャレンジしてみてください。
【備考】THETAアプリは、THETAのファームウェアアップデートも行えます
THETAアプリを使って、THETA本体のファームウェアアップデートを行うことができます。
- THETAとPCをUSB接続
- THETAパソコンアプリを起動
- メニューより「ファイル」→「ファームウェアアップデート」をクリック
- 確認ダイアログが表示されたら表示内容を確認し「OK」をクリック
更新内容とインターネット環境により更新時間が異なりますが、数十秒～数分は見込んでおきましょう。THETA本体のバッテリーが十分にある状態でアップデートしましょう。
バグフィックッスだけでない
忘れがちなファームウェアアップデートですが、最新バージョンの情報だけでもチェックしておくことをお勧めします。
なぜならHDR合成撮影、インターバル合成撮影や、色温度の設定機能などわりと通好みの機能がたまーに追加されるからです。例えば私が使っているTHETA Sでは以前セルフタイマー機能がありませんでした。2016年のファームウェアアップデートによりようやく使えるようになったのです。
【備考】THETAアプリのバージョンアップ方法
パソコン用アプリはTHETAアプリのパソコン用アプリケーションのバージョンアップ方法を紹介します。パソコン用アプリの追加機能や、バグフィックスなどの目的で不定期に新バージョンがリリースされています。
- THETAアプリを起動
- 画面上部のメニュー右端の「ヘルプ」を選択
- バージョン情報のウィンドウが表示されたら、更新をするをクリック
最新バージョンの3.13.0では、今回360度画像を自分のブログに埋め込む際にコードを取得したサイト「theta360.com」へのログインにWeiboとWeChatのアカウントが利用できるようになりました。
「Weibo」と「WeChat」って聞いたことありますか？それぞれのアカウントについて解説します。
Weiboって何のアカウント？
Weiboは日本人にはあまりなじみのない名称ではないでしょうか？
読み方はウェイボー、中国のブログサービスの一つであり、中国国内で一番人気と評判のSNSアプリです。
なんでもTwitterのようなつぶやき機能と、Facebookの友達機能が統合されたシステムだそうです。日本では当たり前に利用できるSNSも、特定の国では利用できません。その国独自のSNSが開発され広く普及されることがあります。Weiboは中国国内の会社が開発した中国語ユーザー向けのSNSサービスです。
WeChatって何のアカウント？
読み方はウィーチャット。こちらも中国で人気のアプリです。日本で一般的に普及しているコミュニケーションツールLINEのような存在です。
日本のメッセージングアプリだとデフォルトになりつつある「既読」機能がないというのが興味深いです。中国では面子が重要な国だと耳にします。メッセージが届いても直ぐに開封せず（相手に既読がつなかい状態）で相手に圧力をかけたりするようになり、あまりメッセージングアプリとして使ってもらえないという噂もありますが、いずれにしてもその国の文化的背景がアプリ開発にあるんでしょうね。
さて、解説したように今回の最新バージョンでは中国の人気アプリのアカウントをサポートし始めました。WeiboやWeChatアカウントをサポートするということは、中国ユーザーを大きなマーケットとして見込んでいるのでしょうね。
まとめ
THETAとその他の360度画像をブログへ埋め込む方法を紹介しました。
今回した無料のアプリを利用すると、HTMLなどに馴染みの無い方でも簡単に自分で撮影した360度画像をブログ上に表示できます。VRコンテンツなど、訴求性の高いコンテンツ作りにぜひ活用してください。
ブログにアップする前に、360度画像に映り込んだ自分の姿を削除したいという方向けの記事はこちらです。
「そもそも撮影の時点で、映らないようにしたい！」という方向けの記事はこちらにまとめました。私が実際によく使う方法です。
