単純なラッパーの作成

自分の SWF ファイル用に独自のラッパーを記述すると、Flex Builder または Apache および IIS 用の Flex モジュールによって生成されたラッパーを使用せずに済みます。独自のラッパーは、単純な HTML または JSP（JavaServer Page）、PHP ページ、ASP（Active Server Page）で作成します。クライアントのブラウザにレンダリングされる HTML を返す任意の言語で記述することもできます。通常は、ラッパーのロジックは各 Web サイトの HTML テンプレートに統合します。

この節では、Web サーバーで Flex アプリケーションを実行するための最も単純なラッパーの記述方法について説明します。これにはディープリンクや高速インストールなどの機能は含まれません。これらの機能はユーザーの操作感を向上させるためのものなので、省略する前に必ず慎重に検討してください。ディープリンクや高速インストールの機能を追加するとラッパーの作成が複雑になることがあるため、これらの機能を追加する方法については後の節で説明します。

基本的なラッパーは次のファイルで構成されます。

HTML ページ クライアントブラウザから要求されるファイルです。通常は、このファイルでは 2 種類のユーザー体験を定義します。1 つは JavaScript が有効になっているユーザー用で、もう 1 つはこれを無効にしているユーザー用です。このページは、個別の JavaScript ファイルも参照します。提供される HTML テンプレートでは、/templates/no-player-detection/index.template.html にこのページの基本のバージョンが含まれています。

JavaScript ファイル JavaScript ファイルは、HTML ページの <script> タグで参照されます。このタグには次のものがあります。

<object> タグ。このタグは、Internet Explorer 用の SWF ファイルを埋め込みます。
<embed> タグ。このタグは、Netscape ベースのブラウザ用の SWF ファイルを埋め込みます。

提供される HTML テンプレートでは、JavaScript ファイルの名前は AC_OETags.js です。この JavaScript ファイルには、基本のラッパーに不要な大量のロジックが含まれているため、基本のラッパーの開発時に独自のロジックを記述した方がよい場合もあります。

クライアントはまず HTML ページを要求します。ユーザーのブラウザが JavaScript を有効にしている場合、HTML ページは次に JavaScript ファイルを参照します。JavaScript ファイルには Flex アプリケーションの SWF ファイルが埋め込まれます。

ユーザーの介入なしに Flex アプリケーションが直ちに応答するように、<script> タグを使用して、<object> および <embed> タグが含まれる JavaScript ファイルをロードします。<object> タグと <embed> タグは、HTML ファイルに直接記述しないでください。埋め込み先のページに直接ロードされるコントロールは、まずアクティブ化してから、Microsoft Internet Explorer 6 以降で実行する必要があります。HTML ページにコントロールを直接ロードした場合、ユーザーがアクティブ化しない限り、コントロールを使用できません。アクティブ化するには、コントロールをクリックするか、フォーカスをコントロールに移動します。この動作は望ましくありません。ユーザーがコントロールを操作するまで待つのではなく、ページのロード完了後すぐに Flex アプリケーションの実行を開始させたいからです。

クライアントがブラウザで JavaScript を無効にしている場合、通常は、Flex アプリケーションを <noscript> タグに直接埋め込みます。JavaScript を有効にしないと理想的なユーザー体験を得られないことを通知する警告を追加することもできます。

次の例で、JavaScript が有効になっているときにクライアントのブラウザが実行する要求の最小数について説明します。

JavaScript Ç™óLå¯Ç…Ç»Ç¡ÇƒÇ¢ÇÈèÍçáÅAÉNÉâÉCÉAÉìÉgÉuÉâÉEÉUÇ™çÏê¨Ç²ÇÈóvãÅ

次の例は、MyApp という名前の Flex アプリケーションを埋め込む場合の HTML ページと JavaScript ファイルの最小要件を示しています。

<!-- index.html -->
<!-- saved from url=(0014)about:internet -->
<html>
    <body>
        <script src="mysource.js"></script>
    </body>
</html>
<!-- mysource.js -->
document.write("<object id='MyApp' classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0' height='100%' width='100%'>");
document.write("<param name='movie' value='MyApp.swf'/>");
document.write("<embed name='MyApp' src='MyApp.swf' pluginspage='http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash' height='100%' width='100%'/>");
document.write("</object>");

ラッパーに対する MOTW（Mark of the Web）の追加は任意です。ただし、MOTW をラッパーに追加しないと、Internet Explorer 内部の所定のセキュリティゾーンでアプリケーションが開かないことがあります。次の例の MOTW は、Internet Explorer にインターネットゾーンでページを強制的に開いています。

<!-- saved from url=(0014)about:internet -->

一般に、ページをローカルでプレビューしている場合は、サーバーにパブリッシュする前に MOTW を追加します。MOTW の詳細については、http://msdn.microsoft.com/workshop/author/dhtml/overview/motw.asp を参照してください。

スクリプトが有効になっていないブラウザをサポートするには、ラッパーに <noscript> ブロックを追加します。このコードブロック内のタグは、通常は、埋め込まれた JavaScript ファイル内の document.write() メソッドの出力を反映しています。次の例では、<noscript> ブロックを追加します。

<!-- index.html -->
<!-- saved from url=(0014)about:internet -->
<html>
    <body>
        <script src="mysource.js"></script>
        <noscript>
            <object id='MyApp' classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000'
                codebase='http://download.macromedia.com
                /pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0'
                height='100%' width='100%'>
                <param name='src' value='MyApp.swf'/>
                <embed name='MultipleButtons' pluginspage='http://
                    www.macromedia.com/shockwave/download/index.cgi
                    ?P1_Prod_Version=ShockwaveFlash' src='MyApp.swf' height='100%'
                    width='100%'>
            </object>
        </noscript>
    </body>
</html>

このページに新しいコメントが追加された場合に、電子メールでの通知を希望する。 | コメントレポート

Adobe Flex 3 ヘルプ

単純なラッパーの作成