Flex＆Adobe AIR 勉強会(FxUG 第136回＠東京)に参加してきた

B-Wiki - Flex勉強会第136回＠東京 - Flex User Group

東日本大震災を挟んでのFxUG勉強会参加。思えば前回FxUG参加(3/9)から2日後に日本を取り巻く状況が一変したんですよねぇ…。

daoki2 (Twitter:@daoki2)さんの司会によりこの日の勉強会はスタート。

この日のセッションは全て『レベル5』＝現場でバリバリ使っている人を対象とした内容。自分は現場でFlexを利用しているもののベースはFlex3なので、Flex4のテクノロジをバリバリ使って…というのでは無し。(^_^;) Flex3とはベースから異なっているのでFlex4攻略の取っ掛かりを得るべく臨みました。

まずは1つめのセッション：クラスメソッド：杉浦篤史さん(sokak TwitterID:@sokak)による『Flex 4 でのアプリケーション実装の実際』。

まずは業務連絡から。所属されているクラスメソッド株式会社さんにてイベントが行われるとの事です。26〜28の計3日間。興味のある方は参加してみてはいかがでしょうか。

春の集中講座 – クラスメソッド - 勉強会｜クラスメソッド株式会社

そして本題。箇条書き形式でめぼしい所をピックアップ。

Flex3のアプリ実装方法には２つある(杉浦さんの命名・判断にて)
- Helper型
- Base型
Flex3のアプリについては、Flex4でもこれまで通り開発出来る。
Sparkコンポーネントを利用しなくても、mxコンポーネントで実装可能。

Flex4
- スキン：コンポーネントの見た目、レイアウト定義
- ステート：コンポーネントに定義されているレイアウトの1つを表示
以下のコンポーネントを用いてみる。
- spark.components.SkinnableContainer
- spark.components.supportClasses.SkinnableComponent

(Flex4 Sparkコンポーネントを用いての実践デモ)
ステート切替時の生成ポリシーについて…itemCreationPolicy/itemDestructionPolicyの解説。この辺りについては以下も詳しい。
- Flex 4 マスターシリーズ #03 Flex 4 ステート | デベロッパーセンター
Flex3ベースではViewStackで行っていた処理は、Flex4ではステート切替によって行う。(ViewStack使いまくりだFlex4では動かない)

スキンとステートに関する勉強を行うには、Buttonコンポーネントがオススメ。Button/ButtonBase/ButtonSkin
（※Button及び関連スキンのソースコードを見ながら実演）
画面の要素は全てスキン側で。プロジェクトの規模にもよるが、基本Flex4ではこのスタイル。

Tips：
- Flex4.5だとプロジェクト作成時、コンポーネントセットが選べる。
- Flex4.1だとmx/spark混在
- 間違ってmxのコンポーネントを配置してしまう場合もあるので気を付ける。
- sparkを選ぶ事で極力mxを排除出来る。

Flex4を学ぶには(オススメその１)：Flex4プログラミングガイド(書籍)

Flex4プログラミングガイド―Webアプリ開発のための「ツール」&「開発フレームワーク」 (I・O BOOKS)

作者: 廣畑大雅
出版社/メーカー: 工学社
発売日: 2011/02
メディア: 単行本
購入: 1人クリック: 18回
この商品を含むブログ (6件) を見る

Flex4を学ぶには(オススメその２)：Flex 4 マスターシリーズ(Web)

2つめのセッションは有川榮一さん(arkw TwitterID:@_a1j_)による『Flex 4.5におけるyui-frameworksの使いどころ』。

Flex4.5アプリ開発の3大要素
- コンポーネント：ボタンやテキストなど
- ビュー：コンポーネントやビューを持てる
- ロジック：

コンポーネント
- コンポーネント・スキンはこういう作りにする事！

- スキンのステートと、コンポーネントのステートとは違う。

Flex4を知るには、やはり『Button』が分かりやすい。

コンポーネントクラス
- スキンステート
- スキンパーツ
- イベントハンドラ
- コンポーネントの振る舞い

スキンMXML(ActionScript。モバイルだとスキンもActionScriptで書かないといけないらしい)
- ステート
- コンポーネントのレイアウト
- エフェクト

（ボタンのコンポーネントクラス：ソースコードデモ）
- SkinState,SkinPart重要。
（ボタンのスキンMXML：ソースコードデモ）
- HostComponent重要。

ビュー
- 複数のコンポーネントを配置したコンテナ。

コンテナに何を書くか
- 複数のコンポーネントを保持
- イベントハンドリング
- こんぽーねんとへの処理

スキンMXML
- ステート
- コンポーネントのレイアウト
- エフェクト

（コンテナ実演）
- BorderContainer：枠線が使える、SkinableCOntainerクラスを継承。

ロジック
データロジック
- サービス呼び出し
- データ加工
- 非同期処理
- イベントハンドリング

ビューロジック
- ステート切替
- コンポ−ネントのプロパティ変更
- イベントハンドリング

設計のポイント
コンポーネント
- ステート
- 部品の定義
- スタイル
- イベント
- インターフェイス

スキン
- レイアウト
- リソースバンドル
  - スタイル

問題点
- ビューとロジックが分離されない
- イベントハンドリングが煩雑
  - ビュー内のコンポーネントが増えると大変なことに
- ロジックが混在
  - データロジックなのかビューロジックなのか

（↓そこで！yui-frameworkの登場）

yui-frameworkの使いどころ
- ビューとロジックを疎結合にする
- イベントハンドリングをわかりやすく
- クラスの肥大化を防ぐ
  - 振る舞い毎にクラスを分けるため
  - 分業も出来るようになる
- メモリは食うらしい。クラスは多くなる
- でもその分、個々の処理はシンプルになる
- でも管理はしやすい、パフォーマンスチューニングもしやすい
- service.propertiesで各種切替簡単

yui-framework関連情報は以下を参照。
- yui-frameworks ドキュメント

本編最後のセッションは廣畑大雅さん(taiga TwitterID:@taiga)による『Flex 4 Spark Component 活用 Tips』。

実際に業務で使った部品群を用いて実践、コード解説を行っていくというものでしたが、スライド資料もほぼ英単語のみだったのもあり、Flex4のスキルも足りなかった部分もありついて行ききれず…。実行サンプルやソースコード、資料が紹介されれば見直したい所ですが、どうなのでしょう…？

LTセッションは都合により参加せず。関連スライド資料UPを待って情報収集する事にしよう。

時期を前後してFlash Builder 4.5がリリースされたが、更新をいつするべきか。自分が持ってるのはFlash Builder 4 Standard Editionなので、更新版なら1万円かからず行ける。GW前後に検討してみるかな…。

以下は勉強会参加特典の1つ、シール＆ステッカー。

Flex4自体の踏み込んだ勉強もそろそろ進めなければ。(`･ω･´)ｷﾘｯ