flex フレームワーク hero 入門 -...
TRANSCRIPT
![Page 1: Flex フレームワーク Hero 入門 - clockmaker.jpclockmaker.jp/labs/101126_maxjp/adobe_max_retweet.pdf · AIR for Android • Adobe AIRを使えばWindows、Mac OS、 Linuxの環境で動くデスクトップアプリ](https://reader035.vdocuments.net/reader035/viewer/2022070822/5f28abe75d2a682c532d051d/html5/thumbnails/1.jpg)
スマートフォンアプリ開発とFlex フレームワーク "Hero" 入門
ClockMaker 池田泰延2010/11/25 Adobe MAX 2010 RETWEET
![Page 2: Flex フレームワーク Hero 入門 - clockmaker.jpclockmaker.jp/labs/101126_maxjp/adobe_max_retweet.pdf · AIR for Android • Adobe AIRを使えばWindows、Mac OS、 Linuxの環境で動くデスクトップアプリ](https://reader035.vdocuments.net/reader035/viewer/2022070822/5f28abe75d2a682c532d051d/html5/thumbnails/2.jpg)
アジェンダ
• Adobe AIR 2.5と開発環境
• Flex SDK Hero入門
• スマートフォン向けインターフェース
• Adobe AIR 2.5の機能
![Page 3: Flex フレームワーク Hero 入門 - clockmaker.jpclockmaker.jp/labs/101126_maxjp/adobe_max_retweet.pdf · AIR for Android • Adobe AIRを使えばWindows、Mac OS、 Linuxの環境で動くデスクトップアプリ](https://reader035.vdocuments.net/reader035/viewer/2022070822/5f28abe75d2a682c532d051d/html5/thumbnails/3.jpg)
Adobe AIR 2.5と開発環境
![Page 4: Flex フレームワーク Hero 入門 - clockmaker.jpclockmaker.jp/labs/101126_maxjp/adobe_max_retweet.pdf · AIR for Android • Adobe AIRを使えばWindows、Mac OS、 Linuxの環境で動くデスクトップアプリ](https://reader035.vdocuments.net/reader035/viewer/2022070822/5f28abe75d2a682c532d051d/html5/thumbnails/4.jpg)
Adobe AIR 2.5
![Page 5: Flex フレームワーク Hero 入門 - clockmaker.jpclockmaker.jp/labs/101126_maxjp/adobe_max_retweet.pdf · AIR for Android • Adobe AIRを使えばWindows、Mac OS、 Linuxの環境で動くデスクトップアプリ](https://reader035.vdocuments.net/reader035/viewer/2022070822/5f28abe75d2a682c532d051d/html5/thumbnails/5.jpg)
AIR for Android
• Adobe AIRを使えばWindows、Mac OS、Linuxの環境で動くデスクトップアプリケーションを構築できた
• Adobe AIR 2.5ではタッチスクリーン式のスマートフォンやタブレット向けの開発もサポートされた
![Page 6: Flex フレームワーク Hero 入門 - clockmaker.jpclockmaker.jp/labs/101126_maxjp/adobe_max_retweet.pdf · AIR for Android • Adobe AIRを使えばWindows、Mac OS、 Linuxの環境で動くデスクトップアプリ](https://reader035.vdocuments.net/reader035/viewer/2022070822/5f28abe75d2a682c532d051d/html5/thumbnails/6.jpg)
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
![Page 7: Flex フレームワーク Hero 入門 - clockmaker.jpclockmaker.jp/labs/101126_maxjp/adobe_max_retweet.pdf · AIR for Android • Adobe AIRを使えばWindows、Mac OS、 Linuxの環境で動くデスクトップアプリ](https://reader035.vdocuments.net/reader035/viewer/2022070822/5f28abe75d2a682c532d051d/html5/thumbnails/7.jpg)
オーサリング
Flash Builder Burrito
AIR SDK
(フリーのコマンドラインツール)
Flash Professional CS5
(Extension for Adobe AIR 2.5)
![Page 8: Flex フレームワーク Hero 入門 - clockmaker.jpclockmaker.jp/labs/101126_maxjp/adobe_max_retweet.pdf · AIR for Android • Adobe AIRを使えばWindows、Mac OS、 Linuxの環境で動くデスクトップアプリ](https://reader035.vdocuments.net/reader035/viewer/2022070822/5f28abe75d2a682c532d051d/html5/thumbnails/8.jpg)
キーワード
• フレームワーク:Flex SDK 「Hero」
• 開発環境:Flash Builder 「Burrito」
![Page 9: Flex フレームワーク Hero 入門 - clockmaker.jpclockmaker.jp/labs/101126_maxjp/adobe_max_retweet.pdf · AIR for Android • Adobe AIRを使えばWindows、Mac OS、 Linuxの環境で動くデスクトップアプリ](https://reader035.vdocuments.net/reader035/viewer/2022070822/5f28abe75d2a682c532d051d/html5/thumbnails/9.jpg)
Flexとは
• 無償のオープンソースのフレームワーク
• デザインには MXML を利用し、プログラムには ActionScript を利用
![Page 10: Flex フレームワーク Hero 入門 - clockmaker.jpclockmaker.jp/labs/101126_maxjp/adobe_max_retweet.pdf · AIR for Android • Adobe AIRを使えばWindows、Mac OS、 Linuxの環境で動くデスクトップアプリ](https://reader035.vdocuments.net/reader035/viewer/2022070822/5f28abe75d2a682c532d051d/html5/thumbnails/10.jpg)
Flex SDK Hero
• 従来のコンポーネントを、タッチスクリーン式のデバイス上でそのまま利用できるように最適化&機能拡張
• スマートフォンに特化した新しいコンポーネントの追加
![Page 11: Flex フレームワーク Hero 入門 - clockmaker.jpclockmaker.jp/labs/101126_maxjp/adobe_max_retweet.pdf · AIR for Android • Adobe AIRを使えばWindows、Mac OS、 Linuxの環境で動くデスクトップアプリ](https://reader035.vdocuments.net/reader035/viewer/2022070822/5f28abe75d2a682c532d051d/html5/thumbnails/11.jpg)
Flex SDK「Hero」プレビュー版に搭載されているモバイルコンポーネントスキンの例
![Page 12: Flex フレームワーク Hero 入門 - clockmaker.jpclockmaker.jp/labs/101126_maxjp/adobe_max_retweet.pdf · AIR for Android • Adobe AIRを使えばWindows、Mac OS、 Linuxの環境で動くデスクトップアプリ](https://reader035.vdocuments.net/reader035/viewer/2022070822/5f28abe75d2a682c532d051d/html5/thumbnails/12.jpg)
Flex SDK Heroで追加された新しいSparkコンポーネント
• DataGrid
• Form
• Image
• Date/Time
• Number
• Currency Formatters
![Page 13: Flex フレームワーク Hero 入門 - clockmaker.jpclockmaker.jp/labs/101126_maxjp/adobe_max_retweet.pdf · AIR for Android • Adobe AIRを使えばWindows、Mac OS、 Linuxの環境で動くデスクトップアプリ](https://reader035.vdocuments.net/reader035/viewer/2022070822/5f28abe75d2a682c532d051d/html5/thumbnails/13.jpg)
Flash Builder Burrito
• Flash Builder 4の次期バージョン
• Eclipseをベースにした開発環境
• Flex SDK Heroも搭載
![Page 14: Flex フレームワーク Hero 入門 - clockmaker.jpclockmaker.jp/labs/101126_maxjp/adobe_max_retweet.pdf · AIR for Android • Adobe AIRを使えばWindows、Mac OS、 Linuxの環境で動くデスクトップアプリ](https://reader035.vdocuments.net/reader035/viewer/2022070822/5f28abe75d2a682c532d051d/html5/thumbnails/14.jpg)
Flex SDK Hero入門
![Page 15: Flex フレームワーク Hero 入門 - clockmaker.jpclockmaker.jp/labs/101126_maxjp/adobe_max_retweet.pdf · AIR for Android • Adobe AIRを使えばWindows、Mac OS、 Linuxの環境で動くデスクトップアプリ](https://reader035.vdocuments.net/reader035/viewer/2022070822/5f28abe75d2a682c532d051d/html5/thumbnails/15.jpg)
Hello World with Hero
![Page 16: Flex フレームワーク Hero 入門 - clockmaker.jpclockmaker.jp/labs/101126_maxjp/adobe_max_retweet.pdf · AIR for Android • Adobe AIRを使えばWindows、Mac OS、 Linuxの環境で動くデスクトップアプリ](https://reader035.vdocuments.net/reader035/viewer/2022070822/5f28abe75d2a682c532d051d/html5/thumbnails/16.jpg)
Hello World with Hero
プロジェクトの設定(フォルダの場所、プロジェクト名、SDKのバージョン)
![Page 17: Flex フレームワーク Hero 入門 - clockmaker.jpclockmaker.jp/labs/101126_maxjp/adobe_max_retweet.pdf · AIR for Android • Adobe AIRを使えばWindows、Mac OS、 Linuxの環境で動くデスクトップアプリ](https://reader035.vdocuments.net/reader035/viewer/2022070822/5f28abe75d2a682c532d051d/html5/thumbnails/17.jpg)
Hello World with Hero
モバイル設定(方向の設定、フルスクリーン)
サーバー設定 ビルドパス
基本的にはデフォルトでOK
![Page 18: Flex フレームワーク Hero 入門 - clockmaker.jpclockmaker.jp/labs/101126_maxjp/adobe_max_retweet.pdf · AIR for Android • Adobe AIRを使えばWindows、Mac OS、 Linuxの環境で動くデスクトップアプリ](https://reader035.vdocuments.net/reader035/viewer/2022070822/5f28abe75d2a682c532d051d/html5/thumbnails/18.jpg)
Hello World with Heroデフォルトのアプリケーション
初めに表示されるビュー
アプリケーション設定のXML
![Page 19: Flex フレームワーク Hero 入門 - clockmaker.jpclockmaker.jp/labs/101126_maxjp/adobe_max_retweet.pdf · AIR for Android • Adobe AIRを使えばWindows、Mac OS、 Linuxの環境で動くデスクトップアプリ](https://reader035.vdocuments.net/reader035/viewer/2022070822/5f28abe75d2a682c532d051d/html5/thumbnails/19.jpg)
デバッグ
![Page 20: Flex フレームワーク Hero 入門 - clockmaker.jpclockmaker.jp/labs/101126_maxjp/adobe_max_retweet.pdf · AIR for Android • Adobe AIRを使えばWindows、Mac OS、 Linuxの環境で動くデスクトップアプリ](https://reader035.vdocuments.net/reader035/viewer/2022070822/5f28abe75d2a682c532d051d/html5/thumbnails/20.jpg)
リリースビルド
![Page 21: Flex フレームワーク Hero 入門 - clockmaker.jpclockmaker.jp/labs/101126_maxjp/adobe_max_retweet.pdf · AIR for Android • Adobe AIRを使えばWindows、Mac OS、 Linuxの環境で動くデスクトップアプリ](https://reader035.vdocuments.net/reader035/viewer/2022070822/5f28abe75d2a682c532d051d/html5/thumbnails/21.jpg)
実機での確認
![Page 22: Flex フレームワーク Hero 入門 - clockmaker.jpclockmaker.jp/labs/101126_maxjp/adobe_max_retweet.pdf · AIR for Android • Adobe AIRを使えばWindows、Mac OS、 Linuxの環境で動くデスクトップアプリ](https://reader035.vdocuments.net/reader035/viewer/2022070822/5f28abe75d2a682c532d051d/html5/thumbnails/22.jpg)
スマートフォン向けインターフェース
![Page 23: Flex フレームワーク Hero 入門 - clockmaker.jpclockmaker.jp/labs/101126_maxjp/adobe_max_retweet.pdf · AIR for Android • Adobe AIRを使えばWindows、Mac OS、 Linuxの環境で動くデスクトップアプリ](https://reader035.vdocuments.net/reader035/viewer/2022070822/5f28abe75d2a682c532d051d/html5/thumbnails/23.jpg)
ViewNavigator
• MobileApplication の UI は複数の View の組み合わせから構成される
• View 間の切り替えを管理するための
ViewNavigator が提供されている
![Page 24: Flex フレームワーク Hero 入門 - clockmaker.jpclockmaker.jp/labs/101126_maxjp/adobe_max_retweet.pdf · AIR for Android • Adobe AIRを使えばWindows、Mac OS、 Linuxの環境で動くデスクトップアプリ](https://reader035.vdocuments.net/reader035/viewer/2022070822/5f28abe75d2a682c532d051d/html5/thumbnails/24.jpg)
ViewNavigator
![Page 25: Flex フレームワーク Hero 入門 - clockmaker.jpclockmaker.jp/labs/101126_maxjp/adobe_max_retweet.pdf · AIR for Android • Adobe AIRを使えばWindows、Mac OS、 Linuxの環境で動くデスクトップアプリ](https://reader035.vdocuments.net/reader035/viewer/2022070822/5f28abe75d2a682c532d051d/html5/thumbnails/25.jpg)
ViewNavigator(無限にビューを追加するデモ)
![Page 26: Flex フレームワーク Hero 入門 - clockmaker.jpclockmaker.jp/labs/101126_maxjp/adobe_max_retweet.pdf · AIR for Android • Adobe AIRを使えばWindows、Mac OS、 Linuxの環境で動くデスクトップアプリ](https://reader035.vdocuments.net/reader035/viewer/2022070822/5f28abe75d2a682c532d051d/html5/thumbnails/26.jpg)
ViewNavigator// 新しい画面を追加
navigator.pushView(◯◯◯View);
// 最後の画面を削除
navigator.popView();
// 初めに表示した画面まで戻る
navigator.popToFirstView();
![Page 27: Flex フレームワーク Hero 入門 - clockmaker.jpclockmaker.jp/labs/101126_maxjp/adobe_max_retweet.pdf · AIR for Android • Adobe AIRを使えばWindows、Mac OS、 Linuxの環境で動くデスクトップアプリ](https://reader035.vdocuments.net/reader035/viewer/2022070822/5f28abe75d2a682c532d051d/html5/thumbnails/27.jpg)
タッチスクリーンに最適化
![Page 28: Flex フレームワーク Hero 入門 - clockmaker.jpclockmaker.jp/labs/101126_maxjp/adobe_max_retweet.pdf · AIR for Android • Adobe AIRを使えばWindows、Mac OS、 Linuxの環境で動くデスクトップアプリ](https://reader035.vdocuments.net/reader035/viewer/2022070822/5f28abe75d2a682c532d051d/html5/thumbnails/28.jpg)
Clickが発生する条件
InteractiveObject でマウスダウンとマウスアップが両方発生したとき
![Page 29: Flex フレームワーク Hero 入門 - clockmaker.jpclockmaker.jp/labs/101126_maxjp/adobe_max_retweet.pdf · AIR for Android • Adobe AIRを使えばWindows、Mac OS、 Linuxの環境で動くデスクトップアプリ](https://reader035.vdocuments.net/reader035/viewer/2022070822/5f28abe75d2a682c532d051d/html5/thumbnails/29.jpg)
タッチスクロール実装の留意点
スクロールとクリックのバッティング擦る可能性が高い。
MouseMoveが発生したときにクリックが一時的に解除されるようにする必要がある。
![Page 30: Flex フレームワーク Hero 入門 - clockmaker.jpclockmaker.jp/labs/101126_maxjp/adobe_max_retweet.pdf · AIR for Android • Adobe AIRを使えばWindows、Mac OS、 Linuxの環境で動くデスクトップアプリ](https://reader035.vdocuments.net/reader035/viewer/2022070822/5f28abe75d2a682c532d051d/html5/thumbnails/30.jpg)
実装例
Pure ASでタッチスクロール対応
JPPScrollbar を利用http://www.libspark.org/wiki/alumican/JPPScrollbar
![Page 31: Flex フレームワーク Hero 入門 - clockmaker.jpclockmaker.jp/labs/101126_maxjp/adobe_max_retweet.pdf · AIR for Android • Adobe AIRを使えばWindows、Mac OS、 Linuxの環境で動くデスクトップアプリ](https://reader035.vdocuments.net/reader035/viewer/2022070822/5f28abe75d2a682c532d051d/html5/thumbnails/31.jpg)
Orientation
portraitlandscape
![Page 32: Flex フレームワーク Hero 入門 - clockmaker.jpclockmaker.jp/labs/101126_maxjp/adobe_max_retweet.pdf · AIR for Android • Adobe AIRを使えばWindows、Mac OS、 Linuxの環境で動くデスクトップアプリ](https://reader035.vdocuments.net/reader035/viewer/2022070822/5f28abe75d2a682c532d051d/html5/thumbnails/32.jpg)
Orientation
<s:states>
<s:State name="portrait"/>
<s:State name="landscape"/>
</s:states>
ステートを定義
![Page 33: Flex フレームワーク Hero 入門 - clockmaker.jpclockmaker.jp/labs/101126_maxjp/adobe_max_retweet.pdf · AIR for Android • Adobe AIRを使えばWindows、Mac OS、 Linuxの環境で動くデスクトップアプリ](https://reader035.vdocuments.net/reader035/viewer/2022070822/5f28abe75d2a682c532d051d/html5/thumbnails/33.jpg)
Orientation
<mx:UIComponent id="◯◯◯"
visible.portrait="false"
visible.landscape="true" />
ステートをvisibleなどに適用
![Page 34: Flex フレームワーク Hero 入門 - clockmaker.jpclockmaker.jp/labs/101126_maxjp/adobe_max_retweet.pdf · AIR for Android • Adobe AIRを使えばWindows、Mac OS、 Linuxの環境で動くデスクトップアプリ](https://reader035.vdocuments.net/reader035/viewer/2022070822/5f28abe75d2a682c532d051d/html5/thumbnails/34.jpg)
Adobe AIR 2.5の機能
![Page 35: Flex フレームワーク Hero 入門 - clockmaker.jpclockmaker.jp/labs/101126_maxjp/adobe_max_retweet.pdf · AIR for Android • Adobe AIRを使えばWindows、Mac OS、 Linuxの環境で動くデスクトップアプリ](https://reader035.vdocuments.net/reader035/viewer/2022070822/5f28abe75d2a682c532d051d/html5/thumbnails/35.jpg)
HTMLレンダリングHTMLLoader
•WebKit
•AS/JSブリッジ
•Displayリストの一部
•デスクトップのみ
StageWebView
•システムのエンジン
•スクリプトのブリッジは不可
•Stageのトップで表示
•AIR2.5のデスクトップとモバ
イルで利用可
![Page 36: Flex フレームワーク Hero 入門 - clockmaker.jpclockmaker.jp/labs/101126_maxjp/adobe_max_retweet.pdf · AIR for Android • Adobe AIRを使えばWindows、Mac OS、 Linuxの環境で動くデスクトップアプリ](https://reader035.vdocuments.net/reader035/viewer/2022070822/5f28abe75d2a682c532d051d/html5/thumbnails/36.jpg)
StageWebViewでブラウザを内蔵可能(HTMLページ内のFlashも再生可能)
![Page 37: Flex フレームワーク Hero 入門 - clockmaker.jpclockmaker.jp/labs/101126_maxjp/adobe_max_retweet.pdf · AIR for Android • Adobe AIRを使えばWindows、Mac OS、 Linuxの環境で動くデスクトップアプリ](https://reader035.vdocuments.net/reader035/viewer/2022070822/5f28abe75d2a682c532d051d/html5/thumbnails/37.jpg)
StageWebView// ステージウェブビューを作成
var webView:StageWebView = new StageWebView();
// ステージウェブビューを表示するステージを設定
webView.stage = stage;
// ビューポートの幅・高さを更新
webView.viewPort = new Rectangle(0, 0, 800, 480);
// URLを指定
webView.loadURL(data as String);
![Page 38: Flex フレームワーク Hero 入門 - clockmaker.jpclockmaker.jp/labs/101126_maxjp/adobe_max_retweet.pdf · AIR for Android • Adobe AIRを使えばWindows、Mac OS、 Linuxの環境で動くデスクトップアプリ](https://reader035.vdocuments.net/reader035/viewer/2022070822/5f28abe75d2a682c532d051d/html5/thumbnails/38.jpg)
StageWebView
// ステージウェブビューを破棄
webView.dispose();
webView = null;
![Page 39: Flex フレームワーク Hero 入門 - clockmaker.jpclockmaker.jp/labs/101126_maxjp/adobe_max_retweet.pdf · AIR for Android • Adobe AIRを使えばWindows、Mac OS、 Linuxの環境で動くデスクトップアプリ](https://reader035.vdocuments.net/reader035/viewer/2022070822/5f28abe75d2a682c532d051d/html5/thumbnails/39.jpg)
カメラ機能
• Camera UI
デバイスのネイティ
ブカメラを呼び出す
クラス
• Camera
デバイスのカメラを
Flashのステージ内に
映し出すカメラ
![Page 40: Flex フレームワーク Hero 入門 - clockmaker.jpclockmaker.jp/labs/101126_maxjp/adobe_max_retweet.pdf · AIR for Android • Adobe AIRを使えばWindows、Mac OS、 Linuxの環境で動くデスクトップアプリ](https://reader035.vdocuments.net/reader035/viewer/2022070822/5f28abe75d2a682c532d051d/html5/thumbnails/40.jpg)
![Page 41: Flex フレームワーク Hero 入門 - clockmaker.jpclockmaker.jp/labs/101126_maxjp/adobe_max_retweet.pdf · AIR for Android • Adobe AIRを使えばWindows、Mac OS、 Linuxの環境で動くデスクトップアプリ](https://reader035.vdocuments.net/reader035/viewer/2022070822/5f28abe75d2a682c532d051d/html5/thumbnails/41.jpg)
参考サイト• Adobe Developer Connection
http://www.adobesystems.ca/jp/devnet/
• Adobe MAX 2010 - 基調講演&全セッションをオンデマンド配信中!http://www.adobe.com/jp/joc/max/ondemand/
![Page 42: Flex フレームワーク Hero 入門 - clockmaker.jpclockmaker.jp/labs/101126_maxjp/adobe_max_retweet.pdf · AIR for Android • Adobe AIRを使えばWindows、Mac OS、 Linuxの環境で動くデスクトップアプリ](https://reader035.vdocuments.net/reader035/viewer/2022070822/5f28abe75d2a682c532d051d/html5/thumbnails/42.jpg)
ご清聴ありがとうございました。
ClockMaker 池田泰延twitter id : clockmaker