Flex／AIRウィジェットのデザインをCSSでカッコよく：作って学ぶAIRウィジェットの基礎→応用（2）（4/4 ページ）

» 2008年02月27日 00時00分公開

[福田寅成，クラスメソッド株式会社]

画面デザインをCSSでカッコよく！

　AIR／Flexでは、HTMLのようにCSSを用いてコンポーネントのデザインや文字のフォントや色などさまざまな要素を定義できます。AIR／Flexで使うCSSファイルの記述の仕方は既存のHTML向けのCSSの記述の仕方とまったく同じですので、CSSに関するノウハウのある方はそれをフルにAIR／Flexに持ち込むことができます。

　また、HTMLのCSSに比べると、AIR／FlexのCSSは小さくなる傾向があります。複雑なレイアウトなどもHTMLではCSSが担当することがありましたが、AIR／Flexではこれまでに見てきたようなレイアウトコンポーネントやActionScriptが担当することも多く、CSSは純粋にデザインの定義に集中できます。

　技術的には、AIR／FlexでのCSSはほかのコンポーネント同様ActionScriptの1つの「クラス」にすぎません。ですので、従来のCSSの利用から逸脱した利用も実は可能ですが、それに関してはここでは割愛します。

　CSSによる画面デザインは以下の流れでやっていきます。

空のCSSファイルの作成空のCSSファイルの作成
CSSファイルをMXMLにリンクさせる
CSSファイル内にスタイルを定義していく

手順【1】空のCSSファイルの作成

　Flex Builder 3で引き続き作業をしていきます。画面左の［Flex ナビゲータ］で「RSSReader」プロジェクトの「src」フォルダを選択し、右クリックメニューで「新規」を選び、「CSSファイル」をクリックします。

　［新規CSSファイル］ダイアログが開きますので、ファイル名に「style」と入力して「終了」ボタンをクリックします。

手順【2】CSSファイルをMXMLにリンクさせる

　次に、いま作成したCSSファイルをRSSReader.mxmlにリンクさせます。RSSReader.mxmlを再度表示して、コードを追加していきます。リンク方法は簡単です。Modelタグの上に下記コードを追加するだけです。

ソースコード11　CSSファイルの指定

<mx:Style source="style.css" />

　手でタイプしてコードを追加した場合、例えばCSSファイルの名前が間違った場合は、Flex Builder 3からエラーが報告されます。正しくCSSファイルがリンクできたら、いったん、ウィジェットを実行して問題なく動くかどうかを確認しておきます。

手順【3】CSSファイル内にスタイルを定義していく

　1個のスタイルだけですが、実際にコーディングしていってみましょう。ほかのスタイルは、その後にサンプルソースを見ながら追加していってもらいます。最初に、スタイルの2つの種類に関して説明しておきます。


スタイルの種類	概要
セレクタ（ドットなしスタイル）	指定されたコンポーネントすべてに対してスタイルを適用したい場合に利用。MXML側では指定に関するコードを追加する必要はない
クラスセレクタ（ドットありスタイル）	ドットから始まる形で定義する独自スタイル。コンポーネントにスタイルを適用する場合は、コンポーネントの「style」プロパティで指定する必要がある
表2　スタイルの種類

　サンプルで実装するスタイルですが、アプリケーションの全体を表すWindowedApplicationタグに関してのスタイルを定義してみます。この定義は、HTMLにおける＜body＞タグへのスタイル定義に似ていて、そのタグの子＝すべてのコンポーネントに対してスタイルが適用されることになります。

　style.cssファイルを開き、最初の「/* CSS file */」から1行空けて定義を開始します。まず、「WindowedApplication」と入力します。残念ながらこの部分は入力補完が利きません。その後、半角スペースの後に中かっこ「{」、続いて閉じ中かっこを「}」を入力します。

　「WindowedApplication {」の次の行から具体的なスタイルを定義していきます。ここからは入力補完が利きます。以下のように、フォントの種類に関する記述を追加します。

ソースコード12　WindowedApplicationにスタイルを指定

WindowedApplication {

          fontFamily: "ＭＳゴシック";

      }

　それでは、ここまでのウィジェットを動かしてみましょう。あまり違いがありませんかね……。Windows Vistaで開発されている方は、フォントの種類を「メイリオ」などにしてみると違いが分かると思います。

　ほかのスタイルはこちらのstyle.cssのソースコードをコピーして一気に定義してしまいましょう。このままだと、MXMLからすべてのスタイルが参照されているわけではないので、MXMLのタグから参照するコードを追加します。


場所	スタイルの名前	実際の追加コード
「RSS一覧」Panel	Panel02	styleName="Panel02"
rssList	List01	styleName="List01"
「記事一覧」Panel	Panel01	styleName="Panel01"
「内容」Panel	Panel01	styleName="Panel01"
表3　追加するstyleNameプロパティ