アークウェブ
Webデザイン
SandBox
Web制作会社アークウェブのスタッフが、デザインのTips・ノウハウをまとめているWikiです
アークウェブシステム開発SandBox
アークウェブWebマーケティングSandBox
アークウェブWebデザインSandBox
アークウェブ アクセシビリティWiki
http://www.ark-web.jp/sandbox/design/wiki/280.html
[
トップ
] [
編集
|
差分
|
バックアップ
|
添付
|
リロード
] [
新規
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
]
-- 雛形とするページ --
Adobe MAX Japan 2009 2日目レポート
Ajax/角丸ライブラリ
AsEventListener
ComponentExplorer
Flex/Flash Catalyst βを試す
FormatDate
FrontPage
Google Browser Size でファーストビューをチェック
InterWikiName
JavaScript
MT/管理画面/テンプレートのオーバーライド
MenuBar
PHP
PukiWiki
RecentDeleted
SandBox
WebデザイナーにもわかるFlex画面デザイン(1)
WebデザイナーにもわかるFlex画面デザイン(2)
WebデザイナーにもわかるFlex画面デザイン(3)
WebデザイナーにもわかるFlex画面デザイン(4)
WebデザイナーにもわかるFlex画面デザイン(5)
WikiName
WikiWikiWeb
YukiWiki
Zen Cart/tips
event/POINT OF VIEW 第0回
event/インクルーシブデザインワークショップ
iPad/iPadにだけCSS付与するには
jQuery
jQuery/ECサイトで使ってみたいプラグイン
tag
イテレーション1
サンプル
タグ/PGP
パフォーマンス改善/Bookmark
ヘルプ
志田
小沼
進地
整形ルール
斉藤
大家メモ
大家メモ/MAMP/MAMP環境でのPHPエラー表示
大家メモ/MAMP/Mac OSXローカルにMAMPでサイト制作環境を構築
竹村
中野
日本語
八木
勉強会
勉強会/アクセシビリティ勉強会@2008.01.29
勉強会/アクセシビリティ勉強会@2008.01.22
タイムスタンプを変更しない
**はじめに [#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)でいますぐ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" /> -DateField #flash( /sandbox/design/data/flex/sample06.swf, 360x270, version=9) --Webアプリで使えるカラーピッカー。 <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デザイナーにもわかる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指針