アプリケーションの起動時間を短縮すると、初めてアプリケーションを使用する際のユーザー体験を改善することができます。起動時間は、サーバーからクライアントに返される SWF ファイルのダウンロード処理の時間によって決まります。SWF ファイルが小さいほど、ダウンロード所要時間が短くなります。さらに、SWF ファイルのサイズを小さくすると、アプリケーションの初期化時間も短くなります。大きい SWF ファイルは、Flash Player での展開に時間がかかります。
mxmlc コンパイラには SWF ファイルサイズを縮小する上で役立ついくつかのオプションが用意されています。
バイトコードオプティマイザでは、バイトコードの統合とピープホールの最適化を使用して、Flex アプリケーションの SWF ファイルのサイズを縮小します。ピープホールを最適化すると、重複した手順をバイトコードから除去できます。
Flex Builder または mxmlc コマンドラインコンパイラを使用している場合は、次の例に示すように、optimize コンパイラオプションを true に設定できます。
mxmlc -optimize=true MyApp.mxml
optimize プロパティのデフォルト値は true です。
デバッグを無効にすると、SWF ファイルのサイズを縮小できます。デバッグを有効にすると、Flex コンパイラには、デバッグ環境だけで使用される SWF ファイルの行番号とその他のナビゲーション情報が含まれます。デバッグを無効にすると、fdb コマンドラインデバッガと Flex Builder に組み込まれたデバッガの機能が縮小されます。
デバッグを無効にするには、debug コンパイラオプションを false に設定します。mxmlc コンパイラのデフォルト値は false です。compc コンパイラのデフォルト値は true です。
デバッグの詳細については、コマンドラインデバッガの使用を参照してください。
strict コンパイラオプションを true に設定すると、コンパイラは、アプリケーションで import ステートメントの定義とパッケージ名が使用されているかどうかを検証します。インポートしたクラスが使用されていない場合は、コンパイラはエラーを報告します。
次に、strict モードでコンパイラエラーがスローされる例をいくつか示します。
package {
import flash.utils.Timer; // Error. This class is not used.
import flash.printing.* // Error. This class is not used.
import mx.controls.Button; // Error. This class is not used.
import mx.core.Application; // No error. This class is used.
public class Foo extends Application {
}
}
strict オプションは、コンパイル時タイプのチェックも行います。これにより、実行時のアプリケーションの最適化がわずかに向上します。
strict コンパイラオプションのデフォルト値は true です。
SWF ファイルサイズを縮小する方法を見つけるには、SWF ファイルにリンクされている ActionScript クラスのリストを確認します。
link-report コンパイラオプションを true に設定して、リンカー依存のレポートを生成することができます。このコンパイラオプションで出力されるレポートには、XML 形式でリンカー依存が表示されます。
次の例では、ProgrammaticSkin スクリプトの依存がリンカーレポートに表示される形式で示されています。
<script name="C:¥flex3sdk¥frameworks¥libs¥framework.swc( mx/skins/ProgrammaticSkin)" mod="1141055632000" size="5807">
<def id="mx.skins:ProgrammaticSkin"/>
<pre id="mx.core:IFlexDisplayObject"/>
<pre id="mx.styles:IStyleable"/>
<pre id="mx.managers:ILayoutClient"/>
<pre id="flash.display:Shape"/>
<dep id="String"/>
<dep id="flash.geom:Matrix"/>
<dep id="mx.core:mx_internal"/>
<dep id="uint"/>
<dep id="mx.core:UIComponent"/>
<dep id="int"/>
<dep id="Math"/>
<dep id="Object"/>
<dep id="Array"/>
<dep id="mx.core:IStyleClient"/>
<dep id="Boolean"/>
<dep id="Number"/>
<dep id="flash.display:Graphics"/>
</script>
次の表で、このファイルで使用されるタグについて説明します。
|
タグ |
説明 |
|---|---|
| <script> |
アプリケーションの SWF ファイル作成に使用されるコンパイル単位名を示します。コンパイル単位はクラス、関数、名前空間などの一般定義を 1 つ以上含む必要があります。 name 属性にはスクリプトの格納元が表示されます。ソースファイルまたは SWC ファイル(frameworks.swc など)のいずれかで示されます。 コマンドラインで keep-generated=true と設定すると、生成されたフォルダのすべてのクラスが、このファイルのスクリプトとしてリストされます。 size 属性にはクラスのサイズがバイト単位で示されます。 mod 属性は、スクリプトが作成されたときのタイムスタンプを示します。 |
| <def> |
定義の名前を示します。スクリプト同様、定義にはクラス、関数、または名前空間を使用できます。 |
| <pre> |
現在の定義をリンクする前に SWF ファイルにリンクする必要のある定義を示します。このタグは前提条件を意味します。 クラス定義の場合、このタグは、直接的な親クラス(flash.events:Event など)、およびそのクラスにつき実装されているすべてのインターフェイス(mx.core:IFlexDisplayObject、mx.managers:ILayoutClient など)を示します。 |
| <dep> |
この定義が依存しているその他の定義を示します(String、_ScrollBarStyle、mx.core:IChildList など)。これは、現在のスクリプトが必要とする定義への参照です。 他の定義に依存していないスクリプト定義も存在するので、<script> タグに <dep> 子タグがないこともあります。 |
| <ext> |
リンクされなかったアセットに対する依存を示します。external-library-path、externs、または load-externs コンパイラオプションを使用してアセットを SWF ファイルに追加すると、これらの依存関係がリンクレポートに表示されます。 |
アプリケーション定義の前提条件と依存関係のリストを確認できます。確認するには、アプリケーションのルート MXML ファイルをファイル名(MyApp.mxml など)で検索します。誤ってリンクしているクラスがあることに気付く場合があります。コードを記述するときには、クラスを参照するのが一般的で、アプリケーションに実際にそのクラスを含める必要があるわけではありません。参照を設定すると、参照先クラスにリンクが設定されますが、それだけでなく、参照先クラスが依存するすべてのクラスにもリンクが設定されます。
リンカーレポートを確認すると、必要のないクラスへのリンクが見つかることがあります。不要なクラスを見つけた場合は、そのクラスへのリンクの原因となっているリンカーの依存関係を特定し、コードを記述し直してこの依存関係を排除します。
不要な参照を避ける一般的なやり方として、使用しないクラスは初期化せずに、getQualifiedClassName() メソッドで型チェックを実行するという方法があります。
次の例では、クラスが Button コントロールであるかどうかをチェックします。この例では、子が Button コントロールでなく、アプリケーション全体に Button コントロールがなくても、Button を強制的に SWF ファイルに含めます。
<?xml version="1.0"?>
<!-- optimize/UnusedClasses.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="checkChildType()">
<mx:Script><![CDATA[
import mx.controls.Button;
public function checkChildType():void {
var child:DisplayObject = getChildAt(0);
var childIsButton:Boolean = child is mx.controls.Button;
trace("child is mx.controls.Button: " + childIsButton); // False.
}
]]></mx:Script>
<!-- This control is here so that the getChildAt() method succeeds. -->
<mx:DataGrid/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。
getQualifiedClassName() メソッドを使用して、前の例と同じタスクを実行できます。このメソッドは、クラスを SWF にリンクしないで、クラスの名前と比較できる文字列を返します。
次の例では、Button コントロールにリンカー依存が生成されません。
<?xml version="1.0"?>
<!-- optimize/GetQualifiedClassNameExample.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="checkChildType()">
<mx:Script><![CDATA[
public function checkChildType():void {
var child:DisplayObject = getChildAt(0);
var childClassName:String = getQualifiedClassName(child);
var childIsButton:Boolean = childClassName == "mx.controls::Button"
trace("child class name = Button " + childIsButton);
}
]]></mx:Script>
<!-- This control is here so that the getChildAt() method succeeds. -->
<mx:DataGrid/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。
Flex アプリケーションで使用される外部化の方法は各種あります。例えば、次のような方法があります。
この節では、実行時にアセットをロードする方法を説明します。モジュールと実行時スタイルシートの詳細については、Adobe Flex 3 開発ガイドを参照してください。RSL については、RSL を使用した SWF ファイルサイズの削減を参照してください。
SWF ファイルのサイズを小さく抑える 1 つの方法として、アセットを外部化する方法があります。この方法では、アセットをコンパイル時に埋め込むのではなく、実行時にロードします。この処理は、イメージ、SWF ファイル、サウンドファイルなどのアセットに使用できます。
イメージを埋め込んだ場合、埋め込まれたイメージは Flex SWF ファイルの一部となるので、ロードは直接的に行われます。ただし、アプリケーションのサイズが増えるので、アプリケーションの初期化プロセスは遅くなります。また、埋め込まれたアセットの場合、アセットに変更を加えるたびにアプリケーションを再コンパイルする必要があります。
次の例では、コンパイル時に shapes.swf ファイルを Flex アプリケーションに埋め込みます。
<?xml version="1.0"?>
<!-- optimize/EmbedAtCompileTime.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Image source="@Embed(source='../assets/butterfly.gif')"/>
</mx:Application>
次の例では、実行時に shapes.swf ファイルを Flex アプリケーションにロードします。
<?xml version="1.0"?>
<!-- optimize/EmbedAtRunTime.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Image source="../assets/butterfly.gif"/>
</mx:Application>
サポートされているイメージタイプで、実行時にロードできない唯一のタイプは SVG です。Flash Player および AIR では、SVG タイプのファイルのコンパイル時にトランスコードする必要があります。Flash Player および AIR は、SVG タイプのファイルを実行時にトランスコードできません。
ロード対象の SWF ファイルとは異なるドメインから SWF ファイルをロードする場合は、crossdomain.xml ファイルまたは他のメカニズムを使用して、適切な許可を有効にする必要があります。crossdomain.xml ファイルの使用の詳細については、クロスドメインポリシーファイルの使用を参照してください。
アセットを外部化して SWF ファイルを小さくする代わりに、アセットを埋め込むと SWF ファイルのサイズが大きくなります。イメージ、サウンド、SWF ファイルなどのアセットを埋め込むことで、ネットワーク帯域幅と接続を削減できます。SWF ファイルのサイズは大きくなりますが、アプリケーションによるサーバーへのネットワーク接続回数を減らすことができます。
アセットのロードについては、『Adobe Flex 3 開発ガイド』のアセットの埋め込みを参照してください。
埋め込みフォントのフェイスを構成するシンボルの範囲を指定することにより、埋め込みフォントのサイズを小さくできます。フォント内のすべての文字を記述する必要があります。これらの文字の一部を削除すると、各埋め込みフォントに対して必要な記述情報全体のサイズが小さくなります。
文字の範囲は、flex-config.xml ファイル、または各 MXML ファイルの font-face 宣言で設定できます。文字の Unicode 値を使用して、個別の文字または文字範囲を指定します。1 つのフォント宣言に対して複数の範囲を設定できます。
CSS では、unicodeRange プロパティを使用して Unicode 範囲を設定できます。次に例を示します。
@font-face {
src:url("../assets/MyriadWebPro.ttf");
fontFamily: myFontFamily;
unicodeRange:
U+0041-U+005A, /* Upper-Case [A..Z] */
U+0061-U+007A, /* Lower-Case a-z */
U+0030-U+0039, /* Numbers [0..9] */
U+002E-U+002E; /* Period [.] */
}
flex-config.xml ファイルでは、<language-range> ブロックを使用して Unicode 範囲を設定できます。次に例を示します。
<language-range>
<lang>Latin I</lang>
<range>U+0020,U+00A1-U+00FF,U+2000-U+206F,U+20A0-U+20CF,U+2100-U+2183</range>
</language-range>
詳細については、『Adobe Flex 3 開発ガイド』のフォントの使用を参照してください。
このページに新しいコメントが追加された場合に、電子メールでの通知を希望する。 | コメントレポート