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

Web制作の最新事情を理解 制作現場をいまこそアップデートしましょう!!

WP-D Fes #03 in GMO Yours Tokyo 2015.02.22.sun

自己紹介

mgn

大串 肇 (メガネ)WEBディレクター

神戸育ち

市営地下鉄 名谷駅

C

C D

C D

C D

メガネ

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

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

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

でも、

• 知ってて、使わないのと

•知らなくて使えない

は大きく違う。なので学んでみましょう。

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

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

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

できること

gulp（ガルプ）で動いている

これを理解します

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

!速く

正確継続

共有

チームに使えない人がいると

こんなことも出来なくなる

• cssの修正 • 画像の差し替え • テキストの打ち替え

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

15

• 黒い画面

• ターミナル

• シェル

コンソール

• bash • Z Shell • fish shell

• JavaScript ランタイム エンジン

• サーバサイドJS

• 実際にWeb制作ではパッケージの

インストールや、それらを動かすために利用

• パッケージ管理はnpm

Node.js

• 言語

• 実際のWeb制作では主にSass,Compass

• パッケージ管理はgem

Ruby

• Macのパッケージ管理

• 実際のWeb制作ではGit等

• Caskといった通常のmacを動かすのに

便利なツールも

Homebrew

• 仮想環境

• PC内に全く新しサーバを建てる

• そこから、本番サーバへの同期なども

Vagrant

• バージョン管理

• 履歴を残せる

• チームで共有できる

Git

パッケージ管理とは

iOSのApp Storeと、アプリのイメージ• 登録されているアプリを

• インストール

• アンインストール

• アップデート

• 削除

• さらに、

自身のアップデート

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

npm

$ npm install hogehogenpm

これで、さまざまなパッケージがインストール可能

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

RubyGems

RubyGems$ gem install hogehoge

これで、さまざまなパッケージがインストール可能

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

Homebrew

Homebrew$ brew install hogehoge

これで、さまざまなパッケージがインストール可能

$ npm install hogehoge$ gem install hogehoge$ brew install hogehoge

みんな一緒

パッケージ管理ファイル

package.jsonnpm

該当プロジェクトで必要なパッケージ が書いてある

"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",

package.jsonnpm

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

gemfileRuby Gem

該当プロジェクトで必要なパッケージ が書いてあるsource "https://rubygems.org"

gem "sass", "~> 3.4.0" gem "compass", "~> 1.0"

gemfileRuby Gem

とするだけで、必要なパッケージ がインストールされる

$ bundle install

つまり同じ！

$ bundle install$ npm install

つづいてタスクランナー

28

Excelのマクロのようなイメージ• 複数の工程を設定

• 自動的に作業

Grunt

Gulp

この2つが有名

Grunt

Gulp

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

GruntGruntfile.js

Gruntで利用するタスクが網羅されている

$ grunt

と入力すると、デフォルトで設定されている タスクが処理される

Gulpgulpfile.js

Gulpで利用するタスクが網羅されている

$ gulp

と入力すると、デフォルトで設定されている タスクが処理される

つまり同じ！$ grunt

$ gulp

どれもなんとなく似てる

先ほどのデモのファイル

gulpの設定ファイル

npmの設定ファイル

$ npm install

$ gulp

つまり同じ！

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

Bootstrappackage.json$ npm install

Gruntfile.js$ grunt

Foundation(libsass)package.json$ npm install

Gruntfile.js$ grunt

Web Starter Kit package.json$ npm install

gulpfile.js$ gulp

つまり同じ！

同じ！

実際に

package.jsonを書いたり、

gulpfile.jsを書くにはもう少し深い知識が必要。

ただ、使うだけなら、少し覚えれば出来る

その結果自動化して早くなる

チーム全体で高速化出来る

つまり、概念を理解し

1つ出来れば、どれもとりあえず使える

Git

チームで共有したい

詳しくは後ほど

Vagrant

Vagrantfile

Vagrant

Vagrantで立ち上がる仮想サーバの情報が網羅されている

$ vagrant up

と入力すると、仮想サーバが立ち上がる

つまり同じ！

同じ！

• 設定ファイルとその動かし方を理解しよう

• そうすれば、とりあえず使える。

• わからないことは出来る人にやってもらう

• 効率化して時短出来るところは時短しよう

• チームのちからになろう

まとめ

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

Web制作の最新事情を理解 制作現場をいまこそアップデートしましょう!!

WP-D Fes #03 in GMO Yours Tokyo 2015.02.22.sun

5