More Related Content
Similar to Flexでサクッと作れ!Androidアプリ開発のススメ (20)
More from Keisuke Todoroki (18)
Flexでサクッと作れ!Androidアプリ開発のススメ
- 1. Flexでサクッと作れ!Androidアプリ開発のススメ
轟 啓介 | アドビ システムズ 株式会社
Twitter ID : @keisuke322
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
1
- 2. Agenda
AIR for Android概要
Adobe AIR とは
API の紹介
AIR for Android開発ツール
Flex “Hero” 概要
補足&関連情報
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
2
- 3. AIR for Android 概要
AIR for Android Overall
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
3
- 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. ROIの高いAIRアプリケーションの構造
ソースコードの共有が可能
共有ソースコード
PC用 Smartphone用 SmartTV用
ソースコード ソースコード ソースコード
PC用 Smartphone用 SmartTV用
ユーザーインターフェース ユーザーインターフェース ユーザーインターフェース
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 5
5
- 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. 主な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. Adobe AIR LaunchPad
AIRアプリケーション開発支援ツール(無償)
Wizard形式でアプリ雛形を自動生成
http://adobe.ly/AirLaunchpad
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 8
8
- 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. 主な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. 主な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. 主な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. 主な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. Adobe AIR Profiles
http://bit.ly/AirProfiles
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 14
14
- 15. AIR for Android
開発ツール
Development Tools
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
15
- 16. AIR for Android アプリケーション開発
Android向けの場合は、Flashベースのパターンのみ
(※FlashベースのAIRもAPKファイルに再パッケージ可能)
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 16
16
- 17. 開発ツール
自由度の高いUI系
ex. Gameアプリ
Flash Professional
+
データ表示系
Flash Builder Flex ex. Twitterアプリ
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 17
17
- 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. Flash Builderでのアプリケーション実行とデバッグ
PC上で実行&デバッグ
ADL (AIR Debug Launcher)で
シミュレーション
デバイスの種類も選択可
デバイス上で実行&デバッグ
USB接続したデバイスに転送
ブレークポイントのデバッグ可
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 19
19
- 20. Flex “Hero” 概要
Introduction of Flex “Hero”
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 20
20
- 21. Flex の進化
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 21
21
- 22. Flex Mobileの特徴
SKIN
モバイル用スキン
NAVIGATION
画面遷移コントロール
LAYOUT
画面レイアウト
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 22
22
- 23. Flex Mobileの特徴
SKIN
モバイル用スキン
NAVIGATION
画面遷移コントロール
LAYOUT
画面レイアウト
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 23
23
- 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. モバイル用スキン
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. Flex Mobileの特徴
SKIN
モバイル用スキン
NAVIGATION
画面遷移コントロール
LAYOUT
画面レイアウト
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 26
26
- 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. 画面遷移コントロール
ビュースタック
「画面」=「View」としてFlexフレームワークがスタックをコントロール
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 28
28
- 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. 画面遷移コントロール
Viewのナビゲーション
次の画面へ
navigator.pushView(NextViewClassName, data);
前の画面へ
navigator.pop();
最初の画面へ
navigator.popToFirstView();
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 30
30
- 31. Flex Mobileの特徴
SKIN
モバイル用スキン
NAVIGATION
画面遷移コントロール
LAYOUT
画面レイアウト
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 31
31
- 32. 画面レイアウト
Viewのレイアウト ActionBarのレイアウト
navigationContent
画面遷移のための操作ボタンを配置
e.g.「戻る」ボタンや「ホーム」ボタンなど
titleContent
画面タイトルや検索用のテキスト入力などを配置
(タイトル文字列は、titleプロパティで指定)
actionContent
その画面での操作ボタンを配置
e.g.「リロード」ボタンや「検索実行」ボタン、
「編集」ボタンなど
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 32
32
- 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. Flex Mobileの特徴
SKIN
モバイル用スキン
NAVIGATION
画面遷移コントロール
LAYOUT
画面レイアウト
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 34
34
- 35. Flexで作るAIR Androidアプリ
AIR Android アプリケーション
モバイル用スキン カメラ/カメラロール
画面遷移コントロール 加速度センサー
画面レイアウト GPS
標準コンポーネント ローカルDB
など マルチタッチ/ジェスチャー
など
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 35
35
- 36. 技術情報
Learning & Community
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 36
36
- 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. チュートリアル: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. 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. 本日のまとめ
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. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 41
41
- 42. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
42
- 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. 開発ツール
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. 開発ツール
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. 関連技術記事
『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. © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
48