自社サーバー上で 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)の問題を避けるために、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を設定してください。
ORBITVU SUN 埋め込みコードを用いた ORBITTOUR
サイトにORBITTOURを埋め込むとき、ORBITTOURはそのサイズをコンテナ要素に合わせようとします(これにより、レスポンシブなレイアウトを作成できます)。 このため、ORBITTOURが表示される要素の幅と高さを指定する必要があります。ORBITTOURを高さ0pxの要素(divなど)に埋め込むと、ORBITTOURは16:9 (幅 :
ORBITVU VIEWERをESモジュールとして使用する
ORBITVU VIEWERには、クラシック版のスクリプトを読み込む代わりに、バンドラーやscriptタグ(type="module")からインポートできるESモジュールバンドル(orbitvu.esm.js)が含まれています。