SlideShare a Scribd company logo
1 of 11
Download to read offline
おしゃれCatalystに触ってみた!!
2010/5/20 station5から




                       http://www.surfboard.jp/
自己紹介
• 株式会社サーフボード
 – 福井県に本社があるWeb制作会社
 – RIAプロジェクト始動!
      • サーフボード公式RIA開発者ブログ
         – http://ria.surfboard.co.jp/blog/


• 森下智弘
 –   東京営業所勤務(飯田橋)
 –   WEBプログラマ & Flexプログラマ
 –   プログラミング & セールス
 –   http://twitter.com/morishita_surf


                           http://www.surfboard.jp/
謝辞


     Adobeさん、
Catalystを作ってくれて
     ありがとう!
     http://www.surfboard.jp/
Catalyst使用前と後の作業比率
        前                                           後
画面作成         プログラミング                     画面作成           プログラミング
おしゃれ                                     おしゃれ
        0%
                                         プログラムをあまりしない
  20%                                    プログラマってOK?
                                                  20%




                                              60%         20%

             80%




                   http://www.surfboard.jp/
なぜ?
  ここまで
差が出るのか?
  http://www.surfboard.jp/
Catalyst使用前のワークフロー
                                                          パーツ毎に
                                                         画像ファイルに
                                                          切り出し!
                                   画像
                 デザイン
                                  切り出し




                                                                   動作チェック
         打ち合わせ




                         確認
デザイナー



                                                    画面     プログラ
                                                    作成      ミング

プログラマー

                         パーツを
                        組み合わせて
                         画面に!


                         http://www.surfboard.jp/
Catalyst使用後のワークフロー

                                             PSDファイル
                                                から
                 デザイン                       Flex画面に!




                                                              動作チェック
         打ち合わせ




                               確認
デザイナー



                                              画面       プログラ
                                              作成        ミング

プログラマー




  デザイナーさんはPSD作るまで!PGの画面作成の時間が大幅に短縮!

                        http://www.surfboard.jp/
謝辞


     Adobeさん、
Catalystを作ってくれて
     ありがとう!
     http://www.surfboard.jp/
Catalystがなければ出来なかった!
                             白地図を使ったFlexアプリ
                             47都道府県
                                 ⇒ 47個のボタン
                             「コンポーネントに変換」で、
                              さくさくボタン化




       http://www.surfboard.jp/
株式会社サーフボード RIAプロジェクト始動!

• 6月デモを10本公開します!
• WebサイトでのRIAコンテンツ活用




        サーフボード公式RIA開発者ブログ
     http://ria.surfboard.co.jp/blog/
            http://www.surfboard.jp/
ご静聴ありがとうございました。




    http://www.surfboard.jp/

More Related Content

What's hot

Swaggerのさわりだけ
SwaggerのさわりだけSwaggerのさわりだけ
Swaggerのさわりだけ
Masakazu Muraoka
 

What's hot (20)

今後のWeb開発の未来を考えてangular jsにしました(拡大版)
今後のWeb開発の未来を考えてangular jsにしました(拡大版)今後のWeb開発の未来を考えてangular jsにしました(拡大版)
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
 
How to develop a huge Single Page Application
How to develop a huge Single Page ApplicationHow to develop a huge Single Page Application
How to develop a huge Single Page Application
 
今後のWeb開発の未来を考えてangularJSにしました
今後のWeb開発の未来を考えてangularJSにしました今後のWeb開発の未来を考えてangularJSにしました
今後のWeb開発の未来を考えてangularJSにしました
 
Swaggerのさわりだけ
SwaggerのさわりだけSwaggerのさわりだけ
Swaggerのさわりだけ
 
Cordovaコトハジメ( Html5fun×senchUG )
Cordovaコトハジメ( Html5fun×senchUG )Cordovaコトハジメ( Html5fun×senchUG )
Cordovaコトハジメ( Html5fun×senchUG )
 
noteをAngularJSで構築した話
noteをAngularJSで構築した話noteをAngularJSで構築した話
noteをAngularJSで構築した話
 
ウェブパフォーマンスの基礎とこれから
ウェブパフォーマンスの基礎とこれからウェブパフォーマンスの基礎とこれから
ウェブパフォーマンスの基礎とこれから
 
Enterprise x AngularJS
Enterprise x AngularJSEnterprise x AngularJS
Enterprise x AngularJS
 
Performance Howto - TechAid2011
Performance Howto - TechAid2011Performance Howto - TechAid2011
Performance Howto - TechAid2011
 
