Adobe flex and mobile 4p

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

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

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

WRITE ONCE DEPLOY TO MANY

アプリケーション

Flex フレームワーク

Flash Platform ランタイム


“Hero”, Flex and Mobile
Next Flex Framework

3

Flex フレームワークの進化

Desktop Desktop

Web Web Web

Flex 1 ‒ Flex 2 Flex 3 ‒ Flex 4 “Hero”
(2004/03) (2006/07) (2008/02) (2010/03) (2011/1H)

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

“Slider” から “Hero” へ

Flex Mobile
“Slider”



Flex Mobile

“Hero”


- モバイルデバイスの強力な進化
- Flash Player 10.1 / Adobe AIR 2のモバイル最適化
a a

26.4
Flex Mobile

5.5 2.9

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

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


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

8

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

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

デバイス A デバイス B

操作UI部分が
領域外


タッチ操作

ジェスチャー操作を想定したUI設計
指によるタップ／スワイプ
スクロールバーは不要に
指の大きさ
ボタンサイズ


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

電話着信
スリープモード
他プロセス連携
ブラウザ
カメラロール

Session

Memory

Domain Data
Storage
Application State


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

限定的な画面サイズでは、情報を階層的に表示する工夫が必要
情報の“現在地“を明示（シングル画面ではとても重要）

Restaurant
Finder

Nearby Search Bookmarks Reviews Settings

Edit View
Results Edit Filter Edit Review
Bookmarks Review

Detail Map View

Make
Add Review
Reservation


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

13

タッチ操作に最適化

モバイル用のスキン
コンポーネントサイズ
デフォルトでタッチ操作に対応したサイズ

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

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

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

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


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

ViewとViewNavigator
View
明確なデータモデルを備えた
コンテンツグループ
メモリ内へのステート保持と
UIインテグレーション機能
カスタムビューのベースクラス

ViewNavigator
Viewの動的生成と表示を
管理するコンポーネント
階層構造を持ったコンテンツ
表示が可能に

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

ViewNavigatorの階層管理と表示

ビューをスタック（束）で管理し、一番上のビューを表示、アクティブにする
サポートされるAPI
pushView()：次のViewに移動する
popView()：ひとつ前のViewに戻る

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

pushView(UserInfoView,
name)

popView()


ViewNavigatorの階層管理と表示

■ Main.mxml
<s:MobileApplication rootView=“TweetView”
sessionCachingEnabled=“true”>
…
</s:MobileApplication>

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


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円


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


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

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

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


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

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

既存 Flex 4 にモバイル用のコンポーネントと機能を追加
アーキテクチャの大きな変更なしで既存Flexがモバイルに対応
階層構造コンテンツの表示とナビゲーション、動的レイアウト

詳しくはAdobe MAX 2010で！


Adobe flex and mobile 4p

Recommended

Recommended

More Related Content

What's hot

What's hot (8)

Viewers also liked

Viewers also liked (20)

Similar to Adobe flex and mobile 4p

Similar to Adobe flex and mobile 4p (20)

More from Keisuke Todoroki

More from Keisuke Todoroki (15)

Recently uploaded

Recently uploaded (10)

Adobe flex and mobile 4p