Adobe Developer Connection（ADC）と連動する開発者向けイベント「ADC MEETUP ROUND3」では、General Sessionの他にHTML関連情報とFlash関連情報の2つのトラックが設けられた。FlashトラックのSession4では、廣畑大雅氏により、年内リリース予定のFlex SDK 4.6で採用されるスマートフォン／タブレット向けの新コンポーネントの紹介が行われた。

 

• セッション資料

 

1　Flex SDKの開発ツール、Flash Builder

廣畑氏はまず、アドビが提供するFlex SDKの開発ツールであるFlash Builderの現状について紹介した。現在の正式リリースビルドはFlash Builder 4.5.1で、Flash Builder 4.5の場合はAndroidアプリのみの対応だったが、4.5.1からはiOSとBlackBerryOSにも対応している。

図1.1　Flash Builder 4.5.1からはAndroid／iOS／BlackBerry OS向けに開発できるようになった

図1.2　Flash Builder 4.5.1にはFlexとActionScript用のモバイルプロジェクトが新しく追加された

図1.3　新規でモバイルプロジェクトを作成する際は、FlexモバイルプロジェクトもしくはActionScriptモバイルプロジェクトを選択して、［プロジェクト名］を入力し、［モバイル設定］タブからターゲットになるプラットフォームを選択する

Flex SDK 4.6とともにFlash Builder 4.6もリリースされる予定で、Flex SDK 4.6の新機能に対応している。廣畑氏は「Flex SDK 4.6はまだ公開されてないため、正式公開時は多少内容が変更される可能性もある」と前置きした上で、SpinnerList／DateSpinner／ToggleSwitch／Callout／CalloutButton／SplitViewNavigatorなど、新規追加予定の6つのコンポーネントを中心にFlex SDK 4.6の新機能を紹介した。

 

2　SpinnerListコンポーネント

SpinnerListは任意のアイテムリストを図2.1のように表示するコンポーネントで、登録したアイテムが繰り返して表示される。動きとしては、フリック（PCではドラッグ）したり、画面上のアイテムを選択すると、リストがスクロールし選択されたアイテムの値がコンポーネントのセンターに移動する。なお、アイテムリストの数が画面上で表示できる数を超えない場合は、繰り返さず、センター揃えに固定配置される。

図2.1　SpinnerListの表示結果

次は図2.1のMXMLソース。

<s:SpinnerList>
    <s:dataProvider>
        <s:ArrayList>
            <fx:Object label="1" />
            <fx:Object label="2" />
            <fx:Object label="3" />
            <fx:Object label="4" />
            <fx:Object label="5" />
            <fx:Object label="6" />
        </s:ArrayList>
    </s:dataProvider>
</s:SpinnerList>

SpinnerListを使えば、新しいリストを表現できるが、実際に使うにはデザイン的に足りない部分がある。その場合は、SpinnerListをSpinnerContainerに含めることで解決できる。SpinnerListをSpinnerContainerに含めると、図2.2のようにiOSのドラム式のリストのように表示された。デモでは、iPad2上だったにも関わらず、滑らかに操作できていた。廣畑氏によれば、「画面上にコンポーネントが増えれば増えるほど、コンテンツのパフォーマンスは下がるため、この点に気を付けて設計する必要がある」という。

図2.2　SpinnerContainerに含めたSpinnerListの表示結果

次は図2.2のMXMLソース。

<s:SpinnerListContainer>
<s:SpinnerList>
    <s:dataProvider>
        <s:ArrayList>
            <fx:Object label="1" />
            <fx:Object label="2" />
            <fx:Object label="3" />
            <fx:Object label="4" />
            <fx:Object label="5" />
            <fx:Object label="6" />
        </s:ArrayList>
    </s:dataProvider>
</s:SpinnerList>
</s:SpinnerListContainer>

SpinnerListは、図2.3のように複数並べることもできる。SpinnerListContainerの中にSpinnerListを追加するだけで、あとは自動で中にあるSpinnerListのレイアウトをまとめてくれるようだ。当然なことだが、SpinnerListContainerに含めずに、複数のSpinnerListを生成した場合は、それぞれ独立されたSpinnerListとして配置される。

図2.3　SpinnerContainerに複数のSpinnerListを含めた場合の表示結果

次は図2.3のMXMLソース。

<s:SpinnerListContainer>
    <s:SpinnerList>
        <s:dataProvider>
            <s:ArrayList>
                <fx:Object label="1" />
                <fx:Object label="2" />
                <fx:Object label="3" />
                <fx:Object label="4" />
                <fx:Object label="5" />
                <fx:Object label="6" />
            </s:ArrayList>
        </s:dataProvider>
    </s:SpinnerList>
    <s:SpinnerList>
        <s:dataProvider>
            <s:ArrayList>
                <fx:Object label="A" />
                <fx:Object label="B" />
                <fx:Object label="C" />
                <fx:Object label="D" />
                <fx:Object label="E" />
                <fx:Object label="F" />
            </s:ArrayList>
        </s:dataProvider>
    </s:SpinnerList>
</s:SpinnerListContainer>

また、SpinnerListは基本的にitemRendererを利用するため、図2.4のようにテキストの代わりに画像を利用することも可能だ。

図2.4　画像を利用したSpinnerListの表示結果

 

3　DateSpinnerコンポーネント

DateSpinnerは、SpinnerListを拡張したコンポーネントだ。DateSpinnerにはdisplayMode属性があり、date（日付、図3.1）／time（時間、図3.2）／dateAndTime（日付と時間、図3.3）を指定できる。また、デフォルトがen_USのlocale属性は、localeスタイルプロパティで表示を変更することができる。さらに便利な点として、DateSpinnerでは、存在しないデータは選択できなくなる。例えば、うるう年の2月29日を選んだ状態で、年を変更すると、選択できる日付に自動に更新してくれる。

