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

Flexでサクッと作れ！Androidアプリ開発のススメ
轟啓介 | アドビシステムズ株式会社
Twitter ID : @keisuke322

© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Conﬁdential.

1

Agenda

AIR for Android概要
Adobe AIR とは
API の紹介
AIR for Android開発ツール
Flex “Hero” 概要
補足＆関連情報


2

AIR for Android 概要
AIR for Android Overall


3

Adobe AIRとは

クロスプラットフォームを実現するアプリケーションの
実行環境（ランタイム）と開発キット（SDK）

PC Smartphone SmartTV
Win / Mac / Linux Android / iOS / Samsung / ...
Blackberry Tablet OS

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Conﬁdential. 4

4

ROIの高いAIRアプリケーションの構造

ソースコードの共有が可能

共有ソースコード

PC用 Smartphone用 SmartTV用
ソースコードソースコードソースコード

PC用 Smartphone用 SmartTV用
ユーザーインターフェースユーザーインターフェースユーザーインターフェース


5

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


6

主なAIR API / for Smartphone (Android)

加速度センサー
Back/Menu/Search ボタンイベント
カメラ＆カメラロール
コンテキストメニュー
地理位置情報 / GPS
ローカルDB
ジェスチャー（Windows、Mac OSでも可）
マルチタッチ（Windows 7でも可）
HTMLコンテンツ表示
マイク
ネットワーク情報
カスタムURI
画面表示方向の変更
画面消灯制御
仮想キーボード


7

Adobe AIR LaunchPad

AIRアプリケーション開発支援ツール（無償）
Wizard形式でアプリ雛形を自動生成
http://adobe.ly/AirLaunchpad


8

Tour de Mobile Flex

スマートフォン向けの Flex / AIR サンプル集アプリ（無償）
ソースコード付き
Android Marketで「Tour de Mobile Flex」を検索


9

主なAPI対応一覧 / 入力系

デスクトップモバイル TV 対応チェック

加速度センサー ● Accelermeter.isSupported

カメラ ● ● ▲ Camera.isSupported

位置情報 ● Geolocation.isSupported

IME ● IME.isSupported

Microphone.isSupported or
マイク ● ● ▲ Microphone.getMicrophone()

マルチタッチ ● ●

ジェスチャー ● ●


10

主なAPI対応一覧 / 出力＆ウィンドウ系


カメラロール ● MediaLibrary.supportsAddImage

コンテキストメニュー ● ContextMenu.isSupported

フルスクリーン ● ● ● ﬂash.events.fullScreen (property)

ネイティブウィンドウ ● NativeWindow.isSupported

ネイティブメニュー ● NativeMenu.isSupported

プリントジョブ ● PrintJob.isSupported

デバイスの向き ● Stage.supportsOrientationChange


11

主なAPI対応一覧 / コア系その1


DRM ● ● DRMManager.isSupported

暗号化ストレージ ● EncryptedLocalStore.isSupported

ファイルシステム ● ● ●

GPU ● ● ● ※No API

HTMLLoader ● （●） HTMLLoader.isSupported

StageWebView ● ● StageWebView.isSupported

LocalConnection ● ● LocalConnection.isSupported


12

主なAPI対応一覧 / コア系その2


PDF ● HTMLLoader.pdfCapability

ネイティブプロセス ● NativeProcess.isSupported

NativeApplication.
ログイン時に起動 ● supportsStartAtLogin

SQL ● ● ●

SWF in HTML ● HTMLLoader.swfCapability

TLF レンダリング ● ● ●

TLF インプット ●

Cache as bitmap ● ●


13

Adobe AIR Proﬁles

http://bit.ly/AirProﬁles


14

AIR for Android
開発ツール
Development Tools


15

AIR for Android アプリケーション開発

Android向けの場合は、Flashベースのパターンのみ
（※FlashベースのAIRもAPKファイルに再パッケージ可能）


16

開発ツール

自由度の高いUI系
ex. Gameアプリ

Flash Professional

+
データ表示系
Flash Builder Flex ex. Twitterアプリ


17

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

18

Flash Builderでのアプリケーション実行とデバッグ

