パフォーマンスの最適化
Flex SDKは単一のフレームワークでモバイルとデスクトップ両方のユースケースに対応しているので、モバイルアプリケーションを開発するときにFlexの機能をすべて使用できます。しかし、モバイルデバイスにはパフォーマンスの制約があるので、モバイル向けのFlexアプリケーションを開発する際に注意しなければならない機能や、まったく使用しないほうがよい機能があります。ここで、覚えておくと便利なベストプラクティスを紹介しましょう。
- アイテムレンダラーを作成する場合は、MXMLではなくActionScriptを使用します。スクロールリストはパフォーマンスに大きく左右されるので、できる限り効率的なアイテムレンダラーを作成することが重要です。モバイルプロジェクト向けにアイテムレンダラーを作成しやすくするため、FlexではLabelItemRendererクラスとIconItemRendererクラスを導入しています。これらのアイテムレンダラーはActionScriptで作成し、IconItemRendererは1つか2つのテキストアイテムの他、左側にオプションのアイコンまたは画像、右側にオプションの装飾アイテムを表示するように構成できます。この方法がニーズに合わない場合は、代わりにこれらのクラスをサブクラス化して、ActionScriptでコントロールを追加したり、レイアウトしたりできます。
- 可能であれば、コンポーネントスキンには、MXMLとランタイムMXMLグラフィックスではなく、ActionScriptとコンパイルされたFXGグラフィックスまたはビットマップを使用してください。アイテムレンダラーと同様、最善の方法はコンポーネントスキンを軽量化することです。Flexのモバイルテーマで提供されているスキンはすべて、ActionScriptで直接作成されたもので、サブクラス化してFXGグラフィックスの置き換えやレイアウトの変更に使用することもできます。といっても、MXMLスキンが抱えるパフォーマンスの課題は、アイテムレンダラーの場合ほど深刻ではないので、アプリケーションの様々な部分でMXMLスキンを多少使用しても、パフォーマンスに大きな影響を与えることはありません。
- チャートはモバイルプロジェクトでも使用できますが、その他のMXコンポーネントはサポートされていません。モバイルプロジェクトでMXコンポーネントを使うことはお勧めしません。代わりにSparkコンポーネントを使用してください。ただし、チャートコンポーネントだけは例外です。このコンポーネントはモバイルプロジェクトでも使用できますが、一度にたくさんのデータを表示したりアニメーション化したりしないように注意してください。
- 通常、テキストには、RichTextおよびRichTextEditableではなく、SparkのLabel、TextInput、TextAreaを使用します。ほとんどのUIテキストには、パフォーマンスを最大化するためにTextFieldベースのテキストを使用することをお勧めします。Flex SDKのモバイルスキンおよびアイテムレンダラーはこのガイドラインに従っています。リッチコンテンツの表示が必要なケースでは、TLFベースのRichTextを使用できますが、モバイルプロジェクトで使用するUIエレメントに使用することは推奨しません。
複数のピクセル密度へのモバイルアプリケーションの適合
モバイルデバイスは、画面の小さなスマートフォンから画面の大きなタブレットまで様々なフォームファクターで提供されます。画面のサイズと縦横比の単純な変動は、Flexで提供されている標準ダイナミックレイアウトコンポーネントを使って簡単に処理できます。しかし、ピクセル密度、つまり画面1インチあたりのピクセル数もデバイスごとに異なります。例えば、ほとんどのタブレットと一部のスマートフォンのピクセル密度は160ドット/インチ（DPI）ですが、その他のスマートフォンのピクセル密度は240または320 DPIです。ピクセル密度が異なると、ユーザーインターフェイスに表示される個々のエレメントのサイズが変化します。つまり、その他の条件がすべて同じであれば、あるピクセルサイズのコントロールは、ピクセル密度が高いデバイス上では物理的に小さく表示されます。タッチスクリーン式のインターフェイスではコントロールを指で操作できるように十分に大きくする必要があるので、このことは特に問題になります。
Flex 4.5には、複数の密度に対応したアプリケーションの開発に役立つ新機能がいくつか備わっています。
自動サイズ調整。デベロッパーは、アプリケーションでapplicationDPIプロパティを設定することによってアプリケーションのターゲットDPIを指定できます。この設定が明示的に行われている場合、デベロッパーは、スキンとレイアウトを所定のDPIのデバイス上で実行しているものとして設定する必要があります。実行時に、デバイスのDPIが指定したターゲットDPIとは異なる場合、Flexによってアプリケーション全体のサイズが自動的に調整され、アプリケーションとそのコントロールのおおよその物理的なサイズが維持されます。例えば、アプリケーションのターゲットが160 DPIである場合、240 DPIのデバイス上ではアプリケーションが自動的に1.5xに拡大されます。この機能を使用しない場合は、実行時にカスタムスキンとビューレイアウトを異なるピクセル密度に適切に適合させる必要があります。
自動サイズ変更を使用する場合には、applicationDPIを、サポートする必要がある最低のDPIに設定し、それよりもDPIが高いデバイス上でアプリケーションを拡大できるようにすることを推奨します。これは、ベクトルアートワークを縮小するのではなく拡大する方が、見栄えが良くなり配置が一貫したものになる傾向があるためです。ビットマップの場合は、後述するマルチDPIビットマップサポートを利用する必要があります。
DPI対応モバイルスキン。Flex 4.5に付属のモバイルテーマに含まれている組み込みスキンは、異なるDPIに自動的に適合します。自動サイズ変更を使用している場合、指定したapplicationDPIに合わせて組み込みスキンが自動的に設定され、自動サイズ変更機能によって拡大されます。自動サイズ変更を使用していない場合、スキンはデバイスの実際のランタイムDPIに適合します。組み込みスキンの動作方法を調べることで、独自のカスタムスキンを作成するときに同じパターンに従うことができます。
マルチDPIビットマップ。アプリケーションにビットマップアートワークを使用する場合、サイズ変更による影響を避けるため、異なるDPI用に複数の解像度で各ビットマップを用意する必要があります。そのために、MultiDPIBitmapSourceクラスを利用すると、所定の画像について異なるDPIで使用する異なるビットマップファイルを指定できます。このクラスは、BitmapImageやImageコンポーネントなど、画像を表示するコンポーネントのsourceプロパティとして、またはButtonのiconプロパティとして渡すことができます。モバイルスキンと同様、これらのビットマップはフレームワークによって適切に処理され、自動サイズ変更を使用しているかどうかにかかわらず所定のデバイスのDPIに対して常に適切な解像度のビットマップが表示されるようになります。
DPI別のCSSルール。Flex 4.5はCSSの@media構文をサポートしており、所定のDPIにのみ適用するCSSルールを指定できます。組み込みスキンはこれを利用して、異なるDPIにフォントサイズと余白を適合させます。この構文を使ってプラットフォーム別のCSSルールを指定することもできます。
密度に対応したアプリケーションの作成について詳しくは、[複数の密度に対応したアプリケーションの作成に関するADCの記事へのリンク]を参照してください。
AIRの活用
これまで紹介したモバイル向けのFlexコンポーネントに加え、地理位置情報、加速度計、統合カメラなど、モバイルデバイス上のAIRで利用可能なAPIを直接活用できることも覚えておいてください。こうした機能の中にはFlexコンポーネントとして提供されていないものもありますが、ActionScriptを使うと直接簡単に利用できます。モバイルデバイス上のAIRで提供されているAPIを使用した開発について詳しくは、AIRモバイルドキュメントを参照してください。
