オープンセミナー2014@岡山 / 2014年5月17日(土) 久保木 博・前川 昌幸 スライド見てもわけわからないかもしれませんが。が。

2. アウトライン
•自己紹介
•プロトタイピング
•サーバサイド
•UIデザイン
•フロントエンド
•まとめ

3. 自己紹介：前川
•Web制作会社勤務
（6月末まで以後未定）
•マークアップ＞
フロントエンド＞
サーバーサイド

4. 最近は本書いたりしてます

5. 自己紹介：久保木
•某Sler勤務
•デザイン＞マークアップ＞
フロントエンド
これは私も参加してます→

6. コトのはじめ
こちら側 を知ってもらうには
どうすればいいか
何かを作って
その過程を紹介するのはどうか

7. んじゃ、何か作ってみるか !

8. アイデア出し

9. 実務ではあまりできないこと
AngularJS Node.JS
Sketch 3
Grunt
nginx
Express
Jade
Bootstrap-sass
MongoDB
Paper Prototyping
Github POPSVG
Web Font

10. 流行ものをつかった何か
•iPhone向け
•ソーシャル連携
•ユーザー入力がある

11. 体重記録ウェブアプリ
ソーシャルの
アカウント連動して
体重を記録する

12. ザックリフロー
アイデア出し
ペーパープロトタイピング
サーバーサイド
UIデザイン
実装

13. ペーパープロトタイピング

14. 文字通り、紙を使った
プロトタイピング

15. •パッと書いて共有し、
修正もしやすい
•イメージを共有するには最適
•いきなりExcelより省コスト

16. ペーパープロトタイピングパッド

17. ウェブアプリは動きがある
紙だけでは分かりづらい

18. POPで紙芝居にしてみる
•画面移動を
シミュレート
•動かして初めて
気付くこともある
POP

19. サーバーサイド

20. nginx
（エンジンエックス）

21. •HTTPDサーバー
•処理性能・並行性・
メモリ利用の
小ささに焦点

22. nginxとApache
•どちらでもいいかと
•メモリ利用量の
小ささは魅力に見えるが、
ならサーバーを…
•nginxは後発な分
設定はシンプル

23. Node.js

24. •サーバーサイドJavaScript
•イベントベース
•ノンブロッキングI/O

25. •たまたまI/Oの
概念が無い
言語だったので
JavaScriptを採用

26. •JavaScriptしかも
V8（Chromeのエンジン）
ということで
フロント系技術者の
おもちゃ（？）に

27. express

28. •Node.js製
Webアプリケーション
フレームワーク
•最近4系がリリース
•HTTPDの機能もあるので
今回はアプリケーション・
サーバーとして利用

29. 構成
静的ファイル
Express
アプリケーション
リバースプロキシ

30. Passport
•Node.js製の
OpenID/OAuthライブラリ

31. Jade
•Node.js製
テンプレートエンジン

32. MongoDB
•NoSQL
•柔軟で高速
•結合などSQLで便利なことは
結構できない
•インターフェースは
Mongoose

33. UIデザイン

34. プロトをベースにデザイン

35. 今回はSketchを使用

36. 依頼する場合
•イメージしているモノが
あれば事前に伝えておく
•サンプルがあると
齟齬が少なくなる

37. フロントエンド実装
•HTML5 / CSS3
•SVG / Web Font
•AngularJS
•フロント最適化

38. HTML5

39. http://www.slideshare.net/dynamis/toward-firefox-os/26# より

40. •大人の事情で
いろいろと解釈が…

41. 今回はHTML5 Formsだけ
Range Number

42. CSS3

43. 角丸 ドロップシャドウ
画像を使わず表現が豊かに

44. Bootstrap-sass

45. •Twitter社謹製の
CSSフレームワーク
•クラスを付与するだけで
それなりのデザインに

46. Sass (CSS Preprocessor)

47. 変数や構文などが使えるCSS
@for $i from 1 through 3 {
.item-#{$i} {
width: 2em * $i;
}
}

48. LESS Stylus

49. SVG / Web Font

50. 画面の高密度化
2倍のピクセルが必要
従来 これから

51. SVGならスケーラブル

52. 大きさや色などの変更が
CSSで可能に

53. ∠

54. Font Awesome IcoMoon

55. AngularJS

56. •Googleが開発している
フロントエンド
JavaScript MVW
フレームワーク

57. MVWフレームワーク？
•WはWhatever
•MV※の※に議論するのも
無駄だからなんでも
いいじゃん！の意

58. •フロントエンドJavaScript
フレームワークでは
いま一番関心度が高い

59. •いわゆるシングルページ
Webアプリケーションに強い
•インタラクションは弱め

60. フロントの最適化

61. •バックエンドに比べて
関心が低い領域

62. •バックエンドの
ミリセカンド単位の努力が
水の泡になりかねない

63. フロントの最適化
•DNS問い合わせ
•gzip圧縮転送
•リバースプロクシ

64. DNS問い合わせ
•TTLの調整
•上位への問い合わせが頻繁に
→オーバーヘッド
•短いままで放置しない

65. gzip圧縮転送
•Apache/nginxでは
モジュールあり
•転送量が大幅に減少
•負荷には注意

66. リバースプロクシ
•静的ファイルのリクエストに
アプリケーションサーバーの
スレッド使わなくて良くね？

67. フロントの最適化
•リクエスト数の削減
•キャッシュの活用
•ファイルのミニファイ

68. リクエスト数の削減
•CSS/JavaScriptなどを
なるべくまとめる
•ページ単独の記述はHTMLに

69. リクエスト数の削減
•CSS Sprites
•DataURI

70. CSS Sprites

71. •複数の画像パーツを
一枚の画像に入れて
CSSで表示する

72. •リクエスト数の削減には有用
•アクセシビリティに問題

73. •やり過ぎ注意、本当に注意
•見えなくても意味が
通るものなどが基本

74. •一枚30KB以内に
収めるのが目安
•それ以上はリクエスト
したほうがマシ

75. DataURI

76. •画像データ等を
バイナリ文字列で
•リクエスト発生しない

77. •PC向けブラウザで
対応していない物があるので
スマートフォン専用などで

78. •データ量は約1.3倍
•gzip圧縮転送すれば画像時と
データ量が変わらなくなる

79. •管理は面倒に
•レンダリングを
ブロックするので
大きくても
数KB単位のもので

80. キャッシュの活用
•CDNの利用
•Expiresヘッダで更新の無い
ファイルのキャッシュを
長期に指定

81. ファイルのミニファイ

82. •画像は効果が大きい
•CSS/JavaScriptは
「やったった」感でるけど
実は言うほどの…

83. •ツールで自動化が基本
•ソースと成果物の分離
•コンパイルという考え方

84. で、タスクランナー

85. 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

86. あくまで
適材適所
ケースバイケース

87. 実際の作業

88. •各自で適当に作業
•GitHubにPushして、
ある程度したらMerge

89. •ルールを明確にしておく
•HTMLのid/class属性の
使い方など
•今回はng-*を消さないぐらいで緩め

90. •スムーズにやるには、
お互いの領域の理解が必要

91. まとめ
（無理矢理）

92. UI視点から
•上流から参加できると、
いろいろと提案しやすい
•デザインするために
経緯や過程を知りたい
•方眼エクセルはデザイナーの
やる気をそぎます

93. システム視点から
•少なくとも
プロトタイピングの段階で
参加しておく
•その段階で放置すると
大怪我が待ってる

94. ありがとうございました !