RICOH THETAの360度画像をホームページに表示したい!埋め込み方法2つを紹介

RICOH THETAの画像をホームページに表示する方法

こんにちは、yamaです。

ここでは、RICOH THETAの360度画像をホームページやブログに表示する方法を紹介します。

お店の案内、絶景スポットなど、ホームページやブログで360度の画像を観せたい場合もあると思います。

360度画像を表示させる具体的な方法として

  • theta360.com を使った表示方法
  • WordPressプラグイン「WP Photo Sphere」を使う方法

この2つを紹介します。

スマートフォンからSNSへの投稿方法は、初心者も簡単!RICOH THETAの使い方:撮影・アプリ操作・公開方法を紹介 の記事で紹介しています。

RICOH THETAの360度画像をそのまま配置するとこんな感じ

RICOH THEAで撮影した写真はjpgデータです。ホームページやブログでは普通に使われていますよね。

なので、そのまま配置することができます。
こんな感じです
↓↓↓↓↓↓

THETAの画像をそのまま配置

そのままの画像では使いづらいですね。(汗)

360度画像として観るためには、対応したビューアーを用意します。

簡単に設定できるので、順番に見ていきましょう。

 

theta360.comで360度画像をホームページに表示する方法

もっとも簡単な方法が、RICOH THETAの専用サイト theta360.comを使う方法 です。
取得したコードを貼り付けるだけで簡単に埋め込み表示できます。

THETA Vで360度画像のテストです – Spherical Image – RICOH THETA

theta360.comを使った画像の埋め込みの流れ
  1. theta360.comに画像をアップロード
  2. 埋め込みコードを取得
  3. ホームページにコードを貼り付ける

① theta360.comに画像をアップロード

シータのPC用基本アプリ(RICOH THETA)でアップロードしたい画像を開きます。

THETAアプリから画像のアップロード

次に、アプリのメニューから theta360.com → 投稿(SNS)を選択します。

 

theta360のログイン画面

はじめてtheta360.comに画像をアップする時は、ここでアカウントの登録をします。
Facebook、Twitterいずれかの IDでログイン しましょう。

 

theta360の投稿画面

アカウントの登録が終わると、投稿が可能になります。

コメントを入力、「公開」か「限定公開」にチェック後 → 投稿ボタン をクリックします。
ここで入力するコメントはtheta360.comのサイトで表示されるコメントです。

限定公開はURLを知っている人のみが閲覧できる投稿方法です。
今回はブログに貼り付けるだけの画像なので、限定公開で投稿しました。

② 埋め込みコードを取得する

theta360からコードを取得する

投稿完了直後の画面です。
Facebook、TwitterなどのSNSで共有することもできます。
360度画像を表示させるコードを取得したい場合は、「ブラウザで確認する」をクリック します。

 

theta360.comの画面

theta360.comの投稿画面で映像を閲覧できます。
ホームページやブログに360度画像を表示させる時は画面右下の コードを取得 ボタンをクリック します。

画面にコードを取得ボタンが表示されない場合は、theta360.comのサイトでログインするとコード取得のボタンが表示されます。

③ ホームページにコードを貼り付ける

コード取得画面

後は、コードをホームページやブログにペーストすればOKです。

コードに記載されている「data-width」「data-height」の数値を変更して表示サイズを変更する ことも可能です。

yama
とても簡単なのでオススメな方法です。

以上が、theta.360を利用した360度画像の表示方法です。

 

WordPressプラグイン「WP Photo Sphere」で表示する方法

WordPressのプラグインで360度映像を表示することもできます。
ここでは、「WP Photo Sphere」を紹介します。
こちらも操作は簡単、ショートコードを貼り付けるだけでOKです。

こんな感じで貼り付けることができます。
↓↓↓↓↓↓

 

個人的には、theta360.comを利用する方が良いと思いますが、

  • theta360.comで画面左下に表示される「THETA」のロゴが嫌な方
  • 外部サービスを利用したくない方

にはプラグインの利用もありだと思います。

WP Photo Sphereを使った画像の埋め込みの流れ
  1. WP Photo Sphere をインストール、有効化
  2. ショートコードを貼り付ける
yama
プラグインの操作は簡単なので手軽に導入できますよ。

プラグインのインストール前はサイトのバックアップを取るようにしましょう。

① WP Photo Sphere をインストール、有効化

プラグインのインストールはWordpressを利用している方であれば、問題なくできると思います。
インストールして有効化すればOKです。

WP Photo Sphere のインストール

「WP Photo Sphere」は最終更新が記事執筆時の1年前とバージョンの古いプラグインです。
一番気になるのは 「使用中のWordpressで未検証」ってやつですね。

ボクが使った結果では、Wordpress 4.XX では動作するようです。5.XXについては未検証です。
しつこいようですが、使用する際はバックアップを取ってから動作検証しましょうね。

② ショートコードを貼り付ける

ショートコードのアイコン

プラグンインを有効化すると、投稿画面に「Add a panorama」のボタンが表示されます。

