Adobe flex and mobile 4p

3,624 views

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,624
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
31
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Adobe flex and mobile 4p

  1. 1. “Hero”, Flex and Mobile 轟 啓介 | アドビ システムズ 株式会社 デベロッパーマーケティング Twitter : @keisuke322 © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  2. 2. クロスプラットフォーム戦略 WRITE ONCE DEPLOY TO MANY アプリケーション Flex フレームワーク Flash Platform ランタイム © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  3. 3. “Hero”, Flex and Mobile Next Flex Framework © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 3
  4. 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. 5. “Slider” から “Hero” へ Flex Mobile “Slider” © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 5
  6. 6. “Slider” から “Hero” へ Flex Mobile “Hero” © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 6
  7. 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. 8. モバイルアプリ開発で 考慮するべき点 Mobile Development Challenges © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 8
  9. 9. 画面解像度の違いによるUIの影響 画面サイズ(横 × 縦)とDPI → 実表示サイズ デバイス A デバイス B 操作UI部分が 領域外 © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 9
  10. 10. タッチ操作 ジェスチャー操作を想定したUI設計 指によるタップ/スワイプ スクロールバーは不要に 指の大きさ ボタンサイズ © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 10
  11. 11. 他プロセスの割り込み/連携 電話着信 スリープモード 他プロセス連携 ブラウザ カメラロール Session Memory Domain Data Storage Application State © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 11
  12. 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. 13. “Hero”のモバイル対応 Mobile Support © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 13
  14. 14. タッチ操作に最適化 モバイル用のスキン コンポーネントサイズ デフォルトでタッチ操作に対応したサイズ <s:Button id="button" label="{button.height} : {button.width}"/> PC用プロジェクト モバイル用プロジェクト ステート タッチ操作に不要なステートは無し (ロールオーバーなど) UP DOWN イベント デフォルトでスワイプなどのジェスチャーに対応 © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 14
  15. 15. 画面(View)ベースのアプリケーション構造 ViewとViewNavigator View 明確なデータモデルを備えた コンテンツグループ メモリ内へのステート保持と UIインテグレーション機能 カスタムビューのベースクラス ViewNavigator Viewの動的生成と表示を 管理するコンポーネント 階層構造を持ったコンテンツ 表示が可能に 階層構造を持つコンテンツを動的に作成し、ナビゲートを可能にする新しいコンセプト © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 15
  16. 16. ViewNavigatorの階層管理と表示 ビューをスタック(束)で管理し、一番上のビューを表示、アクティブにする サポートされるAPI pushView():次のViewに移動する popView():ひとつ前のViewに戻る 複数のスタックやビューのセット(セクション)の管理機能 pushView(UserInfoView, name) popView() © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 16
  17. 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. 18. Flash Builder + “Hero” Supporting Mobile Development © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 18
  19. 19. Flash Builder のモバイル開発対応 Flex Mobile AIR Project デザインビューでの ナビゲーション編集 デバイスプロファイル設定 モバイルに対応したADL 実機デバッグのサポート さらに! © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  20. 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. 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. 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. 23. 次期 Flex フレームワーク - ”Hero“ Webからデスクトップ、そしてモバイルへ モバイルアプリケーション開発にも対応する次期Flexフレームワーク 既存 Flex 4 にモバイル用のコンポーネントと機能を追加 アーキテクチャの大きな変更なしで既存Flexがモバイルに対応 階層構造コンテンツの表示とナビゲーション、動的レイアウト 詳しくはAdobe MAX 2010で! © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 23
  24. 24. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

×