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