Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
基調講演
これで大丈夫。
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 hogehoge
npm
これで、さまざまなパッケージがインストール可能
Rubyで利用するパッケージ管理
RubyGems
RubyGems
$ gem install hogehoge
これで、さまざまなパッケージがインストール可能
Macで利用するパッケージ管理
Homebrew
Homebrew
$ brew install hogehoge
これで、さまざまなパッケージがインストール可能
$ npm install hogehoge
$ gem install hogehoge
$ brew install hogehoge
みんな一緒
パッケージ管理ファイル
package.json
npm
該当プロジェクトで必要なパッケージ
が書いてある
"author": "Yutaro Miyazaki",
"license": "MIT",
"dependencies": {},
"devDependenc...
package.json
npm
$ npm install
とするだけで、必要なパッケージ
がインストールされる
gemfile
Ruby Gem
該当プロジェクトで必要なパッケージ
が書いてある
source "https://rubygems.org"
gem "sass", " > 3.4.0"
gem "compass", " > 1.0"
gemfile
Ruby Gem
とするだけで、必要なパッケージ
がインストールされる
$ bundle install
つまり同じ!
$ bundle install
$ npm install
つづいてタスクランナー
28
Excelのマクロのようなイメージ
• 複数の工程を設定
• 自動的に作業
Grunt
Gulp
この2つが有名
Grunt
Gulp
• cssへのコンパイル
• 画像やJSのミニマイズ
• ライブリロード
• 構文チェック
• ローカルサーバ
• スタイルガイド作成
• ファイル監視
• 等など
Grunt
Gruntfile.js
Gruntで利用するタスクが網羅されている
$ grunt
と入力すると、デフォルトで設定されている
タスクが処理される
Gulp
gulpfile.js
Gulpで利用するタスクが網羅されている
$ gulp
と入力すると、デフォルトで設定されている
タスクが処理される
つまり同じ!
$ grunt
$ gulp
どれもなんとなく似てる
先ほどのデモのファイル
gulpの設定ファイル
npmの設定ファイル
$ npm install
$ gulp
つまり同じ!
有名なCSSフレームワークも
Bootstrap
package.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
これで大丈夫。Web制作で使うコマンドラインツールの名前と役割をざっくり理解する
これで大丈夫。Web制作で使うコマンドラインツールの名前と役割をざっくり理解する
Nächste SlideShare
Wird geladen in …5
×

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

5.099 Aufrufe

Veröffentlicht am

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

Tokyo 2015.02.22.sun
Osaka 2015.03.07.sat

