1. “Hero”, Flex and Mobile
轟 啓介 | アドビ システムズ 株式会社 デベロッパーマーケティング
Twitter : @keisuke322
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

2. クロスプラットフォーム戦略
WRITE ONCE DEPLOY TO MANY
アプリケーション
Flex フレームワーク
Flash Platform ランタイム
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

3. “Hero”, Flex and Mobile
Next Flex Framework
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
3

4. 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

5. “Slider” から “Hero” へ
Flex Mobile
“Slider”
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 5

6. “Slider” から “Hero” へ
Flex Mobile
“Hero”
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 6

7. “Slider” から “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のアプリケーション起動時間
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 7

8. モバイルアプリ開発で
考慮するべき点
Mobile Development Challenges
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
8

9. 画面解像度の違いによるUIの影響
画面サイズ（横 × 縦）とDPI → 実表示サイズ
デバイス A デバイス B
操作UI部分が
領域外
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 9

10. タッチ操作
ジェスチャー操作を想定したUI設計
指によるタップ／スワイプ
スクロールバーは不要に
指の大きさ
ボタンサイズ
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 10

11. 他プロセスの割り込み／連携
電話着信
スリープモード
他プロセス連携
ブラウザ
カメラロール
Session
Memory
Domain Data
Storage
Application State
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 11

12. 階層化された情報の最適表示
限定的な画面サイズでは、情報を階層的に表示する工夫が必要
情報の“現在地“を明示（シングル画面ではとても重要）
Restaurant
Finder
Nearby Search Bookmarks Reviews Settings
Edit View
Results Edit Filter Edit Review
Bookmarks Review
Detail Map View
Make
Add Review
Reservation
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 12

13. “Hero”のモバイル対応
Mobile Support
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
13

14. タッチ操作に最適化
モバイル用のスキン
コンポーネントサイズ
デフォルトでタッチ操作に対応したサイズ
<s:Button id="button" label="{button.height} : {button.width}"/>
PC用プロジェクト モバイル用プロジェクト
ステート
タッチ操作に不要なステートは無し
（ロールオーバーなど）
UP DOWN
イベント
デフォルトでスワイプなどのジェスチャーに対応
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 14

15. 画面（View）ベースのアプリケーション構造
ViewとViewNavigator
View
明確なデータモデルを備えた
コンテンツグループ
メモリ内へのステート保持と
UIインテグレーション機能
カスタムビューのベースクラス
ViewNavigator
Viewの動的生成と表示を
管理するコンポーネント
階層構造を持ったコンテンツ
表示が可能に
階層構造を持つコンテンツを動的に作成し、ナビゲートを可能にする新しいコンセプト
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 15

16. ViewNavigatorの階層管理と表示
ビューをスタック（束）で管理し、一番上のビューを表示、アクティブにする
サポートされるAPI
pushView()：次のViewに移動する
popView()：ひとつ前のViewに戻る
複数のスタックやビューのセット（セクション）の管理機能
pushView(UserInfoView,
name)
popView()
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 16

17. 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>
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 17

18. Flash Builder + “Hero”
Supporting Mobile
Development
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
18

19. Flash Builder のモバイル開発対応
Flex Mobile AIR Project
デザインビューでの
ナビゲーション編集
デバイスプロファイル設定
モバイルに対応したADL
実機デバッグのサポート
さらに！
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

20. 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円
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 20

21. 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 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 21

22. 事例サイト公開 2010/7/28～
Adobe Flash Platform Enterprise Gallery 公開
登録型ビジネス事例紹介サイト
http://biz.adobe-ria.jp/
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 22

23. 次期 Flex フレームワーク - ”Hero“
Webからデスクトップ、そしてモバイルへ
モバイルアプリケーション開発にも対応する次期Flexフレームワーク
既存 Flex 4 にモバイル用のコンポーネントと機能を追加
アーキテクチャの大きな変更なしで既存Flexがモバイルに対応
階層構造コンテンツの表示とナビゲーション、動的レイアウト
詳しくはAdobe MAX 2010で！
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 23

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