アークウェブ
Webデザイン
SandBox
Web制作会社アークウェブのスタッフが、デザインのTips・ノウハウをまとめているWikiです
アークウェブシステム開発SandBox
アークウェブWebマーケティングSandBox
アークウェブWebデザインSandBox
アークウェブ アクセシビリティWiki
[
トップ
] [
新規
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
]
開始行:
**はじめに [#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]
#blikimore
***開発環境 [#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)で...
これらのファイルをコンパイルすると、swfのできあがり。
***rascutが便利 [#y2f122bc]
コンパイルにはSDKのコンパイラより rascutが早いし自動コン...
rascutのインストールについては、こちらで。
http://www.ark-web.jp/sandbox/wiki/?Flex%2Frascut
デザイナーでも黒い画面でやってみよう。rascutをインストー...
SSHの使用できるアプリ(winならputty、macならターミナルでO...
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...
<mx:Style source="stylesheets/sample.css" />
<mx:Button label="Hello World!" width="150" height="...
</mx:Application>
これを黒い画面でコンパイルすると、こうなる
#flash( /sandbox/design/data/flex/sample01.swf, 240x180, ...
- ボタンもマウスオーバー、マウスダウンに反応します
- ちなみにこの時点でCSSの中身は空なので、デフォルトスタイ...
- <mx:Application>が最上位のコンポーネント。<HTML>タグみ...
- XMLなので、タグはきちんと閉じましょう。
***コンポーネントの種類 [#tcfe0565]
- コンテナ(レイアウトにつかう)
- コントロール(ボタン、リスト)
などビジュアル系のコンポーネントのほか、エフェクトやバリ...
''代表的なコンポーネント''
-Box
#flash( /sandbox/design/data/flex/sample02.swf, 360x270, ...
--Boxは、divみたいに中にほかのコンポーネントを入れられる...
---HBoxは、内容物を横にならべる。
---VBoxは、内容物を縦にならべる。
<mx:HBox width="100%" height="100%" horizontalAlign="cen...
<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, ...
--メニューに使えますね。
<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, ...
--Webアプリで使えるカレンダーUI。
<mx:DateField formatString="YYYY/MM/DD" />
-DateField
#flash( /sandbox/design/data/flex/sample06.swf, 360x270, ...
--Webアプリで使えるカラーピッカー。
<mx:DateField formatString="YYYY/MM/DD" />
-DataGrid
#flash( /sandbox/design/data/flex/sample05.swf, 360x270, ...
<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/expl...
**スタイルの設定 [#f2e5f457]
デザインの調整はどうするの?
スタイルシートを使います。
(→[[WebデザイナーにもわかるFlex画面デザイン(2)]]につづ...
#blikifooter(小森)
tag: [[Flex>tag/Flex]]
終了行:
**はじめに [#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]
#blikimore
***開発環境 [#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)で...
これらのファイルをコンパイルすると、swfのできあがり。
***rascutが便利 [#y2f122bc]
コンパイルにはSDKのコンパイラより rascutが早いし自動コン...
rascutのインストールについては、こちらで。
http://www.ark-web.jp/sandbox/wiki/?Flex%2Frascut
デザイナーでも黒い画面でやってみよう。rascutをインストー...
SSHの使用できるアプリ(winならputty、macならターミナルでO...
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...
<mx:Style source="stylesheets/sample.css" />
<mx:Button label="Hello World!" width="150" height="...
</mx:Application>
これを黒い画面でコンパイルすると、こうなる
#flash( /sandbox/design/data/flex/sample01.swf, 240x180, ...
- ボタンもマウスオーバー、マウスダウンに反応します
- ちなみにこの時点でCSSの中身は空なので、デフォルトスタイ...
- <mx:Application>が最上位のコンポーネント。<HTML>タグみ...
- XMLなので、タグはきちんと閉じましょう。
***コンポーネントの種類 [#tcfe0565]
- コンテナ(レイアウトにつかう)
- コントロール(ボタン、リスト)
などビジュアル系のコンポーネントのほか、エフェクトやバリ...
''代表的なコンポーネント''
-Box
#flash( /sandbox/design/data/flex/sample02.swf, 360x270, ...
--Boxは、divみたいに中にほかのコンポーネントを入れられる...
---HBoxは、内容物を横にならべる。
---VBoxは、内容物を縦にならべる。
<mx:HBox width="100%" height="100%" horizontalAlign="cen...
<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, ...
--メニューに使えますね。
<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, ...
--Webアプリで使えるカレンダーUI。
<mx:DateField formatString="YYYY/MM/DD" />
-DateField
#flash( /sandbox/design/data/flex/sample06.swf, 360x270, ...
--Webアプリで使えるカラーピッカー。
<mx:DateField formatString="YYYY/MM/DD" />
-DataGrid
#flash( /sandbox/design/data/flex/sample05.swf, 360x270, ...
<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/expl...
**スタイルの設定 [#f2e5f457]
デザインの調整はどうするの?
スタイルシートを使います。
(→[[WebデザイナーにもわかるFlex画面デザイン(2)]]につづ...
#blikifooter(小森)
tag: [[Flex>tag/Flex]]
ページ名:
アークウェブのサービスやソリューションはこちら
サービス
Webの企画・戦略立案
Webデザイン
Webシステム開発
Zen Cartソリューション
Zen Cart導入コンサルティング, RFP作成, トラブル診断
Zen Cartで大規模ECサイト構築
Zen Cartモジュールの開発・カスタマイズ
Zen Cart制作会社(デザイン・企画会社)様向けサービス
Zen Cart海外向け・多言語ECサイトの制作
Zen Cartのデザイン, ペルソナ/シナリオ法, RIA(Ajax・Flex)
Zen Cartのセキュリティ・運用保守サポート
Zen Cart企画・マーケティング戦略, SEO・SEM(サーチエンジン広告)
Zen Cartハイエンド版(大規模サイト用高可用バージョン)
EC-CUBEとZen Cart 機能比較表(概要)
Zen Cart携帯モジュール(モバイルショップ構築用)
Zen Cartの導入事例
Zen-Cart.JPのご紹介とアークウェブの取り組み
Zen-Cartモバイルショップ構築サービス
Movable Typeソリューション
企業サイトでのMovable Type活用
Movable Type用プラグイン一覧
MT用フォーム作成プラグイン「A-Form」
A-Formパートナー制度
その他ソリューション
AjaxでRIA開発
Ruby on Rails
Flexによる業務システム構築
ペルソナ/シナリオ法
ビジネスブログ
SNS・ソーシャルソフトウェア
SEO・SEM
アークウェブのCSR(企業の社会的責任)
アークウェブのCSR指針