Flex の最も強力な特徴の 1 つは、Flex を使うことで非常に柔軟に設計を行えることです。この柔軟性は主に、Adobe が Flex に CSS を実装していることによるものです。例えば私は最近、新しい Adobe AIR™ アプリケーションのシニア UI 開発者として働く中で、全世界の 16 万人の人達に最初の公開リリースを正式に提供する数日前に、デザインに関する変更要求を何件も受け取りました。こうしたリリース直前での変更要求を残虐な行為と見なす開発者が多いと思いますが、私は 20 分間もかからずに変更を完了し、その変更をバージョン管理ツールにチェックインすることができました。これは Flex と CSS の強力さのおかげです。

私は Flex の CSS を UI の開発に活用しています。私の経験によれば、UI の開発では必ずある特定の事態が起こるものであり、その事態に備えて準備する必要があります。そうした必然的な事態の 1 つが、たとえ事前にどれほど準備をしても、プロジェクトでのデザインや機能に関する要件が変更されることです。しかも開発ライフサイクル全体をとおして頻繁に変更されます。これはチーム・ベースの環境で大規模なアプリケーションを開発する際にはやむを得ないことであり、この状況に最もうまく対処するには関係するすべての人の動きを予測し、その予測に従って自分自身があらかじめ適切な位置にいるようにします。この開発手法をマスターできると、常に優位な状況を保つことができ、変化するターゲットに対応するのがかなり容易になります。こうした理由から、私にとって Flex での開発は楽しい作業です。Flex には CSS が統合されているため、まさに上記の開発手法を実践できるのです。

この記事の目標は、この記事を読み終わるまでに皆さんが Flex の CSS の強力な機能を活用できるようになり、Flex UI 開発のマスターとして要件が変更されて行く状況にうまく対処できるようになることです。既に Flex を積極的に使用している読者の場合には、Flex で (特にエンタープライズ・レベルのアプリケーションで) CSS を活用するための新しい手法を、この記事から学んで欲しいと思います。

なぜ CSS を使用するのか

オブジェクト指向のデザイン・パターンでは、ほとんどの場合デザインのロジックを動作機能とは別にします。Adobe ActionScript™ はオブジェクト指向言語であるため、こうしたオブジェクト指向プログラミング (OOP: Object-Oriented Programming) の慣習に従っておくのが賢明です。そうすることによって、柔軟性がもたらされるため、アプリケーションの規模が大きくなっても保守を容易に行えるようになり、コードを再利用することができ、パフォーマンスも改善される、といったメリットが得られます。

Web デザインの世界では、Web サイトのデザインを構成するコードをカプセル化する手段として、CSS を使うのが標準的です。CSS は強力で成熟しているため、経験豊富な大部分の Web デザイナーは Web サイトのデザインやレイアウトのプロパティーの大部分を CSS を最大限に活用して実装しようとします。その結果として、サイトのルック・アンド・フィールを詳細かつ柔軟に制御することができます。CSS は 3、4 年ほど前から一般的に使われるようになりました。その当時 Web 開発者達は、Web サイトのデザインをサイトの動作機能と独立させればデザインを容易に変更することができ、サイトの動作を記述したコードに問題を発生させたり、マイナスの影響を与えたりすることがないと気付き始めたのです。その結果、テンプレートやスキニング、同じコード・ベースの再スキニングなどが盛んに使われるようになりました。例えば、私は自分のブログの Web サイトに WordPress を積極的に使っています。この同じオープンソースのコード・ベースをブログ・サイトに活用している人達は何万人もいますが、それにもかかわらず、WordPress で作成されたことをまったく意識させないサイトに遭遇することがよくあります。これは CSS を使用することでコードとデザインとが驚くほど明確に分離されるおかげなのです。

上に戻る

Flex での CSS

