スマートフォンアプリ開発とFlex フレームワーク "Hero" 入門

ClockMaker 池田泰延2010/11/25 Adobe MAX 2010 RETWEET

アジェンダ

• Adobe AIR 2.5と開発環境

• Flex SDK Hero入門

• スマートフォン向けインターフェース

• Adobe AIR 2.5の機能

Adobe AIR 2.5と開発環境

Adobe AIR 2.5

AIR for Android

• Adobe AIRを使えばWindows、Mac OS、Linuxの環境で動くデスクトップアプリケーションを構築できた

• Adobe AIR 2.5ではタッチスクリーン式のスマートフォンやタブレット向けの開発もサポートされた

AIR ProfilesDesktop Mobile TV

HTMLLoader ●Contextual Menu ●NativeWindow ●

NativeMenu ●ELS ●

DRM ● ●LocalConnection ● ●

IME ● ●Multi-touch ● ●

StageWebView ● ●Geolocation ●

Accelerometer ●Stage Orientation ●

Camera UI ●

NEW IN 2.5

NEW IN 2.5

オーサリング

Flash Builder Burrito

AIR SDK

(フリーのコマンドラインツール)

Flash Professional CS5

(Extension for Adobe AIR 2.5)

キーワード

• フレームワーク：Flex SDK 「Hero」

• 開発環境：Flash Builder 「Burrito」

Flexとは

• 無償のオープンソースのフレームワーク

• デザインには MXML を利用し、プログラムには ActionScript を利用

Flex SDK Hero

• 従来のコンポーネントを、タッチスクリーン式のデバイス上でそのまま利用できるように最適化＆機能拡張

• スマートフォンに特化した新しいコンポーネントの追加

Flex SDK「Hero」プレビュー版に搭載されているモバイルコンポーネントスキンの例

Flex SDK Heroで追加された新しいSparkコンポーネント

• DataGrid

• Form

• Image

• Date/Time

• Number

• Currency Formatters

Flash Builder Burrito

• Flash Builder 4の次期バージョン

• Eclipseをベースにした開発環境

• Flex SDK Heroも搭載

Flex SDK Hero入門

Hello World with Hero

Hello World with Hero

プロジェクトの設定(フォルダの場所、プロジェクト名、SDKのバージョン)

Hello World with Hero

モバイル設定(方向の設定、フルスクリーン)

サーバー設定 ビルドパス

基本的にはデフォルトでOK

Hello World with Heroデフォルトのアプリケーション

初めに表示されるビュー

アプリケーション設定のXML

デバッグ

リリースビルド

実機での確認

スマートフォン向けインターフェース

ViewNavigator

• MobileApplication の UI は複数の View の組み合わせから構成される

• View 間の切り替えを管理するための

ViewNavigator が提供されている

ViewNavigator

ViewNavigator(無限にビューを追加するデモ)

ViewNavigator// 新しい画面を追加

navigator.pushView(◯◯◯View);

// 最後の画面を削除

navigator.popView();

// 初めに表示した画面まで戻る

navigator.popToFirstView();

タッチスクリーンに最適化

Clickが発生する条件

InteractiveObject でマウスダウンとマウスアップが両方発生したとき

タッチスクロール実装の留意点

スクロールとクリックのバッティング擦る可能性が高い。

MouseMoveが発生したときにクリックが一時的に解除されるようにする必要がある。

実装例

Pure ASでタッチスクロール対応

JPPScrollbar を利用http://www.libspark.org/wiki/alumican/JPPScrollbar

Orientation

portraitlandscape

Orientation

<s:states>

<s:State name="portrait"/>

<s:State name="landscape"/>

</s:states>

ステートを定義

Orientation

<mx:UIComponent id="◯◯◯"

visible.portrait="false"

visible.landscape="true" />

ステートをvisibleなどに適用

Adobe AIR 2.5の機能

HTMLレンダリングHTMLLoader

•WebKit

•AS/JSブリッジ

•Displayリストの一部

•デスクトップのみ

StageWebView

•システムのエンジン

•スクリプトのブリッジは不可

•Stageのトップで表示

•AIR2.5のデスクトップとモバ

イルで利用可

StageWebViewでブラウザを内蔵可能(HTMLページ内のFlashも再生可能)

StageWebView// ステージウェブビューを作成

var webView:StageWebView = new StageWebView();

// ステージウェブビューを表示するステージを設定

webView.stage = stage;

// ビューポートの幅・高さを更新

webView.viewPort = new Rectangle(0, 0, 800, 480);

// URLを指定

webView.loadURL(data as String);

StageWebView

// ステージウェブビューを破棄

webView.dispose();

webView = null;

カメラ機能

• Camera UI

デバイスのネイティ

ブカメラを呼び出す

クラス

• Camera

デバイスのカメラを

Flashのステージ内に

映し出すカメラ

参考サイト• Adobe Developer Connection

http://www.adobesystems.ca/jp/devnet/

• Adobe MAX 2010 - 基調講演＆全セッションをオンデマンド配信中！http://www.adobe.com/jp/joc/max/ondemand/

ご清聴ありがとうございました。

ClockMaker 池田泰延twitter id : clockmaker