Flexの画面デザイン・コーディング
2月に、Flexの画面デザイン案件をいただいた。
当初、指定された画面のデザイン画像2枚分と、サイト全体のデザインルールのドキュメントを納品する予定だったのが、画面デザインにOKいただくと同時に、「やっぱりコーディングまでお願いしたい」とご依頼がありまして。
案件発生時にちょこちょこネットで調べてみていたときは、mxmlは書いたことないけれどxhtmlに近い感じだし、コード入力はある程度アプリが補完してくれるし、cssだし、でなんとかなるやろ、と思い、Flex Builder3の体験版をインストールしてトライ〜。
しかし甘かった。
通常のxhtml＋cssとは別もの。基本はテーブルレイアウト。四角く区切って並べる、みたいな。
しかも要素によってはインラインで指定しなければ反映されなかったり、cssのプロパティ記述方法も違う。idが使えない。継承セレクタも使えない。
いったん読み込んだcssファイルはずっと維持されるので、class名は一意でないといけない。などなど、もう、最初からつまづきまくり。
詳しくはアークウェブさんのWikiにて。大変お世話になりました。
Adobeのサイトで、FireworksでFlexスキンが作れるという記事も見つけたけれども、Fireworksのヘルプ見てもやり方が全然わからない。
適当に書き出ししてみたけれど、？？？
Flash Catalystを見つけたときはやったー！と思ったのだけれど、Leopard以降じゃないとインストールできないというのでまたガックシ。（うちはTiger＋CS4 Web Premium）
ネットでクリックしながら点在している情報を見ているだけじゃ限界だと思ったので、とにかく1冊は本を購入しようと思い、紀伊国屋に行ったら1冊もないし！
ジュンク堂でも2冊しかなく、「パーフェクトマスター」か「ビギナーズガイド」かで迷って、「Flex 3 ビギナーズガイド」にしたら、正解だった模様。
もう1冊の方はAmazonで酷評されていたので…。
それで、なんとかテンプレートらしきものがやっとできた。
調査＆エラー＆トライに4夜費やし、制作に入ってからはテンプレート＆トップページに2日、サブの1ページに半日、追加で依頼されたアラート画面のカスタマイズ（3種類）に1日。
かなり力技というか、コードがエレガントじゃないなぁと思うものの、いったん理屈がわかったら制作はどんどんできる感じ。
クロスブラウザでの表示チェックが不要なのと、png形式の画像を何も考えずに使えるのが大変に楽だー。
で。そこまで納品したのだけれども、継続して依頼をいただいたので、Flex Builderの試用期限切れたし購入するかーと思ったらCS5になっておった。
しかし、ある意味朗報か。
Flex Builder3はFlash Builder 4になり、その上Flash CatalystまでWeb Premiumに入るとは。
Posted by sponge design on 4/14, 2010 :: Categories 仕事
Tags :: Flex
コメントはこちらから↓ トラックバック
