FxUG@東京全国ツアーで話した資料です。

1. Adobe Flex4 / AIR2 入門講座
Satoshi YOKOTA
http://classmethod.jp
@sato_shi
flexcoder
1

2. Flexって何？
2

3. Flex
Flexって何ですか？
FlashアプリをXMLとかで
簡単に作れる仕組みです。
今までFlashアプリ作るには
ちょっと敷居が高かった。
3

4. いわゆるシステム開発者には
扱いづらいツールだった。
（タイムライン・ストーリー等）
いわゆるシステム開発者が
使いやすい統合開発環境。
（デバック・バージョン管理等）
4

5. Flexって何に使うの？
アプリケーションの画面に
よく使われています。
標準で多くのコンポーネント
が用意されているから
5

6. アプリケーションを作る目的は何ですか？
コスト削減 リッチな
ユーザー体験
複雑な業務を
簡単にする 見える化
ゲーム 学習
高い投資効果
アート
システム統合 広告
マイグレーション ツール
6

7. Flexって誰が使っているの？
いろんな人が使っていますよ。
業務・ツール・広告・ゲーム
XMLとAcriptScriptの書き方は
よくある言語の作りだから
7

8. 使われ方
Flash
Flex Flex
Flex
Flex HTML/JS AIR
8

9. 何でFlexを使うんですか？
ActiveX/Applet, VB/Delphi
等をWEB対応したいとか
OS、ブラウザ等の環境に強く
依存するアプリで困っていたから
9

10. 開発を補助するツール類がいっぱい
コーディング規約
ASDocによるドキュメント生成
統合 コード補間
開発環境 スタイル補正
Flash サーバー間通信モニタリング
デバッグ
Builder 4 パフォーマンスビューア
リファクタリング
バージョン管理
FlexUnit 4による自動クラス単体テスト
動作テスト QTP,FlexMonkeyによる自動UI動作テスト
支援ツール FlexPMDによる静的テスト
FlexMetricsによるメトリクステスト 10

11. もういっかい
Flexって何ですか？
Flash上に作られた
フレームワーク（クラス群）です。
どんな階層か見てみましょう。
11

12. Flexは裏でたくさんのことをやってくれる
UIComponent mx系
Spark系
SkinnableComponent Group mx:
SkinnableContainer Button Skin
Panel ButtonSkin PanelSkin
12

13. Flexの中身はFlash
Object
EventDispatcher
Flash系
DisplayObject Timer
InteractiveObject Shape
DisplayObjectContainer
Sprite Stage Loader
FlexSprite MovieClip
UIComponent 13

14. Flexアプリ開発の勘所は？
イベントの伝播と、
コンポーネントのライフサイクルだね。
詳しい話は過去の勉強会や
Adobe Help を検索してみよう！
14

15. コンポーネントのライフサイクル
15

16. 業務アプリ“以外”で使われている？
いろんなところで使われていますが、
特徴を理解して使ってね
アニメーション/シナリオ中心であれば、
FlashCS5で作ったほうが早い＆軽いかも
16

17. こんなものをFlexだけで作ったら苦労するかも
17

18. 教科書では教えてくれないこと
デザイナーの出てくる場がない？
Flex使う前にデザインが必要。
デザイナー大活躍です！
システム開発者は要求を最低限満たす
機能の実現のみに目が行きがち
18

19. デザイナー重要
19

20. ツールのチカラを借りる
インタラクション
ワイヤーフレーム
ビジュアル
20

21. スキニング重要
スキン前
スキン後
21

22. 標準/商用/フリーのコンポーネント活用重要
22

23. カスタムのレイアウトコンテナ重要
23

24. おぼえること多過ぎ。。。
24

25. Flashアプリをもっと簡単に作りたい！
ActionScriptのライブラリを
活用してはいかが？
多くのノウハウが公開されています
25

26. Flashアプリをもっと簡単に作りたい！
FlexとProgressionを
一緒に使ってみてはいかが？
Flexの良いところとFlashの良いところ
を活かしてもっと簡単にサイトが作れるよ
26

27. Flexで携帯向けアプリは作れる？
今のところガラケーは、FlashLite(1/2/3)
対応だから作れない (> <)
Android 2.2などでは、FlashPlayer10.1が
入るからFlex/Flashアプリ動くよ
27

28. Flexでスマートフォン向けに
簡単にアプリ作れないかなぁ？
今度、もっともっと軽量で軽快な
フレームワークが出る予定！
今年のAdobeMAX
の目玉かも！？
それがHeroさ！
モバイルにもデスクトップにも対応！
28

29. 29

30. Flexでデスクトップアプリ作れたりする？
AIRを使えば簡単さ！
Flex、Flash、HTML、JavaScriptを使って
AIRアプリ作れてしまうよ！
30

31. AIRはじめました
31

32. デスクトップアプリ
WEBアプリをデスクトップ
アプリとして動かしたい！
AIRを使えば簡単さ！
常駐アプリ化、スタートアップ登録、
ファイルアクセス、ローカルDB、等々
32

33. HTMLアプリをデスクトップアプリとして利用
33

34. ネイティブアプリを呼び出したい！
AIR2を使えば簡単さ！
Excel連動、ネットワークコマンド、
ActiveDirectory、DLL呼び出し
34

35. コマンドプロンプト
35

36. スマートフォン
話題のスマートフォンの機能を使いたい
AIR for Androidを使えば簡単さ！
位置情報、加速度センサー、
マルチタッチ、カメラ
36

37. 話題のHTML5
HTML5を使いたい
HTML4/5で作ったアプリを
AIRで包んでしまいましょう。
AIR2にはHTML5の
エンジンが搭載されています。
37

38. 使える・・
38

39. まとめ
39

40. まとめ
• FlexはFlash上の
フレームワーク
• Flexは強力なツール・
環境が揃っている
• Flexはノウハウと
ライブラリの宝庫
• AIRはデスクトップや
モバイルでも使える
• Flash・Flex・AIRは、
日々進化している！ 40