WDGT ファイルは拡張子 .wdgt を持ち、次を含むファイルです。

  • 他の SWF ファイルまたはアセットへのリンクを持つ SWF ファイル

  • ウィジェットの HTML バージョン

  • リンクに関する情報を含む description.xml ファイル

HTML ファイルは HTML5 出力に必要です。Adobe Captivate プロジェクトの SWF 出力ファイルのみを生成する場合は、HTML ファイルが WDGT ファイルに含まれている必要はありません。

SWF 出力用限定の WDGT ファイルの作成

SWF 出力用の WDGT ファイルには次が含まれている必要があります。

  • swf(ディレクトリ):ウィジェットやその他のリンクされたリソースの SWF 出力ファイルが含まれます。

  • description.xml(ファイル):Adobe Captivate がユーザーに対してウィジェットをパブリッシュしたり、表示したりするのに使用できるウィジェットの SWF や HTML バージョンの情報が含まれます。

  1. 必要に応じて新規ディレクトリを作成して名前を付けます。例えば、mywidget などです。その後、サブディレクトリ:swf を作成します。

  2. Flash で FLA を SWF ファイルとしてパブリッシュします。SWF ファイルを swf ディレクトリに挿入します。

  3. description.xml ファイルを作成します。メインの SWF ファイル ABC.swf が 2 つのリンクファイル PQR.swf および XYZ.swf を使用する場合、description.xml ファイルは以下の形式になります。

    <?xml version="1.0" encoding="ISO-8859-1" ?> 
    <widget> 
    <Description>This is a ABC widget(static)</Description> 
    <Type>isStatic</Type> 
    <Name>ABC.swf</Name> 
    <linkedfiles>PQR.swf</linkedfiles> 
    <linkedfiles>XYZ.swf</linkedfiles> 
    </widget>
  4. description.xml ファイルをルートディレクトリ、この場合は mywidget ディレクトリに挿入します。

  5. ルートディレクトリ(mywidget ディレクトリ)を圧縮し、ファイルの拡張子を .wdgt に変更します。

  6. .wdgt ファイルを <Adobe Captivate のインストールディレクトリ>/Gallery/Widgets に挿入します。

SWF と HTML5 出力用 WDGT ファイルの作成

