View
1
Download
0
Category
Preview:
Citation preview
スマートフォンアプリ開発と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
Recommended