- 追加された行はこの色です。
- 削除された行はこの色です。
Adobe Max Japan 2009、1/30 2日めに行ってきました。
(1日目は竹村さんが書いてくれるはず。。)
参加したセッションは下記です。簡単にメモなどを。
- Flash Catalystによるワイヤーフレーム・アプローチとのFlex開発フロー(Adobe 轟さん)
- 出張JUIカンファレンス(JavaScript User Interface 2009)"Flashはもういらない"(Shibuya JS)
- 深化するRIA (RIAコンソーシアム 三井氏)
- 出張JUIカンファレンス(JavaScript User Interface 2009)"Flashはもういらない"(Shibuya JSのみなさん)
- 深化するRIA (RIAコンソーシアム 三井さん)
- ワークフローとプロトタイピング (bA 伊原さん)
** Flash Catalystによるワイヤーフレーム・アプローとのFlex開発フロー [#tbcbc709]
Flash Catalystの紹介とデモ。私にとっての今回の本命。
Catalystのプレビュー版のディスクをもらいました!これは後日レビューします。
- 今回はmac 版しかない→アメリカの開発者は圧倒的にmacユーザだったので。
- このバージョンではFireworks読めないんだって!!!Σ(゚д゚lll)
- 日本語通らないらしい
- (Ctrl+Zも効きにくい?)
- 春にパブリックベータ
- 正式リリースは1年後?
*** ターゲット [#g50e55fd]
下記の人たちをターゲットにしたワークフロー。
- インタラクティブウェブデザイナー
- インフォメーションアーキテクト
- ビジュアルデザイナー
*** 基本操作 [#p7700c2c]
- Catalystで一からはじめることもできる
- page:ある状態のスナップショット?
-- 1ページめ右に配置 2ページ目左に配置 その途中をトラジションでつなげる(フレームみたいなもの?)
- もっと複雑な絵が描けるようになる?のでツールの位置が変わるかもよ
- レイヤーももちろんある
- コンポーネントもある
- run project で自動コンパイルもできる
*** デモ [#c1bd1c39]
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が勝手に移動/リサイズを判断して、デフォルトエフェクトをつけてくれる
- 簡単ですね!
- &color(red){''「ちょっとしたこと」をコーディングせずにデザイナが実現できる''};
- (シュイーンなのかシャキーンなのか?といった細かいニュアンスを開発者に頼む必要がない)
''skinに含まれるもの''
<skin>トランジション(エフェクト)、ステート、図形</skin>
これらをインタラクションデザイナがやる?
*** グラフィックソフトとの連携 [#hf8243e4]
''aiを開く''
- テキストも保持。ボタンに変換したときもlabelに入れてくれる。
- イラレならアプリ間コピペができる
- 同期もとれる
''psdを読み込む''
- レイヤー情報を保持してる
*** ラウンドトリップ [#p3bc5811]
catalyst = .fxpファイル
- ビジュアルデザイナ(ai,psd)
- インタラクションデザイナー(ct)
- 開発者(fx)
ai ⇔ ct ⇔ fx
デザインとマージ
- Look&Feel と Logic を分離できるよ
- 動くワイヤフレーム(プロトタイプ)が作れるようになるよ
- Proof of concept
- かなり早い段階でアプリケーションの方向性が見れるよ
- インタフェースとインタラクションを早い段階で定義できるよ
- IA,インタラクションデザイナがcatalystで最初に詰めていく。というワークフローができるようになる
- ユーザとのコミュニケーションツール
*** 感想: [#v94c832d]
- プロトタイプベースでどんどん見せられる、というのはよさそう
- 少ない労力でプロトタイプができるという点は理想的
- かつプロトタイプが無駄にならないのも素敵
- IA/インタラクションデザイナが中心のワークフロー、よさそう!
- これまでは思うデザインを実現するのにASが必要だったけど、それが減るのはいいこと
- デザイナーの敷居が下がると、今後WebアプリはFlexが増えていきそう
- 吐き出されるコードが多いなあ…コードを見なくなりそ
- 早く発売してくれ!
//----------------------------------
** 出張JUIカンファレンス [#s4908b1f]
// えくますくりぷとってよむんだ。。とか初めて知ったのはないしょです。
音声再生や、JSでもFlashを再現できるよ、とか
いろいろJSでこんなことできるんだよ、という話があったけど
amachangのパフォーマンスの話がためになったのでメモ。(ちょっとメモに自信ない)
- DOMが重い
- ドットを減らす
は有名。
-1.再描画のタイミング
--再描画はベンチマークに出ない。数値だけで判断してはいけない
--書き換えと取得
--値の取得と変更を別にする
-2.
--子孫と兄弟に影響が出る
--属性変更時は変更要素を隔離して(divを分ける)、影響範囲を狭めるとよい
-3.スタイル
-- スタイル変更も連鎖する。計算しなおすとまた処理がかかる
-- inherit、相対値を意識する(これ以外の値なら問題ない)
なるほど…マークアップ側は極限までシンプルなHTMLを目指すけど、
こういう視点でも考えたほうがいいやね。
(つづく)
#blikifooter(小森)
tag: [[Flex>tag/Flex]]