SWF と HTML5 出力用 WDGT ファイルには次のファイルとディレクトリが含まれている必要があります。

  • swf(ディレクトリ):ウィジェットやその他のリンクされたリソースの SWF 出力ファイルが含まれます。

  • html5(ディレクトリ):HTML や JavaScript で作成されたウィジェットに関連するアセットやスクリプトが含まれます。以下は、一般的なディレクトリ構造です。

    • images(ディレクトリ)

    • scripts(ディレクトリ)

    • xyz_oam.xml(ファイル)

    html5 ディレクトリには themes などのその他のアセットディレクトリが含まれます。スクリプトやアセットなどのすべてのウィジェット情報を保存するために openAJAX メタデータの xml ファイル(xyz_oam.xml)を作成する必要があります。

  • description.xml(ファイル):Adobe Captivate がユーザーに対してウィジェットをパブリッシュしたり、表示したりするのに使用できるウィジェットの SWF や HTML バージョンの情報が含まれます。

  1. 必要に応じて新規ディレクトリを作成して名前を付けます。例えば、myhtmlwidget などです。その後、次のサブディレクトリを作成します。

    • swf

    • html5

  2. Flash で FLA を SWF ファイルとしてパブリッシュします。SWF ファイルを swf ディレクトリに挿入します。

  3. HTML と JavaScript を使用してウィジェットを作成します。

  4. すべてのアセットとスクリプトを html5 ディレクトリに挿入します。

  5. スクリプトや JavaScript ライブラリなどのすべての関連ウィジェット情報を保存する OpenAjax メタデータの XML ファイルを作成します。

    OpenAjax スキーマの詳細については、この Web サイトを参照してください。

    以下に例を示します。

    <?xml version="1.0" encoding="UTF-8"?> 
    <!-- 
     
            OpenAjax Alliance Widget Specification 
    --> 
    <widget name="Arrow" id="com.adobe.captivate.dev.sample.widgets.arrow" 
            spec="0.1b" jsClass='Arrow' sandbox='true' width='300' height='300' 
            xmlns="http://openajax.org/metadata"> 
     
        <requires> 
            <libraries> 
                <library name="dojo" version="1.7" copy="true" src="js/dojo-release-1.7.1" includeRef="false"> 
                    <preload> 
                        djConfig="{parseOnLoad:true}" 
                    </preload> 
                    <require type="javascript" src="dojo/dojo.js" copy="false" includeRef="true"/> 
                </library> 
                <library name ="jQuery" version="1.6.1" copy="true" src="js/jquery1.7.1/jquery-1.7.1.min.js" type="javascript"/> 
                <library name="jQuery.svg" version="1.4.4" copy="false" src="js/jquery.svg" includeRef="false"> 
                    <require type="javascript" src="jquery.svg.js"/> 
                    <require type="css" src="jquery.svg.css"/> 
                </library> 
            </libraries> 
            <require type="folder" src="assets/svg"/> 
        </requires> 
        <javascript src="js/arrow.js"/> 
        <!-- 
     
            Properties are currently ignored by captivate since we expect the widget to do all the work that has to be done from widget xml 
            or the widget JSON. Still we give it a stab to see if we can get in property replacement 
        --> 
        <properties> 
          <property name="style" datatype="String" default="AeroArrow"/> 
        </properties> 
     
        <content type='fragment'> 
        <![CDATA[ 
            <H1>Hello Widget!!!</H1> 
            <div ID="__WID___ArrowShape"/> 
        ]]> 
        </content> 
    </widget>
  6. メタデータ XML ファイルの jsClass 属性に対して指定した値に対応する JavaScript を開きます。例えば、jsClass の値が Arrow の場合は、scripts ディレクトリからの arrow.js ファイルを開きます。

  7. arrow.js ファイルに getMovieProps() 関数を呼び出す onLoad() 関数が含まれていることを確認してください。以下に例を示します。

    arrow1 = { 
        onLoad: function() 
        { 
            if ( ! this.captivate ){ 
                return; 
            } 
            //Gives access to the the movie handle 
            this.movieProps = this.captivate.CPMovieHandle; 
            //Gives access to the widget params 
            this.movieProps = this.captivate.CPMovieHandle.widgetParams(); 
            //Function to replace all instances 
            //of a Captivate variable by their associated values 
            this.movieProps = this.captivate.CPMovieHandle.replaceVariables(varString); 
            //Access to the event dispatcher where addEventListener and 
            //removeEventListener can be called. Also contains the constants 
            //needed for registering for events such as 
            //<Widget>.captivate. CPMovieHandle.getMovieProps().eventDispatcher 
            //.SLIDE_ENTER_EVENT 
            this.movieProps = this.captivate.CPMovieHandle.getMovieProps().eventDispatcher; 
            //Access to the variables handle 
            this.movieProps = this.captivate.CPMovieHandle.getMovieProps().variablesHandle; 
            //Access to the external resource loader 
            this.movieProps = this.captivate.CPMovieHandle.getMovieProps().ExternalResourceLoader); 
            if ( ! this.movieProps ){ 
                return; 
            } 
            this.varHandle = this.movieProps.variablesHandle; 
            this.eventDisp = this.movieProps.eventDispatcher; 
            // other code 
        }; 
        //To unload your widget 
        onUnload: function() 
        { 
            /*Unload your widget here*/ 
        }; 
    } 
    // Ensure that there is a constructor function 
    // available for the JavaScript class identified by 
    // the 'jsClass' attribute. The constructor has no arguments. 
    arrow = function () 
    { 
        return arrow1; 
    }

    注意:

    • ブラウザーの onload イベントハンドラー(window.addEventListener('load',myCallback,0); など)を直接登録して、ブラウザーの「load」イベントの発生後にウィジェットをドキュメントに追加できる動的ランタイムシナリオなどの多くのシナリオのウィジェットを移植可能にしないでください。

      代わりに、ウィジェットは、ウィジェットが読み込みを完了し、レンダリングの準備が完了したことを通知するこの仕様に定義された onLoad コールバックを使用する必要があります。

    • ブラウザーの onunload イベントハンドラー(window.addEventListener('unload',myCallback,0);) など)を直接登録して、ウィジェットがページがアンロードされるよりかなり以前にドキュメントから削除される場合のある動的ランタイムシナリオなどの多くのシナリオのウィジェットを移植可能にしないでください。

      代わりに、ウィジェットは、ウィジェットがページから削除されることを通知するこの仕様に定義された onLoad コールバックを使用する必要があります。

    getMovieProps() については、メソッドとプロパティ を参照してください。

  8. OpenAjax メタデータの XML ファイルを html5 ディレクトリに挿入します。

  9. description.xml ファイルを作成します。

    description.xml ファイルのスキーマについては、description.xml のスキーマ を参照してください。

  10. description.xml ファイルをルートディレクトリ(この場合は myhtmlwidget ディレクトリ)に挿入します。

  11. ルートディレクトリ(myhtmlwidget ディレクトリ)を圧縮し、ファイルの拡張子を .wdgt に変更します。

  12. .wdgt ファイルを <Adobe Captivate のインストールディレクトリ>/Gallery/Widgets に挿入します。

