Tweet
Tweet

Slide 1

Slide 1 text

オレオレフロントエンド開発環境 ～際限なき修正を攻略せよ！～ 2015.11.19 (Thu) 沖 良矢（世路庵） 第19回 HTML5+JS 勉強会@ 代々木TechBuzzSpace

Slide 2

Slide 2 text

自己紹介 沖 良矢（OKI Yoshiya） • 世路庵（せろあん） • インタラクションデザイナー • フリーランス8年目 KAMABOKO ROAD TO 1000 (2015) lynda.com 日本語版 トレーナー (2015) Web Designing 連載 (2009～2015)

Slide 3

Slide 3 text

話すこと 1. フロントエンドを取り巻く状況と課題 2. 改善の手法

Slide 4

Slide 4 text

フロントエンドを取り巻く状況と課題 The situation & issues of frontend 1.

Slide 5

Slide 5 text

みなさんのことをお聞かせください Please tell me your context. 引用：eviloars CC BY-NC 2.0 https://www.flickr.com/photos/29513210@N00/4837529409//

Slide 6

Slide 6 text

私の活動領域 広告 コーポレート EC サイネージ アプリ 執筆・講演

Slide 7

Slide 7 text

フロントエンドに関する職能 • ビジュアルデザイン • グラフィックデザイン • Webデザイン • UIデザイン • ユーザービリティ • アクセシビリティ • IA • マーケティング • SEO • SEM • セキュリティ • データベース • API • 写真 • 映像 • アニメーション • 3DCG • 音楽 • 効果音 • ライティング • 電子書籍 などなど ただし、実装技術(HTMLとか)を除く

Slide 8

Slide 8 text

職能と技術 • ビジュアルデザイン • Webデザイン • マーケティング • SEO • SEM • API ＋実装技術 • 写真 • 映像 • アニメーション • 3DCG • 音楽 • ライティング

Slide 9

Slide 9 text

ここで思い出話をひとつ

Slide 10

Slide 10 text

Flashを使っていますか？ 83.4 51.7 21.4 0 10 20 30 40 50 60 70 80 90 100 2009年 2012年 2014年 引用：Webデザイナー白書（マイナビ）

Slide 11

Slide 11 text

近いうちに習得したいものは？ 2009年 • Flash • AIR 2012年 • HTML5 • JavaScript • PHP • WordPress 2014年 • JavaScript • PHP • WordPress 引用：Webデザイナー白書（マイナビ） ※ベスト10から技術的なものを抜粋

Slide 12

Slide 12 text

現代で要求される実装技術（例）

Slide 13

Slide 13 text

単純に時間がかかる It's simple, very time consuming. 引用：tom_bennett CC BY-NC 2.0 https://www.flickr.com/photos/67721596@N00/2298433461/

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

度重なる修正や急な対応を際 限なく求められることが多く、 実はかなり被拘束力が高い。 裁量権があるようでない仕事 です 週刊SPA！ 引用：https://instagram.com/p/8e- xaMJnMN/?taken-by=daishiro

Slide 16

Slide 16 text

主な原因 対象デバイスの増加（スマートフォン、タブレット） ファイルサイズ パフォーマンス デバッグ 工程上の問題 技術革新のスピード

Slide 17

Slide 17 text

改善の手法 Methods of improvement 2.

Slide 18

Slide 18 text

みなさんのことをお聞かせください Please tell me your context. 自分でコントロールできることを 改善していく Improve that you can control yourself.

Slide 19

Slide 19 text

環境から見た改善 IDE：IntelliJ IDEA コーディング：Pixelapse、Extract デバッグ：Charles、Remote TestKit、BrowserStack API：API Blueprint

Slide 20

Slide 20 text

言語から見た改善 HTML：Emmet + Assemble (Handlebars) CSS：Sass JavaScript：CoffeeScript + Browserify ビルド：Grunt

Slide 21

Slide 21 text

整理整頓は、 人生の半分である ドイツのことわざ

Slide 22

Slide 22 text

オススメ書籍 『無印良品は、仕組みが9割』松井 忠三（角川書店）

Slide 23

Slide 23 text

マニュアル作りのポイント DRY（Don't repeat yourself） ググれば分かることも明文化 現場の自分たちで作るしかない 権威主義、属人主義を捨てる マニュアルをアップデートし続ける 「どのように行動するか」だけでなく、 「何のために作業をするか」も。

Slide 24

Slide 24 text

まとめ 知識を蓄積し、共有しよう 銀の弾丸はない 技術は目的を達成する手段

Slide 25

Slide 25 text

http://ceroan.jp/ 2015.11.19 (Thu)