Adobe Captivate で HTML5 ファイルとしてプロジェクトをパブリッシュする

Captivate の HTML5 パブリッシングのオプションと出力形式。

  • Mac OS Catalina に対応した Adobe Captivate (2019 release) 用のアップデートが公開されました。今すぐアップデートを入手しましょう
  • Adobe Captivate(2019 release)にアセットパネルが読み込まれない場合は、詳細から解決策を確認してください。

iPad や iPhone などの HTML5 をサポートするデバイスに、Adobe Captivate プロジェクトをパブリッシュできます。

  1. 非レスポンシブプロジェクトをパブリッシュするには、プロジェクトを開いてファイル/パブリッシュをクリックするか、ボタンバーでパブリッシュ/コンピューターにパブリッシュをクリックします。

    レスポンシブプロジェクトをパブリッシュするには、プロジェクトを開いてファイル/パブリッシュをクリックするか、ボタンバーでパブリッシュ/デバイス用にパブリッシュをクリックします。

    レスポンシブプロジェクトのパブリッシュについて詳しくは、レスポンシブプロジェクトのパブリッシュを参照してください。

  2. プロジェクトで Typekit フォントを使用している場合は、プロジェクトに Typekit フォントが含まれていることを確認するポップアップが表示されます。

    ウィンドウで、「次へ」をクリックします。

    Typekit に関するメッセージ
    Typekit に関するメッセージ

  3. プロジェクトがレスポンシブである場合、次のダイアログが表示されます。

    レスポンシブプロジェクトのパブリッシュ
    レスポンシブプロジェクトのパブリッシュ

    プロジェクトが空白で非レスポンシブである場合、次のダイアログが表示されます。

    空白のプロジェクトのパブリッシュ
    空白のプロジェクトのパブリッシュ

    プロジェクトをパブリッシュするには、「パブリッシュ」をクリックします。

    プロジェクトアセットを表示するには、指定のフォルダーに移動すると、次のアセットが表示されます。

    HTML アセット
    HTML アセット

  4. パブリッシュ後、次の操作を行います。

    • プロジェクトに外部ファイル(「URL またはファイルを開く」アクション)へのリンクが含まれる場合は、ファイルを出力フォルダーにコピーします

    • プロジェクトに別の Adobe Captivate プロジェクト(CPTX)へのリンクが含まれる場合は、プロジェクトを出力フォルダーの呼び出し先フォルダーにコピーします。

  5. (オプション)HTML5 出力で、オブジェクトをクリックするときに表示される矩形を無効にするには、環境設定で「HTML5 のスライドアイテムで選択矩形を非表示にする」を選択します(編集/環境設定/パブリッシュ設定)。

注意:

Web サーバー上でホストされている HTML5 出力を表示する場合にのみ、プロジェクトのインタラクションを表示できます。 パブリッシュされた出力をコンピューターのローカルに表示すると、インタラクションは表示されません。

プロジェクトの HTML5 出力を Adobe Connect にパブリッシュすることもできます。 詳しくは、プロジェクトを Adobe Connect にパブリッシュ(サブスクリプションおよびアドビソフトウェアアシュアランスのお客様向けアップデートのみで使用可能)を参照してください。

プロジェクトをアプリケーションとしてデバイスにパブリッシュ

注意:

PhoneGap は、現在サポートされていません。

Adobe Captivate 8.0.1 以降のバージョンから、スタンドアロンのアプリケーションパッケージャーのアプリケーションを使用せずにプロジェクトを PhoneGap にパブリッシュできます。デバイス(アプリケーション)メニューアイテムへのパブリッシュは Captivate に統合されます。 下の手順に従ってください。 

  1. パブリッシュメニューからデバイス(アプリケーション)のパブリッシュを選択します。

    注意:レスポンシブプロジェクトもレスポンシブでないプロジェクトも同じ手順に従います。 

    次のようなダイアログボックスが表示されます。 

    デバイス用にパブリッシュ (アプリケーション) ダイアログ
    デバイス用にパブリッシュ (アプリケーション) ダイアログ

  2. PhoneGap のユーザー名とパスワードを使用してログインするか、Adobe ID のログイン資格情報を使用して PhoneGap アカウントにログインします。「登録」をクリックして PhoneGap に登録するか、既存のアカウントがない場合は Adobe ID アカウントを登録します。

  3. 新しいアプリケーションを作成するには、アプリケーション/新規作成を選択します。

    PhoneGap の既存のアプリケーションをアップデートするには、アプリケーション/更新を選択します。

  4. バージョン番号、アプリケーションの名前、アプリケーションのパッケージ名を指定します。 パッケージ名を指定するときは、固有の名前であることを確認してください。指定しない場合は既存のプロジェクトが置き換えられます。

  5. 「詳細」をクリックして、ジオロケーション、ジェスチャー、アクセシビリティなど、アプリケーションのパブリッシュに関する個人的な環境設定を選択します。

  6. 「次へ」をクリックして、アプリケーションに必要な資格情報を入力します。 iOS または Android の横にあるチェックボックスをクリックし、そのどちらかまたは両方を選択して、それぞれのプラットフォームに対応する資格情報を入力します。

    詳細については証明書の作成およびキーの生成を参照してください。

  7. 出力をデバイス用のアプリケーションとしてパブリッシュするには「パブリッシュ」をクリックします。 

    Adobe Captivate はバックエンドで PhoneGap サービスを使用して、アプリケーションを構築します。 スナップショットに示すように、アプリケーションが構築されると、アプリケーションをダウンロードするよう求められます。 「ダウンロード」をクリックしたら、PhoneGap のサイトが表示されます。 