何よりもまず、Web デザインの経歴を持つ読者の場合には、Flex の CSS が W3C の CSS 仕様と同じ規約には従っていないことを理解することが重要です。W3C の CSS Version 2.0 の仕様では単語の区切りにハイフン (-) が使われていますが、Flex に実装されたコーディング規約ではハイフンを使いません。代わりに Flex の CSS 実装ではラクダ記法を使います。例えば、W3C の CSS2 仕様での vertical-center は、Flex の CSS での verticalCenter と同じです。ラクダ記法を使用する言語で既にプログラミングを行っている人は、非常に容易にこの記法に慣れることができます。幸いなことに、CSS 2.0 仕様に記述されている内容の大半は Flex の CSS 実装にもあります。また、Flex に実装された CSS は W3C 標準の CSS 2.0 を大幅に拡張しており、Flex コンポーネントに特有のスタイル・プロパティーが追加されています。

上に戻る

スタイルを維持する: コンポーネントとスタイル・プロパティー

Flex CSS のスタイルシートを作成する前に、最初にスタイルの実装方法を検討することをお勧めします。ここでは簡単のため、スタイルを宣言する 4 つの基本的な方法を説明します。

• コンポーネントのクラス名を使用する。コンポーネントのクラス名をスタイル名として使うことで、コンポーネントにスタイルを設定することができます。

  TitleWindow { borderColor: #f7f7f7; borderAlpha: 1; borderThicknessLeft: 0; borderThicknessTop: 0; borderThicknessBottom: 0; borderThicknessRight: 0; cornerRadius: 0; headerHeight: 0; highlightAlphas: 1, 1; headerColors: #f7f7f7, #f7f7f7; footerColors: #f7f7f7, #f7f7f7; backgroundColor: #f7f7f7; dropShadowEnabled: true; }

  
  
• 一意のスタイル名を使用する。一意のスタイル名を使ってスタイルを宣言することができます。名前の前にドットを付けること、そしてラクダ記法の規約に従うことを忘れないようにします。

  .altText { fontFamily: TVNordEFCEOP-RegularCon; fontSize: 18; color: #FFFFFF; }

  
  
• コンポーネント名とスタイル名を使用する。同じコンポーネントに対して複数のデザインが必要な場合 (ビュー・ステートが複数あるアプリケーションでは一般的です) には、コンポーネントにスタイル名を設定することもできます。この方法では、指定されたコンポーネントのみに特定のスタイルを割り当てることができます。

  Text.bigYellowText { color:#EFB526; fontSize:36; fontWeight:Bold; }

  
  
• グローバル・セレクターを使用する。グローバル・セレクターは特別な種類のセレクターであり、内部にプロパティーが設定された、アプリケーション内のすべてのコンポーネントに影響します。例えば、cornerRadius スタイル・プロパティーを持つすべての表示オブジェクト・コンポーネントに対して、cornerRadius スタイル・プロパティーを、次のようにして 4 に設定することができます。

  global { cornerRadius: 4; }

  
  

スタイルの優先順位

基本的にグローバル・セレクターによってプロパティーのデフォルト値が設定されますが、この値は容易に変更することができます。例えば、インラインまたは CSS ファイルで Button コンポーネントの cornerRadius プロパティーを 0 に設定した場合、この値は、同じく設定されたグローバルなデフォルトの 4 よりも優先されます。その結果、すべての Button コンポーネントは値が 0 の cornerRadius を含むことになります。さらに、4 というグローバル設定も 0 という Button 設定も、追加のスタイルを作成することで変更することができます。

Button.altCornersButton
{
	cornerRadius: 8;	
}

上に戻る

Flex でのスタイルの適用

Flex での CSS の実装方法を選択する際には、状況と環境を考慮する必要があります。デザインを実装する方法を検討する際には、デザインを実装しようとしているアプリケーションを概念的に 5 万フィート上空から眺めることが重要です。以下の方法は Flex で CSS を使う場合の最も一般的な方法です。

インスタンスに (インラインで) スタイルを設定する

Flex の UIComponent 基底クラスを継承する Flex コンポーネントを利用すると、共通のスタイルをインラインで (つまり MXML コンポーネントの宣言タグ内部で) プロパティーとして設定することができます (リスト 1)。表示オブジェクトのレイアウト・プロパティーは、そのオブジェクトに固有であることが多いものです。そのため、あるコンポーネントに対して何らかのプロパティー (x、y、height、width、top、right、left、bottom、horizontalCenter、verticalCenter、horizontalAlign、verticalAlign) が明示的に設定されることがよくあります。

	
<mx:Button id="volumeIcon" cornerRadius="0" alpha="0.9"
	verticalCenter="0" enabled="true" toolTip="Volume Control"
	click="toggleVolumeControl();" />

リスト 1 は、volumeIcon という値の id によって Button コンポーネントの特定インスタンスに特有のスタイル・プロパティーを設定する機能の例を示しています。ここでは、こうした特別なスタイル値を要求するボタンがこれだけであることがわかっているため、この特定のボタンの cornerRadius、alpha、verticalCenter を明示的に設定しています。

MXML コンポーネント・タグにスタイル・プロパティーを設定する際の適切なやり方としては、今設定しようとしている特定のプロパティー値が、そのコンポーネントに特有であることがわかっている場合にのみ、上述の方法でプロパティーを設定するように心がけることです。例えば、あるアプリケーションには表示オブジェクトを隙間なく垂直方向に積み上げるためのコンテナーが必要だとします。同時に、そのアプリケーションの他の VBox コンテナーは表示オブジェクト間に間隔を必要とする、ということがわかっているとします。こうした状況では、その VBox コンポーネントのインスタンスに verticalGap プロパティーを明示的に設定する必要があります (リスト 2)。

	
<mx:VBox id="myVBox" verticalGap="0" 
	x="15" y="15" width="100%" height="100%">
		
(...)
		
</mx:VBox>

MXML に CSS を埋め込む

この方法では、<mx:Style/> タグを使ってスタイルまたはアセットを MXML ファイルに直接埋め込みます。実際には、スタイル情報を MXML ファイルに直接埋め込むことが適切なケースは稀です。重要な注意点として、アプリケーションの中に CSS が大量に埋め込まれていると、アプリケーションの規模が大きくなるにつれてデザインの維持が次第に困難になることを認識しておく必要があります。それを念頭に置き、この方法を積極的に使用することは避け、必要な場合にのみ使用するようにします。リスト 3 はスタイル宣言が埋め込まれた例です。この宣言は外部の CSS ファイルの中に記述すべきものであり、そうすればコードの保守性を高めることができます。

	
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication 
	xmlns:mx="http://www.adobe.com/2006/mxml"
	layout="absolute"
	showFlexChrome="false"
	borderStyle="none" 
	keyUp="{this.onKeyStrokeEvent(event);}">
	
	
	<mx:Style>
		.bGroup {
			borderSides:"left,bottom,right";
			borderStyle:"solid";
			borderColor:#6d6f71;
			borderLeftThickness:3;
			borderRightThickness:3;
			borderBottomThickness:1;
			dividerColor:#6d6f71;
			dividerThickness:3;
		}
	</mx:Style>
	
	<mx:Script>
		<![CDATA[ 
			
			(...)

ただし、だからといって、この方法を絶対に使ってはいけないというわけではありません。リスト 4 は、あるアプリケーションのために私が作成したコンポーネントをスケール・ダウンしたものですが、これは Flex の AplicationControlBar をベースにしています。提供されたデザインでは、コントロール・バーの各ボタンは実際には 1 つの単語のテキストにすぎず、ボタンと言うよりもむしろリンクに似ていました。また、こうした 1 つの単語から成るすべてのリンクの間は小さなビュレットで区切られていました。私にはアプリケーション全体のデザインが既にわかっていたため、このビュレットによる区切りがアプリケーションのメインのコントロール・バーに特有であり、他にはどこにも現れないことを知っていました。最も重要な点として、このビュレットは同じコンポーネントの中に数回現れるため、MXML ファイル内の独自のプライベート・クラスとしてビュレットの画像を埋め込むことに十分な意味がありました。こうすることで、リンクの間に配置した各画像コントロールから実際のビュレットの画像にバインドすることができたのです。もしこの方法を使わなかったとしたら、同じ画像のインスタンスが複数作成されることになっていたことでしょう。それではシステム・リソースの浪費でしかありません。

	
<?xml version="1.0" encoding="utf-8"?>
<mx:ApplicationControlBar xmlns:mx="http://www.adobe.com/2006/mxml">

 <mx:Script>
        <![CDATA[
        	
            [Embed(source="assets/bullet_black.png")]
            [Bindable]
            private var bullet:Class;            
            
        ]]>
    </mx:Script>

	<mx:HBox x="10" y="10" id="hbox" horizontalGap="10" width="350">
		<mx:LinkButton label="Help" styleName="appBarButton"/>
		<mx:Image source="{bullet}" />
		<mx:LinkButton label="About" styleName="appBarButton"/>
		<mx:Image source="{bullet}" />
		<mx:LinkButton label="Minimize" styleName="appBarButton" />
		<mx:Image source="{bullet}" />
		<mx:LinkButton label="Quit" styleName="appBarButton"/>
	</mx:HBox>
</mx:ApplicationControlBar>

外部スタイルシート

Flex アプリケーションまたは AIR アプリケーションには、ソース・コード・ディレクトリーのルートに MXML ファイルが 1 つあり、このファイルは Application クラス (Flex) または WindowedApplication クラス (AIR) がベースになっています。これはデフォルトの MXML アプリケーション・ファイルであり、<mx:Application/> または <mx:WindowedApplication/> で始まります。アプリケーションのスタイルシートのソースは、そのアプリケーションの基底クラスの宣言の直後に置く必要があります (リスト 5)。

	
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication 
	xmlns:mx="http://www.adobe.com/2006/mxml"
	layout="absolute"
	showFlexChrome="false"
	dropShadowEnabled="false" 
	borderStyle="none" 
	applicationComplete="{this.appInit(event);}"
	>
	
	<mx:Style source="com/passalong/assets/RED_SKIN_MAIN.css"/>
	
	<mx:Script>
		<![CDATA[
			...

アプリケーションのスタイル設定を維持するために最も容易で最も安全な方法は、外部スタイルシートを使う方法です。実際、大規模なアプリケーションのすべてのスタイルを 1 つの CSS ファイルで適切に維持することも可能です。私は 1 つの CSS ファイルのみを使うことにしましたが、その理由は 2 つあります。第 1 に、CSS ファイルが 1 つであれば、スタイル設定がどこにあるのか必ずわかります。第 2 に、チーム環境で作業を行う際に他の開発者が容易にスタイルを見つけることができます。アプリケーションの規模が大きくなるにつれて CSS ファイルも必然的に規模が大きくなるため、この CSS ファイルを十分に整理しておく必要があります。

アプリケーションのためのメインの CSS ファイルを作成する際には、コンポーネントのデフォルト・スタイルを最初に宣言することが適切です。例えば、アプリケーションのどの部分でもツールチップの表示を同じにするためには、そのスタイルの名前を ToolTip とし、それをファイルの先頭近くに配置します。私はアプリケーションをできるだけユーザー･フレンドリーにするために、アプリケーションを構成するほとんどすべての部品に対して可能な限り tooltip コンポーネントを付けるようにしています。そのため私のアプリケーションでは、tooltip コンポーネントはおそらく他のどのコンポーネントよりも頻繁に表示されます。アプリケーション全体としてのルック・アンド・フィールに最も大きな影響を与えるものがコンポーネントのデフォルト・スタイルであるため、このスタイルに素早く容易にアクセスできる必要があります。そのため、通常はこうしたスタイルを先頭に配置することが適切なのです。

ほとんどのアプリケーションでは、各コンポーネントに対してデフォルトのスタイルを作成するだけでは終わらないと思ってください。その好例が Button コンポーネントです。同様に、CSS コードを整然とした状態に保つために、コンポーネントのスタイルをサブセットにグループ分けすることを検討する必要があります。例えば、切り換え可能な 3 つのボタン・スタイルとして Button.musicPlayerPlay、Button.pageDown、Button.backToMenu があるデザインの場合には、それらのスタイルを連続してスタイルシートの中に配置し、スタイル・グループ同士をコメントによって分離します。

上に戻る

getStyle() と setStyle() を使う

UIComponent 基底クラスから派生したすべてのコンポーネントは、getStyle() と setStyle() という 2 つのメソッドを継承しています。この 2 つのメソッドによって、信じられないほど柔軟に開発を行えるようになります。特に、プログラムでスキニングを行う場合には顕著です。この記事では、この機能の使い方をすべて説明することはしませんが、この機能の強力さを示すためにそれぞれ非常に異なる使い方をいくつか紹介することにします。ActionScript コードの中でこの機能を使う場合、setStyle を呼び出すためには getStyle を呼び出す必要があり、またgetStyle を呼び出すためには setStyle を呼び出す必要があります。

リスト 6 は、この 2 つのメソッドの使い方を示しています。ここではウィンドウが最小化された状態になった場合、この 2 つのメソッドを使ってタスクバー・ボタンのスキンの設定を行っています。

	
private function toMinimized():void {
	   TaskBarManager.addToTaskBar(this);
	   pushStateProperties(stateMin, x, y, 200, titleBar.height, NaN, NaN);
	        
	   minimizeButton.setStyle("upSkin", getStyle("restoreButtonUpSkin"));
	   minimizeButton.setStyle("disabledSkin", getStyle("restoreButtonDisabledSkin"));
	   minimizeButton.setStyle("downSkin", getStyle("restoreButtonDownSkin"));
	   minimizeButton.setStyle("OverSkin", getStyle("restoreButtonOverSkin"));
	        
	   maximizeButton.setStyle("upSkin", getStyle("maximizeButtonUpSkin"));
	   maximizeButton.setStyle("disabledSkin", 
	        getStyle("maximizeButtonDisabledSkin"));
	   maximizeButton.setStyle("downSkin", getStyle("maximizeButtonDownSkin"));
	   maximizeButton.setStyle("OverSkin", getStyle("maximizeButtonOverSkin"));
	        
	   dispatchEvent(new Event("minimize"));
}

リスト 6 の toMinimized メソッドは Flex の Panel クラスを継承するカスタム・コンポーネントから引用したものです。このコンポーネントによって、アプリケーションの中で、(背後の何かにアクセスする必要がある場合に) タイトル・バーしか表示されないように最小化できる新しいウィンドウの外観を設定することができます。このコンポーネントの優れた点は、ウィンドウが最小化されている場合、getStyle メソッドと setStyle メソッドを使って最小化ボタンのスキンを即座に再設定できる点です (つまり、最小化ボタンを、元のサイズに戻すボタンに変更し、最大化ボタンのスキンに新しい状態を設定することができます)。要するに、ここでは一種のトグル・スイッチを作成することで 1 つのクラスの同じインスタンスを再利用しており、それによってシステム・リソースを節約しています。

都合の良いことに、setStyle メソッドは下記の構文を使って MXML でも利用することができます。

<mx:SetStyle name=”styleNameAsString” value=”newStyleValue” />

MXML を使って setStyle が呼び出されると、setStyle は自動的に getStyle を呼び出します。そのため、そのスタイルの現在のプロパティーを取得し、そのスタイルをリセットする、という必要がありません。リスト 7 ではアプリケーションの状態が変化すると新しい背景画像を設定しています。このリストからわかるように、ステートフルなデザイン・パターンを使用するアプリケーションの場合に setStyle メソッドは特に便利です。

	
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
	layout="absolute"
	creationComplete="init()">
	
	<mx:states>
		<mx:State name="MyLibraryState">
			<mx:AddChild position="firstChild">
				<comp:CollectionsLibrary height="100%" width="100%" 
					horizontalCenter="0" verticalCenter="0">
				</comp:CollectionsLibrary>
			</mx:AddChild>
			<mx:SetStyle name="backgroundImage"
				value="@Embed(source='com/passalong/assets/
				          my_collections_background.png')" />
			<mx:SetProperty target="{vbox1}" name="y" value="442.95"/>
		</mx:State>
	</mx:states>
	(…)

上に戻る

実行時の CSS

Flex Version 3 の興味深い特徴として、CSS ファイルを SWF ファイルとしてコンパイルし、その SWF ファイルを実行時にロードすることができます。この機能を利用すると、ユーザーは自分達の好みに応じてアプリケーションのルック・アンド・フィールを変更することができます。この種の機能がソーシャル・メディアの Web サイトに使われているのを見たことがある読者もいるかもしれません。そうしたサイトでは、ユーザーが実行時に新しいデザインの view.Compile スタイルシートを選択してロードすると、JavaScript™ コードを使って CSS ファイルが切り換えられます。

当然ながら、Flex ではこれを簡単に実現することができます。単純に新しい CSS ファイルを作成し、そのファイルの中に CSS スタイル・セレクターを配置し、そのファイルを保存します。次に、Flex のナビゲーター・パネル (Flex Development モードでは左上のペイン) の中で、今作成した CSS ファイルを右クリックし、Compile CSS to SWF (CSS を SWF にコンパイル) をクリックします。

StyleManager クラス

アプリケーションの中で使用するスタイルシートをすべて作成してコンパイルし、SWF ファイルとして別にしておくと、Flex の StyleManager クラスを使ってスタイルシート同士を容易に切り換えることができます (リスト 8)。

	
private function loadFirstStyleSheet():void {
	StyleManager.loadStyleDeclarations("CSS1.swf");
}
		
private function loadSecondStyleSheet():void {
	StyleManager.loadStyleDeclarations("CSS2.swf");
}

負荷に関する考慮

コンパイル済みのスタイルシートを実行時にロードする場合には、それによってユーザーのシステムにかかる負荷を考慮することが重要です。デザインの実装にこの方法を使う場合は、十分注意して控えめに使う必要があります。この方法を多用すると、利用可能なシステム・リソースが不足してくるため、アプリケーションのパフォーマンスは急速に低下します。

テーマとスキニング

私が Adobe に関して常に高く評価していることは、彼らは提供するツール同士のギャップを埋めることを重視しており、それによって設計と開発の作業を合理化し、迅速に行えるようにしようとしていることです。実際、Flex UI を設計する上で私が気に入っている点は、何を実現しようとしているのかに応じて、使用するアプリケーションを Adobe のさまざまなアプリケーション (Flex、Illustrator®、Flash®、Photoshop®、Fireworks® など) 間で簡単に切り換えられる点です。その結果、実質的に、「普通のデザイナー」が簡単に「才能あるデザイナー」になることができます。Adobe Developer Connection には、この点について詳しく述べた何本かの優れた記事が紹介されています。

上に戻る

まとめ

この記事では、Flex アプリケーションで CSS を実装する方法を数多く紹介しました。しかしそれでも、Flex と AIR に組み込まれたデザイン機能 (特に CSS を多用する、スキンの作成と実装) については紹介できませんでした。この記事は出発点として適切ですが、カスタムのコンポーネントを作成する場合には、Flex での CSS の使い方をさらに研究することをお勧めします。そのようにして皆さんが Flex と CSS に関する研究を完了し、このトピックを確実に理解できたら、UIComponent クラスを継承するカスタム・コンポーネントを作成してみてください。そしてそのコンポーネントを完全にスケーラブルに、またカスタマイズ可能にし、他の人がそのコンポーネントを使えるようにしてみてください。

参考文献

学ぶために

• スキンの作成方法と使い方に関する情報として、Adobe による下記の資料を調べてみてください。
  • Narciso Jaramillo による「Creative Suite 3とFlex Builder 3を使用したFlex 3のスキンとスタイルのデザイン」
  • Adobe の UI resource center
  • Flex のブログ・サイトの Chapter 23: Importing Skins into Flex Builder
  
  
• アプリケーションのアセットを埋め込むための資料として、Flex Quick Start を調べてみてください。
  
  
• developerWorks の Web development ゾーンには Web 2.0 開発に関するツールと情報が満載されています。
  
  
• developerWorks の Technical events and webcasts で最新情報を入手してください。
  
  
• My developerWorks で developerWorks のエクスペリエンスをパーソナライズしてください。
  
  

製品や技術を入手するために

• Flex Style Explorer sandbox を試してみてください。
  
  

著者について

Dan Orlando はソフトウェア・アーキテクトであり、Flex、AIR、ActionScript などを含む、クライアントでのリッチ・クライアント・サーバー・アプリケーションを専門としています。彼はさまざまな Web サービス・プロトコルとサーバー・サイド言語を扱っています。彼は Avijax のメーカーである Vision Media Group の共同設立者であり、また (RED)WIRE チームのシニア UI 開発者でもあります。

この記事を評価する

コメント

上に戻る

目次

• なぜ CSS を使用するのか
• Flex での CSS
• スタイルを維持する: コンポーネントとスタイル・プロパティー
• Flex でのスタイルの適用
• getStyle() と setStyle() を使う
• 実行時の CSS
• まとめ
• 参考文献
• 著者について
• コメント