WebデザイナーにもわかるFlex画面デザイン（1）のバックアップソース(No.3)

バックアップ一覧
差分を表示
現在との差分を表示
バックアップを表示
WebデザイナーにもわかるFlex画面デザイン（1）へ行く。
- 1 (2008-08-01 (金) 15:00:08)
- 2 (2008-08-01 (金) 17:17:46)
- 3 (2008-09-02 (火) 12:49:18)
- 4 (2008-09-04 (木) 16:42:57)
*WebデザイナーにもわかるFlex画面デザイン(1) [#r2982611]

**はじめに [#t4b85a13]

 せつめいするひと：
 Webデザイナー。女。Flashは5で止まっている。
 HTMLは手打ち。FireWorks派。Windows。
 AS、JSはコピペで奮闘。がよくわかってない。プログラム入門の本でいつも挫折。だれか教えてください。

そんなWebデザイナーがFlexをやってみたよ！

//-----------------------------------------

**Flexとは？ [#g4d021e1]

- いわゆるRIA（Rich Internet Application）統合開発環境。
- Flash上、AIR上で動作する
-「タイムラインのないFlash」？
-コンポーネントと呼ばれるパーツがあらかじめ用意されている

- デザイン…mxml(Flex用のXML)
- プログラム…ActionScript
に分かれている。

**つくりかた [#z5b739f6]

*WebデザイナーにもわかるFlex画面デザイン(1) [#r2982611]

**はじめに [#t4b85a13]

 せつめいするひと：
 Webデザイナー。女。Flashは5で止まっている。
 HTMLは手打ち。FireWorks派。Windows。
 AS、JSはコピペで奮闘。がよくわかってない。プログラム入門の本でいつも挫折。だれか教えてください。

そんなWebデザイナーがFlexをやってみたよ！

//-----------------------------------------

**Flexとは？ [#g4d021e1]

- いわゆるRIA（Rich Internet Application）統合開発環境。
- Flash上、AIR上で動作する
-「タイムラインのないFlash」？
-コンポーネントと呼ばれるパーツがあらかじめ用意されている

- デザイン…mxml(Flex用のXML)
- プログラム…ActionScript
に分かれている。

**つくりかた [#z5b739f6]

***開発環境 [#rd76da63]
-FlexBuilder
--ドリみたいなもん？Javaの人に便利な統合開発環境らしい？
-Flex SDK（無償）
--黒い画面で使えるコンパイラとデバッガ
--http://www.adobe.com/jp/products/flex/sdk/

***必要なファイル [#a163d096]

- mxml
- as
- css
- 画像（gif/jpg/png）、swf

これだけ。
なので、Flex SDKを使えば、秀丸とFireworks（Photoshop）でいますぐFlexアプリがつくれます。

これらのファイルをコンパイルすると、swfのできあがり。

***rascutが便利 [#y2f122bc]
コンパイルにはSDKのコンパイラより　rascutが早いし自動コンパイルしてくれるので便利！
rascutのインストールについては、こちらで。
http://www.ark-web.jp/sandbox/wiki/?Flex%2Frascut

デザイナーでも黒い画面でやってみよう。rascutをインストールできたら、
SSHの使用できるアプリ（winならputty、macならターミナルでOK）を起動して、

 cd public_html/flex（mxmlのあるディレクトリまで移動）

 rascut sample.mxml（ファイル名を指定してrascut実行）

これでOK。
あとは勝手に更新を察知して自動コンパイルしてくれます。

//-----------------------------------------

**中身をみてみる [#qbd50e73]

MXMLの中身

 <?xml version="1.0" encoding="utf-8"?>
 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 <mx:Style source="stylesheets/sample.css" />
 
     <mx:Button label="Hello World!" width="150" height="18" />
 
 </mx:Application>

これを黒い画面でコンパイルすると、こうなる
#flash( /sandbox/design/data/flex/sample01.swf, 240x180, version=9)

- ボタンもマウスオーバー、マウスダウンに反応します
- ちなみにこの時点でCSSの中身は空なので、デフォルトスタイルです。
- <mx:Application>が最上位のコンポーネント。<HTML>タグみたいなもんですね。この中に要素をどかどか入れていきます。
- XMLなので、タグはきちんと閉じましょう。


***コンポーネントの種類 [#tcfe0565]
- コンテナ（レイアウトにつかう）
- コントロール（ボタン、リスト）

などビジュアル系のコンポーネントのほか、エフェクトやバリデータなどのコンポーネントもある。

''代表的なコンポーネント''

-Box
#flash( /sandbox/design/data/flex/sample02.swf, 360x270, version=9)

--Boxは、divみたいに中にほかのコンポーネントを入れられる矩形。レイアウトに使用します。
---HBoxは、内容物を横にならべる。
---VBoxは、内容物を縦にならべる。
 <mx:HBox width="100%" height="100%" horizontalAlign="center" verticalAlign="middle" >
     <mx:Button label="Boo" width="100" height="18" />
     <mx:Button label="Hoo" width="100" height="18" />
     <mx:Button label="Wooooo" width="100" height="18" />
 </mx:HBox>

-TabBar
#flash( /sandbox/design/data/flex/sample03.swf, 360x270, version=9)

--メニューに使えますね。
 <mx:TabBar>
    <mx:dataProvider>
		<mx:Array>
			<mx:Object label="About" />
			<mx:Object label="Download" />
			<mx:Object label="Download" />
			<mx:Object label="Help" />
		</mx:Array>
     </mx:dataProvider>
 </mx:TabBar>

-DateField
#flash( /sandbox/design/data/flex/sample04.swf, 360x270, version=9)
--Webアプリで使えるカレンダーUI。
 <mx:DateField formatString="YYYY/MM/DD" />

-DataGrid
#flash( /sandbox/design/data/flex/sample05.swf, 360x270, version=9)

 <mx:DataGrid  width="100%" height="100%"
	dataProvider="{services}">
	<mx:columns>
		<mx:DataGridColumn dataField="name" headerText="サービス名"/>
		<mx:DataGridColumn dataField="URL" headerText="URL"/>
		<mx:DataGridColumn dataField="description" headerText="説明"/>
	</mx:columns>
 </mx:DataGrid>
 
 <mx:XMLList id="services">
	<service>
		<name>ecoったー</name>
		<URL>http://eco.tter.jp/</URL>
		<description>eco*Twitter</description>
	</service>
	<service>
		<name>necoったー</name>
		<URL>http://neco.tter.jp/</URL>
		<description>＝^..^＝</description>
	</service>
	<service>
		<name>miqqle</name>
		<URL>http://miqqle.jp/</URL>
		<description>これは便利！</description>
	</service>
 </mx:XMLList>



などなど、HTMLならjsなどでいろいろ記述しないといけところを、
たったこれだけの記述でできちゃいます！
コンポーネント化されているって便利。

***その他のコンポーネント [#s07c0110]
-これを見たほうが早いね！
-- ComponentExplorer
-- http://examples.adobe.com/flex3/componentexplorer/explorer.html


**スタイルの設定 [#f2e5f457]
デザインの調整はどうするの？
スタイルシートを使います。
（まだ書き途中）

***必要なファイル [#a163d096]

- mxml
- as
- css
- 画像（gif/jpg/png）、swf

これだけ。
なので、Flex SDKを使えば、秀丸とFireworks（Photoshop）でいますぐFlexアプリがつくれます。

これらのファイルをコンパイルすると、swfのできあがり。

***rascutが便利 [#y2f122bc]
コンパイルにはSDKのコンパイラより　rascutが早いし自動コンパイルしてくれるので便利！
rascutのインストールについては、こちらで。
http://www.ark-web.jp/sandbox/wiki/?Flex%2Frascut

デザイナーでも黒い画面でやってみよう。rascutをインストールできたら、
SSHの使用できるアプリ（winならputty、macならターミナルでOK）を起動して、

 cd public_html/flex（mxmlのあるディレクトリまで移動）

 rascut sample.mxml（ファイル名を指定してrascut実行）

これでOK。
あとは勝手に更新を察知して自動コンパイルしてくれます。

//-----------------------------------------

**中身をみてみる [#qbd50e73]

MXMLの中身

 <?xml version="1.0" encoding="utf-8"?>
 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 <mx:Style source="stylesheets/sample.css" />
 
     <mx:Button label="Hello World!" width="150" height="18" />
 
 </mx:Application>

これを黒い画面でコンパイルすると、こうなる
#flash( /sandbox/design/data/flex/sample01.swf, 240x180, version=9)

- ボタンもマウスオーバー、マウスダウンに反応します
- ちなみにこの時点でCSSの中身は空なので、デフォルトスタイルです。
- <mx:Application>が最上位のコンポーネント。<HTML>タグみたいなもんですね。この中に要素をどかどか入れていきます。
- XMLなので、タグはきちんと閉じましょう。


***コンポーネントの種類 [#tcfe0565]
- コンテナ（レイアウトにつかう）
- コントロール（ボタン、リスト）

などビジュアル系のコンポーネントのほか、エフェクトやバリデータなどのコンポーネントもある。

''代表的なコンポーネント''

-Box
#flash( /sandbox/design/data/flex/sample02.swf, 360x270, version=9)

--Boxは、divみたいに中にほかのコンポーネントを入れられる矩形。レイアウトに使用します。
---HBoxは、内容物を横にならべる。
---VBoxは、内容物を縦にならべる。
 <mx:HBox width="100%" height="100%" horizontalAlign="center" verticalAlign="middle" >
     <mx:Button label="Boo" width="100" height="18" />
     <mx:Button label="Hoo" width="100" height="18" />
     <mx:Button label="Wooooo" width="100" height="18" />
 </mx:HBox>

-TabBar
#flash( /sandbox/design/data/flex/sample03.swf, 360x270, version=9)

--メニューに使えますね。
 <mx:TabBar>
    <mx:dataProvider>
		<mx:Array>
			<mx:Object label="About" />
			<mx:Object label="Download" />
			<mx:Object label="Download" />
			<mx:Object label="Help" />
		</mx:Array>
     </mx:dataProvider>
 </mx:TabBar>

-DateField
#flash( /sandbox/design/data/flex/sample04.swf, 360x270, version=9)
--Webアプリで使えるカレンダーUI。
 <mx:DateField formatString="YYYY/MM/DD" />

-DataGrid
#flash( /sandbox/design/data/flex/sample05.swf, 360x270, version=9)

 <mx:DataGrid  width="100%" height="100%"
	dataProvider="{services}">
	<mx:columns>
		<mx:DataGridColumn dataField="name" headerText="サービス名"/>
		<mx:DataGridColumn dataField="URL" headerText="URL"/>
		<mx:DataGridColumn dataField="description" headerText="説明"/>
	</mx:columns>
 </mx:DataGrid>
 
 <mx:XMLList id="services">
	<service>
		<name>ecoったー</name>
		<URL>http://eco.tter.jp/</URL>
		<description>eco*Twitter</description>
	</service>
	<service>
		<name>necoったー</name>
		<URL>http://neco.tter.jp/</URL>
		<description>＝^..^＝</description>
	</service>
	<service>
		<name>miqqle</name>
		<URL>http://miqqle.jp/</URL>
		<description>これは便利！</description>
	</service>
 </mx:XMLList>



などなど、HTMLならjsなどでいろいろ記述しないといけところを、
たったこれだけの記述でできちゃいます！
コンポーネント化されているって便利。

***その他のコンポーネント [#s07c0110]
-これを見たほうが早いね！
-- ComponentExplorer
-- http://examples.adobe.com/flex3/componentexplorer/explorer.html


**スタイルの設定 [#f2e5f457]
デザインの調整はどうするの？
スタイルシートを使います。
（まだ書き途中）
アークウェブWebデザインSandBox

アークウェブのサービスやソリューションはこちら
