自社サーバー上で 360° プレゼンテーションをホスティング

Updated on Jun 10, 2019

自社サーバーでプレゼンテーションをホストするために必要なこと：

サーバーにアクセス（ファイルをコピーしてHTTPサーバーを設定）
自社用にORBITVU VIEWERをコピー（ライセンスを購入するか、ORBITVU VIEWER Free360を使用する必要があります）
360° プレゼンテーション
HTML とサーバー管理に関する技術的な知識
ORBITVUプレゼンテーションとORBITVU VIEWERに関する理解

利用のための準備

ビューア（VIEWER）
- ORBITVU VIEWER を自社サーバーにコピー ( orbitvu12/ フォルダーをコピー)
- orbitvu12/ フォルダーからファイルが提供されるようウェブサーバーを設定（フォルダーが外部アクセスに公開されていることを確認してください。例：http://yourdomain.com/orbitvu12/ ）
プレゼンテーション
- サーバーにプレゼンテーションをコピー（通常は、FTPツールを利用）
- プレゼンテーションが外部アクセスに公開されるようにウェブサーバーを設定（例： http://yourdomain.com/presentations/ ）
サーバー設定
- 発生する可能性のあるCORS（Cross-origin resource sharing）の問題を避けるために、VIEWERとPresentations URLの両方に Access-Control-Allow-Origin *; headerを追加します。
- Flashのセキュリティー問題を回避するために、プレゼンテーションファイルの配信に使用するドメインにcrossdomain.xmlファイルを追加します（例： https://mydomain.com/crossdomain.xml ）
コーディング
- ORBITVU VIEWERとプレゼンテーションURLを使用しているWebページを作成します（詳細は下記を参照）

Facebookの統合を追加したい場合など、必要に応じて、ドメインにSSL証明書を取得して設定することもできます。

Webページのコーディング

ORBITVU VIEWER ヘルパースクリプトの読み込み
ページの <head> セクションにスクリプトを追加することができます。

<script type="text/javascript" src="http://yourdomain.com/orbitvu12/orbitvu.js"></script>

プレゼンテーションのコンテナ要素を作成
プレゼンテーションが挿入されるコンテナ要素を作成します。このコンテナの一意のIDを設定する必要があります。

<div id="presentation1-container"></div>

ページに複数のプレゼンテーションを表示する場合は、これらのそれぞれに一意のIDを持つコンテナを作成するだけです。

プレゼンテーションの初期化
最後のステップは、プレゼンテーションをコンテナに挿入するJavaScript関数 inject_orbitvu を呼び出すことです。

<script type="text/javascript">
    inject_orbitvu(
        'presentation1-container',
        'http://yourdomain.com/orbitvu12/',
        '',
        {
            ovus_folder: "http://yourdomain.com/presentations/presentation1/",
            content2: 'yes',
            width: "500",
            height: "400"
        });
</script>

Line 3:

コンテナ要素のID

Lines 4-5:

ORBITVU VIEWER ファイルへのURL

Line 7:

プレゼンテーションフォルダーへのURL

Line 8:

content2.xml ファイルが、プレゼンテーションフォルダーに存在する場合は、yes を設定、そうでない場合は、 no を設定するか削除してください。

Line 9-10:

その他 ORBITVU VIEWER パラメータ。詳細はコチラ parameters reference を参照してください。

ヘルパースクリプト（Helper script）は、 inject_orbitvu を呼び出す前にロードされていなければなりません。

ページに複数のプレゼンテーションがある場合は、それぞれに inject_orbitvu を呼び出す必要があります。

onreadyイベントハンドラ内で inject_orbitvuを呼び出すこともできます。

完成例

以下の例では、jQueryを使用してページの読み込み時にJavaScriptの実行を遅らせています。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />

        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script type="text/javascript" src="http://yourdomain.com/orbitvu12/orbitvu.js"></script>

        <script type="text/javascript">
            $(function() {
                inject_orbitvu(
                  'presentation1-container',
                  'http://yourdomain.com/orbitvu12/',
                  '',
                  {
                      ovus_folder: "http://yourdomain.com/presentations/presentation1/",
                      content2: "yes",
                      width: "500",
                      height: "400"
                  });
            });
        </script>
    </head>
    <body>
        <h1>Some text</h1>

        <div id="presentation1-container"></div>
    </body>
</html>

ページ（特にInternet Explorer）に適切なDOCTYPEを設定してください。

Previous Article ORBITVU SUN 埋め込みコードを用いた ORBITTOUR

Next Article CORSヘッダーの設定（サーバー）

Orbitvu Public Support Site

自社サーバー上で 360° プレゼンテーションをホスティング

利用のための準備

Webページのコーディング

完成例

VIEWER, ORBITTOUR, and 360° Presentations JP

Other Resources