海賊王をめざす男 マツです。こんにちは。

Android がいよいよ人々の手に渡るようになってスマートフォン市場はさらに加速してきましたね。
Flex SDK によるモバイル開発の基礎についてまとめてみました。


Flex SDK によるモバイル開発は、Flex 4 から導入された Spark コンポーネントを使用して行います。
Flex 3 までの Halo コンポーネントは使用しないことを除けば、基本的に PC コンテンツ開発と同じです。

モバイル開発に最適化されたポイント
・テーマは、モバイルデバイスの画面サイズとピクセル密度を考慮して新しくデザイン。
・スキンは、起動時間とメモリ使用量のパフォーマンスを重視して最適化された ActionScript と FXG のみで構成。
・コンポーネントは、まだ一部の Spark コンポーネントしかスキンとスタイルが提供されていないが、順次提供。


コンポーネント

MobileApplication
Flex モバイルアプリケーションのベースとなるクラス。デバイスとの連携機能を持ち、デバイスの向き (縦横) の対応、「戻る」、「検索」といったデバイスキーの取得、中断したアプリの状態の自動保存を行う

ViewNavigator
Flex モバイルアプリのナビゲーション機能を実現するコンポーネント。Flex モバイルアプリは、View のスタックとして構成され、スタックの最上位にある View が表示される。ViewNavigator は、スタックに対して View の push/pop 操作を行い、アプリの表示を変更するという役割を持つ。View が変更されるときは、非表示になった View のインスタンスは消去される。これは、メモリ使用量を押さえるため。データは保存されているので、再び View が表示されるタイミングでインスタンスの生成とデータの設定が行われる

View
ActionBar 以外の領域に表示される全てのコンポーネントを含むコンテナ。Group との違いは、データモデルが統合されていることと、ActionBar にデータをプッシュする機能を持っていること

ActionBar
表示中の View に関する情報を表示するコンポーネントで、タイトル、操作ボタン、View の状況等の表示に使われる
ActionBar は、左から、Navigation content、Title content、Action content と 3 つの領域に分かれていて、View の属性から設定できる。
・navigationContent
・titleContent
・actionContent


スプラッシュ画面

MobileApplication の splashScreenImage 属性で、アプリ起動中に指定の画像を表示します。

<s:MobileApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
					 xmlns:s="library://ns.adobe.com/flex/spark"
					 firstView="views._Main"
					 splashScreenImage="@Embed('assets/splash.png')">


アイテムレンダラー

従来のアイテムレンダラーはパフォーマンスへの影響が大きく、システムリソースの限られたモバイルでは、以下の 2 種類のモバイル用アイテムレンダラーを使用する。

テキストのみなら
MobileItemRenderer

アイコン、テキストフィールド 2 つ、デコレーター
MobileIconItemRenderer

より複雑なアイテムレンダラーが必要な場合は、これら 2 つのクラスのカスタマイズが必要です。テキストは、デバイスフォントを使用します。


Android パーミッションの設定

アプリで、インターネット、GPS、カメラ、ローカルストレージなどを利用する場合は、(ファイル名)-app.xml ファイルにてパーミッションを設定します。

<android>
	<manifestAdditions>
	<![CDATA[
		<manifest android:installLocation="auto">
			<uses-permission android:name="android.permission.INTERNET"/>
			<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
			<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
			<uses-configuration android:reqFiveWayNav="true"/>
			<supports-screens android:normalScreens="true"/>
			<uses-feature android:required="true" android:name="android.hardware.touchscreen.multitouch"/>
			<application android:enabled="true">
				<activity android:excludeFromRecents="false">
					<intent-filter>
						<action android:name="android.intent.action.MAIN"/>
						<category android:name="android.intent.category.LAUNCHER"/>
					</intent-filter>
				</activity>
			</application>
		</manifest>
	]]>
	</manifestAdditions> 
</android>

最適化のコツ

アイテムレンダラー、複雑なレイアウトは、パフォーマンスに大きく影響を与えるので、ActionScript で構築します。
コンテナの多重階層化はさけます。
グラフィックスはグループ化せず、単一のビットマップにします。


Android アプリ開発は今後の携帯市場に大きく関わってくると思います。たのしみですね!


参考
Adobe MAX 2010 - Flex SDK を用いたモバイル開発
http://www.adobe.com/jp/joc/max/articles/deepdive_flexmobile/

HTML5飯