adobe flex and mobile 4p

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

“Hero”, Flex and Mobile 轟啓介 | アドビシステムズ株式会社デベロッパーマーケティング Twitter : @keisuke322


アプリケーション

クロスプラットフォーム戦略

Flash Platform ランタイム

Flex フレームワーク

WRITE ONCE DEPLOY TO MANY


“Hero”, Flex and Mobile Next Flex Framework

3


Flex フレームワークの進化

4

Web

Desktop

“Hero”

Web

Flex 1 ‒ Flex 2 (2004/03) (2006/07)

Web

Desktop

Flex 3 ‒ Flex 4 (2008/02) (2010/03) (2011/1H)


“Slider” から “Hero” へ

5

Flex Mobile “Slider”



6

Flex Mobile

“Hero”



7

Flex Mobile

“Hero” FP 10.0, high-end '09 FP 10.1, Droid FP 10.1, Nexus One

26.4

5.5 2.9

- モモババイイルルデデババイイススのの強強力力なな進進化化 - Flaasshh PPlaayyer 1100..11 // AAddobe AAIIRR 22ののモモババイイルル最最適適化化

モバイル最適化をしていないFlexのアプリケーション起動時間


モバイルアプリ開発で考慮するべき点

Mobile Development Challenges

8


画面解像度の違いによるUIの影響

画面サイズ（横 × 縦）とDPI → 実表示サイズ

9

操作UI部分が領域外

デバイス A デバイス B


タッチ操作

ジェスチャー操作を想定したUI設計指によるタップ／スワイプ

スクロールバーは不要に

指の大きさ

ボタンサイズ

10


他プロセスの割り込み／連携

電話着信

スリープモード

他プロセス連携

ブラウザ

カメラロール

11

Session

Memory

Application State

Storage

Domain Data


階層化された情報の最適表示

限定的な画面サイズでは、情報を階層的に表示する工夫が必要

情報の“現在地“を明示（シングル画面ではとても重要）

12

Restaurant Finder

Search

Results

Detail

Make Reservation

Add Review

Map View

Edit Filter

Nearby Bookmarks

Edit Bookmarks

Reviews

View Review

Edit Review

Settings


“Hero”のモバイル対応 Mobile Support

13


タッチ操作に最適化

モバイル用のスキンコンポーネントサイズ

デフォルトでタッチ操作に対応したサイズ

ステート

タッチ操作に不要なステートは無し（ロールオーバーなど）

イベント

デフォルトでスワイプなどのジェスチャーに対応

14

UP DOWN

<s:Button id="button" label="{button.height} : {button.width}"/>

PC用プロジェクトモバイル用プロジェクト


画面（View）ベースのアプリケーション構造

ViewとViewNavigator View

明確なデータモデルを備えたコンテンツグループ

メモリ内へのステート保持と UIインテグレーション機能

カスタムビューのベースクラス

ViewNavigator

Viewの動的生成と表示を管理するコンポーネント

階層構造を持ったコンテンツ表示が可能に

15

階層構造を持つコンテンツを動的に作成し、ナビゲートを可能にする新しいコンセプト


ViewNavigatorの階層管理と表示

ビューをスタック（束）で管理し、一番上のビューを表示、アクティブにする

サポートされるAPI

pushView()：次のViewに移動する

popView()：ひとつ前のViewに戻る

複数のスタックやビューのセット（セクション）の管理機能

16

pushView(UserInfoView, name)

popView()


pushView(UserInfoView, name)

popView()

ViewNavigatorの階層管理と表示

17

<s:View title=“FxUG Japan Tour Tweets”> … private function list_changeHandler():void { navigator.pushView ( UserInfoView, list.selectedItem.name); } … <s:List change=“list_changeHandler()” … /> </s:View>

■ TweetView.mxml

<s:View title=“{data}”> … private function button_clickHandler():void { navigator.popView(); } … </s:View>

■ UserInfoView.mxml

<s:MobileApplication rootView=“TweetView” sessionCachingEnabled=“true”> … </s:MobileApplication>

■ Main.mxml


Flash Builder + “Hero” Supporting Mobile

Development

18


Flash Builder のモバイル開発対応

Flex Mobile AIR Project

デザインビューでのナビゲーション編集

デバイスプロファイル設定

モバイルに対応したADL

実機デバッグのサポート

さらに！


Adobe MAX アドバンテージツアー

Adobe MAX 2010 in Los Angeles 2010/10/25 (月）‒ 27 (水）への参加

Adobe Flash Platformの最新技術情報を学ぶカンファレンス

ツアー申込：http://www.adobe.com/jp/joc/max2010/ 先着20名まで 198,000円

20


Adobe AIR Contest 2010

Adobe AIR Galleryのコンテスト審査対象アプリ：2009/9/1 ‒ 2010/8/31（AIR Galleryへ登録）

http://www.adobe.com/jp/joc/aircon2010/ 最優秀賞：Adobe MAX ツアーご招待

優秀賞：Adobe Creative Suite 5, Sony α NEX-5

21


事例サイト公開 2010/7/28～

Adobe Flash Platform Enterprise Gallery 公開登録型ビジネス事例紹介サイト

22

http://biz.adobe-ria.jp/


次期 Flex フレームワーク - ”Hero“

Webからデスクトップ、そしてモバイルへモバイルアプリケーション開発にも対応する次期Flexフレームワーク

既存 Flex 4 にモバイル用のコンポーネントと機能を追加アーキテクチャの大きな変更なしで既存Flexがモバイルに対応

階層構造コンテンツの表示とナビゲーション、動的レイアウト

詳しくはAdobe MAX 2010で！

23

adobe flex and mobile 4p

Technology