360度画像を投稿したい時は、「Add a panorama」のボタンをクリック → 投稿したい画像を選択 すると投稿画面にショートコードが表示されます。
画像選択する操作は、Wordpressで画像を投稿する方法と同じです。

WP Photo Sphereのショートコード

こんな感じでショートコードが表示されます。

サイトを公開すると、プレビューは次のように表示されます。
↓↓↓↓↓↓

WP Photo Sphereのデフォルト設定

プラグインのデフォルト表示は、WP Photo Sphereの文字と画像タイトルが表示されるのみです。
360度映像を見る時はテキストリンクをクリックします。

yama
英文が並んでいるリンクとか怖すぎてクリックできません、、って人もいるでしょう(汗)

といわけで、プラグインをカスタマイズしてみましょう。

 

WP Photo Sphere のカスタマイズ

WP Photo Sphere のカスタマイズは、Wordpressのメニューから「設定」→ 「WP Photo Sphere 」に移動します。

WP Photo Sphereのデフォルト設定

cssなど多くの設定が可能です。

今回はデフォルト設定から、基本的な以下の部分を調整します。

  • タイトル表示の変更
  • 表示画像サイズの調整
  • 自動再生の設定
  • 再生速度の調整

 

タイトル表示の変更

WP Photo Sphere タイトル表示の変更

「Text of the link 」を変更します。
初期設定では WP Photo Sphere (%title%) となっている部分を、%title% に変更します。
これで画像のタイトル名が表示されます。

表示画像サイズの変更

WP Photo Sphereの幅の設定

横幅は「Default width 」を変更します。
初期設定は560pxです。
ブログのwidth幅に合わせて変更するとピッタリのサイズになりますね。
ボクはブログテンプレートで使用しているSTORKのwidthに合わせて728pxに設定しました。

WP Photo Sphere の高さ

高さは「Default height」で設定します。
初期設定は315pxです。任意のサイズにしましょう。
今回は、theta360.comの表示に合わせて375pxに設定しました。

自動再生の設定

自動再生の設定
「Automatically load panoramas」のチェックを入れると自動再生が設定されます。

再生速度の調整

再生速度の調整

「Default animation speed」で設定します。
初期設定は 2 Revolutions per minute です。これは1分間に2回転するという意味ですね。
このスピードで動かすと、ボクは少し速いかなと感じたので、2 → 1(revolutions per minute)に変更しました。

「Default vertical animation speed」は垂直方向のアニメーション速度です。
初期設定は 2 revolutions per minute です。
これも上記と同様に、2 → 1(revolutions per minute)に変更しました。

 

最後に、今回のまとめ

Post from RICOH THETA. – Spherical Image – RICOH THETA

 

THETAの360度画像をホームぺージやブログに表示する方法を2つ紹介しました。

  • theta360.comに画像をアップロードする方法
  • WordPress プラグイン WP Photo Sphere を使用する方法

操作はどちらも簡単ですが、theta360.com の方がおすすめです。

プラグインを使用する場合、アップロード画像をどの程度のサイズでアップすべきかイマイチわからないんですよね。
THETA Vの元画像は約3.5Mです。このサイズをそのままアップロードするわけにもいかないですし、今回は2000px程度に縮小してWP Photo Sphereで表示しましたが、画質が劣化しているように感じます。

theta360.comで表示している画像の方が綺麗に表示されていると思います。
プラグインでTHETAの360度画像を表示する時は、画質と画像サイズのバランスをみながら何度かテストしていく必要があると思います。

それでは、今回はこのへんで。

 

THETA Vの作例は、次の記事を参考にしてください。
↓↓↓↓↓↓

【作例】RICOH THETA Vの写真が面白い!家族で楽しむ360度カメラの遊び方

2019.03.23

 




RICOH THETAの画像をホームページに表示する方法

デザインのコツがわかる!
無料メールマガジン配信中!!

メルマガ登録

デザインの基礎がわかる!
全10回だから気軽にできる!
実際のデザイン案件をベースにした実習あり!

10回でマスターできる! レイアウトデザインのコツ
デザインの基礎について、実際の案件をベースにしたデザインワークを行う無料デザイン講座です。

個人・ブロガー向け
デザイン制作サービス

デザイン作成承ります

個人で活動している方、ブロガー向けのデザイン作成サービスです。

ロゴマークや名刺など、デザインでお悩みの方 !

自分で作る時間がない!」
「自分で作りたいけどまとまらない!」
「何をどうしていいのかわからない!!」

そんなデザインに関する悩みを解決します。
個人で仕事を依頼するって何だか難しく感じますが、メール等で打ち合わせしながらデザインを進めています。
料金設定も個人向けにわかりやすく設定しています。

お問い合わせフォームまたは、下記のページからご相談ください!
お待ちしております!

ひとり広報 Line@

デザインのコツに関する質問・疑問。デジカメの購入相談など。Line@も気軽に使ってください!

ひとり広報が「LINE@」始めたよって話

2017.09.18

Line@友だち追加

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA