モバイルアプリケーションとスプラッシュ画面の定義

モバイルアプリケーションコンテナの作成
モバイルアプリケーションコンテナと Spark の Application コンテナの相違
アプリケーションレベルのイベントの処理
アプリケーションへのスプラッシュ画面の追加

モバイルアプリケーションコンテナの作成

モバイルアプリケーションの最初のタグは、通常は次のいずれかです。

<s:ViewNavigatorApplication> タグは、セクションが 1 つのみのモバイルアプリケーションを定義します。
<s:TabbedViewNavigatorApplication> タグは、複数のセクションがあるモバイルアプリケーションを定義します。

タブレット用のアプリケーションを開発する際は、電話機の場合ほどスクリーンサイズの制限は重要ではありません。したがって、タブレットの場合は、アプリケーションを小さなビューで構造化する必要がありません。代わりに、標準の Spark の Application コンテナを使用し、サポートされているモバイルコンポーネントとスキンを使用して、アプリケーションを作成できます。

注意：どのようなモバイルアプリケーションを作成する際にも、電話機の場合でも、Spark の Application コンテナを使用できます。ただし、Spark の Application コンテナでは、ビューのナビゲーション、データのパーシスタンス、デバイスの戻るボタンとメニューボタンはサポートされません。詳しくは、モバイルアプリケーションコンテナと Spark の Application コンテナの相違および About the Application containerを参照してください。

モバイルアプリケーションのコンテナには、次のデフォルトの特性があります。

特性	Spark の ViewNavigatorApplication コンテナと TabbedViewNavigatorApplication コンテナ
デフォルトサイズ	利用可能なスクリーン領域をすべて使用する 100 ％の高さと 100 ％の幅。
子レイアウト	アプリケーションのビューを構成する個々の View コンテナごとに定義されます。
デフォルトのパディング	0 ピクセル。
スクロールバー	なし。アプリケーションコンテナのスキンにスクロールバーを追加すると、ユーザーがアプリケーション全体をスクロールできるようになります。このスクロールは、アプリケーションの ActionBar 領域とタブバー領域も対象となります。通常、ビューのこれらの領域をスクロールする必要はありません。そのため、スクロールバーは、アプリケーションコンテナのスキンではなく、アプリケーションの個々の View コンテナに追加します。

モバイルアプリケーションコンテナと Spark の Application コンテナの相違

Spark のモバイルアプリケーションコンテナには、Spark の Application コンテナと同じ機能が多数用意されています。例えば、モバイルアプリケーションコンテナにスタイルを適用する方法は、Spark の Application コンテナに適用する方法と同じです。

Spark のモバイルアプリケーションコンテナには、Spark の Application コンテナとは異なるいくつかの特性があります。

パーシスタンスのサポート

データ記憶域をサポートし、ディスクとの間でデータの書き込みと読み込みを行います。パーシスタンスによって、ユーザーはモバイルアプリケーションを中断できます。例えば、電話の呼び出しに応答し、通話が終了したときにアプリケーションの状態を復元できます。
ビューナビゲーションのサポート

ViewNavigatorApplication コンテナは、複数のビュー間のナビゲーションを制御する単一の ViewNavigator コンテナを自動的に作成します。

TabbedViewNavigatorApplication コンテナは、複数のセクション間のナビゲーションを制御する単一の TabbedViewNavigator コンテナを自動的に作成します。
デバイスの戻るボタンとメニューボタンのサポート

ユーザーが戻るボタンを押すと、スタックにある前のビューが表示されます。メニューボタンを押すと、現在のビューに ViewMenu コンテナが定義されている場合は、そのコンテナが表示されます。

Spark の Application コンテナについて詳しくは、About the Application containerを参照してください。

アプリケーションレベルのイベントの処理

NativeApplication クラスは AIR アプリケーションを表します。このクラスは、アプリケーションの情報やアプリケーション全体の機能を提供し、アプリケーションレベルのイベントを送出します。ユーザーのモバイルアプリケーションに相当する NativeApplication クラスのインスタンスには、NativeApplication.nativeApplication という静的なプロパティを使用してアクセスできます。

例えば、NativeApplication クラスは、ユーザーのモバイルアプリケーションで処理できる invoke および exiting というイベントを定義します。次の例は、exiting イベントのイベントハンドラーを定義する NativeApplication クラスを示しています。

<?xml version="1.0" encoding="utf-8"?>
<!-- containers\mobile\SparkNativeApplicationEvent.mxml -->
<s:ViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark"
    firstView="views.EmployeeMainView"
    creationComplete="creationCompleteHandler(event);">
    
    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;

            protected function creationCompleteHandler(event:FlexEvent):void {
                // Reference NativeApplication to assign the event handler.
                NativeApplication.nativeApplication.addEventListener(Event.EXITING, myExiting);
            }
            
            protected function myExiting(event:Event):void {
                // Handle exiting event.
            }
        ]]>
    </fx:Script>
    