注意:

eラーニングコースを iOS アプリケーションとしてコンパイルするには、Apple Developer として登録し、Apple Developer の年会費を支払う必要があります。

これにより、Apple Developer Web サイトにアクセスし、Apple 署名証明書を入手できます。

証明書の作成およびキーの生成

証明書と認証キーはユーザーがアカウントの安全性を有効にし、不正アクセスを防止するために必須です。 

iOS 用に証明書を作成

  1. Apple Developer Support のサイトおよびアプリケーション Developer 証明書の作成を参照してください。
  2. サポート対象の P12 フォーマットへの証明書の変換およびアップロードについては、PhoneGap 構築サイトの手順を参照してください。

Android 用にキーを生成

  1. PhoneGap 構築のキーを生成およびアップロードするには、PhoneGap 構築サイトの手順を参照してください。

PhoneGap ユーザー ID とパスワードでログインしてから「パブリッシュ」ウィンドウで「次へ」をクリックし、以下に示すように証明書の情報をダイアログに入力します。

注意:

上のスナップショットに示すように、AppleKey のタイトルは PhoneGap 構築にアップロードした証明書の名前を表しています。 PhoneGap 構築 Web サイトにアップロードすると、「タイトル」ドロップダウンに証明書が取り込まれます。同様に、PhoneGap 構築にアップロードしたキーは「タイトル」ドロップダウンに表示されます。Android 用のキーがない場合でも「キーが選択されていません」オプションを選択するとパブリッシュを続行することができます。 

注意:

Adobe Captivate の環境設定を削除した場合、証明書を再び作成する必要があります。

HTML5 出力でサポートされていないオブジェクト

HTML5 出力でサポートされていないプロジェクトのオブジェクトは、HTML5 トラッカーに動的に一覧表示されます。 トラッカーを表示するには、ウィンドウ/HTML5 トラッカーをクリックします。 プロジェクトのこのようなオブジェクトを削除または変更する場合は、トラッカーも更新されます。

次のオブジェクトおよびスライドは、HTML5 出力にパブリッシュされません。

  • テキストおよび SWF アニメーション(最初のフレームのみ表示されます)。
  • マウスクリックアニメーション(デフォルトのクリックエフェクトを 1 つのみサポートしています)。
  • スライドトランジション。
  • SWF ファイルを使用している場合は、スライドの背景。
  • 非表示のオブジェクトに添付された音声です。

            注意:On2VP6 codec のみを使用して作成される FLV ファイルは、HTML5 出力でサポートされます。

  • オブジェクトエフェクト:サポートされていないエフェクトは、オブジェクトのエフェクトリストでアスタリスク(*)でマークされています。アスタリスク 2 つ(**)でマークされたエフェクトは、HTML5 出力では SWF 出力とは異なってレンダリングされます。

iPad/iPhone 用に Web サーバー上で HTML5 出力をホストする

HTML5 出力は Web ブラウザーでのみ iPad/iPhone にアクセスできます。 HTML5 出力フォルダー全体を Web サーバーのルートフォルダーにアップロードして、ユーザーに対して URL を利用可能にします。 ユーザーは iPad/iPhone から URL にアクセスし、Web ブラウザー内で再生するコンテンツを表示できます。

IIS 用の Web サーバーのルートは次のとおりです。C:\Inetpub\wwwroot\

Apache 用の Web サーバーのルートは次のとおりです。<Apache のインストールフォルダー>\htdocs\

iPad/iPhone から HTML5 出力にアクセスする

HTML5 出力は OS のバージョンが 5 以降の iPad でのみサポートされています。

HTML5 出力は、次のブラウザーでのみサポートされます。

  • Internet Explorer 9 以降

  • Safari 5.1 以降

  • Google Chrome 17 以降

上の Web ブラウザーのいずれかに次の URL を入力します。

http://<Web サーバーのホスト名>:<port>/<HTML5 の出力フォルダー>/

例えば、HTML5 出力フォルダーが「MyCpProject」の場合、URL は次のようになります。

http://localhost:80/MyCpProject/

