アークウェブWebデザインSandBox

• バックアップ一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• Adobe MAX Japan 2009 2日目レポート へ行く。
  • 1 (2009-02-06 (金) 12:29:39)
  • 2 (2009-02-06 (金) 12:30:18)

Adobe Max Japan 2009、1/30 2日めに行ってきました。
（1日目は竹村さんが書いてくれるはず。。）

参加したセッションは下記です。簡単にメモなどを。

• Flash Catalystによるワイヤーフレーム・アプローチとのFlex開発フロー(Adobe 轟さん)
• 出張JUIカンファレンス（JavaScript User Interface 2009）"Flashはもういらない"（Shibuya JSのみなさん）
• 深化するRIA　（RIAコンソーシアム　三井さん）
• ワークフローとプロトタイピング　（bA　伊原さん）

Flash Catalystによるワイヤーフレーム・アプローとのFlex開発フロー †

Flash Catalystの紹介とデモ。私にとっての今回の本命。
Catalystのプレビュー版のディスクをもらいました！これは後日レビューします。

• 今回はmac 版しかない→アメリカの開発者は圧倒的にmacユーザだったので。
• このバージョンではFireworks読めないんだって！！！Σ（ﾟдﾟlll）
• 日本語通らないらしい
• （Ctrl+Zも効きにくい？）
• 春にパブリックベータ
• 正式リリースは1年後？

ターゲット †

下記の人たちをターゲットにしたワークフロー。

• インタラクティブウェブデザイナー
• インフォメーションアーキテクト
• ビジュアルデザイナー

基本操作 †

• Catalystで一からはじめることもできる
• page：ある状態のスナップショット？
  • 1ページめ右に配置　2ページ目左に配置　その途中をトラジションでつなげる（フレームみたいなもの？）
• もっと複雑な絵が描けるようになる？のでツールの位置が変わるかもよ
• レイヤーももちろんある
• コンポーネントもある
• run project で自動コンパイルもできる

デモ †

1.Catalyst上で○を描く。
2.デザインモード→コードビューするとxmlのコードが描かれている。

• <fill> 塗り
• <stroke> 線

3.コンポーネント化。2つの方法がある

• 1,右クリックconvert→button
• 2.プロパティパネルでも変換できる

　　　↓

4. fxbutton というコンポーネントになった
5. 塗りや線（fill,stroke）は、styleName がついて外部ファイルに自動で書き出される

• states（up,over,down,selected?）, transition（エフェクト？） というコンポーネントもある

• 中途半端なflashみたいだな。。という印象。

モーション

1.ページを増やして2ページ目のボタンの位置を変える
2.Catalystが勝手に移動/リサイズを判断して、デフォルトエフェクトをつけてくれる

• 簡単ですね！
• 「ちょっとしたこと」をコーディングせずにデザイナが実現できる
• （シュイーンなのかシャキーンなのか？といった細かいニュアンスを開発者に頼む必要がない）

skinに含まれるもの

skin>トランジション（エフェクト）、ステート、図形</skin>
これらをインタラクションデザイナがやる？

グラフィックソフトとの連携 †

aiを開く

• テキストも保持。ボタンに変換したときもlabelに入れてくれる。
• イラレならアプリ間コピペができる
• 同期もとれる

psdを読み込む

• レイヤー情報を保持してる

ラウンドトリップ †

catalyst　= .fxpファイル

• ビジュアルデザイナ(ai,psd)
• インタラクションデザイナー(ct)
• 開発者(fx)

ai ⇔ ct ⇔ fx
デザインとマージ

• Look&Feel と Logic を分離できるよ
• 動くワイヤフレーム（プロトタイプ）が作れるようになるよ
• Proof of concept
• かなり早い段階でアプリケーションの方向性が見れるよ
• インタフェースとインタラクションを早い段階で定義できるよ
• IA,インタラクションデザイナがcatalystで最初に詰めていく。というワークフローができるようになる
• ユーザとのコミュニケーションツール

感想： †

• プロトタイプベースでどんどん見せられる、というのはよさそう
• 少ない労力でプロトタイプができるという点は理想的
• かつプロトタイプが無駄にならないのも素敵
• IA/インタラクションデザイナが中心のワークフロー、よさそう！
• これまでは思うデザインを実現するのにASが必要だったけど、それが減るのはいいこと
• デザイナーの敷居が下がると、今後WebアプリはFlexが増えていきそう
• 吐き出されるコードが多いなあ…コードを見なくなりそ
• 早く発売してくれ！

出張JUIカンファレンス †

音声再生や、JSでもFlashを再現できるよ、とか
いろいろJSでこんなことできるんだよ、という話があったけど
amachangのパフォーマンスの話がためになったのでメモ。（ちょっとメモに自信ない）

• DOMが重い
• ドットを減らす
  は有名。

• 1.再描画のタイミング
  • 再描画はベンチマークに出ない。数値だけで判断してはいけない
  • 書き換えと取得
  • 値の取得と変更を別にする

• 2.
  • 子孫と兄弟に影響が出る
  • 属性変更時は変更要素を隔離して(divを分ける)、影響範囲を狭めるとよい

• 3.スタイル
  • スタイル変更も連鎖する。計算しなおすとまた処理がかかる
  • inherit、相対値を意識する（これ以外の値なら問題ない）

なるほど…マークアップ側は極限までシンプルなHTMLを目指すけど、
こういう視点でも考えたほうがいいやね。

（つづく）

投稿者小森? | パーマリンク

|

tag: Flex?