アウトライン
•自己紹介
•プロトタイピング
•サーバサイド
•UIデザイン
•フロントエンド
•まとめ
自己紹介:前川
•Web制作会社勤務

(6月末まで以後未定)
•マークアップ>

 フロントエンド>

  サーバーサイド
最近は本書いたりしてます
自己紹介:久保木
•某Sler勤務
•デザイン>マークアップ>

フロントエンド
これは私も参加してます→
コトのはじめ
こちら側 を知ってもらうには

どうすればいいか
何かを作って

その過程を紹介するのはどうか
んじゃ、何か作ってみるか !
アイデア出し
実務ではあまりできないこと
AngularJS Node.JS
Sketch 3
Grunt
nginx
Express
Jade
Bootstrap-sass
MongoDB
Paper Prototyping
Github POPSVG
W...
流行ものをつかった何か
•iPhone向け
•ソーシャル連携
•ユーザー入力がある
体重記録ウェブアプリ
ソーシャルの

アカウント連動して

体重を記録する
ザックリフロー
アイデア出し
ペーパープロトタイピング
サーバーサイド
UIデザイン
実装
ペーパープロトタイピング
文字通り、紙を使った

プロトタイピング
•パッと書いて共有し、

修正もしやすい
•イメージを共有するには最適
•いきなりExcelより省コスト
ペーパープロトタイピングパッド
ウェブアプリは動きがある
紙だけでは分かりづらい
POPで紙芝居にしてみる
•画面移動を

シミュレート
•動かして初めて

気付くこともある
POP
サーバーサイド
nginx
(エンジンエックス)
•HTTPDサーバー
•処理性能・並行性・

メモリ利用の

小ささに焦点
nginxとApache
•どちらでもいいかと
•メモリ利用量の

小ささは魅力に見えるが、

ならサーバーを…
•nginxは後発な分

設定はシンプル
Node.js
•サーバーサイドJavaScript
•イベントベース
•ノンブロッキングI/O
•たまたまI/Oの

概念が無い

言語だったので

JavaScriptを採用
•JavaScriptしかも

V8(Chromeのエンジン)

ということで

フロント系技術者の

おもちゃ(?)に
express
•Node.js製

Webアプリケーション

フレームワーク
•最近4系がリリース
•HTTPDの機能もあるので

今回はアプリケーション・

サーバーとして利用
構成
静的ファイル
Express
アプリケーション
リバースプロキシ
Passport
•Node.js製の

OpenID/OAuthライブラリ
Jade
•Node.js製

テンプレートエンジン
MongoDB
•NoSQL
•柔軟で高速
•結合などSQLで便利なことは
結構できない
•インターフェースは
Mongoose
UIデザイン
プロトをベースにデザイン
今回はSketchを使用
依頼する場合
•イメージしているモノが

あれば事前に伝えておく
•サンプルがあると

齟齬が少なくなる
フロントエンド実装
•HTML5 / CSS3
•SVG / Web Font
•AngularJS
•フロント最適化
HTML5
http://www.slideshare.net/dynamis/toward-firefox-os/26# より
•大人の事情で

いろいろと解釈が…
今回はHTML5 Formsだけ
Range Number
CSS3
角丸 ドロップシャドウ
画像を使わず表現が豊かに
Bootstrap-sass
•Twitter社謹製の

CSSフレームワーク
•クラスを付与するだけで

それなりのデザインに
Sass (CSS Preprocessor)
変数や構文などが使えるCSS
@for $i from 1 through 3 {
.item-#{$i} {
width: 2em * $i;
}
}
LESS Stylus
SVG / Web Font
画面の高密度化
2倍のピクセルが必要
従来 これから
SVGならスケーラブル
大きさや色などの変更が

CSSで可能に
∠
Font Awesome IcoMoon
AngularJS
•Googleが開発している

フロントエンド

JavaScript MVW

フレームワーク
MVWフレームワーク?
•WはWhatever
•MV※の※に議論するのも

無駄だからなんでも

いいじゃん!の意
•フロントエンドJavaScript

フレームワークでは

いま一番関心度が高い
•いわゆるシングルページ

Webアプリケーションに強い
•インタラクションは弱め
フロントの最適化
•バックエンドに比べて

関心が低い領域
•バックエンドの

ミリセカンド単位の努力が

水の泡になりかねない
フロントの最適化
•DNS問い合わせ
•gzip圧縮転送
•リバースプロクシ
DNS問い合わせ
•TTLの調整
•上位への問い合わせが頻繁に
→オーバーヘッド
•短いままで放置しない
gzip圧縮転送
•Apache/nginxでは

モジュールあり
•転送量が大幅に減少
•負荷には注意
リバースプロクシ
•静的ファイルのリクエストに
アプリケーションサーバーの
スレッド使わなくて良くね?
フロントの最適化
•リクエスト数の削減
•キャッシュの活用
•ファイルのミニファイ
リクエスト数の削減
•CSS/JavaScriptなどを

なるべくまとめる
•ページ単独の記述はHTMLに
リクエスト数の削減
•CSS Sprites
•DataURI
CSS Sprites
•複数の画像パーツを

一枚の画像に入れて

CSSで表示する
•リクエスト数の削減には有用
•アクセシビリティに問題
•やり過ぎ注意、本当に注意
•見えなくても意味が

通るものなどが基本
•一枚30KB以内に

収めるのが目安
•それ以上はリクエスト

したほうがマシ
DataURI
•画像データ等を

バイナリ文字列で
•リクエスト発生しない
•PC向けブラウザで

対応していない物があるので

スマートフォン専用などで
•データ量は約1.3倍
•gzip圧縮転送すれば画像時と
データ量が変わらなくなる
•管理は面倒に
•レンダリングを

ブロックするので

大きくても

数KB単位のもので
キャッシュの活用
•CDNの利用
•Expiresヘッダで更新の無い

ファイルのキャッシュを

長期に指定
ファイルのミニファイ
•画像は効果が大きい
•CSS/JavaScriptは

「やったった」感でるけど

実は言うほどの…
•ツールで自動化が基本
•ソースと成果物の分離
•コンパイルという考え方
で、タスクランナー
Gruntだと
grunt-contrib-connect	

grunt-contrib-watch	

grunt-contrib-concat	

grunt-contrib-compass	

grunt-csso	

grunt-cs...
あくまで	

適材適所	

ケースバイケース
実際の作業
•各自で適当に作業
•GitHubにPushして、

ある程度したらMerge
•ルールを明確にしておく
•HTMLのid/class属性の

使い方など
•今回はng-*を消さないぐらいで緩め
•スムーズにやるには、

お互いの領域の理解が必要
まとめ
(無理矢理)
UI視点から
•上流から参加できると、

いろいろと提案しやすい
•デザインするために

経緯や過程を知りたい
•方眼エクセルはデザイナーの
やる気をそぎます
システム視点から
•少なくとも

プロトタイピングの段階で

参加しておく
•その段階で放置すると

大怪我が待ってる
ありがとうございました !
実践 大都会式 プロトタイピング&フロントエンド 2014
Upcoming SlideShare
Loading in...5
×

実践 大都会式 プロトタイピング&フロントエンド 2014

1,532

Published on

オープンセミナー2014@岡山 / 2014年5月17日(土)
久保木 博・前川 昌幸

スライド見てもわけわからないかもしれませんが。が。

Published in: Internet
0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,532
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
9
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide

実践 大都会式 プロトタイピング&フロントエンド 2014

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

    Clipping is a handy way to collect important slides you want to go back to later.

×