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.

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

5,062 views

Published on

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

Tokyo 2015.02.22.sun
Osaka 2015.03.07.sat

Published in: Internet
  • Be the first to comment

これで大丈夫。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

×