Adobe Captivate では、新しい JavaScript インターフェイス機能を使用することにより、強力で軽量なコンテンツを作成できます。 この機能により、SWF と HTML 間で JavaScript アクションを実行するための共通のプラットフォームが提供されます。 また、JavaScript から実際のコンテンツへのアクセスが容易になります。

コンテンツ内の各種変数にアクセスするための小さい JavaScript スニペットを作成できるようになりました。 コンテンツから生成された各種イベントに登録できます。 このような小規模ながらパワフルなタスクをすべて、そのコンテンツが SWF であるか HTML であるかに関係なく、簡単に実行できるようになりました。

一般的な JavaScript インターフェイスは、以下の 2 つの方法で使用できます。

  1. Captivate プロジェクトから JavaScript アクションを実行します。
  2. 実行時にパブリッシュした HTML に JavaScript コードを追加します。
詳細については、「」の節を参照してください。
js interface-01

上の図のように、JavaScript はブラウザーとコンテンツ(SWF/HTML5)間のインターフェイスとして機能します。

cpAPIInterface

このオブジェクトは、完全な JavaScript インターフェイスを保持するメインオブジェクトです。 このオブジェクトには、「JavaScript を実行」アクションで頻繁に必要となる小さいユーティリティ関数が多数含まれています。

cpAPIInterfaceis は、ウィンドウスコープで使用できるオブジェクトです。 インターフェイスオブジェクトにアクセスするときには、window.cpAPIInterface を使用することをお勧めします。

メソッド:

名前

説明

パラメーター

使用法

getVariableValue 指定された変数名の値を返します。 - window.cpAPIInterface.
getVariableValue
("cpQuizInfoStudentID");
setVariableValue 指定された変数名の値を、指定された値に設定します。 variableName:String window.cpAPIInterface.
setVariableValue
("cpQuizInfoStudentID",
"John");
play ムービーを再生します。   window.cpAPIInterface.
play();
pause ムービーを一時停止します。   window.cpAPIInterface.
pause();
stop ムービーを停止します。   window.cpAPIInterface.
stop();
rewind ムービーを巻き戻して再生します。   window.cpAPIInterface.
rewind();
next ムービーの次のスライドをシークします。   window.cpAPIInterface.
next();
previous ムービーの前のスライドをシークします。   window.cpAPIInterface.
previous();
fastForward 呼び出されるたびにムービーを 2 倍速、4 倍速、通常速度の順で早送りします。   window.cpAPIInterface.
fastForward();
getPlaySpeed ムービーの再生速度を 1 秒あたりのフレーム数(fps)に戻します。   window.cpAPIInterface.
getPlaySpeed();
getDurationInFrames ムービー内のフレームの合計数を返します。   window.cpAPIInterface.
getDurationInFrames();
getDurationInSeconds ムービーの合計時間を秒単位で返します。   window.cpAPIInterface.
getDurationInSeconds();
getVolume ムービーのボリュームをパーセンテージで返します。   window.cpAPIInterface.
getVolume();
setVolume ムービーのボリュームを設定します。 volume:Number (range : 0 - 1) window.cpAPIInterface.
setVolume(0.7);
navigateToTime ムービー内の特定の時間(ミリ秒)をシークします。 timeInMilliseconds:Number window.cpAPIInterface.
navigateToTime(3000);
canNavigateToTime ムービー内の特定の時間をシークできるかどうかを示すブール値を返します。 timeInMilliseconds:Number window.cpAPIInterface.
canNavigateToTime(3000);
getCurrentFrame ムービーの現在のフレームを返します。   window.cpAPIInterface.
getCurrentFrame();
getCurrentSlideIndex ムービーの現在のスライドインデックスを返します。   window.cpAPIInterface.
getCurrentSlideIndex();
getEventEmitter cpAPIEventEmitter オブジェクトのハンドルを返します。   window.cpAPIInterface.
getEventEmitter();

cpAPIEventEmitter

このオブジェクトは、他のイベントマネージャーと同様です。 コンテンツ内で生成される各種イベントに登録または登録解除するためのメカニズムを提供します。

cpAPIInterfaceis は、ウィンドウスコープで使用できるオブジェクトです。 インターフェイスオブジェクトにアクセスするときには、window.cpAPIEventEmitter を使用することをお勧めします。

メソッド:

