WP-D Fes #03 in GMO Yours Web制作の最新事情を理解制作現場をいまこそアップデートしましょう!! Tokyo 2015.02.22.sun Osaka 2015.03.07.sat

1. 基調講演
これで大丈夫。
Web制作で使うコマンドラインツールの
名前と役割をざっくり理解する

2. Web制作の最新事情を理解
制作現場をいまこそアップデートしましょう!!
WP-D Fes #03 in GMO Yours
Tokyo 2015.02.22.sun

3. 自己紹介
mgn
大串 肇 (メガネ)
WEBディレクター
神戸育ち
市営地下鉄
名谷駅

4. C

5. C D

6. C D

7. C D
メガネ

8. 基調講演
これで大丈夫。
Web制作で使うコマンドラインツールの
名前と役割をざっくり理解する

9. コマンドラインツールが
使えないとだめなの？

10. そんなことはない
とおもっています

11. でも、
• 知ってて、使わないのと
• 知らなくて使えない
は大きく違う。なので学んでみましょう。

12. 今からの話は全部載っています

13. まずはデモを御覧ください

14. • ブラウザ自動更新
• Sassのコンパイル
• JSや画像のミニマイズ
• シンプルなグリッド機能
できること

15. gulp（ガルプ）で動いている
これを理解します

16. 今のWeb制作の
求められていることの中で
紹介するツールが
主に助けてくれること

17. Ɲ
速く
正確継続
共有

18. チームに使えない人がいると
こんなことも出来なくなる
• cssの修正
• 画像の差し替え
• テキストの打ち替え

19. まずはざっくりと名前から
15

20. • 黒い画面
• ターミナル
• シェル
コンソール
• bash
• Z Shell
• fish shell

21. • JavaScript ランタイム エンジン
• サーバサイドJS
• 実際にWeb制作ではパッケージの
インストールや、それらを動かすために利用
• パッケージ管理はnpm
Node.js

22. • 言語
• 実際のWeb制作では主にSass,Compass
• パッケージ管理はgem
Ruby

23. • Macのパッケージ管理
• 実際のWeb制作ではGit等
• Caskといった通常のmacを動かすのに
便利なツールも
Homebrew

24. • 仮想環境
• PC内に全く新しサーバを建てる
• そこから、本番サーバへの同期なども
Vagrant

25. • バージョン管理
• 履歴を残せる
• チームで共有できる
Git

26. パッケージ管理とは

27. iOSのApp Storeと、アプリのイメージ
• 登録されているアプリを
• インストール
• アンインストール
• アップデート
• 削除
• さらに、
自身のアップデート

28. node.jsで利用するパッケージ管理
Node Package Manager の略
npm

29. $ npm install hogehoge
npm
これで、さまざまなパッケージがインストール可能

30. Rubyで利用するパッケージ管理
RubyGems

31. RubyGems
$ gem install hogehoge
これで、さまざまなパッケージがインストール可能

32. Macで利用するパッケージ管理
Homebrew

33. Homebrew
$ brew install hogehoge
これで、さまざまなパッケージがインストール可能

34. $ npm install hogehoge
$ gem install hogehoge
$ brew install hogehoge
みんな一緒

35. パッケージ管理ファイル

36. package.json
npm
該当プロジェクトで必要なパッケージ
が書いてある
"author": "Yutaro Miyazaki",
"license": "MIT",
"dependencies": {},
"devDependencies": {
"browser-sync": "^1.9.1",
"del": "^1.1.1",
"gulp": "^3.8.11",
"gulp-autoprefixer": "^2.1.0",
"gulp-bower-normalize": "^1.0.3",
"gulp-changed": "^1.1.1",
"gulp-compass": "^2.0.3",
"gulp-concat": "^2.4.3",

37. package.json
npm
$ npm install
とするだけで、必要なパッケージ
がインストールされる

38. gemfile
Ruby Gem
該当プロジェクトで必要なパッケージ
が書いてある
source "https://rubygems.org"
gem "sass", " > 3.4.0"
gem "compass", " > 1.0"

39. gemfile
Ruby Gem
とするだけで、必要なパッケージ
がインストールされる
$ bundle install

40. つまり同じ！
$ bundle install
$ npm install

41. つづいてタスクランナー
28

42. Excelのマクロのようなイメージ
• 複数の工程を設定
• 自動的に作業

43. Grunt
Gulp
この2つが有名

44. Grunt
Gulp
• cssへのコンパイル
• 画像やJSのミニマイズ
• ライブリロード
• 構文チェック
• ローカルサーバ
• スタイルガイド作成
• ファイル監視
• 等など

45. Grunt
Gruntfile.js
Gruntで利用するタスクが網羅されている
$ grunt
と入力すると、デフォルトで設定されている
タスクが処理される

46. Gulp
gulpfile.js
Gulpで利用するタスクが網羅されている
$ gulp
と入力すると、デフォルトで設定されている
タスクが処理される

47. つまり同じ！
$ grunt
$ gulp

48. どれもなんとなく似てる

49. 先ほどのデモのファイル
gulpの設定ファイル
npmの設定ファイル

50. $ npm install
$ gulp
つまり同じ！

51. 有名なCSSフレームワークも

52. Bootstrap
package.json
$ npm install
Gruntfile.js
$ grunt

53. Foundation(libsass)
package.json
$ npm install
Gruntfile.js
$ grunt

54. Web Starter Kit
package.json
$ npm install
gulpfile.js
$ gulp

55. つまり同じ！

56. 同じ！

57. 実際に
package.jsonを書いたり、
gulpfile.jsを書くにはもう少し深い知識が必要。
ただ、使うだけなら、少し覚えれば出来る
その結果自動化して早くなる
チーム全体で高速化出来る

58. つまり、概念を理解し
1つ出来れば、どれもとりあえず使える

59. Git
チームで共有したい
詳しくは後ほど

60. Vagrant

61. Vagrantfile
Vagrant
Vagrantで立ち上がる仮想サーバの情報が網羅されている
$ vagrant up
と入力すると、仮想サーバが立ち上がる

62. つまり同じ！

63. 同じ！

64. • 設定ファイルとその動かし方を理解しよう
• そうすれば、とりあえず使える。
• わからないことは出来る人にやってもらう
• 効率化して時短出来るところは時短しよう
• チームのちからになろう
まとめ

65. もっと丁寧に詳しく。こもりさん著の電子書籍

67. Web制作の最新事情を理解
制作現場をいまこそアップデートしましょう!!
WP-D Fes #03 in GMO Yours
Tokyo 2015.02.22.sun
5