Spring Boot + Doma + AngularJSで作るERP 〜JavaQneバージョン〜 #jqfk
Spring Boot + Doma + AngularJSで作るERP 〜JavaQneバージョン〜 #jqfkSpring Boot + Doma + AngularJSで作るERP 〜JavaQneバージョン〜 #jqfk
Spring Boot + Doma + AngularJSで作るERP 〜JavaQneバージョン〜 #jqfk
 
iOSアプリ開発のためのSwiftビギナーズ勉強会 第6回 @Co-Edo
iOSアプリ開発のためのSwiftビギナーズ勉強会 第6回    @Co-EdoiOSアプリ開発のためのSwiftビギナーズ勉強会 第6回    @Co-Edo
iOSアプリ開発のためのSwiftビギナーズ勉強会 第6回 @Co-Edo
 
Team Development for iOS / Android
Team Development for iOS / Android Team Development for iOS / Android
Team Development for iOS / Android
 
Androidリリース作業の効率化(2)
Androidリリース作業の効率化(2)Androidリリース作業の効率化(2)
Androidリリース作業の効率化(2)
 
Jenkins導入ライブ
Jenkins導入ライブJenkins導入ライブ
Jenkins導入ライブ
 
エンタープライヤーのためのWeb Componentsハンズオン
エンタープライヤーのためのWeb ComponentsハンズオンエンタープライヤーのためのWeb Componentsハンズオン
エンタープライヤーのためのWeb Componentsハンズオン
 
Leap motion.js
Leap motion.jsLeap motion.js
Leap motion.js
 
Google Play Developer APIを使ってみた
Google Play Developer APIを使ってみたGoogle Play Developer APIを使ってみた
Google Play Developer APIを使ってみた
 
ギャラリーサイトプレゼン
ギャラリーサイトプレゼンギャラリーサイトプレゼン
ギャラリーサイトプレゼン
 
アプリリリース後に後悔しないための20のこと
アプリリリース後に後悔しないための20のことアプリリリース後に後悔しないための20のこと
アプリリリース後に後悔しないための20のこと
 
Swift playgroundsでアプリを作る
Swift playgroundsでアプリを作るSwift playgroundsでアプリを作る
Swift playgroundsでアプリを作る
 

Viewers also liked

00000 nueva cmara digital lumix sp
00000 nueva cmara digital lumix sp00000 nueva cmara digital lumix sp
00000 nueva cmara digital lumix sp
guestcb488e22
 
B iography
B iographyB iography
B iography
marcela
 
My strategicplan.strategyhuddle.052610
My strategicplan.strategyhuddle.052610My strategicplan.strategyhuddle.052610
My strategicplan.strategyhuddle.052610
M3Planning
 
Banakako e-Paperzorroa
Banakako e-PaperzorroaBanakako e-Paperzorroa
Banakako e-Paperzorroa
viejis
 

Viewers also liked (20)

Cisco Connect Japan 2014:高密度環境におけるシスコ無線デザイン ケース スタディ
Cisco Connect Japan 2014:高密度環境におけるシスコ無線デザイン ケース スタディCisco Connect Japan 2014:高密度環境におけるシスコ無線デザイン ケース スタディ
Cisco Connect Japan 2014:高密度環境におけるシスコ無線デザイン ケース スタディ
 
Meraki 初期設定ガイド(MR18)
Meraki 初期設定ガイド(MR18)Meraki 初期設定ガイド(MR18)
Meraki 初期設定ガイド(MR18)
 
Mccarthyzald77
Mccarthyzald77Mccarthyzald77
Mccarthyzald77
 
GE 12 How was paval and ami tablet made
GE 12  How was paval and ami tablet made GE 12  How was paval and ami tablet made
GE 12 How was paval and ami tablet made
 
Series 36 pirana satpanth's religious head is a muslim
Series 36  pirana satpanth's religious head is a muslimSeries 36  pirana satpanth's religious head is a muslim
Series 36 pirana satpanth's religious head is a muslim
 
Series 34 E -Satya Prakash -History of Pirana Satpanth -Eng
Series 34  E -Satya Prakash -History of Pirana Satpanth -EngSeries 34  E -Satya Prakash -History of Pirana Satpanth -Eng
Series 34 E -Satya Prakash -History of Pirana Satpanth -Eng
 
Annual 1 Real patidar emails -comprehensive edition -2010 -part 1 of 2
Annual 1  Real patidar emails -comprehensive edition -2010 -part 1 of 2Annual 1  Real patidar emails -comprehensive edition -2010 -part 1 of 2
Annual 1 Real patidar emails -comprehensive edition -2010 -part 1 of 2
 
Series 1 Covering Email Contents
Series 1  Covering Email ContentsSeries 1  Covering Email Contents
Series 1 Covering Email Contents
 
Series 24 - persons and reasons behind embracing laxminarayan sect
Series 24 - persons and reasons behind embracing laxminarayan sect Series 24 - persons and reasons behind embracing laxminarayan sect
Series 24 - persons and reasons behind embracing laxminarayan sect
 
00000 nueva cmara digital lumix sp
00000 nueva cmara digital lumix sp00000 nueva cmara digital lumix sp
00000 nueva cmara digital lumix sp
 
B iography
B iographyB iography
B iography
 
Y:\Thinking
Y:\ThinkingY:\Thinking
Y:\Thinking
 
Creative Fitness Programme for Marketers
Creative Fitness Programme for MarketersCreative Fitness Programme for Marketers
Creative Fitness Programme for Marketers
 
Czwartek Social Media Katowice - Świat poza Facebookiem
Czwartek Social Media Katowice - Świat poza FacebookiemCzwartek Social Media Katowice - Świat poza Facebookiem
Czwartek Social Media Katowice - Świat poza Facebookiem
 
OE 29 sabarkantha samajs -Ban satpanth -30-jan-2011 -de
OE 29  sabarkantha samajs -Ban satpanth -30-jan-2011 -deOE 29  sabarkantha samajs -Ban satpanth -30-jan-2011 -de
OE 29 sabarkantha samajs -Ban satpanth -30-jan-2011 -de
 
Makedonski jazik i literatura iv godina.tmd
Makedonski jazik i literatura iv godina.tmdMakedonski jazik i literatura iv godina.tmd
Makedonski jazik i literatura iv godina.tmd
 
13 charles tilly to explain political process
13 charles tilly   to explain political process13 charles tilly   to explain political process
13 charles tilly to explain political process
 
My strategicplan.strategyhuddle.052610
My strategicplan.strategyhuddle.052610My strategicplan.strategyhuddle.052610
My strategicplan.strategyhuddle.052610
 
Banakako e-Paperzorroa
Banakako e-PaperzorroaBanakako e-Paperzorroa
Banakako e-Paperzorroa
 
Bringing the state back in capã­tulo 1
Bringing the state back in   capã­tulo 1Bringing the state back in   capã­tulo 1
Bringing the state back in capã­tulo 1
 

Similar to おしゃれCatalystに触ってみた

リモートデバッグツール Weinerをつかってみた
リモートデバッグツール Weinerをつかってみたリモートデバッグツール Weinerをつかってみた
リモートデバッグツール Weinerをつかってみた
Masakazu Muraoka
 
マルチクラウドデータ連携Javaアプリケーションの作り方
マルチクラウドデータ連携Javaアプリケーションの作り方マルチクラウドデータ連携Javaアプリケーションの作り方
マルチクラウドデータ連携Javaアプリケーションの作り方
CData Software Japan
 
Html5時代のクリエイターのあり方
Html5時代のクリエイターのあり方Html5時代のクリエイターのあり方
Html5時代のクリエイターのあり方
Masakazu Muraoka
 

Similar to おしゃれCatalystに触ってみた (20)

おしゃれCatalystに触ってみた
おしゃれCatalystに触ってみたおしゃれCatalystに触ってみた
おしゃれCatalystに触ってみた
 
プログラム組んだら負け!実はHTML/CSSだけでできること2015夏
プログラム組んだら負け!実はHTML/CSSだけでできること2015夏プログラム組んだら負け!実はHTML/CSSだけでできること2015夏
プログラム組んだら負け!実はHTML/CSSだけでできること2015夏
 
Ricoh UCS for iPad でみる エンタープライズ アジャイル開発
Ricoh UCS for iPad でみる エンタープライズ アジャイル開発Ricoh UCS for iPad でみる エンタープライズ アジャイル開発
Ricoh UCS for iPad でみる エンタープライズ アジャイル開発
 
HTML5な今日この頃に贈る、Webデザイナーこれからの生きる道
HTML5な今日この頃に贈る、Webデザイナーこれからの生きる道HTML5な今日この頃に贈る、Webデザイナーこれからの生きる道
HTML5な今日この頃に贈る、Webデザイナーこれからの生きる道
 
デザイナーとしてのHTML5への向き合い方 | HTML5 Conference MIYAZAKI
デザイナーとしてのHTML5への向き合い方 | HTML5 Conference MIYAZAKIデザイナーとしてのHTML5への向き合い方 | HTML5 Conference MIYAZAKI
デザイナーとしてのHTML5への向き合い方 | HTML5 Conference MIYAZAKI
 
リモートデバッグツール Weinerをつかってみた
リモートデバッグツール Weinerをつかってみたリモートデバッグツール Weinerをつかってみた
リモートデバッグツール Weinerをつかってみた
 
HTML5のcanvas2Dアニメーションことはじめ(Webプラットフォーム勉強会 1307)
HTML5のcanvas2Dアニメーションことはじめ(Webプラットフォーム勉強会 1307)HTML5のcanvas2Dアニメーションことはじめ(Webプラットフォーム勉強会 1307)
HTML5のcanvas2Dアニメーションことはじめ(Webプラットフォーム勉強会 1307)
 
Toolkit for CreateJSで作るリッチコンテンツ
Toolkit for CreateJSで作るリッチコンテンツToolkit for CreateJSで作るリッチコンテンツ
Toolkit for CreateJSで作るリッチコンテンツ
 
【15-e-7】Kinectから始まったスタートアップ #devsumi
【15-e-7】Kinectから始まったスタートアップ #devsumi【15-e-7】Kinectから始まったスタートアップ #devsumi
【15-e-7】Kinectから始まったスタートアップ #devsumi
 
マルチクラウドデータ連携Javaアプリケーションの作り方
マルチクラウドデータ連携Javaアプリケーションの作り方マルチクラウドデータ連携Javaアプリケーションの作り方
マルチクラウドデータ連携Javaアプリケーションの作り方
 
Html5時代のクリエイターのあり方
Html5時代のクリエイターのあり方Html5時代のクリエイターのあり方
Html5時代のクリエイターのあり方
 
サイボウズの技術情報を発信するWebディレクター(開発者向けサイト)の紹介.pdf
サイボウズの技術情報を発信するWebディレクター(開発者向けサイト)の紹介.pdfサイボウズの技術情報を発信するWebディレクター(開発者向けサイト)の紹介.pdf
サイボウズの技術情報を発信するWebディレクター(開発者向けサイト)の紹介.pdf
 
Visual Studio Codeを使い倒そう! ~プログラミングから機械学習、クラウド連携、遠隔ペアプロまで~
Visual Studio Codeを使い倒そう! ~プログラミングから機械学習、クラウド連携、遠隔ペアプロまで~Visual Studio Codeを使い倒そう! ~プログラミングから機械学習、クラウド連携、遠隔ペアプロまで~
Visual Studio Codeを使い倒そう! ~プログラミングから機械学習、クラウド連携、遠隔ペアプロまで~
 
使い倒そう Visual Studio Code! ~クラウド連携や遠隔ペアプロ、  もちろん Git も便利に~
使い倒そう Visual Studio Code!~クラウド連携や遠隔ペアプロ、 もちろん Git も便利に~使い倒そう Visual Studio Code!~クラウド連携や遠隔ペアプロ、 もちろん Git も便利に~
使い倒そう Visual Studio Code! ~クラウド連携や遠隔ペアプロ、  もちろん Git も便利に~
 
AbemaTV プロダクトデザイン 2.0
AbemaTV プロダクトデザイン 2.0AbemaTV プロダクトデザイン 2.0
AbemaTV プロダクトデザイン 2.0
 
Webデザインの骨組み「ワイヤーフレーム」を学ぼう【完成編】 先生:田中 晶子
Webデザインの骨組み「ワイヤーフレーム」を学ぼう【完成編】 先生:田中 晶子Webデザインの骨組み「ワイヤーフレーム」を学ぼう【完成編】 先生:田中 晶子
Webデザインの骨組み「ワイヤーフレーム」を学ぼう【完成編】 先生:田中 晶子
 
【いまこそ】エンジニアとデザイナー【立ち上がれ】
【いまこそ】エンジニアとデザイナー【立ち上がれ】	【いまこそ】エンジニアとデザイナー【立ち上がれ】
【いまこそ】エンジニアとデザイナー【立ち上がれ】
 
AppPotモバイルアプリ開発『内製化』
AppPotモバイルアプリ開発『内製化』AppPotモバイルアプリ開発『内製化』
AppPotモバイルアプリ開発『内製化』
 
モバイルコンテンツ制作を効 率化するツールを使いこなせ
モバイルコンテンツ制作を効 率化するツールを使いこなせモバイルコンテンツ制作を効 率化するツールを使いこなせ
モバイルコンテンツ制作を効 率化するツールを使いこなせ
 
SharePoint Framework による Viva Connections アプリの開発
SharePoint Framework による Viva Connections アプリの開発SharePoint Framework による Viva Connections アプリの開発
SharePoint Framework による Viva Connections アプリの開発
 

おしゃれCatalystに触ってみた