iPad の Adobe Captivate プロジェクトを作成するためのベストプラクティス

 

  • iPad に推奨されるプロジェクトの解像度(プリセット)を使用します。
  • プロジェクトの音声が重ならないようにします。音声を重ねる必要がある場合は、記事 iPad の Adobe Captivate の音声を参照してください。
  • 一般的に、iOS デバイスで実行する動画に対しては、重ね合わせるメディア(特に短いもの)の数をできる限り少なくしてください。
  • ボタンのクリック音は iPad で予期しない動作を引き起こす場合があるため、無効にします。
  • パブリッシュダイアログボックスでスケーラブル HTML コンテンツを無効にします。

 

iPad の Adobe Captivate の音声

プロジェクトを iPad で拡張して使用する場合は、、プロジェクトで音声を重ねて使用しないでください。

音声を重ねて使用する場合は、各種音声の環境設定は次のとおりです。

シナリオ 1:各種音声が同時にトリガーされる場合

この場合の順序は次のとおりです。

オブジェクト音声 > スライド音声 > バックグラウンド音声

オブジェクト音声が最初に再生され、次にスライド、バックグラウンドと続きます。

ただし iOS 6 では、複数の音声クリップを同時に再生できます。

シナリオ 2: 2 つ以上のオブジェクトが音声に割り当てられ、タイムラインに同時に表示される場合

タイムラインの順序が前方のオブジェクトの音声が最初に再生されます。

  • 事例 1:オブジェクト 1 に 0 ~ 4 秒間の音声があり、オブジェクト 2 に 0 ~ 8 秒間の音声がある場合。 オブジェクト 2 のタイムラインの順序の方が前方にあります。

    オブジェクト 2 の音声は 8 秒間再生され、Adobe Captivate はその時点(8 秒目)で他に音声がないかタイムラインで確認します。 この場合、8 秒目に再生される音声はありません。 したがってオブジェクト 1 の音声は再生されません。

  • 事例 2:オブジェクト 1 の順序の方が前方にある場合。

    オブジェクト 1 の音声が 4 秒間再生されます。 4 秒目で確認すると、オブジェクトの音声が 4 秒以上であることが表示されます。 このため、2 番目のオブジェクトの音声は最初から再生されます。 2 番目のオブジェクトの音声が再生されて 8 秒目以降、タイムラインで確認すると、再生される音声がないことが表示されます。

シナリオ 3: 単一スライドのオブジェクト音声、スライド音声、バックグラウンド音声

  • 事例 1:オブジェクト音声が 0 ~ 4 秒に存在し、スライド音声が同時に存在する場合。 (バックグラウンド音声なし)

    オブジェクト音声が最初に 4 秒間再生され、次にスライド音声全部が再生されます。

  • 事例 2:オブジェクト音声が 2 ~ 6 秒存在し、スライド音声が同時に存在する場合。 (バックグラウンド音声なし)

    最初のスライド音声が 2 秒間再生され、次にオブジェクト音声が 4 秒間、次にスライド音声がもう一度再生されます。

  • 事例 3:オブジェクト音声が 0 ~ 4 秒、スライド音声が 0 ~ 8 秒、およびバックグラウンド音声が存在する場合。 (スライドの長さは 14 秒とします)

    オブジェクト音声が 4 秒間再生され、次にスライド音声が 8 秒間、次に残りのスライドの長さのバックグラウンド音声が再生されます。

iPad の Adobe Captivate ビデオ

プロジェクトを iPad で拡張して使用する場合は、ビデオを重ねて使用しないでください。

シナリオ 1: 2 つ以上のビデオが異なる長さの同じスライドにある場合。

ビデオはタイムラインの順序に従って 1 つずつ再生されます。

例えば、タイムライン上に次の長さの 1 つのスライドに 2 つのビデオが存在するとします。

  • 0 ~ 8 秒のスライドビデオ 1 と 4 ~ 10 秒のイベントビデオ 2

スライドビデオが 8 秒間再生され、次にイベントビデオが再生されます。

シナリオ 2: 2 つのビデオが同時に開始される場合

タイムラインの順序が前方のビデオが最初に再生されます。 例えば、ビデオ 1 がスライドの 0 ~ 8 秒に存在し、ビデオ 2 も 同じスライドの 0 ~ 12 秒に存在するとします。

  • ビデオ 2 の順序が前方にある場合は、ビデオ 2 は 12 秒間再生され、ビデオ 1 は再生されません。

  • ビデオ 1 の順序が前方にある場合は、ビデオ 1 は 8 秒間再生され、次に ビデオ 2 がスライドの長さまで再生されます。

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

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

ヘルプをすばやく簡単に入手

新規ユーザーの場合

Adobe MAX 2025

Adobe MAX Japan
クリエイターの祭典

2025 年 2 月 13 日
東京ビッグサイト