</s:ViewNavigatorApplication>

ViewNavigator には、ViewNavigatorApplication.navigator プロパティを使用してアクセスすることに注意してください。

アプリケーションへのスプラッシュ画面の追加

Spark の Application コンテナは、ViewNavigatorApplication コンテナと TabbedViewNavigatorApplication コンテナの基本クラスです。Spark テーマで使用する場合、Spark の Application コンテナでは、アプリケーションの SWF ファイルのダウンロードおよび初期化の進捗が表示されるアプリケーションプリローダーがサポートされます。

Mobile テーマで使用する場合は、代わりにスプラッシュ画面を表示できます。スプラッシュ画面は、アプリケーションの起動時に表示されます。

注意：デスクトップアプリケーションでスプラッシュ画面を使用するには、Application.preloader プロパティを spark.preloaders.SplashScreen に設定します。また、アプリケーションのライブラリパスに frameworks¥libs¥mobile¥mobilecomponents.swc を追加します。

ブロガーの Joseph Labrecque 氏が、AIR for Android Splash Screen with Flex というブログを公開しています。

ブロガーの Brent Arnold 氏が、Android アプリケーションへのスプラッシュ画面の追加に関するビデオを公開しています。

以下をお勧めします。		共有したいチュートリアルはありますか？

	Customizing Flex applicationDPI for a multiple screen size application Renaun Erickson スマートフォンとタブレットの両方で動作する Flex モバイルアプリケーションを作成するには、スクリーンサイズ、スクリーンの DPI（dots per inch）およびスクリーン解像度を把握しておく必要があります。

画像ファイルからのスプラッシュ画面の追加

スプラッシュ画面を画像ファイルから直接読み込むことができます。スプラッシュ画面を設定するには、アプリケーションクラスの splashScreenImage、splashScreenScaleMode および splashScreenMinimumDisplayTime プロパティを使用します。

例えば、次の例では、レターボックス形式を使用して JPG ファイルからスプラッシュ画面を読み込みます。

<?xml version="1.0" encoding="utf-8"?>
<!-- containers\mobile\SparkMobileSplashScreen.mxml -->
<s:ViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark"
    firstView="views.EmployeeMainView"
    splashScreenImage="@Embed('assets/logo.jpg')"
    splashScreenScaleMode="letterbox">
    
</s:ViewNavigatorApplication>

カスタムコンポーネントからのスプラッシュ画面の追加

前の節の例では、JPG ファイルを使用してスプラッシュ画面を定義しました。このメカニズムの欠点は、アプリケーションが実行されるモバイルデバイスの性能に関係なく、同じ画像が使用されてしまうことです。

モバイルデバイスのスクリーン解像度とサイズは様々です。スプラッシュ画面に 1 つの画像を使用するのではなく、その代わりにカスタムコンポーネントを定義できます。そのコンポーネントでモバイルデバイスの性能を判別し、適切な画像をスプラッシュ画面に使用します。

カスタムコンポーネントを定義するには、SplashScreenImage クラスを使用します。次に例を示します。

<?xml version="1.0" encoding="utf-8"?>
<!-- containers\mobile\myComponents\MySplashScreen.mxml -->
<s:SplashScreenImage xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark">
 
    <!-- Default splashscreen image. -->
    <s:SplashScreenImageSource 
        source="@Embed('../assets/logoDefault.jpg')"/>
        
    <s:SplashScreenImageSource 
        source="@Embed('../assets/logo240Portrait.jpg')"
        dpi="240" 
        aspectRatio="portrait"/>
        
    <s:SplashScreenImageSource 
        source="@Embed('../assets/logo240Landscape.jpg')"
        dpi="240" 
        aspectRatio="landscape"/>
    
    <s:SplashScreenImageSource 
        source="@Embed('../assets/logo160.jpg')"
        dpi="160" 
        aspectRatio="portrait" 
        minResolution="960"/>
</s:SplashScreenImage>

コンポーネントの定義内で、SplashScreenImageSource クラスを使用して、スプラッシュ画面の各画像を定義します。SplashScreenImageSource.source プロパティで画像ファイルを指定します。SplashScreenImageSource の dpi、aspectRatio および minResolution プロパティで、画像の表示に必要なモバイルデバイスの性能を定義します。

例えば、最初の SplashScreenImageSource 定義では、画像の source プロパティのみを指定しています。dpi、aspectRatio および minResolution プロパティは設定されていないので、この画像はすべてのデバイスで使用できます。したがって、ここでは、デバイスの機能と一致する他の画像がない場合に表示されるデフォルトの画像を定義しています。

