Air for android with flex

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

轟啓介 | アドビシステムズ株式会社デベロッパーマーケティングAndroidアプリケーション開発 with Adobe FlexTwitter ID : @keisuke322


Agenda

AIR for Android概要 Adobe AIR とは API の紹介

AIR for Android開発ツール Flex “Hero” 概要補足＆関連情報


AIR for Android 概要AIR for Android Overall


Adobe AIRとは

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

4

Win / Mac / Linux Android / iOS /Blackberry Tablet OS

Samsung / ...PC Smartphone SmartTV


主なAIR API / for PC

リソースアクセス関連ファイルシステムアクセス外部ストレージアクセスローカルDB（SQLite搭載）ローカルマイクAPI

ネットワーク関連オンライン／オフライン検知 Socket（サーバ／クライアント） UDP、 TLS / SSL、IPv6、…

表示関連 HTML表示（Webkit搭載） PDF表示

ネイティブプロセスAPI（標準入出力） etc…

Browser(WebKit)

Database(SQLite)


Tour de Flex

PC向けのFlex / AIR のサンプル集アプリソースコード付きhttp://flex.org/tour

6


主なAIR API / for Smartphone (Android)

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


Tour de Mobile Flex

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

8


主なAPI対応一覧 / 入力系

9

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

加速度センサー

カメラ

位置情報

IME

マイク

マルチタッチ

ジェスチャー

● Accelermeter.isSupported

● ● ▲ Camera.isSupported

● Geolocation.isSupported

● IME.isSupported

● ● ▲ Microphone.isSupported orMicrophone.getMicrophone()

● ●

● ●


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

10


カメラロール

コンテキストメニュー

フルスクリーン

ネイティブウィンドウ

ネイティブメニュー

プリントジョブ

デバイスの向き

● MediaLibrary.supportsAddImage

● ContextMenu.isSupported

● ● ● flash.events.fullScreen (property)

● NativeWindow.isSupported

● NativeMenu.isSupported

● PrintJob.isSupported

● Stage.supportsOrientationChange


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

11


DRM

暗号化ストレージ

ファイルシステム

GPU

HTMLLoader

StageWebView

LocalConnection

● ● DRMManager.isSupported

● EncryptedLocalStore.isSupported

● ● ●

● ● ● ※No API

● （●） HTMLLoader.isSupported

● ● StageWebView.isSupported

● ● LocalConnection.isSupported


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

12


PDF

ネイティブプロセス

ログイン時に起動

SQL

SWF in HTML

TLF レンダリング

TLF インプット

Cache as bitmap

● HTMLLoader.pdfCapability

● NativeProcess.isSupported

● NativeApplication.supportsStartAtLogin

● ● ●

● HTMLLoader.swfCapability

● ● ●

●

● ●


AIR for Android開発ツールDevelopment Tools


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

PC向けの場合は、2通りの開発パターンがある

14

+

Packaging


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

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

15

Packaging


開発ツール

16

Flash Professional

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

+

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


Flash Builder & Flex

17

Flash Builder Flex

FlashやAIRアプリを効率良く開発するEclipseベースのIDEFlex SDKを同梱

FlashやAIRアプリを効率良く開発するオープンソースのフレームワークを含むSDK

2011年上半期にAndroidアプリ開発に対応予定プレビュー版が絶賛公開中（無償）

“Burrito” “Hero”


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

18


Flexの進化

19

Mobile

Flex “Hero”

Desktop

Flex 4Flex 3

Web

Flex 2Flex 1

モバイル用のスキンコンポーネントサイズ

デフォルトでタッチ操作に対応したサイズ

タッチ操作デフォルトでスワイプなどのジェスチャーに対応


モバイル環境にも最適化

20

<s:Button id="button" label="{button.height} : {button.width}"/>

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

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

<s:List dataProvider=” {employees}”width=”100%” height=”100%”/>


画面階層のコントロール

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

21

Restaurant Finder

Search

Results

Detail

Make Reservation Add Review

Map View

Edit Filter

Nearby Bookmarks

Edit Bookmarks

Reviews

View Review Edit Review

Settings


画面階層のコントロール

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

22


Viewのスタック構造

<s:MobileApplication> アプリケーションのルートコンポーネント

<s:ViewNavigator> Viewのコントロールを担当 MobileApplicationに一つだけ自動生成される

“navigator” でViewから参照可能

<s:View> 一つの画面表示を担当別のViewに遷移すると破棄される※Viewのデータは “data” に自動キャッシュ

Main application (MobileApplication)

(ViewNavigator)

Home (View)

Contacts (View)

Search (View)


Viewのナビゲーション

次の画面へ navigator.pushView(NextViewClassName, data);

前の画面へ navigator.pop();

最初の画面へ navigator.popToFirstView();

24


Viewのレイアウト

25


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

26

Christophe Coenraetsアドビシステムズ社

テクニカルエバンジェリストhttp://coenraets.org/


Learning

Adobe Developer Connection (ADC) 技術者向けの情報サイト http://www.adobe.com/jp/devnet/

Flex User Group Japan (FxUG) 世界最大規模のFlex開発者コミュニティ http://fxug.net/ 次回勉強会：1/12（水）＠Adobe

AIR / Flash for Android Group (AF4A) Flashクリエーター系の「日本アンドロイドの会」のワーキンググループ

https://groups.google.com/group/AF4A 次回勉強会：2/2（水）＠Adobe

AIR LaunchPad サンプルコードを生成する無償ツール http://labs.adobe.com/technologies/airlaunchpad/

27

Flex User Group

AIR/Flash for AndroidWorking Group

AIR LaunchPad


本日のまとめ

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

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

Flex “Hero” はモバイルにも最適化モバイルスキンでタッチ操作を快適に画面階層コントロールをお手軽に


補足＆関連情報


FlashとFlexの特性

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

ゲームなど

Flex（ActionScript + MXML） UIコンポーネントやサーバ連携機能が備わったFlashのフレームワーク（無償オープンソース）

Webアプリ（Flash）とDesktopアプリ（AIR）に対応

次期バージョンでモバイルに対応モバイルアプリの画面遷移機構も提供開発者にはFlex利用がオススメ


開発ツール

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/（無償）


開発ツール

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


関連技術記事

『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


Technology

Air for android with flex