Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
13-D-3 #devsumiD フロントエンドエンジニア （仮） ∼え、ちょっとフロントやること多すぎじゃない！ ？∼ アメーバ事業本部ゲーム部門コアグループ 石本 光司
@t32k
Web Designer 2008 - 2011
Web Director 2011 - 2012
Web Developer 2012 -
Sass & Compass徹底入門 ∼CSS のベストプラクティスを効率よく実現するために∼
Agenda • • • • フロントエンドエンジニアとは？ ツールを管理する スピードを追跡する まとめ
フロントエンドエンジニアとは？
http://rmurphey.com/blog/2012/04/12/a-baseline-for-front-end-developers/
A Baseline for Front-end 1. JavaScript 2. Git(and a GitHub account) 3. Modularity, dependency management, and production b...
Developer HTML/CSS Coder, JavaScripter, Flash Creator
http://uptodate.frontendrescue.org/
ツールを管理する
Front-end Tooling Landscape Boilerplate HTML5 Boilerplate, Twitter Bootstrap, Backbone Boilerplate, Angular seed, Ember st...
Community App Team Producer UI Designer JavaScript HTML/CSS System Engineer System Engineer System Engineer iOS/An...
CSS preprocessors
http://mhs.github.io/scout-app/
$9.99 http://livereload.com/
$28 https://incident57.com/codekit/
＼(^o^)／ ／(^o^)＼
http://gruntjs.com/
Installation
http://nodejs.org/
+ http://nodejs.org/
$ npm install grunt-cli -g grunt-cliをインストール `-g`はグローバル環境にインストール
Package.json Gruntfile.js(.coffee)
Package.json
$ npm init This utility will walk you through creating a package.json file. It only covers the most common items, and trie...
$ npm install grunt --save-dev $ npm install grunt-csso --save-dev gruntをインストール grunt-<plugin_name> をインストール `--save-dev`はd...
Gruntfile.js(.coffee)
$ npm install grunt-init -g $ git clone https://github.com/gruntjs/grunt-initgruntfile.git ~/.grunt-init/gruntfile $ grun...
Anatomy of a Gruntfile • grunt.initConfig • grunt.loadNpmTasks • grunt.registerTask
module.exports = function(grunt) { // プロジェクト設定 grunt.initConfig({ // タスク設定 csso: { files: { 'output.css': ['input.css'] } ...
Anatomy of a Gruntfile • grunt.initConfig • grunt.loadNpmTasks • grunt.registerTask
grunt.initConfig({ // タスクの設定 csso: {    // dev: {    // files: { // // タスク ターゲット ファイルディレクトリ  アウトプット:インプット 'output.css...
Anatomy of a Gruntfile • grunt.initConfig • grunt.loadNpmTasks • grunt.registerTask
grunt.loadNpmTasks('grunt-csso'); npm installしたプラグインを使用する
http://gruntjs.com/plugins
VS. 2294 plugins 284 plugins 2014.02.13
Maple Realistic preprocessors-based CSS framework for mobile.
https://github.com/t32k/maple
grunt-contrib-connect/watch
grunt-sass
grunt-autoprefixer .flexbox { display: flex; } .flexbox {   display: -moz-flex;   display: -webkit-flex;   display: flex; ...
grunt-spritesmith $fork_offset_x = 0px; $fork_offset_y = 0px; $fork_width = 32px; $fork_height = 32px; ... $github_offset...
grunt-contrib-csslint
grunt-kss
Anatomy of a Gruntfile • grunt.initConfig • grunt.loadNpmTasks • grunt.registerTask
https://github.com/t32k/maple/blob/master/Gruntfile.coffee
http://yeoman.io/
$ npm install yo -g $ npm install generator-maple -g Yeomanをインストール generator-<name> をインストール
$ mkdir your_proj && cd $_ $ yo maple $ grunt ワーキングディレクトリを作成・移動 yoコマンドでmapleを実行 gruntデフォルトタスクを実行
generator-maple
スピードを追跡する
http://www.smashingmagazine.com/2013/06/11/front-end-ops/
“ It doesn’t matter how many features you have or how sexy your features are if they aren’t delivered to the user quickly...
:20 80
http://www.webpagetest.org/
Beyond Onload • Start Render • Speed Index
Private Instance for Ameba
$ npm install webpagetest -g https://github.com/marcelduran/webpagetest-api
Performance Test
Test Build Monitor Deploy Users
Test Build Perf Monitor Users Deploy
まとめ
Front-end Tooling Landscape Boilerplate HTML5 Boilerplate, Twitter Bootstrap, Backbone Boilerplate, Angular seed, Ember st...
Front-end Tooling Landscape Boilerplate HTML5 Boilerplate, Twitter Bootstrap, Backbone Boilerplate, Angular seed, Ember st...
Front-end Tooling Landscape Boilerplate HTML5 Boilerplate, Twitter Bootstrap, Backbone Boilerplate, Angular seed, Ember st...
Front-end Tooling Landscape Boilerplate HTML5 Boilerplate, Twitter Bootstrap, Backbone Boilerplate, Angular seed, Ember st...
Client? Server? • Dev? Ops? •
越境しよう ！ by Developers Summit 2008
Thanks! koji.ishimoto @t32k t32k
Photo Credit • • • • • • http://www.flickr.com/photos/wwworks/1384954600/ http://www.flickr.com/photos/trippchicago/10766...
フロントエンドエンジニア（仮） 〜え、ちょっとフロントやること多すぎじゃない！？〜
フロントエンドエンジニア（仮） 〜え、ちょっとフロントやること多すぎじゃない！？〜
フロントエンドエンジニア（仮） 〜え、ちょっとフロントやること多すぎじゃない！？〜
フロントエンドエンジニア（仮） 〜え、ちょっとフロントやること多すぎじゃない！？〜
フロントエンドエンジニア（仮） 〜え、ちょっとフロントやること多すぎじゃない！？〜
フロントエンドエンジニア（仮） 〜え、ちょっとフロントやること多すぎじゃない！？〜
フロントエンドエンジニア（仮） 〜え、ちょっとフロントやること多すぎじゃない！？〜
フロントエンドエンジニア（仮） 〜え、ちょっとフロントやること多すぎじゃない！？〜
フロントエンドエンジニア（仮） 〜え、ちょっとフロントやること多すぎじゃない！？〜
フロントエンドエンジニア（仮） 〜え、ちょっとフロントやること多すぎじゃない！？〜
フロントエンドエンジニア（仮） 〜え、ちょっとフロントやること多すぎじゃない！？〜
フロントエンドエンジニア（仮） 〜え、ちょっとフロントやること多すぎじゃない！？〜
フロントエンドエンジニア（仮） 〜え、ちょっとフロントやること多すぎじゃない！？〜
フロントエンドエンジニア（仮） 〜え、ちょっとフロントやること多すぎじゃない！？〜
フロントエンドエンジニア（仮） 〜え、ちょっとフロントやること多すぎじゃない！？〜
フロントエンドエンジニア（仮） 〜え、ちょっとフロントやること多すぎじゃない！？〜
フロントエンドエンジニア（仮） 〜え、ちょっとフロントやること多すぎじゃない！？〜
フロントエンドエンジニア（仮） 〜え、ちょっとフロントやること多すぎじゃない！？〜
Upcoming SlideShare
Loading in …5
×
Upcoming SlideShare
【Exchange Avenue】審査講評抜粋版
Next
Download to read offline and view in fullscreen.
Design
Feb. 13, 2014
38,866 views

Share

フロントエンドエンジニア（仮） 〜え、ちょっとフロントやること多すぎじゃない！？〜

Download to read offline

Design
Feb. 13, 2014
38,866 views

Developers Summit 2014：【13-D-3】
https://gist.github.com/t32k/8934355

License: CC Attribution License

Recommended

Related Books

Free with a 30 day trial from Scribd

See all
The Little Black Book of Style Nina Garcia
(4/5)
Free
The Essence of Style: How the French Invented High Fashion, Fine Food, Chic Cafes, Style, Sophistication, and Glamour Joan DeJean
(4.5/5)
Free
Diane: A Signature Life Diane Von Furstenberg
(4/5)
Free
The Towering World of Jimmy Choo: A Glamorous Story of Power, Profits, and the Pursuit of the Perfect Shoe Lauren Goldstein Crowe
(4/5)
Free
Women From the Ankle Down: The Story of Shoes and How They Define Us Rachelle Bergstein
(4.5/5)
Free
Lessons from Madame Chic: 20 Stylish Secrets I Learned While Living in Paris Jennifer L. Scott
(4/5)
Free
Gunn's Golden Rules: Life's Little Lessons for Making It Work Tim Gunn
(4/5)
Free
The Style Strategy: A Less-Is-More Approach to Staying Chic and Shopping Smart Nina Garcia
(4/5)
Free
Empress of Fashion: A Life of Diana Vreeland Amanda Mackenzie Stuart
(3.5/5)
Free
Dreaming of Dior: Every Dress Tells a Story Charlotte Smith
(4/5)
Free
My Mother's Wedding Dress: The Life and Afterlife of Clothes Justine Picardie
(3.5/5)
Free
The One Hundred: A Guide to the Pieces Every Stylish Woman Must Own Nina Garcia
(4/5)
Free
The Style Checklist: The Ultimate Wardrobe Essentials for You Lloyd Boston
(3.5/5)
Free
Effortless Style June Ambrose
(3.5/5)
Free
Before You Put That On: 365 Daily Style Tips for Her Lloyd Boston
(3.5/5)
Free
Diane von Furstenberg: A Life Unwrapped Gioia Diliberto
(4/5)
Free

Related Audiobooks

Free with a 30 day trial from Scribd

See all
Design Thinking for dummies: A Wiley Brand Christian Muller-Roterberg
(4.5/5)
Free
Brilliance and Fire: A Biography of Diamonds Rachelle Bergstein
(0/5)
Free
Two-Dimensional Man Paul Sahre
(0/5)
Free
Creating Things That Matter: The Art and Science of Innovations That Last David Edwards
(4.5/5)
Free
House of Versace: The Untold Story of Genius, Murder, and Survival Deborah Ball
(4/5)
Free
Sacred Space: Clearing and Enhancing the Energy of Your Home Denise Linn
(5/5)
Free
Mademoiselle: Coco Chanel and the Pulse of History Rhonda Garelick
(5/5)
Free
Love the Home You Have: Simple Ways to…Embrace Your Style *Get Organized *Delight in Where You Are Melissa Michaels
(4/5)
Free
Move Your Stuff, Change Your Life: How to Use Feng Shui to Get Love, Money, Respect, and Happiness Karen Rauch Carter
(4/5)
Free
The Golden Thread: How Fabric Changed History Kassia St Clair
(4.5/5)
Free
Enchanted Objects: Design, Human Desire, and the Internet of Things David Rose
(0/5)
Free
The Steal Like an Artist Audio Trilogy: How to Be Creative, Show Your Work, and Keep Going Austin Kleon
(5/5)
Free
Stoned: Jewelry, Obsession, and How Desire Shapes the World Aja Raden
(4.5/5)
Free
Shikake: The Japanese Art of Shaping Behavior Through Design Naohiro Matsumura
(0/5)
Free
Cozy Minimalist Home: More Style, Less Stuff Myquillyn Smith
(4.5/5)
Free
The Product-Led Organization: Drive Growth by Putting Product at the Center of Your Customer Experience Todd Olson
(4.5/5)
Free
Show More

フロントエンドエンジニア（仮） 〜え、ちょっとフロントやること多すぎじゃない！？〜

  1. 1. 13-D-3 #devsumiD フロントエンドエンジニア （仮） ∼え、ちょっとフロントやること多すぎじゃない！ ？∼ アメーバ事業本部ゲーム部門コアグループ 石本 光司
  2. 2. @t32k
  3. 3. Web Designer 2008 - 2011
  4. 4. Web Director 2011 - 2012
  5. 5. Web Developer 2012 -
  6. 6. Sass & Compass徹底入門 ∼CSS のベストプラクティスを効率よく実現するために∼
  7. 7. Agenda • • • • フロントエンドエンジニアとは？ ツールを管理する スピードを追跡する まとめ
  8. 8. フロントエンドエンジニアとは？
  9. 9. http://rmurphey.com/blog/2012/04/12/a-baseline-for-front-end-developers/
  10. 10. A Baseline for Front-end 1. JavaScript 2. Git(and a GitHub account) 3. Modularity, dependency management, and production builds 4. In-Browser Developer Tools 5. The command line 6. Client-side templating 7. CSS preprocessors 8. Testing 9. Process automation (rake/make/grunt/etc.) 10. Code quality 11. The fine manual
  11. 11. Developer HTML/CSS Coder, JavaScripter, Flash Creator
  12. 12. http://uptodate.frontendrescue.org/
  13. 13. ツールを管理する
  14. 14. Front-end Tooling Landscape Boilerplate HTML5 Boilerplate, Twitter Bootstrap, Backbone Boilerplate, Angular seed, Ember starter, Zurb Foundation Abstractions Frameworks CoffeeScript, Sass, Less, Compass, Jade, Haml, Zen coding, Markdown, Handlebars, Iced Coffee, TypeScript, Traceur Workflow Chrome Backbone, DevTools, Angular, LiveReload, Ember, YUI, Codekit, Agility, CanJS, Brunch, Dojo, Meteor, WebStorm Derby, Spine, Batman, Cujo, IDE, watch, Testing, Tincr, Knockout, JSHint, Knockback, BrowserStack, jQuery Selenium, Mobile, WebGL jQuery UI, Inpector Closure, ExtJS, Montage Performance Build JavaScript, CSS and Heap profiling, GPU, memory, tracing, PageSpeed Grunt, Rake, Marven, Concat, r.js, Miification, Image optimization, Compression, Module loading, mod_pagespe ed
  15. 15. Community App Team Producer UI Designer JavaScript HTML/CSS System Engineer System Engineer System Engineer iOS/Android Engineer
  16. 16. CSS preprocessors
  17. 17. http://mhs.github.io/scout-app/
  18. 18. $9.99 http://livereload.com/
  19. 19. $28 https://incident57.com/codekit/
  20. 20. ＼(^o^)／ ／(^o^)＼
  21. 21. http://gruntjs.com/
  22. 22. Installation
  23. 23. http://nodejs.org/
  24. 24. + http://nodejs.org/
  25. 25. $ npm install grunt-cli -g grunt-cliをインストール `-g`はグローバル環境にインストール
  26. 26. Package.json Gruntfile.js(.coffee)
  27. 27. Package.json
  28. 28. $ npm init This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sane defaults. See `npm help json` for definitive documentation on these fields and exactly what they do. Use `npm install <pkg> --save` afterwards to install a package and save it as a dependency in the package.json file. package.jsonを作成する 対話形式でいろいろ聞かれるけどENTER!!
  29. 29. $ npm install grunt --save-dev $ npm install grunt-csso --save-dev gruntをインストール grunt-<plugin_name> をインストール `--save-dev`はdevDependenciesに記録
  30. 30. Gruntfile.js(.coffee)
  31. 31. $ npm install grunt-init -g $ git clone https://github.com/gruntjs/grunt-initgruntfile.git ~/.grunt-init/gruntfile $ grunt-init gruntfile grunt-initをインストール GitHubからテンプレートをクローン 対話形式でいろいろ聞かれるけどENTER!!
  32. 32. Anatomy of a Gruntfile • grunt.initConfig • grunt.loadNpmTasks • grunt.registerTask
  33. 33. module.exports = function(grunt) { // プロジェクト設定 grunt.initConfig({ // タスク設定 csso: { files: { 'output.css': ['input.css'] } } }); // タスクで必要なプラグインを読み込む grunt.loadNpmTasks('grunt-csso'); // カスタムタスクを登録 grunt.registerTask('default', ['csso']); };
  34. 34. Anatomy of a Gruntfile • grunt.initConfig • grunt.loadNpmTasks • grunt.registerTask
  35. 35. grunt.initConfig({ // タスクの設定 csso: {    // dev: {    // files: { // // タスク ターゲット ファイルディレクトリ  アウトプット:インプット 'output.css': 'input.css', }, prod: {・・・} }, task-foo: {・・・} }     
  36. 36. Anatomy of a Gruntfile • grunt.initConfig • grunt.loadNpmTasks • grunt.registerTask
  37. 37. grunt.loadNpmTasks('grunt-csso'); npm installしたプラグインを使用する
  38. 38. http://gruntjs.com/plugins
  39. 39. VS. 2294 plugins 284 plugins 2014.02.13
  40. 40. Maple Realistic preprocessors-based CSS framework for mobile.
  41. 41. https://github.com/t32k/maple
  42. 42. grunt-contrib-connect/watch
  43. 43. grunt-sass
  44. 44. grunt-autoprefixer .flexbox { display: flex; } .flexbox {   display: -moz-flex;   display: -webkit-flex;   display: flex; } Before After
  45. 45. grunt-spritesmith $fork_offset_x = 0px; $fork_offset_y = 0px; $fork_width = 32px; $fork_height = 32px; ... $github_offset_x = -32px; $github_offset_y = 0px; $github_width = 32px; $github_height = 32px; ...
  46. 46. grunt-contrib-csslint
  47. 47. grunt-kss
  48. 48. Anatomy of a Gruntfile • grunt.initConfig • grunt.loadNpmTasks • grunt.registerTask
  49. 49. https://github.com/t32k/maple/blob/master/Gruntfile.coffee
  50. 50. http://yeoman.io/
  51. 51. $ npm install yo -g $ npm install generator-maple -g Yeomanをインストール generator-<name> をインストール
  52. 52. $ mkdir your_proj && cd $_ $ yo maple $ grunt ワーキングディレクトリを作成・移動 yoコマンドでmapleを実行 gruntデフォルトタスクを実行
  53. 53. generator-maple
  54. 54. スピードを追跡する
  55. 55. http://www.smashingmagazine.com/2013/06/11/front-end-ops/
  56. 56. “ It doesn’t matter how many features you have or how sexy your features are if they aren’t delivered to the user quickly, with ease, and then heavily monitored. ― Alex Sexton
  57. 57. :20 80
  58. 58. http://www.webpagetest.org/
  59. 59. Beyond Onload • Start Render • Speed Index
  60. 60. Private Instance for Ameba
  61. 61. $ npm install webpagetest -g https://github.com/marcelduran/webpagetest-api
  62. 62. Performance Test
  63. 63. Test Build Monitor Deploy Users
  64. 64. Test Build Perf Monitor Users Deploy
  65. 65. まとめ
  66. 66. Front-end Tooling Landscape Boilerplate HTML5 Boilerplate, Twitter Bootstrap, Backbone Boilerplate, Angular seed, Ember starter, Zurb Foundation Abstractions Frameworks CoffeeScript, Sass, Less, Compass, Jade, Haml, Zen coding, Markdown, Handlebars, Iced Coffee, TypeScript, Traceur Workflow Chrome Backbone, DevTools, Angular, LiveReload, Ember, YUI, Codekit, Agility, CanJS, Brunch, Dojo, Meteor, WebStorm Derby, Spine, Batman, Cujo, IDE, watch, Testing, Tincr, Knockout, JSHint, Knockback, BrowserStack, jQuery Selenium, Mobile, WebGL jQuery UI, Inpector Closure, ExtJS, Montage Performance Build JavaScript, CSS and Heap profiling, GPU, memory, tracing, PageSpeed Grunt, Rake, Marven, Concat, r.js, Miification, Image optimization, Compression, Module loading, mod_pagespe ed
  67. 67. Front-end Tooling Landscape Boilerplate HTML5 Boilerplate, Twitter Bootstrap, Backbone Boilerplate, Angular seed, Ember starter, Zurb Foundation Abstractions Frameworks CoffeeScript, Sass, Less, Compass, Jade, Haml, Zen coding, Markdown, Handlebars, Iced Coffee, TypeScript, Traceur Workflow Chrome Backbone, DevTools, Angular, LiveReload, Ember, YUI, Codekit, Agility, CanJS, Brunch, Dojo, Meteor, WebStorm Derby, Spine, Batman, Cujo, IDE, watch, Testing, Tincr, Knockout, JSHint, Knockback, BrowserStack, jQuery Selenium, Mobile, WebGL jQuery UI, Inpector Closure, ExtJS, Montage Performance Build JavaScript, CSS and Heap profiling, GPU, memory, tracing, PageSpeed Grunt, Rake, Marven, Concat, r.js, Miification, Image optimization, Compression, Module loading, mod_pagespe ed
  68. 68. Front-end Tooling Landscape Boilerplate HTML5 Boilerplate, Twitter Bootstrap, Backbone Boilerplate, Angular seed, Ember starter, Zurb Foundation Abstractions Frameworks CoffeeScript, Sass, Less, Compass, Jade, Haml, Zen coding, Markdown, Handlebars, Iced Coffee, TypeScript, Traceur Workflow Chrome Backbone, DevTools, Angular, LiveReload, Ember, YUI, Codekit, Agility, CanJS, Brunch, Dojo, Meteor, WebStorm Derby, Spine, Batman, Cujo, IDE, watch, Testing, Tincr, Knockout, JSHint, Knockback, BrowserStack, jQuery Selenium, Mobile, WebGL jQuery UI, Inpector Closure, ExtJS, Montage Performance Build JavaScript, CSS and Heap profiling, GPU, memory, tracing, PageSpeed Grunt, Rake, Marven, Concat, r.js, Miification, Image optimization, Compression, Module loading, mod_pagespe ed
  69. 69. Front-end Tooling Landscape Boilerplate HTML5 Boilerplate, Twitter Bootstrap, Backbone Boilerplate, Angular seed, Ember starter, Zurb Foundation Abstractions Frameworks CoffeeScript, Sass, Less, Compass, Jade, Haml, Zen coding, Markdown, Handlebars, Iced Coffee, TypeScript, Traceur Workflow Chrome Backbone, DevTools, Angular, LiveReload, Ember, YUI, Codekit, Agility, CanJS, Brunch, Dojo, Meteor, WebStorm Derby, Spine, Batman, Cujo, IDE, watch, Testing, Tincr, Knockout, JSHint, Knockback, BrowserStack, jQuery Selenium, Mobile, WebGL jQuery UI, Inpector Closure, ExtJS, Montage Performance Build JavaScript, CSS and Heap profiling, GPU, memory, tracing, PageSpeed Grunt, Rake, Marven, Concat, r.js, Miification, Image optimization, Compression, Module loading, mod_pagespe ed
  70. 70. Client? Server? • Dev? Ops? •
  71. 71. 越境しよう ！ by Developers Summit 2008
  72. 72. Thanks! koji.ishimoto @t32k t32k
  73. 73. Photo Credit • • • • • • http://www.flickr.com/photos/wwworks/1384954600/ http://www.flickr.com/photos/trippchicago/1076657776/ http://www.flickr.com/photos/knitorious/3298975640/ http://www.flickr.com/photos/culturadotabacoii/6086024124/ http://www.flickr.com/photos/mah_aaah/3660470519/ http://jigokuno.com/?eid=306

  • yusuketanaka29

    Jun. 14, 2019

  • NeoXrea

    Dec. 4, 2016

  • HiroyukiSeto

    Sep. 18, 2016

  • yutakiyama

    Nov. 16, 2015

  • daikiiriguchi

    Aug. 19, 2015

  • ssuserd3036a

    Aug. 4, 2015

  • HidekazuMiyamoto

    Jul. 21, 2015

  • terumba

    Jul. 8, 2015

  • atsushitobita7

    Jun. 10, 2015

  • 27ewqazx

    May. 25, 2015

  • ykominami

    Mar. 18, 2015

  • Teruichi81

    Mar. 8, 2015

  • takurokazumi

    Feb. 22, 2015

  • watanabae-ei

    Feb. 10, 2015

  • hiromitsuuuuu

    Dec. 11, 2014

  • miyamoto38

    Nov. 14, 2014

  • takayukisuzuki336

    Oct. 7, 2014

  • tak4hir0

    Sep. 15, 2014

  • TakashiMatsushita

    Aug. 31, 2014

  • yumikoodasaki

    Aug. 5, 2014

Developers Summit 2014：【13-D-3】 https://gist.github.com/t32k/8934355

Views

Total views

38,866

On Slideshare

0

From embeds

0

Number of embeds

5,327

Actions

Downloads

143

Shares

0

Comments

0

Likes

176

×