てっく煮ブログ

2007年11月01日

Adobe MAX リアルタイムメモ：ここまでできる Flex コンシューマ向けアプリ

目次

  1. Flexとは
  2. MAX Reservation System
  3. Flexの未来
  4. 質疑応答
  5. オマケ ～AIR で作るMessenger～

MAX Reservation System について

メンバ

Flex 側5名。

  • アーキテクト
  • UI Design
  • PG
  • Operator
  • Testor

サーバー側システムは別の会社。

ワークフロー

  • デザイン側
    1. UserExperience (Illustratorなどで使い勝手を検討)
    2. Visual Design (Photoshopなどでデザインを固める)
    3. Flash (.fla で MC や SWC を準備)
    4. MXML (FlexBuilderでレイアウトや遷移)
    5. ActionScript (ビジュアルエレメントをASで分離)
  • ロジック側
    1. MXML
    2. AS (サーバー通信や制御)
    3. 結合

スケジュール

  • デザイン側
    • UI: １週間
    • デザイン: １週間
    • MXML: 2日
    • スキニング: 8日
  • ロジック側
    • アーキテクチャの検討: 2日
    • 実装開始: 3日
    • サーバーインターフェーステスト: 9日
    • 通信テスト: 2日
    • 統合テスト: 11日

アーキテクチャ

  • MXML/ASの分離
    1. MXMLに全部書く
      • 作業分担しにくい
    2. MXMLに埋め込む (ASファイル)
    3. MXMLから分離する
      • クラスとして分離する。再利用性よい
      • IMXMLObject（ViewLogic）として埋め込む
  • MVC
    • C: V と１対１
    • M->V: Data bindings
  • Web Service
    • XML or SOAP -> SOAP を採用
    • WSDL で自動定義
  • カスタムコンポーネント
    • Progress Stepper
      • 全体フローの進捗表示
      • 難易度の表示
    • 本質部分の共通化を行う

スキニング -スキンのあて方-

  • スキニングとは
    • コンポーネントのビジュアルエレメントを修正、または置換すること
  • 方法
    1. CSS: 幅、高さは制御できない。色や丸みなどを指定するもの
    2. GraphicSkin: 画像ファイルをスキンとして当てる。
    3. SkinClass: ASで作るスキンのクラス。ProgrammaticSkin, Border など
      • UIComponent は何も表示しない
      • Button に対して、ButtonSkin.as が当てられる
    4. FlexComponentKit: Flashで作った MC を利用するキット。
      • Flash で MC を作って、 SWC として書き出す。
      • UIMovieClip クラスとして Flex から使う

総括

  • UI の細かな配慮をもう少ししたかった
  • １ヶ月でリリースできたのはすごいこと

Flex が市民権を得るには

  • 現状
    • デザイナの不足
      • Flexデザインできる人がいない
      • Flexデザインが難しい
    • 従来のシステム開発フロー
    • 見た目よりも機能
    • GUIオーサリングだけでデザインできない
    • プログラミングのスキルが必要

デザインを簡単に作れるようになっていけば、もっと広がっていくのではないか。