Adobe Flex4 / AIR2 入門講座
1
Satoshi YOKOTA http://classmethod.jp
@sato_shi flexcoder
2
Flexって何?
Flex
3
Flexって何ですか?
FlashアプリをXMLとかで 簡単に作れる仕組みです。
今までFlashアプリ作るには ちょっと敷居が高かった。
4
いわゆるシステム開発者には 扱いづらいツールだった。 (タイムライン・ストーリー等)
いわゆるシステム開発者が 使いやすい統合開発環境。 (デバック・バージョン管理等)
5
Flexって何に使うの?
アプリケーションの画面に よく使われています。
標準で多くのコンポーネント が用意されているから
アプリケーションを作る目的は何ですか?
6
コスト削減 リッチな ユーザー体験
複雑な業務を 簡単にする 見える化
高い投資効果
システム統合
マイグレーション
ゲーム
広告
ツール
アート
学習
7
Flexって誰が使っているの?
XMLとAcriptScriptの書き方は よくある言語の作りだから
いろんな人が使っていますよ。 業務・ツール・広告・ゲーム
使われ方
8
Flex
Flex
Flex
AIR
Flash
HTML/JS
Flex
9
何でFlexを使うんですか?
ActiveX/Applet, VB/Delphi 等をWEB対応したいとか
OS、ブラウザ等の環境に強く 依存するアプリで困っていたから
開発を補助するツール類がいっぱい
10
FlexUnit 4による自動クラス単体テスト QTP,FlexMonkeyによる自動UI動作テスト FlexPMDによる静的テスト FlexMetricsによるメトリクステスト
動作テスト 支援ツール
統合 開発環境
Flash Builder 4
コーディング規約 ASDocによるドキュメント生成 コード補間 スタイル補正 サーバー間通信モニタリング デバッグ パフォーマンスビューア リファクタリング バージョン管理
もういっかい
11
Flexって何ですか?
Flash上に作られた フレームワーク(クラス群)です。
どんな階層か見てみましょう。
Flexは裏でたくさんのことをやってくれる
12
UIComponent
SkinnableComponent Group
SkinnableContainer
Panel
Button Skin
ButtonSkin PanelSkin
mx:
Spark系 mx系
Flexの中身はFlash
13
DisplayObjectContainer
Sprite Stage
FlexSprite
UIComponent
MovieClip
Loader
InteractiveObject
DisplayObject
EventDispatcher
Object
Shape
Timer Flash系
14
Flexアプリ開発の勘所は?
イベントの伝播と、 コンポーネントのライフサイクルだね。
詳しい話は過去の勉強会や Adobe Help を検索してみよう!
コンポーネントのライフサイクル
15
16
業務アプリ“以外”で使われている?
いろんなところで使われていますが、 特徴を理解して使ってね
アニメーション/シナリオ中心であれば、 FlashCS5で作ったほうが早い&軽いかも
こんなものをFlexだけで作ったら苦労するかも
17
教科書では教えてくれないこと
18
デザイナーの出てくる場がない?
Flex使う前にデザインが必要。 デザイナー大活躍です!
システム開発者は要求を最低限満たす 機能の実現のみに目が行きがち
デザイナー重要
19
ツールのチカラを借りる
20
ワイヤーフレーム
ビジュアル
インタラクション
スキニング重要
21
スキン前
スキン後
標準/商用/フリーのコンポーネント活用重要
22
カスタムのレイアウトコンテナ重要
23
24
おぼえること多過ぎ。。。
25
Flashアプリをもっと簡単に作りたい!
ActionScriptのライブラリを 活用してはいかが?
多くのノウハウが公開されています
26
Flashアプリをもっと簡単に作りたい!
FlexとProgressionを 一緒に使ってみてはいかが?
Flexの良いところとFlashの良いところ を活かしてもっと簡単にサイトが作れるよ
27
Flexで携帯向けアプリは作れる?
今のところガラケーは、FlashLite(1/2/3) 対応だから作れない (> <)
Android 2.2などでは、FlashPlayer10.1が 入るからFlex/Flashアプリ動くよ
28
Flexでスマートフォン向けに 簡単にアプリ作れないかなぁ?
今度、もっともっと軽量で軽快な フレームワークが出る予定!
それがHeroさ! モバイルにもデスクトップにも対応!
今年のAdobeMAX の目玉かも!?
29
30
Flexでデスクトップアプリ作れたりする?
AIRを使えば簡単さ!
Flex、Flash、HTML、JavaScriptを使って AIRアプリ作れてしまうよ!
31
AIRはじめました
デスクトップアプリ
32
WEBアプリをデスクトップ アプリとして動かしたい!
AIRを使えば簡単さ!
常駐アプリ化、スタートアップ登録、 ファイルアクセス、ローカルDB、等々
HTMLアプリをデスクトップアプリとして利用
33
34
ネイティブアプリを呼び出したい!
AIR2を使えば簡単さ!
Excel連動、ネットワークコマンド、 ActiveDirectory、DLL呼び出し
コマンドプロンプト
35
スマートフォン
36
話題のスマートフォンの機能を使いたい
AIR for Androidを使えば簡単さ!
位置情報、加速度センサー、 マルチタッチ、カメラ
話題のHTML5
37
HTML5を使いたい
HTML4/5で作ったアプリを AIRで包んでしまいましょう。
AIR2にはHTML5の エンジンが搭載されています。
38
使える・・
39
まとめ
まとめ
40
• FlexはFlash上の フレームワーク
• Flexは強力なツール・ 環境が揃っている
• Flexはノウハウと ライブラリの宝庫
• AIRはデスクトップや モバイルでも使える
• Flash・Flex・AIRは、 日々進化している!
Top Related