Air for android with flex

轟啓介 | アドビシステムズ株式会社デベロッパーマーケティング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）とその実行環境（ランタイム）

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

主な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」を検索

主なAPI対応一覧 / 入力系

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

加速度センサー

カメラ

位置情報

マイク

マルチタッチ

ジェスチャー

● Accelermeter.isSupported

● ● ▲ Camera.isSupported

● Geolocation.isSupported

● IME.isSupported

● ● ▲ Microphone.isSupported orMicrophone.getMicrophone()

● ●

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

カメラロール

コンテキストメニュー

フルスクリーン

ネイティブウィンドウ

ネイティブメニュー

プリントジョブ

デバイスの向き

● MediaLibrary.supportsAddImage

● ContextMenu.isSupported

● ● ● flash.events.fullScreen (property)

● NativeWindow.isSupported

● NativeMenu.isSupported

● PrintJob.isSupported

● Stage.supportsOrientationChange

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

暗号化ストレージ

ファイルシステム

HTMLLoader

StageWebView

LocalConnection

● ● DRMManager.isSupported

● EncryptedLocalStore.isSupported

● ● ●

● ● ● ※No API

● （●） HTMLLoader.isSupported

● ● StageWebView.isSupported

● ● LocalConnection.isSupported

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

ネイティブプロセス

ログイン時に起動

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通りの開発パターンがある

Packaging

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

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

Packaging

開発ツール

Flash Professional

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

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

Flash Builder & Flex

Flash Builder Flex

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

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

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

“Burrito” “Hero”

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

Flexの進化

Mobile

Flex “Hero”

Desktop

Flex 4Flex 3

Flex 2Flex 1

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

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

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

モバイル環境にも最適化

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

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

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

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

画面階層のコントロール

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

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フレームワークがスタックをコントロール

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();

Viewのレイアウト

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/

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/

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

Air for android with flex

Technology

AHS Air Flex HRU Brochure - Air Handling Systems Ltd

Memory Management for Flex and AIR Developers

air dev guide flex

Flex Android 90 Minutes

Construindo aplicativos no Adobe AIR - vilourenco.com.br · Construindo aplicativos no Adobe ... Criando seu primeiro aplicativo do AIR para Android com o Flex SDK ... Desenvolvendo

USER GUIDE Insignia Flex™ Android Tablet

Air Duct Council - JPL Flex

Flex presentation for Paris Android User group PAUG

Building mobile applications with Flex · 2019-09-11 · Flex Class Library MXML ActionScript Compile SOAP ... HTML5/JS Client Java Client Flex Client Flex Client Flex Client Android

735 Flex Coil 1720 Air Cart

Flex et AIR

Writing air and flex (xml) using a text editor. downloads Download the adobe flex and air sdk (free) Install

Alina Cojocariu - Flex and Android tests with Ranorex

Lanzamiento Adobe AIR y Flex 3

Air superiority for Android Apps

Exposicion Adobe flex - air

Developing flex apps for android

Designing Flex and AIR applications

Android Apps with Adobe AIR

Flex apps for Android