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の人にはいいらしい？？
 --ドリみたいなもん？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

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