Veröffentlicht in: Internet
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

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

  1. 1. 基調講演 これで大丈夫。 Web制作で使うコマンドラインツールの 名前と役割をざっくり理解する
  2. 2. Web制作の最新事情を理解 制作現場をいまこそアップデートしましょう!! WP-D Fes #03 in GMO Yours Tokyo 2015.02.22.sun
  3. 3. 自己紹介 mgn 大串 肇 (メガネ) WEBディレクター 神戸育ち 市営地下鉄 名谷駅
  4. 4. C
  5. 5. C D
  6. 6. C D
  7. 7. C D メガネ
  8. 8. 基調講演 これで大丈夫。 Web制作で使うコマンドラインツールの 名前と役割をざっくり理解する
  9. 9. コマンドラインツールが 使えないとだめなの?
  10. 10. そんなことはない とおもっています
  11. 11. でも、 • 知ってて、使わないのと • 知らなくて使えない は大きく違う。なので学んでみましょう。
  12. 12. 今からの話は全部載っています
  13. 13. まずはデモを御覧ください
  14. 14. • ブラウザ自動更新 • Sassのコンパイル • JSや画像のミニマイズ • シンプルなグリッド機能 できること
  15. 15. gulp(ガルプ)で動いている これを理解します
  16. 16. 今のWeb制作の 求められていることの中で 紹介するツールが 主に助けてくれること
  17. 17. Ɲ 速く 正確継続 共有
  18. 18. チームに使えない人がいると こんなことも出来なくなる • cssの修正 • 画像の差し替え • テキストの打ち替え
  19. 19. まずはざっくりと名前から 15
  20. 20. • 黒い画面 • ターミナル • シェル コンソール • bash • Z Shell • fish shell
  21. 21. • JavaScript ランタイム エンジン • サーバサイドJS • 実際にWeb制作ではパッケージの
 インストールや、それらを動かすために利用 • パッケージ管理はnpm Node.js
  22. 22. • 言語 • 実際のWeb制作では主にSass,Compass • パッケージ管理はgem Ruby
  23. 23. • Macのパッケージ管理 • 実際のWeb制作ではGit等 • Caskといった通常のmacを動かすのに
 便利なツールも Homebrew
  24. 24. • 仮想環境 • PC内に全く新しサーバを建てる • そこから、本番サーバへの同期なども Vagrant
  25. 25. • バージョン管理 • 履歴を残せる • チームで共有できる Git
  26. 26. パッケージ管理とは
  27. 27. iOSのApp Storeと、アプリのイメージ • 登録されているアプリを • インストール • アンインストール • アップデート • 削除 • さらに、
 自身のアップデート
  28. 28. node.jsで利用するパッケージ管理 Node Package Manager の略 npm
  29. 29. $ npm install hogehoge npm これで、さまざまなパッケージがインストール可能
  30. 30. Rubyで利用するパッケージ管理 RubyGems
  31. 31. RubyGems $ gem install hogehoge これで、さまざまなパッケージがインストール可能
  32. 32. Macで利用するパッケージ管理 Homebrew
  33. 33. Homebrew $ brew install hogehoge これで、さまざまなパッケージがインストール可能
  34. 34. $ npm install hogehoge $ gem install hogehoge $ brew install hogehoge みんな一緒
  35. 35. パッケージ管理ファイル
  36. 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. 37. package.json npm $ npm install とするだけで、必要なパッケージ がインストールされる
  38. 38. gemfile Ruby Gem 該当プロジェクトで必要なパッケージ が書いてある source "https://rubygems.org" gem "sass", " > 3.4.0" gem "compass", " > 1.0"
  39. 39. gemfile Ruby Gem とするだけで、必要なパッケージ がインストールされる $ bundle install
  40. 40. つまり同じ! $ bundle install $ npm install
  41. 41. つづいてタスクランナー 28
  42. 42. Excelのマクロのようなイメージ • 複数の工程を設定 • 自動的に作業
  43. 43. Grunt Gulp この2つが有名
  44. 44. Grunt Gulp • cssへのコンパイル • 画像やJSのミニマイズ • ライブリロード • 構文チェック • ローカルサーバ • スタイルガイド作成 • ファイル監視 • 等など
  45. 45. Grunt Gruntfile.js Gruntで利用するタスクが網羅されている $ grunt と入力すると、デフォルトで設定されている タスクが処理される
  46. 46. Gulp gulpfile.js Gulpで利用するタスクが網羅されている $ gulp と入力すると、デフォルトで設定されている タスクが処理される
  47. 47. つまり同じ! $ grunt $ gulp
  48. 48. どれもなんとなく似てる
  49. 49. 先ほどのデモのファイル gulpの設定ファイル npmの設定ファイル
  50. 50. $ npm install $ gulp つまり同じ!
  51. 51. 有名なCSSフレームワークも
  52. 52. Bootstrap package.json $ npm install Gruntfile.js $ grunt
  53. 53. Foundation(libsass) package.json $ npm install Gruntfile.js $ grunt
  54. 54. Web Starter Kit package.json $ npm install gulpfile.js $ gulp
  55. 55. つまり同じ!
  56. 56. 同じ!
  57. 57. 実際に package.jsonを書いたり、 gulpfile.jsを書くにはもう少し深い知識が必要。 ただ、使うだけなら、少し覚えれば出来る その結果自動化して早くなる チーム全体で高速化出来る
  58. 58. つまり、概念を理解し 1つ出来れば、どれもとりあえず使える
  59. 59. Git チームで共有したい 詳しくは後ほど
  60. 60. Vagrant
  61. 61. Vagrantfile Vagrant Vagrantで立ち上がる仮想サーバの情報が網羅されている $ vagrant up と入力すると、仮想サーバが立ち上がる
  62. 62. つまり同じ!
  63. 63. 同じ!
  64. 64. • 設定ファイルとその動かし方を理解しよう • そうすれば、とりあえず使える。 • わからないことは出来る人にやってもらう • 効率化して時短出来るところは時短しよう • チームのちからになろう まとめ
  65. 65. もっと丁寧に詳しく。こもりさん著の電子書籍
  66. 66. Web制作の最新事情を理解 制作現場をいまこそアップデートしましょう!! WP-D Fes #03 in GMO Yours Tokyo 2015.02.22.sun 5

×