パノラマを静止画として公開しよう

RICOH THETA Sで撮影したパノラマ画像をtheta360.comで公開する手順を解説します。theta360.comにはマウス操作でパノラマ画像をぐるぐると見渡せる360°パノラマビューワーが用意されています。その360°パノラマビューワーは、埋め込み用のHTMLタグが生成できるので、HTMLファイルにコピー&ペーストするだけでtheta360.com以外のページにも埋め込めます。

本記事ではパソコンでの公開方法を紹介します。スマートフォンの専用アプリ(※)からも公開できるので、詳しくはアプリ内の使用説明書をご覧ください。

※専用アプリ「RICOH THETA S」[App Store][Google Play]

theta360.comのデモ

1. アプリのインストール

パソコンでRICOH THETA Sで撮影した素材を扱うにはアプリをインストールする必要があります。RICOH THETAのダウンロードページより[パソコン用アプリケーション] → [基本アプリ]からインストーラーをダウンロードし、パソコンにインストールします。インストーラーはWindowsとmacOSが用意されています

2. アプリにパノラマ画像を読み込む

RICOH THETAアプリを起動し、パノラマ画像をドラッグ&ドロップで読み込みます。読み込みに成功すると、ウィンドウ内にパノラマ画像が表示されます。ウィンドウ内をマウスドラッグすると視点を操作できます。

アプリにパノラマ画像を読み込む様子

3. theta360.comへログイン

theta360.comへコンテンツをアップロードするためにはログインが必要です。メニューの[theta360.com] → [ログイン]をクリックし、手順沿ってログインします。

theta360.comへログインする様子

4. theta360.comへアップロード

theta360.comへのログインに成功したら、メニューの[theta360.com] → [投稿(SNS共有)]をクリックします。クリックすると[theta360.comへの投稿]ウィンドウが開くので、必要事項を入力して「投稿」ボタンをクリックします。これでtheta360.comへパノラマ画像が公開されました。公開したパノラマ画像はtheta360.comで見られます。

[theta360.comへの投稿]ウィンドウ

5. 埋め込みHTMLコードの取得

アップロードしたパノラマ画像のtheta360.comページで、埋め込み用のHTMLコードを生成できます。それをHTML内に記述すると、ページ内に360°パノラマビューワーを埋め込めます。theta360.comページ内にある「埋め込みコード」ボタンをクリックするとHTMLコードが生成されます。

theta360.comのページ

HTMLコード内のdata-widthdata-height100%を指定すると、HTMLコードを記述するDOM内全体にコンテンツを広げられます。

<blockquote data-width="100%" data-height="100%" class="ricoh-theta-spherical-image" >
  Post from RICOH THETA. - <a href="アップロードしたパノラマ画像のURL" target="_blank">Spherical Image - RICOH THETA</a>
</blockquote>
<script async src="https://theta360.com/widgets.js" charset="utf-8"></script>

次のページでは、RICOH THETA Sで撮影した動画をWebサービスで公開する手順を解説します。