Developers Summit 2011 18-D-6

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

43. 補足＆関連情報
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
43

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