descripton.xml ファイルのサンプル

メイン SWF ファイルが ABC.swf で、作成した openAJAX XML ファイルが XYZ_oam.xml の場合、description.xml は、

<?xml version="1.0" encoding="ISO-8859-1" ?> 
<!-- widget header 
      spec - compulsorily required. if not present will be treated as spec 1 which doesnt support html5 etc 
      version - widget version number 
      type - widget type 
-->         
<widget spec="2" name="Certificate" description="This is a test for Process Tabs" uri="www.mycomapny.com" version="1.0" type="static"> 
    <!-- Authors header - Can contain multiple authors      
    --> 
    <authors> 
    <!-- Author header - author info 
        about is to show off some skills like i am cool widget developer. contact me for custom widgets 
    --> 
        <author name="Dominique Skyler" email="dominique@mycomapny.com" organization="MyCompany" uri="www.mycompany.com"> 
            <about>Widget Developer</about> 
        </author> 
    </authors> 
    <!-- license info - author info 
    --> 
    <license name="CC" description="Creative Commons License" text="Feel free to use this" uri="http://creativecommons.org/licenses/by/3.0/"/> 
     
    <!-- different output formats supported 
        each format has one directory in the wgt file 
        paths can refer to other formats by using .. notation 
    --> 
    <formats> 
        <!-- for the output format swf 
        --> 
        <format type="swf"> 
            <content source="ABC.swf"/> 
        </format> 
        <!-- for the html5 output --> 
        <format type="html5"> 
            <!-- reference to the oam file --> 
            <content source="XYZ.xml"/>             
        </format> 
    </formats> 
</widget>

description.xml のスキーマ

widget

<widget> は単一のウィジェットを定義し、次の子エレメントが含まれるルートエレメントです。

  • authors

  • license

  • formats

<widget> エレメントには次の属性が含まれます。

属性

説明

種類

必修

spec

XML に基づく仕様を示します。デフォルト値「2」は、XML ファイルにウィジェットの HTML バージョンの情報が含まれていることを示します。

正の数

はい

2

name

ウィジェットの名前。

文字列

いいえ

NA

description

ウィジェットの説明。

文字列

いいえ

NA

uri

例えば、会社の Web サイトなどの必要な Web サイトの URL。

文字列

いいえ

NA

version

ウィジェットのバージョン。

正の数。

いいえ

NA

type

ウィジェットの種類(静的またはインタラクティブ)。

文字列

はい

  • static

  • interactive

authors

<authors> は <widget> エレメントの子エレメントであり、次の属性が含まれます。

属性

説明

種類

必須

デフォルト

name

ウィジェットの開発者または作成者の名前。

文字列

いいえ

NA

電子メール

ウィジェットの開発者または作成者の電子メール ID。

文字列

いいえ

NA

organization

ウィジェットの開発者または作成者の組織の名前。

文字列

いいえ

NA

uri

組織の Web サイトまたは作成者が指定するその他の Web サイトの URL。

文字列

いいえ

NA

注意:

これらすべての属性は、このバージョンの Adobe Captivate では無視されます。

license

<license> は <widget> エレメントの子エレメントであり、次の属性が含まれます。

属性

説明

種類

必須

デフォルト

name

ウィジェットライセンスのショートネーム。

文字列

いいえ

NA

description

ウィジェットライセンスの説明。

文字列

いいえ

NA

text

ウィジェットで表示するライセンスのテキスト。

ウィジェットで使用されるサードパーティのソフトウェアのライセンスを属性に含めることもできます。

文字列

いいえ

NA

uri

ユーザーがライセンスの詳細情報を検索できるウィジェットがある Web サイトへのリンクです。

文字列

いいえ

NA

注意:

これらすべての属性は、このバージョンの Adobe Captivate では無視されます。

formats と format

<formats> には、SWF の名前とウィジェットの HTML バージョンが含まれる子エレメント <format> が含まれます。

<format> エレメントには次の属性が含まれます。

属性

説明

種類

必須

type

ソースの種類(SWF または HTML)。

文字列

はい

  • swf

  • html5

content

<content> は <format> の子エレメントであり、次の属性が含まれます。

属性

説明

種類

必須

source

ウィジェットの SWF 出力または HTML バージョンを参照します。

文字列

はい

SWF ファイルまたはウィジェットの HTML バージョンのメタデータ XML ファイルの名前。

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

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