エモーショナルな部分の価値が高まってきている。サイト内に見え隠れしてないと。企業の考え方にも変化が。システム構築だけでなく、「UIと使う人材とシステム」に投資わかりやすいUIがあれば教育コスト(マニュアル作成やサポートなど)が減る。そっちにカネかけましょう「普通の人にも使いやすい」をめざす自分だったらどうか?親戚の人ならどうかUMLの人型は「どこを押せばいいかわからない」「やだ」とか言わない。ここを検証していくべき。カメラマンの撮影時間は全体の5%しかない。(交渉、編集などに時間を費やしている)Web屋もおなじ。それで赤にならないようにしないと。新しいぶどう酒と古い袋のたとえ話。三井さんの趣味?(SFとかの)映画に出てくるUIをキャプチャして、UIの勉強にしている感覚を磨かないと。2009-01-15WebデザイナーにもわかるFlex画面デザイン(2)のつづきです。スキンについて解説します。†Flexには、スキンというものがあります。OSやブログツールにおけるスキンやテーマと同等のものと考えて差し支えありません。(2)で解説したように細かくスタイル指定するのではなく、全体のデザインを指定できます。デフォルトのスキンにも名前があり、このスキンは「Halo(ヘイロー)」といいます。そのほかにもスキンがいくつか用意されていて、切り替えることが可能です。HaloClassic?(Flex1.5用のスキン。AS2用なのでエラーが出る?)IceSmokeWoodenInstitutionalこれらのスキンはCSSと画像で構成されていて、スキンを変えることで見た目をがらりと変えることができます。†configファイルを用意する。ファイル名-config.xml(sample.mxmlだったら、sample-config.xmlのように命名)を用意すると、そのmxml用の設定ファイルになるので、mxmlと同じ階層に置く。(パスは各自確認してください)再コンパイル。<flex-config><compiler><theme><filename>/(インストールしたパス)/flex-sdk-3/frameworks/themes/HaloClassic/haloclassic.swc</filename></theme></compiler></flex-config>HaloClassic?に変更したところ。†デフォルトであるHaloの場合は、下記のようなswfを読み込んでいます。symbol="Button_upSkin");}というように、CSSで記述します。しておくと1つのファイルにまとめておけるので管理しやすくなります。デフォルトのデザインを変えたい場合は、このswfを編集するとよさそうです。†Slice9http://www.scalenine.com/などのFlex用スキンを配布しているサイトがあります。Mac風、Vista風などいろいろなデザインが配布されており、これを見るとFlexでもデザインの自由度はあって、結構いろいろできるんだな、と思われると思います。XPhttp://weblogs.macromedia.com/mc/archives/WindowsXPthemeDemo.htmBrowniehttp://www.scalenine.com/themes/brownie/Brownie.html↓このへんとか面白い。いうのを見ると、業務システムメインで使うのはもったいないと思うのですよ。†PhotoshopやFireworks(CS3)等に拡張機能をインストールすれば、FlexBuilder?と連携して行うことができます。詳しくはhttp://www.adobe.com/jp/devnet/flex/articles/skins_styles.htmlダウンロードhttp://www.adobe.com/products/flex/flexdownloads/#skinshttp://www.adobe.com/cfusion/entitlement/index.cfm?e=flex_skinsインストール方法などはhttp://violentcoding.com/blog/2007/10/10/archives/49で詳しく説明されています。2008-11-20WebデザイナーにもわかるFlex画面デザイン(3)のつづきです。今回はFireworks、Photoshopといったグラフィックソフトとの連携について解説します。CS3からmxml形式で書き出すことができるとのことで、試してみました。これまで、Fireworksで組んだものをまた一からmxmlで組みなおしていましたよ。[ウィンドウ]→[共有ライブラリ]にFlexコンポーネントが用意されています。Libraryにあるpngを一旦開いてみると表示されます)これをドラッグ&ドロップで配置していきます。用意されているのは下記の14コンポーネント。AccorodionButtonCheckBox?ComboBox?CursorNumericStepper?PanelPopUpButton?RadioButton?ScrollBar?TabTextArea?TextInput?ToolTip?すべてのコンポーネントが用意されているわけではないのが残念ですが、Fireworks上に置いてみるとこんな感じに。ラベルや文字色はシンボルプロパティウィンドウの値を変更することで修正できます。†[ファイル]→[書き出し]から書き出し形式を「mxmlとイメージ」にすると、mxmlファイルと画像が書き出されます。これをrascutにかければswfが生成されるのですが、ただ、mxmlの時点で日本語が化けてます。orzこれなにか解決方法あるのかな。時間切れなのでのちほど調査。↓なぜかShift-JISで書き出されている。orzエディタで開いて、UTF-8で保存しなおせばOK。(しかしなぜに...HTML書き出しはちゃんとUTF-8で出るのに。書き出したmxmlはこちら。flex04.mxmlそのmxmlをrascutにかけてswfにしたら、こんな感じになる。できたmxmlはなかなか優秀。位置関係を見ているのか、フォーム要素などはちゃんとPanelやAccordionの中に入っています。y="n"による絶対配置でレイアウトされます。コンポーネント化されていないテキストは、Labelとして書き出されるコンポーネントでない画像などのオブジェクトは画像として書き出される書き出し時にサブフォルダにイメージを置くにチェックを入れると、imagesフォルダに画像が入る画面キャプチャ画像も書き出される。レイヤーパネル上のオブジェクトの名前がidとしてつけられる。Fireworksは「ページ」という概念がある。現在のページ/全ページを書き出すことも可能。Tab、ToolTip?、Cursorは書き出されない。Fireworks上でTabに文字を入れられないCSSに書き出されるのは、シンボルプロパティ内にある値だけなので、主に文字周りだけ。背景色などはシンボルを編集すれば変わるけど、これらのデザイン変更は反映されない。別途CSSを書くか、スキンを変更する必要がある。書き出し後も調整が必要なので、これだけで完結とはいかないですが、作業時間短縮に役立ちそうです。2008-10-16WebデザイナーにもわかるFlex画面デザイン(1)のつづき。Flexでのデザインの調整について書きます。†Flexではスタイルシートが使えます。書式はHTMLでつかうものとよく似ています。#ff0000;}</mx:Style>3)スタイルシートにも書ける。#ff0000;}表示結果はいずれでも同じ。構造と表示は分けたほうがよいので、やはり3)のようにスタイルシートに記述したほうがよいですね。ちなみに、<mx:Style>は<mx:Application>直下に書かないとエラーになります。上記のようにグローバルに指定する以外に、「styleName」が使えます。classみたいなもんですね。#ff0000;}なお、idはスタイル指定には使用できません。styleNameにハイフン、アンダーバーは使えません。キャメルケースをつかった命名がよいでしょう。Embed(source="shoppingcart.gif");}こんな感じ。(ロールオーバーもあります)個人的には、ボタンにグラデーションやアルファ値、角丸の程度をCSSで指定できるのはかなーーり素敵だと思う。†レイアウトによく使うのは、Box、HBox、VBox。divみたいなものです。Flexの場合、ぶっちゃけていうと、要はテーブルレイアウトです。floatとかabsoluteとかの概念はあまりない。Boxは、子オブジェクトの並ぶ向きを決められます。VBoxは縦、HBoxは横。/></mx:VBox>↑子を縦に並べる。/></mx:HBox>↑子を横に並べる。tableによるHTMLソースよりシンプルなソースになります。Boxは子オブジェクトと子オブジェクトの間隔を設定することが可能です。(verticalGap、horizontalGap)これによって均等配置はHTMLよりきれいにできる。↑CSSerが戸惑うところ。†CSSを修正してデザインを変える、という点で共通なのですが、やはり独自の癖みたいのがあります。(以下、flex3の場合)marginはCSSで設定できない。エーpaddingはCSSで設定できる。width,heightはmxmlのほうに記述しないといけない継承が効かない。個別にstyleNameをつけてあげないといけないのが歯がゆい。背景画像が扱いづらい背景画像は繰り返される。(no-repeatがない)背景画像は中央配置になる。(positionがない)背景画像の多用でデザインをすることが多いと思われるので、これはちょっときつい制限だとおもう。四隅を指定できるので、1枚の背景画像で伸縮自在。a.css+b.css)と、一度読んだものが保持されてしまうんですね。HTMLとは違い、styleNameを徹底的に分ける、など設計をきちんとする必要があります。折り返されない!!「折り返し表示」が鬼門。意外と当たり前に思うことができません。HTMLだと複数子オブジェクトが横幅いっぱいになったら折り返しますが、折り返さない。親の幅が100%だと、親の幅をどこまでも広げていったり。これの対策としては、ライブラリflowBoxを使用して解決しました。http://code.google.com/p/flexlib/wiki/ComponentListしかし、これにはちょっと参りました。数や長さが確定していないオブジェクトを表示するときはレイアウトを考えたほうがよさそうです。ちなみに、テキストの場合は、labelは折り返し不可。文字が省略されますTextは複数行表示可能なので、長い文字/長さが不定ならこちらを使用。折り返したい場合はwidthを指定するとよい。†Flexはいろいろ便利なツールが揃っているので、このへんをうまく使ってデザインしましょう!StyleExplorer?http://examples.adobe.com/flex3/consulting/styleexplorer/Flex3StyleExplorer.htmlコンポーネントごとにスタイル設定をその場で試せる。(全部のスタイルが用意されているわけではないけれど)ほかにどんなスタイルが指定できるかは、これを見たほうが早いっす。Spyhttp://code.google.com/p/fxspy/要はFirebugです。ボタンを埋め込んで使用することができる。†せつめいするひと:Webデザイナー。Flashは5で止まっている。FireWorks派。AS、JSはコピペで奮闘。プログラム入門の本でいつも挫折。だれか教えてください。Application)統合開発環境。Flash上、AIR上で動作する「タイムラインのないFlash」?コンポーネントと呼ばれるパーツがあらかじめ用意されているデザイン...mxml(Flex用のXML)プログラム...ActionScript?に分かれている。†さまざまなシステムへの、アクセスしやすさ、接近可能性などの度合いを示す言葉である。「すべての人と情報の共有が可能であれ」(@wikipedia)「access」「bility」アクセスできる・アクセスしやすさ。「誰もが使える」アクセスできない人もいるってこと!ユーザビリティ(使いやすさ)とは違うもの。†http://www8.cao.go.jp/shougai/whitepaper/h18hakusho/zenbun/honpen/zu_01_27.htmlhttp://www2.nict.go.jp/tao/sien/barrierfree/statistics/communication/hc_internet.htm「身体障害者」30万のうち、半分程度がネット使用者、であるならば結構な人数。シニアも入れると、無視できない。以下のような内容が考えられる。音声のみの情報提供・アラートなどは使用しない。通常サイトを制作している中で困ることはいくつかありますが、ここでは以下のような点をローカルにMAMPで環境を用意して確認できるようしたい思います。ルートからのパスで記述されている場合でも、ローカルで意図したとおりの表示、あるいはリンクが確認できるようにしたいSSIを使用しているサイトもローカルで確認できるようにしておきたい。SSIの拡張子もshtmlではなくhtmlでも確認できるようにしたいまた、上記とは別に問題となるのが、複数のサイト制作が同時に進行している場合に、サイトごとにルートからのパスで記述された内容を確認できる環境が欲しい、ということです。Rootの設定を変更するのは面倒なことになってきます。Host(バーチャルホスト)を用いて複数のサイトを確認できるようにしたいという点も解決したいと思います。Cart(ショッピングカートシステム)をローカルで確認したいという点も、MAMPというアプリケーションを用いて解決していこうと思います。†MAMPのサポートサイトよりMAMPをダウンロードします。環境にて作業を行ってます。†ダウンロードしたmamp_1.7.1.dmgを展開してインストールします。次にMAMPフォルダをApplicationフォルダにドラック&ドロップします。これでMAMPのインストールは完了です。†インストールを行うと、以前にインストールしていたMAMPフォルダ内のデータは削除されてしまいます。以下のステップの通りに行えばMAMPをアップグレードできます。Apache、MySQLを停止させます。MAMPを終了します。データベース、ウェブサイトデータおよび設定ファイルなどMAMPフォルダ内の重要なファイルをバックアップします。どれをバックアップすべきか分からない場合は、例えば「MAMP_old」など「MAMP」フォルダの名前を変えておきます。インストールディスクイメージより、ApplicationフォルダへMAMPフォルダをコピーします。バックアップデータからデータを元に戻します。動作することを確認するまで、バックアップしたファイルやリネームしたMAMPフォルダは保存しておきます。MAMPを起動します。†SSIを使用可能にするため、まず/Application/MAMP/conf/apache/httpd.confを修正します。※念のため修正前のファイルのバックアップをとっておきます。httpd.confから「SSI」という記述を検索すると、以下のような記述がみつかります。.shtmlなお、pache1.3でSSIを有効にするには、AddHandler?ディレクティブを使用して設定してましたが、Apache2.0以降でSSIを有効にするには、AddOutputFilter?ディレクティブを使用します。デフォルトのままですとコメントアウトされているので、以下のように追記しSSIを使用可能とします。.shtml拡張子が.htmlでもSSIが表示されるようにする上記の設定でSSIを使用可能としました。続いて拡張子「.html」「.htm」でもSSIを使用可能に設定します。その場合は以下のように拡張子を追記します。†MAMPでのデフォルトのポート設定は以下のとおりとなっています。Rootはデフォルトだと/Applications/MAMP/htdocsとなっており、ブラウザでアクセスする場合はhttp://localhost:8888でアクセスします。ここでは、複数サイトの制作を同時進行する場合に、サイト毎にディレクトリを分けて管理できるよう設定してみます。これにより、各サイトのディレクトリごとにサイトルートが設定されるため、ルートからのパスも確認できるようになります。今回はhttp://localhost:ポート番号(任意の数字)でサイトを振り分けて表示できるように設定します。仮に、サイト「projectA」を、ディレクトリ「/Applications/MAMP/htdocs/projectA」、ポート番号「8001」サイト「projectB」を、ディレクトリ「/Applications/MAMP/htdocs/projectB」、ポート番号「8002」サイト「projectC」を、ディレクトリ「/Applications/MAMP/htdocs/projectC」、ポート番号「8003」で確認できるよう設定することを想定します。※なお、ポート番号は他で利用しているサービスのポート番号と重複しないよう気をつけてくださいまず、/Application/MAMP/conf/apache/httpd.confを修正します。※念のため修正前のファイルのバックアップをとっておきましょう。8888」と記述されている箇所を見つけます。この後ろへ任意のポート番号の設定を記述します。8003さらにポート番号と各サイトのディレクトリを紐付けるため、以下の記述を追加します。"/Applications/MAMP/htdocs/projectC"</virtualhost>httpd.confを書き換えた際には、MAMPの管理画面にてApacheを再起動させる必要があります(「サーバを停止」ボタンを押下後、「サーバを起動」ボタンを押下)。【画像:MAMP管理画面】ブラウザでアクセスする場合、例えばprojectAのサイトを確認する場合はhttp://localhost:8001で表示できます。†ポート番号と各サイトの関係が複数ある場合、覚えておくのは面倒です。/Applications/MAMP/htdocs/内の各サイトのディレクトリ名を各サイト名と紐付けたディレクトリ名としてしまうと、サイトの入れ替えの際にディレクトリ名も変更されてしまうため、その都度/Application/MAMP/conf/apache/httpd.confのファイルを修正する必要が生じてしまいます。私の場合は「http://localhost:8001」に紐づくのは「project001」ディレクトリ「http://localhost:8002」に紐づくのは「project002」ディレクトリ「http://localhost:8003」に紐づくのは「project003」ディレクトリのようにしておき、サイトの入れ替えが生じた際にはディレクトリ名だけ変えれば済むようにしてます。このままですとポート番号に紐づくサイトを忘れてしまいがちという点は改善されません。href="http://localhost:8001">サイト名</a>のようにリンクの設定しておけば調べる手間が省けます。Hostの設定には、設定ファイルをエディタで開いて修正する必要があります。Rootの変更も可能です。その場合は各ディレクトリ名を各サイト名と紐づいた命名としておいたほうが分かりやすいと思います。3.7.7をリリースしました。