Flexでサクッと作れ!Androidアプリ開発のススメ

8,746 views

Published on

Developers Summit 2011
18-D-6

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

No Downloads
Views
Total views
8,746
On SlideShare
0
From Embeds
0
Number of Embeds
833
Actions
Shares
0
Downloads
50
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

Flexでサクッと作れ!Androidアプリ開発のススメ

  1. 1. Flexでサクッと作れ!Androidアプリ開発のススメ 轟 啓介 | アドビ システムズ 株式会社 Twitter ID : @keisuke322© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 1
  2. 2. Agenda AIR for Android概要 Adobe AIR とは API の紹介 AIR for Android開発ツール Flex “Hero” 概要 補足&関連情報© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 2
  3. 3. AIR for Android 概要 AIR for Android Overall© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 3
  4. 4. Adobe AIRとは クロスプラットフォームを実現するアプリケーションの 実行環境(ランタイム)と開発キット(SDK) PC Smartphone SmartTV Win / Mac / Linux Android / iOS / Samsung / ... Blackberry Tablet OS© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 4 4
  5. 5. ROIの高いAIRアプリケーションの構造 ソースコードの共有が可能 共有ソースコード PC用 Smartphone用 SmartTV用 ソースコード ソースコード ソースコード PC用 Smartphone用 SmartTV用 ユーザーインターフェース ユーザーインターフェース ユーザーインターフェース© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 5 5
  6. 6. Adobe AIRの進化とプラットフォーム拡充 AIR 1.0 AIR 2.0 AIR 2.5 AIR 2.6 AIR next 2008/2 2010/6 2010/10 2011/1H 2011/2H© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 6 6
  7. 7. 主なAIR API / for Smartphone (Android) 加速度センサー Back/Menu/Search ボタンイベント カメラ&カメラロール コンテキストメニュー 地理位置情報 / GPS ローカルDB ジェスチャー(Windows、Mac OSでも可) マルチタッチ(Windows 7でも可) HTMLコンテンツ表示 マイク ネットワーク情報 カスタムURI 画面表示方向の変更 画面消灯制御 仮想キーボード© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 7
  8. 8. Adobe AIR LaunchPad AIRアプリケーション開発支援ツール(無償) Wizard形式でアプリ雛形を自動生成 http://adobe.ly/AirLaunchpad© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 8 8
  9. 9. Tour de Mobile Flex スマートフォン向けの Flex / AIR サンプル集アプリ(無償) ソースコード付き Android Marketで「Tour de Mobile Flex」を検索© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 9 9
  10. 10. 主なAPI対応一覧 / 入力系 デスクトップ モバイル TV 対応チェック 加速度センサー ● Accelermeter.isSupported カメラ ● ● ▲ Camera.isSupported 位置情報 ● Geolocation.isSupported IME ● IME.isSupported Microphone.isSupported or マイク ● ● ▲ Microphone.getMicrophone() マルチタッチ ● ● ジェスチャー ● ●© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 10 10
  11. 11. 主なAPI対応一覧 / 出力&ウィンドウ系 デスクトップ モバイル TV 対応チェック カメラロール ● MediaLibrary.supportsAddImage コンテキストメニュー ● ContextMenu.isSupported フルスクリーン ● ● ● flash.events.fullScreen (property) ネイティブウィンドウ ● NativeWindow.isSupported ネイティブメニュー ● NativeMenu.isSupported プリントジョブ ● PrintJob.isSupported デバイスの向き ● Stage.supportsOrientationChange© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 11 11
  12. 12. 主なAPI対応一覧 / コア系 その1 デスクトップ モバイル TV 対応チェック DRM ● ● DRMManager.isSupported 暗号化ストレージ ● EncryptedLocalStore.isSupported ファイルシステム ● ● ● GPU ● ● ● ※No API HTMLLoader ● (●) HTMLLoader.isSupported StageWebView ● ● StageWebView.isSupported LocalConnection ● ● LocalConnection.isSupported© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 12 12
  13. 13. 主なAPI対応一覧 / コア系 その2 デスクトップ モバイル TV 対応チェック PDF ● HTMLLoader.pdfCapability ネイティブプロセス ● NativeProcess.isSupported NativeApplication. ログイン時に起動 ● supportsStartAtLogin SQL ● ● ● SWF in HTML ● HTMLLoader.swfCapability TLF レンダリング ● ● ● TLF インプット ● Cache as bitmap ● ●© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 13 13
  14. 14. Adobe AIR Profiles http://bit.ly/AirProfiles© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 14 14
  15. 15. AIR for Android 開発ツール Development Tools© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 15
  16. 16. AIR for Android アプリケーション開発 Android向けの場合は、Flashベースのパターンのみ (※FlashベースのAIRもAPKファイルに再パッケージ可能)© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 16 16
  17. 17. 開発ツール 自由度の高いUI系 ex. Gameアプリ Flash Professional + データ表示系 Flash Builder Flex ex. Twitterアプリ© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 17 17
  18. 18. Flash Builder & Flex 2011年上半期にAndroidアプリ開発に対応予定 プレビュー版がAdobe Labsで絶賛公開中(無償) http://adobe.ly/Labs_Burrito Flash Builder Flex “Burrito” “Hero” FlashやAIRアプリを効率良く FlashやAIRアプリを効率良く 開発するEclipseベースのIDE 開発するオープンソースの Flex SDKを同梱 フレームワークを含むSDK© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 18 18
  19. 19. Flash Builderでのアプリケーション実行とデバッグ PC上で実行&デバッグ ADL (AIR Debug Launcher)で シミュレーション デバイスの種類も選択可 デバイス上で実行&デバッグ USB接続したデバイスに転送 ブレークポイントのデバッグ可© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 19 19
  20. 20. Flex “Hero” 概要 Introduction of Flex “Hero”© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 20 20
  21. 21. Flex の進化© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 21 21
  22. 22. Flex Mobileの特徴 SKIN モバイル用スキン NAVIGATION 画面遷移コントロール LAYOUT 画面レイアウト© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 22 22
  23. 23. Flex Mobileの特徴 SKIN モバイル用スキン NAVIGATION 画面遷移コントロール LAYOUT 画面レイアウト© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 23 23
  24. 24. モバイル用スキン コンポーネントサイズ デフォルトでタッチ操作に対応したサイズ <s:Button id="button" label="{button.height} : {button.width}"/> >> 実行結果 // PC用デフォルトスキン // モバイル用デフォルトスキン タッチ操作 デフォルトでスワイプなどのジェスチャーに対応 <s:List dataProvider="{employeeList}" width="100%" height="100%"/>© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 24 24
  25. 25. モバイル用スキン CSS Media Query デバイス環境に応じたCSS設定 <fx:Style> @namespace s "library://ns.adobe.com/flex/spark"; @namespace mx "library://ns.adobe.com/flex/mx"; s|Button { fontSize: 12; } @media all and (application-dpi: 160) { s|Button { fontSize: 10; } } @media (application-dpi: 240) and (os-platform: "IOS") { s|Button { fontSize: 11; } } @media (application-dpi: 240) and (os-platform: "Android") { s|Button { color: 13; } } </fx:Style>© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 25 25
  26. 26. Flex Mobileの特徴 SKIN モバイル用スキン NAVIGATION 画面遷移コントロール LAYOUT 画面レイアウト© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 26 26
  27. 27. 画面遷移コントロール 多階層の画面構造の場合 自前の遷移コントロールは大変… 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. 27 27
  28. 28. 画面遷移コントロール ビュースタック 「画面」=「View」としてFlexフレームワークがスタックをコントロール© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 28 28
  29. 29. 画面遷移コントロール Viewのスタック構造 <s:MobileApplication> Main application (MobileApplication) アプリケーションのルート コンポーネント (ViewNavigator) <s:ViewNavigator> Viewのコントロールを担当 MobileApplicationに一つだけ 自動生成される Home (View) “navigator” でViewから参照可能 Contacts (View) <s:View> 一つの画面表示を担当 Search (View) 別のViewに遷移すると破棄される ※Viewのデータは “data” に自動キャッシュ© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 29
  30. 30. 画面遷移コントロール Viewのナビゲーション 次の画面へ navigator.pushView(NextViewClassName, data); 前の画面へ navigator.pop(); 最初の画面へ navigator.popToFirstView();© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 30 30
  31. 31. Flex Mobileの特徴 SKIN モバイル用スキン NAVIGATION 画面遷移コントロール LAYOUT 画面レイアウト© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 31 31
  32. 32. 画面レイアウト Viewのレイアウト ActionBarのレイアウト navigationContent 画面遷移のための操作ボタンを配置 e.g.「戻る」ボタンや「ホーム」ボタンなど titleContent 画面タイトルや検索用のテキスト入力などを配置 (タイトル文字列は、titleプロパティで指定) actionContent その画面での操作ボタンを配置 e.g.「リロード」ボタンや「検索実行」ボタン、   「編集」ボタンなど© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 32 32
  33. 33. 画面レイアウト 画面向きに応じたレイアウト デフォルトで自動レイアウト State設定で自由なレイアウト 横長(landscape)/ 縦長(portrait) <s:states> <s:State name="landscape" /> <s:State name="portrait" /> </s:states> “landscape” “portrait”© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 33 33
  34. 34. Flex Mobileの特徴 SKIN モバイル用スキン NAVIGATION 画面遷移コントロール LAYOUT 画面レイアウト© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 34 34
  35. 35. Flexで作るAIR Androidアプリ AIR Android アプリケーション モバイル用スキン カメラ/カメラロール 画面遷移コントロール 加速度センサー 画面レイアウト GPS 標準コンポーネント ローカルDB など マルチタッチ/ジェスチャー など© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 35 35
  36. 36. 技術情報 Learning & Community© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 36 36
  37. 37. チュートリアル:PriceCom Flexで作るAndroidアプリ開発 http://adobe.ly/FlexAndroid01 価格.com Webサービスを使った最安値検索アプリ 初心者向けのAdobe Developer Connection記事 轟 啓介 アドビシステムズ株式会社 @keisuke322© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 37 37
  38. 38. チュートリアル:EmployeeDirectory Tutorial: Flex for Android in 90 Minutes http://coenraets.org/blog/2010/12/tutorial-flex- for-android-in-90-minutes/ 翻訳版:「Cuaoar.jp」(上条彰宏氏) http://cuaoar.jp/2011/01/flex-android.html Christophe Coenraets アドビシステムズ社 テクニカルエバンジェリスト http://coenraets.org/© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 38 38
  39. 39. Community Adobe Developer Connection (ADC) 技術者向けの情報サイト http://www.adobe.com/jp/devnet/ AIR / Flash for Android Group (AF4A) Flashクリエーター系の「日本アンドロイドの AIR/Flash for Android 会」のワーキンググループ Working Group https://groups.google.com/group/AF4A Flex User Group Japan (FxUG) 世界最大規模のFlex開発者コミュニティ Flex User Group http://fxug.net/ 勉強会 3/09(水)@東京(Adobeオフィス) 4/02(土)@名古屋 4/13(水)@東京(Adobeオフィス) 4/23(土)@京都 4/?? (土)@沖縄© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 39 39
  40. 40. 本日のまとめ Adobe AIRはクロスデバイスに対応 PC / Smartphone / SmartTV ロジックの再利用が可能 AIR for Androidは Flashで柔軟に : 自由度の高いUI系アプリ Flexで効率良く : データ表示系のアプリ Flash & Flex のハイブリッドは最強 Flex “Hero” はモバイルにも最適化 SKIN : モバイルスキンでタッチ操作を快適に NAVIGATION : 画面遷移コントロールをお手軽に LAYOUT : 画面レイアウトを的確に© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 40
  41. 41. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 41 41
  42. 42. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 42
  43. 43. 補足&関連情報© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 43
  44. 44. FlashとFlexの特性 Flash(ActionScript) 自由度の高いUI/コンテンツ作成が可能 デザイン指向のアプリケーション向け ゲームなど Flex(ActionScript + MXML) UIコンポーネントやサーバ連携機能が備 わったFlashのフレームワーク (無償オープンソース) Webアプリ(Flash)とDesktopアプリ (AIR)に対応 次期バージョンでモバイルに対応 モバイルアプリの画面遷移機構も提供 開発者にはFlex利用がオススメ© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 44
  45. 45. 開発ツール Adobe Flash Builder “Burrito” (Ver 4.5 preview) http://labs.adobe.com/technologies/flashbuilder_burrito/ EclipseベースのIDE preview版は制限なし! AIR SDK 2.5とFlex SDK “Hero”を同梱 → “Burrito”だけあれば、すぐに試せます! 参考までに AIR SDK 2.5 以上 http://www.adobe.com/go/air_sdk_jp(無償) Flex SDK “Hero”(Ver 4.5 preview) http://labs.adobe.com/technologies/flexsdk_hero/(無償)© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 45
  46. 46. 開発ツール AIR 2.5 SDK(無償) http://www.adobe.com/go/air_sdk_jp Androidにも対応したAIR SDK(GingerbreadもOK) Flex SDK “Hero”(無償) http://labs.adobe.com/technologies/flexsdk_hero/ Androidにも対応したFlex SDKのプレビュー版(正式版は2011年上半期) Adobe Flash Builder 4(有償)※無償体験版あり(60日) http://www.adobe.com/jp/products/flex/ Androidにも対応したプレビュー版は、本スライドP.11を参照 Adobe Flash Professional CS5(有償) + Adobe Flash Professional CS5 Extension for AIR 2.5 beta(無償) http://labs.adobe.com/technologies/flashpro_extensionforair/ Adobe AIR Launchpad(無償) http://labs.adobe.com/technologies/airlaunchpad/ Flash Builder に読み込み可能なAIRプロジェクトをウィザード形式で生成可能© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 46
  47. 47. 関連技術記事 『Flex SDK 「Hero」とFlash Builder 「Burrito」を使用したモバイル アプリケーション開発』 http://www.adobe.com/jp/joc/devnet/flex/articles/mobile_development_hero_burrito.html 『Flex SDK 「Hero」のご紹介』 http://www.adobe.com/jp/joc/devnet/flex/articles/introducing_flexsdk_hero.html 『Flash Builderの次期バージョン「Burrito」の新機能』 http://www.adobe.com/jp/joc/devnet/flex/articles/whatsnew_flashbuilder_burrito.html 『Java と ActionScript 3.0 の違い』 http://www.adobe.com/jp/joc/devnet/flex/articles/asforjava1.html© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 47
  48. 48. © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 48

×