2 つ目と 3 つ目の SplashScreenImageSource 定義では、縦向きモードまたは横向きモードで 240 DPI のデバイス用の画像を指定しています。

最後の SplashScreenImageSource 定義では、縦向きモードで 160 DPI、かつ最低解像度が 960 ピクセルのデバイス用の画像を指定しています。minResolution プロパティの値は、Stage.stageWidth と Stage.stageHeight プロパティの大きい方の値と比較されます。2 つの値のうち大きい方の値が、minResolution プロパティ以上である必要があります。

次のモバイルアプリケーションで、このコンポーネントを使用します。

<?xml version="1.0" encoding="utf-8"?>
<!-- containers\mobile\SparkMobileSplashComp.mxml -->
<s:ViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark"
    firstView="views.EmployeeMainView"
    splashScreenImage="myComponents.MySplashScreen">
</s:ViewNavigatorApplication>

SplashScreenImage クラスでは、デバイスの性能に最も一致する画像が自動的に判別されます。この一致確認は、各 SplashScreenImageSource 定義の dpi、aspectRatio および minResolution プロパティに基づいて行われます。

最も一致する対象を判別する手順は、次のとおりです。

モバイルデバイスの設定と一致するすべての SplashScreenImageSource 定義を判別します。次の場合に一致したと見なされます。
1. SplashScreenImageSource 定義で、その設定が明示的に定義されていない場合。例えば、dpi プロパティの設定がない場合は、すべてのデバイスの DPI. と一致します。
2. dpi または aspectRatio プロパティについては、プロパティとモバイルデバイスの対応する設定が完全に一致する必要があります。
3. minResolution プロパティについては、Stage.stageWidth と Stage.stageHeight プロパティの大きい方が minResolution 以上である場合に、プロパティはデバイス上の設定と一致します。
2 つ以上の SplashScreenImageSource 定義がデバイスと一致する場合は、
1. 明示された設定が最多数のものが選択されます。例えば、SplashScreenImageSource 定義で dpi と aspectRatio プロパティの両方が指定されている定義は、dpi プロパティのみが指定されている定義よりも一致が優先されます。
2. 引き続き 2 つ以上の一致が存在する場合は、minResolution の値が最も高いものが選択されます。
3. 引き続き 2 つ以上の一致が存在する場合は、コンポーネント内で最初に定義されているものが選択されます。

スプラッシュ画面の画像の明示的な選択

SplashScreenImage.getImageClass() メソッドは、モバイルデバイスの性能と最も一致する SplashScreenImageSource 定義を判別します。このメソッドをオーバーライドして、独自のカスタムロジックを追加できます。次に例を示します。

この例では、iOS のスプラッシュ画面用の SplashScreenImageSource 定義を追加しています。getImageClass() メソッドのオーバーライド部分で、最初にアプリケーションが iOS で実行されているか判別します。該当する場合、iOS 専用の画像を表示します。

アプリケーションが iOS で実行されていない場合は、super.getImageClass() メソッドを呼び出します。このメソッドでは、デフォルトの実装を使用して、表示する SplashScreenImageSource インスタンスを判別します。

<?xml version="1.0" encoding="utf-8"?>
<!-- containers\mobile\myComponents\MyIOSSplashScreen.mxml -->
<s:SplashScreenImage xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark">

    <fx:Script>
        <![CDATA[
            // Override getImageClass() to return an image for iOS.
            override public function getImageClass(aspectRatio:String, dpi:Number, resolution:Number):Class {
                // Is the application running on iOS?
                if (Capabilities.version.indexOf("IOS") == 0)
                    return iosImage.source;
                
                return super.getImageClass(aspectRatio, dpi, resolution);
            }
        ]]>
    </fx:Script>

    <!-- Default splashscreen image. -->
    <s:SplashScreenImageSource 
        source="@Embed('../assets/logoDefault.jpg')"/>
    
    <s:SplashScreenImageSource 
        source="@Embed('../assets/logo240Portrait.jpg')"
        dpi="240" 
        aspectRatio="portrait"/>
    
    <s:SplashScreenImageSource 
        source="@Embed('../assets/logo240Landscape.jpg')"
        dpi="240" 
        aspectRatio="landscape"/>
    
    <s:SplashScreenImageSource 
        source="@Embed('../assets/logo160.jpg')"
        dpi="160" 
        aspectRatio="portrait" 
        minResolution="960"/>

    <!-- iOS splashscreen image. -->
    <s:SplashScreenImageSource id="iosImage"
        source="@Embed('../assets/logoIOS.jpg')"/>
</s:SplashScreenImage>