図3.1　DateSpinnerでdisplayMode属性をdate、locale属性をen_US（左）／ja_JP（右）に設定した際の表示。現在の日付部分は青色で表示される

次はDateSpinnerで日付を表示するMXMLソース。

<s:DateSpinner displayMode="date" />

次はlocale属性を変更するstyleソース。

setStyle("locale", "en_US|ja_JP");

図3.2　DateSpinnerでdisplayMode属性をtime、locale属性をen_US（左）／ja_JP（右）に設定した際の表示。en_USに設定した場合は12時間形式、ja_JPに設定した場合は24時間形式で表示される

次はDateSpinnerで時間を表示するMXMLソース。

<s:DateSpinner displayMode="time" />

locale属性をja_JPに設定した場合でもen_USのように12時間形式に表示したり、1分刻みになっているアイテムリストを5分刻みに修正したり、表示されるリストの範囲を指定することもできる。

図3.3　DateSpinnerでdisplayMode属性をdateAndTime、locale属性をen_US（左）／ja_JP（右）に設定した際の表示。timeの場合と同じく、locale属性の設定により表示される内容が変わる

次はDateSpinnerで日付と時間を表示するMXMLソース。

<s:DateSpinner displayMode="dateAndTime" />
        

 

4　ToggleSwitchコンポーネント

ToggleSwitchコンポーネントにはselected属性があり、trueもしくはfalseを指定することで、フリック（PCではドラッグ）時の見た目を図4.1のように設定できる。

図4.1　ToggleSwitchでselected属性をfalse（上）／true（下）に設定した際の表示

次はToggleSwitchを生成するMXMLソース。

<s:ToggleSwitch selected="true|false" />

ToggleSwitchに適用するラベルは、次のように別途のskinClassを利用することで変更する。

<s:ToggleSwitch selected="true" skinClass="jp.taiga.skin.LocaleToggleSwitchSkin />

ToggleSwitchのラベルに適用するskinのクラスファイルは、次のようにToggleSwitchの基本SkinクラスであるToggleSwitchSkinを拡張して設定できる。

package jp.taiga.skin {
    import spark.skins.mobile.ToggleSwitchSkin;

    public class LocaleToggleSwitchSkin extends ToggleSwitchSkin {
        public function LocaleToggleSwitchSkin() {
            super();
            selectedLabel   = "ja_JP"; // ex)OK
            unselectedLabel = "en_US"; // ex)Cancel
        }
    }
}

 

5　CalloutコンポーネントとCalloutButtonコンポーネント

Calloutは吹き出しを表示するコンポーネントで、CalloutButtonはその吹き出しを表示するきっかけとなるボタンを表示するコンポーネントだ。例えば図5.1で見ると、「AAAA」と「BBBB」が表示されている吹き出し部分はCalloutコンポーネントで、「show」ボタン部分はCalloutButtonコンポーネントで生成されている。また、calloutLayoutコンポーネントを使って水平垂直などのレイアウトの変更することができる。なお、calloutContentタグの場合は省略することが可能だ。

図5.1　CalloutとCalloutButtonの使用例

次は図5.1のMXMLソース。

<s:CalloutButton label="show">
    <s:calloutLayout>
        <s:HorizontalLayout ・・・ />
    </s:calloutLayout>
    <s:calloutContent>
         <s:Button label="AAAA" />
         <s:Button label="BBBB" />
    </s:calloutContent>
</s:CalloutButton>

 

6　SplitViewNavigatorコンポーネント

SplitViewNavigatorは、ViewNavigatorにCallout機能が追加されたコンポーネントで、モバイルデバイス特有の縦向き（portrait）と横向き（landscape）を自動でチェックして表示を切り替えてくれる。また、autoHideFirstNavigator属性にtrueまたはfalseを指定することで、firstViewをCallout形式あるいはメニュー形式で表示することができる（図6.1と図6.2）。「Flex 4.5でも似たような機能を自作するこができるが、正式なコンポーネントが提供されるのは嬉しいことだ」と廣畑氏は語る。

図6.1　SplitViewNavigatorをCallout形式で表示したところ

図6.2　SplitViewNavigatorをメニュー形式で表示したところ

次はSplitViewNavigatorを生成するMXMLソース。

<s:SplitViewNavigator autoHideFirstViewNavigator="true|false">

<s:ViewNavigator firstView="views.MasterCategory" />

<s:ViewNavigator firstView="views.DetailView">
    <s:actionContent.portrait>
        <s:Button label="Show Navigator" />
    </s:actionContent.portrait>
</s:ViewNavigator>

</s:SplitViewNavigator>

図6.3　SplitViewNavigatorはautoHideFirstViewNavigator属性によって図のように表示形式が切り替わる

このように新しく追加されたコンポーネントの利便性とパフォーマンスは、モバイル開発ツールとしてのFlexの立場をもっと引き上げてくれることは間違いなさそうだ。

 

関連記事

ADC MEETUP ROUND03 レポート

• SESSION1： General Session from Adobe MAX 2011
• HTML SESSION2： Adobe new tools＿Introduction of Edge, Muse and Proto
• HTML SESSION3： HTML5でユーザビリティを高めるためのフォーム構築法
• HTML SESSION4： Design Tips & Development with jQuery Mobile and PhoneGap
• Flash SESSION2： Stage3Dの利用で広がるFlashの表現と可能性
• Flash SESSION3： AIR3の新機能＿Captive Runtime + Native Extensions

著者について