名前 説明 パラメーター 使用法
add
EventListener
イベントリスナー機能を特定のイベントに追加します。
  • eventName:このページに
    リストされるイベント名の 1 つ。
  • eventListenerFunction:
    任意の JavaScript 関数。
  • variableName: 
    1. オプション。
    2. 値の変更を通知する
      必要のある Captivate 変数名の 1 つ。

    3. CPAPI_
      VARIABLEVALUECHANGED
      イベントとともに使用する必要があります。
  • window.
    cpAPIEventEmitter.
    addEventListener("CPAPI_
    MOVIESTART
    ",
    function(){alert
    ("Movie Started");});
  • window.
    cpAPIEventEmitter.
    addEventListener
    ("CPAPI_VARIABLE
    VALUECHANGED
    ",
    function(){alert("Variable
    Value Changed");},
    "cpQuizInfoStudentID");
remove
EventListener
特定のイベントのイベントリスナー機能を削除します。
  • eventName:
    このページにリストされる
    イベント名の 1 つ。
  • eventListenerFunction:任意の
    JavaScript 関数。
  • variableName: 
    • オプション。
    • 値の変更を通知する
      必要のある Captivate 変数名の 1 つ。
    • CPAPI_
      VARIABLEVALUECHANGED
      イベントとともに使用する必要があります。
  • window.
    cpAPIEventEmitter.
    removeEventListener
    ("CPAPI_MOVIESTART",
    function()
    {alert("Movie Started");});
  • window.
    cpAPIEventEmitter.
    removeEventListener
    ("CPAPI_VARIABLE
    VALUECHANGED
    ",
    function(){alert
    ("Variable Value Changed");},
    "cpQuizInfoStudentID");

イベントのリスト:

名前 説明 イベントデータ 一覧

CPAPI_SLIDEENTER

ムービーが新しいスライドを開始したことを通知します。

slideNumber=NUMBER;

frameNumber=NUMBER;

 lcpversion=STRING;

 

CPAPI_SLIDEEXIT

ムービーのスライドが終了することを通知します。

slideNumber=NUMBER;

frameNumber=NUMBER;

lcpversion=STRING;

percentageSlideSeen=
NUMBER;

 
CPAPI_
STARTPLAYBARSCRUBBING
ユーザーが再生バーを使用してムービーのシークを開始したことを通知します。    
CPAPI_
ENDPLAYBARSCRUBBING
ユーザーが再生バーを使用してムービーのシークを停止したことを通知します。    
CPAPI_
INTERACTIVEITEMSUBMIT
ユーザーがインタラクティブ項目を使用してインタラクションを実行したことを通知します。 frameNumber=NUMBER;
includedInQuiz=BOOLEAN;
issuccess=BOOLEAN;
itemname=STRING;
objecttype=NUMBER;
questioneventdata=
[object Object];
slideNumber=NUMBER;
 
CPAPI_MOVIEPAUSE ムービーが一時停止されたことを通知します。    
CPAPI_MOVIERESUME ムービーが一時停止状態から再開されたことを通知します。    
CPAPI_MOVIESTART ムービーが開始されたことを通知します。    
CPAPI_MOVIESTOP ムービーが停止されたことを通知します。    
CPAPI_QUESTIONSKIP ユーザーが質問スライドをスキップしたことを通知します。 correctAnswer=STRING;
infiniteAttempts=BOOLEAN;
interactionID=NUMBER;
objectiveID=STRING;
questionAnswered=BOOLEAN;
questionAnsweredCorrectly
=BOOLEAN;
questionAttempts=NUMBER;
questionMaxAttempts=NUMBER;
questionMaxScore=NUMBER;
questionNumber=NUMBER;
questionScore=NUMBER;
questionScoringType=
[object Object],{Name:STRING};
questionType=STRING;
quizName=STRING;
reportAnswers=BOOLEAN;
selectedAnswer=STRING;
slideNumber=NUMBER;

interactionType -

  • choice
  • true-false
  • fill-in
  • long-fill-in
  • hotspot
  • sequencing
  • matching
  • likert

questionType -

  • choice
  • true-false
  • fill-in
  • long-fill-in
  • hot-spot
  • sequencing
  • matching
  • likert

questionScoringType
["Name"]
 -

  • PretestQuestion
  • GradedQuestion
  • SurveyQuestion
CPAPI_QUESTIONSUBMIT ムービーが質問スライドに回答したことを通知します。 correctAnswer=STRING;
infiniteAttempts=BOOLEAN;
interactionID=NUMBER;
objectiveID=STRING;
questionAnswered=BOOLEAN;
questionAnsweredCorrectly=
BOOLEAN;
questionAttempts=NUMBER;
questionMaxAttempts=NUMBER;
questionMaxScore=NUMBER;
questionNumber=NUMBER;
questionScore=NUMBER;
questionScoringType=[object Object],{Name:STRING};
questionType=STRING;
quizName=STRING;
reportAnswers=BOOLEAN;
selectedAnswer=STRING;
slideNumber=NUMBER;
 
CPAPI_
VARIABLEVALUECHANGED

このイベントに登録するには、variableName パラメーターを追加する必要があります。 登録したら、指定した変数の値に対する変更がすべて通知されます。

captivateVersion=STRING;
varName=STRING;
oldVal=STRING;
newVal=STRING;

 

moduleReadyEvent

Captivate コンテンツはさらに、親ウィンドウオブジェクトで moduleReadyEvent を起動して、コンテンツがロードされたことを通知します。 ユーザーはこのイベントを、JavaScript インターフェイスが使用可能になったことを示す通知として使用できます。 次のスニペットを使用すると、リスナーを moduleReadyEvent に追加できます。

window.addEventListener("moduleReadyEvent", function(evt)
{
	//evt.Data carries the interface object.
	//It is same as window.cpAPIInterface
	var interfaceObj = evt.Data;
	var eventEmitterObj = interfaceObj.getEventEmitter();
});

乱数を生成する

以下のコードは、 0 ~ 1 の間で乱数を生成します。

alert(Math.random());

以下のコードは、1 ~ 10 の間で乱数を生成します。

alert(Math.floor((Math.random()*10)+1));

次のコードで使用されている関数は、関数内で引数として渡された 2 つの整数の間で乱数を生成します。

function getRandomInt(min, max) {
   var jsRandomNumber = Math.floor(Math.random() * (max - min + 1)) + min;
   alert(jsRandomNumber);
}

getRandomInt(10, 300);

位置情報機能を使用する

位置情報機能を使用することで、学習者の地理的位置を基にコース内で特定のイベントをトリガーしたり、学習オブジェクトの非表示・表示を切り替えたりすることができます。

このシナリオは詳細アクションを使用することで実現できますが、JavaScript を使用して位置情報機能のサポートを設定することもできます。

  1. 位置情報種類の変数を作成し、変数に次の値を割り当てます。

    • 緯度
    • 経度
    • 正確度
  2. 2個のオブジェクトを持つプロジェクトを作成します:ss1および ss2

    構成された位置情報の変数に応じて、オブジェクト ss2 を表示させ、オブジェクト ss1 を非表示にします。

    注意:

    任意のオブジェクトを非表示にするには、cp.hide("object_name"); を使用します。

    任意のオブジェクトを表示するには、cp.show("object_name"); を使用します。

  3. 最初のスライドで「アクション」を選択し、「入力時」のドロップダウンリストから「JavaScript の実行」を選択します。スクリプトウィンドウで、次のコードを入力します。

    window.cpAPIInterface.setVariableValue("cpInfoGeoLocation","BLR");
    if (window.cpAPIInterface.getVariableValue("cpInfoGeoLocation")==="BLR")
    {
        cp.hide("ss1"); // hide object ss1
        cp.show("ss2"); // show object ss2
    }
    
  4. プロジェクトをプレビューします。位置情報の変数に基づいてオブジェクトの表示・非表示が切り替わっていることが分かります。

ローカルストレージを使用する

ローカルストレージを使用すると、ブラウザー内でローカルにデータを保存することができます。次の例を参考にしてください。

localStorage.setItem("learnerName","John");

ドット表記を使用することで、

localStorage.learnerName="John";

ローカルストレージでは、ブラウザーを閉じて再び開いた後もデータが保持されます。

Adobe Captivate では、ローカルストレージを使用することで、あるコースから別のコースへ変数を転送することができます。ローカルストレージを実装するには、

  1. 空のプロジェクトで、学習者の名前を格納する learnerName 変数を作成します。

  2. テキスト入力ボックスに変数を割り当てます。ボックスに入力した名前は、新しい変数に割り当てられます。

    learner
  3. テキスト入力ボックスの近くにボタンを作成します。ボタンをクリック時にコードがトリガされるよう、次の JavaScript コードを入力します。

    localStorage.setItem("learnerName", window.cpAPIInterface.getVariableValue("learnerName"));
  4. ブラウザーを用いてプロジェクトをプレビューします。 学習者の名前を入力し、「送信」をクリックします。変数に名前を割り当てると、値は現在のローカルストレージに格納されます。

  5. ブラウザーのデバッガモードを開きます。例えば Chrome では、デバッガモードを開き、「リソース」タブをクリックします。ローカルストレージを展開し、必要なホストを選択します。

    LocalStorage debugger

    ローカルストレージに格納された変数の値を、キーと値のペアとして見ることができます。

    LocalStorage persistence
    1 学習者の名前.
    2 変数名.
    3 変数の値。

セッションストレージを使用する

セッションストレージでは、ページセッションが終わった時点で格納データがクリアされます。ページセッションは、ページをブラウザーで開いている限り持続します。新しいタブやウィンドウでページを開くと、新しいセッションが開始されます。

sessionStorage("learnerName","John");

セッションストレージからデータを取得するには、

var myData = sessionStorage.getItem("learnerName");

セッションストレージからデータを削除するには、

sessionStorage.removeItem("learnerName");

Captivate では、セッションストレージに学習者の名前を格納することができます。次の例を参考にしてください。

sessionStorage.setItem("newLearner", window.cpAPIInterface.getVariableValue("newLearner"));

ブラウザーでプロジェクトをプレビューした後、デバッガコンソールを開きます。sessionStorage では、以下に示すように、学習者の名前を見つけることができます。

sessionStorage
1 変数名.
2 変数の値。

スライドカウンタを増分させる

次のコードでは、カスタム変数「mySlideVisitCounter」の値を取得し、ユーザーがスライドを開始するたびに値を増分し、その値をコンテンツに設定します。

//check if window.cpAPIInterface is available
if(window.cpAPIInterface) 
{
	//check if window.cpAPIEventEmitter is available
	if(window.cpAPIEventEmitter) 
	{
		//add a listener to CPAPI_SLIDEENTER event
		window.cpAPIEventEmitter.addEventListener("CPAPI_SLIDEENTER",function(e)
																	{
																		//get the current value of mySlideVisitCounter from Captivate content	
																		var lSlideVisitCtr = window.cpAPIInterface.getVariableValue("mySlideVisitCounter");	
																		//increment lSlideVisitCtr by 1
																		lSlideVisitCtr = lSlideVisitCtr + 1;
																		//set the value of mySlideVisitCounter in the Captivate content
																		window.cpAPIInterface.setVariableValue("mySlideVisitCounter",lSlideVisitCtr);
																	});
	}
}

上記のコードは次のように使用できます。

 

  1. 「JavaScript を実行」アクション
     
    1. Captivate プロジェクト内で、プロパティインスペクターの「アクション」タブをクリックします。

    2. 「入力時」ドロップダウンで「JavaScript を実行」を選択し、「スクリプトウィンドウ」をクリックします。

    3. JavaScript コードをウィンドウに貼り付けます。

    次のスクリーンショットに示すように、Captivate アクションから JavaScript アクションを実行できます。

    execute-action
  2. パブリッシュされたコンテンツの変更 

    コンテンツをパブリッシュした後、外部から JavaScripti インターフェイスを使用して、コンテンツ内部にアクセスすることもできます。

    パブリッシュされた HTML に次のスニペットを追加します。

    <script>
    var interfaceObj;
    var eventEmitterObj;
    window.addEventListener("moduleReadyEvent", function(evt)
    {
        //evt.Data carries the interface object.
        //It is same as window.cpAPIInterface
        interfaceObj = evt.Data;
        eventEmitterObj = interfaceObj.getEventEmitter();
    });
    //check if window.cpAPIInterface is available
    if(interfaceObj)
    {
        //check if window.cpAPIEventEmitter is available
        if(eventEmitterObj)
        {
            //add a listener to CPAPI_SLIDEENTER event
            eventEmitterObj.addEventListener("CPAPI_SLIDEENTER",function(e)
                                                                {
                                                                    //get the current value of mySlideVisitCounter from Captivate content  
                                                                    var lSlideVisitCtr = interfaceObj.getVariableValue("mySlideVisitCounter");   
                                                                    //increment lSlideVisitCtr by 1
                                                                    lSlideVisitCtr = lSlideVisitCtr + 1;
                                                                    //set the value of mySlideVisitCounter in the Captivate content
                                                                    interfaceObj.setVariableValue("mySlideVisitCounter",lSlideVisitCtr);
                                                                });
        }
    }
    </script>

サンプルプロジェクト

下記のサンプル Captivate プロジェクトを参照用にダウンロードできます。

ダウンロード

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

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