Adobe MAX 2010 期間中には、MAX 初日に公開された Flex 4.5 プレビュー版の情報がいくつかのセッションを通じて紹介された。本記事では、Deep Dive into Mobile Development with the Flex SDK というセッションから Flex SDK のモバイル対応について紹介する。
Flex モバイルの概要
Flex モバイル （Flex Mobile） は、基本的にデスクトップ版 Flex と同じものだ。原則 Flex 4 から導入された Spark コンポーネント限定で Halo コンポーネントは使わないことを除けば、同じフレームワーク、コンパイラー、MXML 言語を使用する。
大きく異なるのは、モバイル向けに最適化された箇所。テーマ、コンポーネント、タッチ対応の 3 点が、専用に用意される機能だ。
モバイルテーマは、モバイルデバイスの画面サイズとピクセル密度を考慮して新しくデザインされた。スキンはアプリの起動時間とメモリ使用量への影響が大きいため、モバイル用スキンはパフォーマンスを重視して最適化され ActionScript と FXG のみで構成される。モバイル用のコンポーネントだけでなく、ほとんどの Spark コンポーネントのスキンとスタイルが提供される予定、だそうだ。
モバイル用のコンポーネントはモバイルデバイス画面とインタラクションパターンを念頭に設計されたものだ。以下の 4 つが中心となる。
- MobileApplication
- View
- ActionBar
- ViewNavigator
タッチ対応は、指による操作とマウス操作の違いにより必要となる。タッチ操作では、hover （カーソルをクリックせずにコンポーネント上に置いた状態） が無い。また、スクロール操作には、スクロールバーの代わりにスワイプ動作が使われる。さらに、押し間違えないようタッチできる領域は広く確保することが要求される。これらの課題に対応するため、Spark コンポーネントにタッチ対応の機能が組み込まれた。新しく interactionMode というスタイルが追加され、touch か mouse を値として指定する。スタイルとして指定するため、設定の単位は、アプリ全体かコンポーネントごとを選択できる。モバイル用のテーマでは、初期値が touch に設定されている。
モバイルアプリをコンパイルするために、airmobile-config.xml という設定ファイルが SDK に追加された。この設定により、プロジェクトにモバイルコンポーネントの追加、mx コンポーネントの削除、モバイルテーマの指定が行われる。設定ファイルを使うという仕様のため、Flex モバイルは AIR アプリ専用となっている。
Flex モバイルアプリのアーキテクチャー
前述のように、MobileApplication、View、ActionBar、ViewNavigator が中心となり、Flex モバイルアプリの構造がつくられる。
Flex モバイルアプリケーションの構造。4 つの基本コンポーネントから構成される
各コンポーネントの役割を簡単に説明すると、
- MobileApplication：
Flex モバイルアプリケーションのベースとなるクラス。デバイスとの連携機能を持ち、デバイスの向き （縦横） の対応、「戻る」、「検索」といったデバイスキーの取得、中断したアプリの状態の自動保存を行う - View：
ActionBar 以外の領域に表示される全てのコンポーネントを含むコンテナ。Group との違いは、データモデルが統合されていることと、ActionBar にデータをプッシュする機能を持っていること - ActionBar：
表示中の View に関する情報を表示するコンポーネントで、タイトル、操作ボタン、View の状況等の表示に使われる
- ViewNavigator：
Flex モバイルアプリのナビゲーション機能を実現するコンポーネント。Flex モバイルアプリは、View のスタックとして構成され、スタックの最上位にある View が表示される。ViewNavigator は、スタックに対して View の push/pop 操作を行い、アプリの表示を変更するという役割を持つ。View が変更されるときは、非表示になった View のインスタンスは消去される。これは、メモリ使用量を押さえるため。データは保存されているので、再び View が表示されるタイミングでインスタンスの生成とデータの設定が行われる
ActionBar は 3 つの領域に分かれていて、左から、Navigation content、Title content、Action content の順に並んでいる。
これら 3 つの領域は、View の以下の属性から設定される。
- navigationContent
- titleContent
- actionContent
Title Content には、View コンポーネントの title 属性の値から設定することもできる。
モバイルアプリ構築のヒント
このセッションでは、モバイルアプリ構築の際に役立つヒントも紹介された。
スプラッシュ画面の表示
アプリ起動時にブランク画面が表示されユーザーを待たせることの無いよう、起動中に画像を表示する機能を MobileApplication は持っている。splashScreeImage 属性に画像を指定することで、この機能を利用できる。
アイテムレンダラー
アイテムレンダラーはパフォーマンスへの影響が大きい。特にモバイルではシステムリソースが限られるため、以下の 2 種類のモバイル用アイテムレンダラーが提供されている
- MobileItemRenderer - テキストのみ
- MobileIconItemRenderer - アイコン、テキストフィールド 2 つ、デコレーター
より複雑なアイテムレンダラーが必要な場合は、まずこれら 2 つのクラスのカスタマイズを検討することが推奨された。
Android パーミッションの設定
インターネット、GPS、カメラ、ローカルストレージなどの利用は、それぞれパーミッションを設定ファイルに記述する必要があるので、忘れないように。
異なる画面サイズ
デバイスにより画面サイズが異なるため、それぞれの画面上での表示テストを行い、アイコンやボタンが一部隠れている、といったことの無いようにする。
テキストの使用
パフォーマンスを優先する場合、基本的にはデバイスフォントを使用し、TLF を使用する場合は、表示用のテキストのみにする。フォントを埋め込むことも可能だが、管理に手間がかかるのと、日本語の場合はアプリの大きさにも影響するので避けた方が良い。
最適化
その他の最適化のヒントは以下のものがあげられた。
- パフォーマンスが問題になりそうな箇所は ActionScript で構築する
- アイテムレンダラー
- 複雑なレイアウト
- ディスプレイリストの階層をできるだけ浅くする
- コンテナの階層化を避ける
- グラフィックスはグループ化するより単一のビットマップに
- UI はシンプルに
- パフォーマンスの向上
- ユーザーエクスペリエンスの向上
セッションの最後には、Tour de Mobile Flex の利用も推薦された。Android Market から入手できる。
