概要

ネイティブの HTML5 Web オブジェクトをスライドに挿入するには、大きいボタンバーでオブジェクト/Web をクリックします。プロパティインスペクターの「アドレス」フィールドにオブジェクトの URL を入力すると、オブジェクトコンテナに Web ページが表示されます。

Web オブジェクトの作成

次のように、ツールバーでオブジェクト/Web を選択します。

ツールバーからの Web オブジェクトダイアログの選択
ツールバーからの Web オブジェクトダイアログの選択

Web オブジェクトの URL を「アドレス」フィールドに入力します。OAM(Edge Animate パッケージ)、pdf、svg、zip ファイルを参照するには、「アドレス」フィールドの横にあるフォルダーアイコンをクリックします。

Web オブジェクトの挿入
Web オブジェクトの挿入

次に説明するように、その他のオプションを選択します。

自動読み込み

オブジェクトを自動的に出力に読み込む場合は、このオプションを選択します。デフォルトでは、Web オブジェクトを作成する際にこのオプションは選択されたままになります。編集モードでは、オブジェクトを読み込んだ後、オブジェクトにマウスを移動すると、コンテンツが表示されます。

このオプションを有効にしてもコンテンツが表示されない場合は、このフォーラムのスレッドを参照してください。

Web オブジェクトをスライドに表示するには、次のオプションを選択します。

境界

Web オブジェクトの境界を表示する場合は、このオプションを選択します。

スクロール

Web オブジェクトコンテナにスクロールバーを表示する場合は、このオプションを選択します。

アニメーションを読み込み

Web オブジェクト内のアニメーションを読み込む場合は、このオプションを選択します。

Web オブジェクトを新しいブラウザーウィンドウで表示する場合は、次のオプションを選択します。

デフォルト

デフォルトのブラウザー設定で Web オブジェクトを表示する場合は、このオプションを選択します。

フルスクリーン

Web オブジェクトをフルスクリーンで表示する場合は、このオプションを選択します。

カスタム

定義した幅と高さに収まるように Web オブジェクトを表示する場合は、このオプションを選択します。

pdf ファイル、zip ファイルなど、オブジェクトを挿入する場合は、pdf、zip、または svg の各ファイルを Web サーバーに配置し、ファイルの URL を使用することをお勧めします。

例えば、オブジェクトWeb サーバーに配置して、次のように URL を使用します。

  • pdf:localhost:8012/<filename>.pdf
  • svg:localhost:8012/<filename>.svg

スライドをプレビューすると、オブジェクトが出力に表示されます。

pdf および svg オブジェクトの埋め込み
pdf および svg オブジェクトの埋め込み

YouTube ビデオが読み込まれない

YouTube ウィジェットを挿入した後、パブリッシュしてもビデオが再生されない場合は、ウィジェットを更新してください。

詳しくは、SWF 出力における YouTube ウィジェットの問題を参照してください。

埋め込みコードのサポート

コードを埋め込む」オプションをクリックするとビデオファイル、ストリーミングビデオへのリンクなど、Web オブジェクトを埋め込むことができます。埋め込みコードは、次のように URL 領域に貼り付けることができます。

埋め込みコードのサポート
埋め込みコードのサポート

例えば、次の埋め込みコードを貼り付けると、モバイルビューで埋め込みビデオを表示できます。

<iframe width="560" height="315" src="https://www.youtube.com/embed/_VW-KBt0Sbk" frameborder="0" allowfullscreen></iframe>

注意:

プロジェクトをパブリッシュまたはプレビューした後にエラーメッセージが表示される場合、オブジェクトをフレームに表示できません。詳しくは、このフォーラム投稿を参照してください。

YouTube ビデオのレスポンシブスライドへの埋め込み
YouTube ビデオのレスポンシブスライドへの埋め込み

埋め込んだビデオの高さと幅は、Web オブジェクトコンテナのサイズを調整することで変更できます。ビデオの幅は Web オブジェクトコンテナの幅に従って変更されます。高さは縦横比に従って変更されます。

ビデオは iframe タグを使用せずに埋め込むこともできますが、タグを使用することをお勧めします。オブジェクトと埋め込みタグは、次のように使用できます。

<object data=" https://www.youtube.com/embed/_VW-KBt0Sbk " width="560" height="315"></object>
<embed width="420" height="315" src=" https://www.youtube.com/embed/_VW-KBt0Sbk "></embed>

Adobe Captivate で Web オブジェクトを使用する際の考慮事項

Adobe Captivate では Web オブジェクトと HTML5 アニメーションが(他のシェイプと重ねて表示する場合)常に一番上に表示される

この HTML5 の問題を回避するには、次の操作を実行します。

  1. Captivate インストールフォルダーで、AdobeCaptivate.ini ファイルを開きます。
  2. 次のように、UseWidget7 の値が 1 になるようにファイルを編集します。
    UseWidget7=1
  3. Adobe Captivate を閉じて再起動します。 

Web オブジェクトを一番上または一番下に配置できるようになり、HTML5 で正しく表示されるようになります。 

注意:

この回避策は HTML5 のパブリッシュオプション、静的ページ、静的アニメーション のみに適用できます。

保護されている LMS(https)で Web オブジェクトに埋め込んだ保護されていない(http)ページが起動されないことがある

https で保護されている LMS 環境では、保護されていない(Web オブジェクト内の)http の Web サイトを参照しようとしても起動しません。

http ベースの Captivate プレビューサーバーではコンテンツを正常に起動できます。ただし、https ベースの SCORM クラウドや Captivate Prime の LMS ではコンテンツを起動できません。

クリックジャッキングが使用されている Web サイトが Web オブジェクトでサポートされない

クリックジャッキングは安全性を脅かすため、Captivate では別の Web サイトへのリダイレクトはサポートしません。

注意:

Web サイトによっては別のページやウィンドウで開けない場合があります。サイトが Web オブジェクトでサポートされるかどうかをテストするには、iframe を使用して単純な HTML ページを作成し、URL が機能するかどうか確認します。機能する場合は 、Web オブジェクトでも機能します。

クリックジャッキングについて詳しくは、Wikipedia のクリックジャッキングに関するページを参照してください。

サンプルプロジェクトのダウンロード

Captivate で魅力的な学習コンテンツを作成する方法の詳細については、次のプロジェクトをダウンロードします。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー