実践 大都会式 プロトタイピング&フロントエンド 2014
DESCRIPTION
オープンセミナー2014@岡山 / 2014年5月17日(土) 久保木 博・前川 昌幸 スライド見てもわけわからないかもしれませんが。が。TRANSCRIPT
![Page 1: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/1.jpg)
![Page 2: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/2.jpg)
アウトライン
•自己紹介 •プロトタイピング •サーバサイド •UIデザイン •フロントエンド •まとめ
![Page 3: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/3.jpg)
自己紹介:前川
•Web制作会社勤務(6月末まで以後未定) •マークアップ> フロントエンド> サーバーサイド
![Page 4: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/4.jpg)
最近は本書いたりしてます
![Page 5: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/5.jpg)
自己紹介:久保木
•某Sler勤務 •デザイン>マークアップ>フロントエンド
これは私も参加してます→
![Page 6: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/6.jpg)
コトのはじめ
“こちら側”を知ってもらうには どうすればいいか
何かを作ってその過程を紹介するのはどうか
![Page 7: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/7.jpg)
んじゃ、何か作ってみるか !
![Page 8: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/8.jpg)
アイデア出し
![Page 9: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/9.jpg)
実務ではあまりできないこと
AngularJS Node.JSSketch 3
Grunt
nginx
Express
Jade
Bootstrap-sassMongoDB
Paper PrototypingGithub POPSVG
Web Font
![Page 10: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/10.jpg)
流行ものをつかった何か
•iPhone向け •ソーシャル連携 •ユーザー入力がある
![Page 11: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/11.jpg)
体重記録ウェブアプリ
ソーシャルのアカウント連動して体重を記録する
![Page 12: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/12.jpg)
ザックリフロー
アイデア出し
ペーパープロトタイピング
サーバーサイドUIデザイン
実装
![Page 13: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/13.jpg)
ペーパープロトタイピング
![Page 14: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/14.jpg)
文字通り、紙を使ったプロトタイピング
![Page 15: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/15.jpg)
•パッと書いて共有し、修正もしやすい •イメージを共有するには最適 •いきなりExcelより省コスト
![Page 16: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/16.jpg)
ペーパープロトタイピングパッド
![Page 17: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/17.jpg)
ウェブアプリは動きがある
紙だけでは分かりづらい
![Page 18: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/18.jpg)
POPで紙芝居にしてみる
•画面移動をシミュレート •動かして初めて気付くこともあるPOP
![Page 19: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/19.jpg)
サーバーサイド
![Page 20: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/20.jpg)
nginx(エンジンエックス)
![Page 21: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/21.jpg)
•HTTPDサーバー •処理性能・並行性・メモリ利用の小ささに焦点
![Page 22: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/22.jpg)
nginxとApache
•どちらでもいいかと •メモリ利用量の小ささは魅力に見えるが、ならサーバーを… •nginxは後発な分設定はシンプル
![Page 23: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/23.jpg)
Node.js
![Page 24: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/24.jpg)
•サーバーサイドJavaScript •イベントベース •ノンブロッキングI/O
![Page 25: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/25.jpg)
•たまたまI/Oの概念が無い言語だったのでJavaScriptを採用
![Page 26: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/26.jpg)
•JavaScriptしかもV8(Chromeのエンジン)ということでフロント系技術者のおもちゃ(?)に
![Page 27: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/27.jpg)
express
![Page 28: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/28.jpg)
•Node.js製Webアプリケーションフレームワーク •最近4系がリリース •HTTPDの機能もあるので 今回はアプリケーション・サーバーとして利用
![Page 29: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/29.jpg)
構成
静的ファイル
Express
アプリケーション
リバースプロキシ
![Page 30: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/30.jpg)
Passport
•Node.js製のOpenID/OAuthライブラリ
![Page 31: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/31.jpg)
Jade
•Node.js製テンプレートエンジン
![Page 32: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/32.jpg)
MongoDB
•NoSQL •柔軟で高速 •結合などSQLで便利なことは結構できない •インターフェースはMongoose
![Page 33: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/33.jpg)
UIデザイン
![Page 34: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/34.jpg)
プロトをベースにデザイン
![Page 35: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/35.jpg)
今回はSketchを使用
![Page 36: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/36.jpg)
依頼する場合
•イメージしているモノがあれば事前に伝えておく •サンプルがあると齟齬が少なくなる
![Page 37: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/37.jpg)
フロントエンド実装
•HTML5 / CSS3 •SVG / Web Font •AngularJS •フロント最適化
![Page 38: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/38.jpg)
HTML5
![Page 39: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/39.jpg)
http://www.slideshare.net/dynamis/toward-firefox-os/26# より
![Page 40: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/40.jpg)
•大人の事情でいろいろと解釈が…
![Page 41: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/41.jpg)
今回はHTML5 Formsだけ
Range Number
![Page 42: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/42.jpg)
CSS3
![Page 43: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/43.jpg)
角丸 ドロップシャドウ
画像を使わず表現が豊かに
![Page 44: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/44.jpg)
Bootstrap-sass
![Page 45: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/45.jpg)
•Twitter社謹製のCSSフレームワーク •クラスを付与するだけでそれなりのデザインに
![Page 46: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/46.jpg)
Sass (CSS Preprocessor)
![Page 47: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/47.jpg)
変数や構文などが使えるCSS
@for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; }}
![Page 48: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/48.jpg)
LESS Stylus
![Page 49: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/49.jpg)
SVG / Web Font
![Page 50: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/50.jpg)
画面の高密度化
2倍のピクセルが必要
従来 これから
![Page 51: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/51.jpg)
SVGならスケーラブル
![Page 52: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/52.jpg)
! ! !
大きさや色などの変更がCSSで可能に
![Page 53: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/53.jpg)
"∠
![Page 54: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/54.jpg)
Font Awesome IcoMoon
![Page 55: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/55.jpg)
AngularJS
![Page 56: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/56.jpg)
•Googleが開発しているフロントエンドJavaScript MVWフレームワーク
![Page 57: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/57.jpg)
MVWフレームワーク?
•WはWhatever •MV※の※に議論するのも無駄だからなんでもいいじゃん!の意
![Page 58: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/58.jpg)
•フロントエンドJavaScriptフレームワークではいま一番関心度が高い
![Page 59: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/59.jpg)
•いわゆるシングルページWebアプリケーションに強い •インタラクションは弱め
![Page 60: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/60.jpg)
フロントの最適化
![Page 61: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/61.jpg)
•バックエンドに比べて関心が低い領域
![Page 62: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/62.jpg)
•バックエンドのミリセカンド単位の努力が水の泡になりかねない
![Page 63: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/63.jpg)
フロントの最適化
•DNS問い合わせ •gzip圧縮転送 •リバースプロクシ
![Page 64: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/64.jpg)
DNS問い合わせ
•TTLの調整 •上位への問い合わせが頻繁に→オーバーヘッド •短いままで放置しない
![Page 65: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/65.jpg)
gzip圧縮転送
•Apache/nginxではモジュールあり •転送量が大幅に減少 •負荷には注意
![Page 66: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/66.jpg)
リバースプロクシ
•静的ファイルのリクエストにアプリケーションサーバーのスレッド使わなくて良くね?
![Page 67: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/67.jpg)
フロントの最適化
•リクエスト数の削減 •キャッシュの活用 •ファイルのミニファイ
![Page 68: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/68.jpg)
リクエスト数の削減
•CSS/JavaScriptなどをなるべくまとめる •ページ単独の記述はHTMLに
![Page 69: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/69.jpg)
リクエスト数の削減
•CSS Sprites •DataURI
![Page 70: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/70.jpg)
CSS Sprites
![Page 71: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/71.jpg)
•複数の画像パーツを一枚の画像に入れてCSSで表示する
![Page 72: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/72.jpg)
•リクエスト数の削減には有用 •アクセシビリティに問題
![Page 73: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/73.jpg)
•やり過ぎ注意、本当に注意 •見えなくても意味が通るものなどが基本
![Page 74: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/74.jpg)
•一枚30KB以内に収めるのが目安 •それ以上はリクエストしたほうがマシ
![Page 75: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/75.jpg)
DataURI
![Page 76: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/76.jpg)
•画像データ等をバイナリ文字列で •リクエスト発生しない
![Page 77: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/77.jpg)
•PC向けブラウザで対応していない物があるのでスマートフォン専用などで
![Page 78: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/78.jpg)
•データ量は約1.3倍 •gzip圧縮転送すれば画像時とデータ量が変わらなくなる
![Page 79: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/79.jpg)
•管理は面倒に •レンダリングをブロックするので大きくても数KB単位のもので
![Page 80: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/80.jpg)
キャッシュの活用
•CDNの利用 •Expiresヘッダで更新の無いファイルのキャッシュを長期に指定
![Page 81: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/81.jpg)
ファイルのミニファイ
![Page 82: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/82.jpg)
•画像は効果が大きい •CSS/JavaScriptは「やったった」感でるけど実は言うほどの…
![Page 83: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/83.jpg)
•ツールで自動化が基本 •ソースと成果物の分離 •コンパイルという考え方
![Page 84: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/84.jpg)
で、タスクランナー
![Page 85: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/85.jpg)
Gruntだとgrunt-contrib-connect grunt-contrib-watch grunt-contrib-concat grunt-contrib-compass
grunt-csso grunt-csscomb
grunt-combine-media-queries grunt-autoprefixer grunt-contrib-jshint grunt-contrib-uglify grunt-contrib-imagemin
![Page 86: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/86.jpg)
あくまで 適材適所
ケースバイケース
![Page 87: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/87.jpg)
実際の作業
![Page 88: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/88.jpg)
•各自で適当に作業 •GitHubにPushして、ある程度したらMerge
![Page 89: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/89.jpg)
•ルールを明確にしておく •HTMLのid/class属性の使い方など •今回はng-*を消さないぐらいで緩め
![Page 90: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/90.jpg)
•スムーズにやるには、お互いの領域の理解が必要
![Page 91: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/91.jpg)
まとめ (無理矢理)
![Page 92: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/92.jpg)
UI視点から
•上流から参加できると、いろいろと提案しやすい •デザインするために経緯や過程を知りたい •方眼エクセルはデザイナーのやる気をそぎます
![Page 93: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/93.jpg)
システム視点から
•少なくともプロトタイピングの段階で参加しておく •その段階で放置すると大怪我が待ってる
![Page 94: 実践 大都会式 プロトタイピング&フロントエンド 2014](https://reader034.vdocuments.site/reader034/viewer/2022052213/5597352c1a28ab70338b46d2/html5/thumbnails/94.jpg)
ありがとうございました !