PC上で実行＆デバッグ
ADL (AIR Debug Launcher）で
シミュレーション
デバイスの種類も選択可

デバイス上で実行＆デバッグ
USB接続したデバイスに転送
ブレークポイントのデバッグ可


19

Flex “Hero” 概要
Introduction of Flex “Hero”


20

Flex の進化


21

Flex Mobileの特徴

SKIN
モバイル用スキン

NAVIGATION
画面遷移コントロール

LAYOUT
画面レイアウト


22


SKIN

NAVIGATION

LAYOUT


23


コンポーネントサイズ
デフォルトでタッチ操作に対応したサイズ
<s:Button id="button" label="{button.height} : {button.width}"/>

>> 実行結果
// PC用デフォルトスキン

// モバイル用デフォルトスキン

タッチ操作
デフォルトでスワイプなどのジェスチャーに対応
<s:List dataProvider="{employeeList}"
width="100%" height="100%"/>


24


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>


25


SKIN

NAVIGATION

LAYOUT


26


多階層の画面構造の場合
自前の遷移コントロールは大変…

Restaurant
Finder

Nearby Search Bookmarks Reviews Settings

Edit View
Results Edit Filter Edit Review
Bookmarks Review

Detail Map View

Make
Add Review
Reservation


27


ビュースタック
「画面」=「View」としてFlexフレームワークがスタックをコントロール


28


Viewのスタック構造
<s:MobileApplication> Main application
(MobileApplication)
アプリケーションのルート
コンポーネント

(ViewNavigator)
<s:ViewNavigator>
Viewのコントロールを担当
MobileApplicationに一つだけ
自動生成される Home (View)
“navigator” でViewから参照可能
Contacts (View)
<s:View>
一つの画面表示を担当
Search (View)
別のViewに遷移すると破棄される
※Viewのデータは “data” に自動キャッシュ


29


Viewのナビゲーション
次の画面へ
navigator.pushView(NextViewClassName, data);
前の画面へ
navigator.pop();
最初の画面へ
navigator.popToFirstView();


30


SKIN

NAVIGATION

LAYOUT


31


Viewのレイアウト ActionBarのレイアウト

navigationContent
画面遷移のための操作ボタンを配置
e.g.「戻る」ボタンや「ホーム」ボタンなど

titleContent
画面タイトルや検索用のテキスト入力などを配置
（タイトル文字列は、titleプロパティで指定）

actionContent
その画面での操作ボタンを配置
e.g.「リロード」ボタンや「検索実行」ボタン、
　　「編集」ボタンなど


32


画面向きに応じたレイアウト
デフォルトで自動レイアウト
State設定で自由なレイアウト
横長（landscape）/ 縦長（portrait）

<s:states>
<s:State name="landscape" />
<s:State name="portrait" />
</s:states>

“landscape” “portrait”

33


SKIN

NAVIGATION

LAYOUT


34

Flexで作るAIR Androidアプリ

AIR Android アプリケーション

モバイル用スキンカメラ／カメラロール
画面遷移コントロール加速度センサー
画面レイアウト GPS
標準コンポーネントローカルDB
などマルチタッチ/ジェスチャー
など


35

技術情報
Learning & Community


36

チュートリアル：PriceCom

Flexで作るAndroidアプリ開発
http://adobe.ly/FlexAndroid01
価格.com Webサービスを使った最安値検索アプリ
初心者向けのAdobe Developer Connection記事

轟啓介
アドビシステムズ株式会社
@keisuke322


37

チュートリアル：EmployeeDirectory

Tutorial: Flex for Android in 90 Minutes
http://coenraets.org/blog/2010/12/tutorial-ﬂex-
for-android-in-90-minutes/
翻訳版：「Cuaoar.jp」（上条彰宏氏）
http://cuaoar.jp/2011/01/ﬂex-android.html

Christophe Coenraets
アドビシステムズ社
テクニカルエバンジェリスト
http://coenraets.org/


38

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/?? （土）@沖縄


39

本日のまとめ

Adobe AIRはクロスデバイスに対応
PC / Smartphone / SmartTV
ロジックの再利用が可能

AIR for Androidは
Flashで柔軟に : 自由度の高いUI系アプリ
Flexで効率良く : データ表示系のアプリ
Flash & Flex のハイブリッドは最強

Flex “Hero” はモバイルにも最適化
SKIN : モバイルスキンでタッチ操作を快適に
NAVIGATION : 画面遷移コントロールをお手軽に
LAYOUT : 画面レイアウトを的確に


40


41


42

補足＆関連情報


43

FlashとFlexの特性

Flash（ActionScript）
自由度の高いUI/コンテンツ作成が可能
デザイン指向のアプリケーション向け
ゲームなど

Flex（ActionScript + MXML）
UIコンポーネントやサーバ連携機能が備
わったFlashのフレームワーク
（無償オープンソース）
Webアプリ（Flash）とDesktopアプリ
（AIR）に対応
次期バージョンでモバイルに対応
モバイルアプリの画面遷移機構も提供
開発者にはFlex利用がオススメ


44

開発ツール

Adobe Flash Builder “Burrito” (Ver 4.5 preview)
http://labs.adobe.com/technologies/ﬂashbuilder_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/ﬂexsdk_hero/（無償）


45

開発ツール

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プロジェクトをウィザード形式で生成可能


46

関連技術記事

『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


47


48

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

More Related Content

Similar to Flexでサクッと作れ！Androidアプリ開発のススメ (20)

More from Keisuke Todoroki (18)

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