Successfully reported this slideshow.

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

CSS Nite LP26 CodeKitで始める次世代Web制作

  1. 1. 木村哲朗 / 西畑一馬 CodeKit で始める 次世代Web制作
  2. 2. 木村 哲朗 フロントエンドエンジニア
  3. 3. 西畑 一馬 フロントエンドエンジニア
  4. 4. 西畑 一馬 フロントエンドエンジニア
  5. 5. HTML / CSS マークアップ HTML5 / CSS3 スマートフォンサイト作成 JavaScript / Ajax システム開発
  6. 6.      では 昨年の6月から 「Sass」を実務で導入
  7. 7. それまでは ...
  8. 8. よー わからん 黒い画面 こわい
  9. 9. そんなオマエラの救世主。 それが
  10. 10. http://incident57.com/codekit/
  11. 11. オマエラでも安心。 わーい
  12. 12. Outline •C o deKitとは? •S ass/LESS/Stylusのコンパイル •C o mpassの利用 •C o ffeeScriptなどのコンパイル •ブラウザのオートリロード •C o deKitで施すWebサイト高速化 •プロジェクトの管理と共有 •まとめ
  13. 13. What’s CodeKit ?
  14. 14. 通常、CSSプリプロセッサの 利用は
  15. 15. キャラクターユーザインタフェース Ruby Node CUI
  16. 16. 黒い画面とか、 なにそれコワイ。
  17. 17. CodeKit なら でも
  18. 18. グラフィカルユーザインタフェース GUI
  19. 19. インストールするだけで
  20. 20. すべてのCSSプリプロセッサが 使える!
  21. 21. さらに Blessを 自動的にかける Compass / Bourbon の利用
  22. 22. でも お高いんでしょう?
  23. 23. これだけの機能を揃えて なんと 10日間の無償試用可 (機能制限無し) $25
  24. 24. ズバリ 今のうちに是非
  25. 25. お手軽さを ライブデモで!
  26. 26. 準備
  27. 27. プロジェクトを Watch(監視)させる DEMO
  28. 28. と言っても
  29. 29. CodeKit に D&D するだけ ドラッグアンドドロップ
  30. 30. あとは CodeKit におまかせ .scss .less .styl CodeKit 編集・保存 お、更新 されたぞ 更新を監視 .css 自動でコンパイル
  31. 31. デモファイルのフォルダ構成 demo css img js less scss styl index.html
  32. 32. DEMO Sass のコンパイル
  33. 33. scss フォルダに style.scss を保存する style.scss style.cssdemo css img js less scss styl index.html
  34. 34. DEMO
  35. 35. LESS のコンパイル DEMO
  36. 36. less フォルダに style.less を保存する style.less style.cssdemo css img js less scss styl index.html
  37. 37. DEMO
  38. 38. Stylus のコンパイル DEMO
  39. 39. styl フォルダに style.styl を保存する style.css style.styl demo css img js less scss styl index.html
  40. 40. DEMO
  41. 41. びっくりするぐらい 簡単ですね
  42. 42. ちなみに
  43. 43. フォルダの位置関係の設定は変更可能
  44. 44. コンパイル後に Bless をかけることも可能
  45. 45. Compass の利用 DEMO
  46. 46. 新規にCompassプロジェクトを作成する
  47. 47. 既存のプロジェクトでCompassを利用する
  48. 48. Compass をインストールする
  49. 49. Compassを設定する 相対パス にする
  50. 50. DEMO
  51. 51. だけじゃないんです。 奥さん。
  52. 52. JavaScript の ミニファイ・結合 文法チェック CoffeeScript の コンパイル + CodeKit でできること
  53. 53. Jade / Haml / Slim / Kit Language のコンパイル CodeKit でできること
  54. 54. CodeKit でできること 画像最適化 フレームワークの 登録・利用 ブラウザの オートリロード チームでの プロジェクト共有
  55. 55. DEMO CoffeeScript のコンパイル
  56. 56. js フォルダに script.coffee を 保存する script.coffee script.js demo css img js less scss styl index.html
  57. 57. DEMO Kit Language のコンパイル
  58. 58. CodeKit 独自の HTMLライブラリ機能 http://incident57.com/codekit/kit.php
  59. 59. index.kit index.kit に header.kit をインポートする header.kit index.html インポート
  60. 60. ブラウザのオートリロード DEMO
  61. 61. オートリロードの設定
  62. 62. Adobe Edge Inspect •Adobe から提供されている マルチデバイス開発補助ツール •Mac/PCでのWebブラウジングを スマートフォンなどに同期してくれる •オートリロード機能と組み合わせると 実機確認がとっても楽! http://html.adobe.com/jp/edge/inspect/
  63. 63. DEMO
  64. 64. 動画でご覧ください https://vimeo.com/57296277
  65. 65. DEMO JavaScript の ミニファイ・結合
  66. 66. script.min.js script.js script.js をミニファイする
  67. 67. script.js script.js に jquery.js を結合する jquery.js script.min.js 結合
  68. 68. ミニファイ済ファイル名の設定
  69. 69. DEMO 画像最適化
  70. 70. より優秀な画像最適化ツール ImageOptim ImageAlpha JPEGmini http://imageoptim.com/ http://pngmini.com/ http://www.jpegmini.com/
  71. 71. DEMO プロジェクトの管理と共有
  72. 72. プロジェクト設定を有効にする
  73. 73. プロジェクトごとの設定をする
  74. 74. codekit-config.json codekit-config.json を共有する git/svn/Dropbox など メンバー間で共有
  75. 75. まとめ
  76. 76. •CodeKitなら環境構築が簡単 •自動的にBlessをかけられる •Compass/Bourbonが利用できる •JSのミニファイ・結合、画像の最適化も可能 •CSS以外のプリプロセッサにも対応 •オートリロード + Edge Inspectで スマートフォンでの実機確認も楽々 •フレームワークの登録・利用が可能 •プロジェクトの設定は共有できる
  77. 77. これだけの機能を揃えて
  78. 78. なんと $25 しつこいわね
  79. 79. まずは10日間 お試しください
  80. 80. コンパイルとか
  81. 81. ビルドとか
  82. 82. フロントエンドでも 必要なようです
  83. 83. CodeKit は足がかり
  84. 84. 実は、他にもあります Hammer http://hammerformac.com/ MIXTURE http://mixture.io/
  85. 85. まずは CodeKit で 次世代のWeb制作を始めよう
  86. 86. 黒い画面への近道かも
  87. 87. 大丈夫、 怖くない
  88. 88. だって、黒くないもん 驚きの 白さ!!
  89. 89. ありがとうございました 木村哲朗 / 西畑一馬 CodeKit で始める次世代Web制作

×