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は、 日々進化している！