Orbitvu Public Support SiteVIEWER, ORBITTOUR, and 360° Presentations JP Webサイトとの統合自社サーバー上で 360° プレゼンテーションをホスティング

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

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

  • サーバーにアクセス (ファイルをコピーして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)の問題を避けるために、VIEWERPresentations 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 を呼び出すことです。
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<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を設定してください。