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.

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

15,198 views

Published on

Published in: Technology

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 NodeCUI
  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 .stylCodeKit編集・保存お、更新されたぞ更新を監視.css 自動でコンパイル
  31. 31. デモファイルのフォルダ構成demo cssimgjslessscssstylindex.html
  32. 32. DEMOSass のコンパイル
  33. 33. scss フォルダにstyle.scss を保存するstyle.scssstyle.cssdemo cssimgjslessscssstylindex.html
  34. 34. DEMO
  35. 35. LESS のコンパイルDEMO
  36. 36. less フォルダにstyle.less を保存するstyle.lessstyle.cssdemo cssimgjslessscssstylindex.html
  37. 37. DEMO
  38. 38. Stylus のコンパイルDEMO
  39. 39. styl フォルダにstyle.styl を保存するstyle.cssstyle.styldemo cssimgjslessscssstylindex.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. DEMOCoffeeScript のコンパイル
  56. 56. js フォルダにscript.coffee を 保存するscript.coffeescript.jsdemo cssimgjslessscssstylindex.html
  57. 57. DEMOKit Language のコンパイル
  58. 58. CodeKit 独自のHTMLライブラリ機能http://incident57.com/codekit/kit.php
  59. 59. index.kitindex.kit にheader.kit をインポートするheader.kitindex.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. DEMOJavaScript のミニファイ・結合
  66. 66. script.min.jsscript.jsscript.js をミニファイする
  67. 67. script.jsscript.js にjquery.js を結合するjquery.jsscript.min.js結合
  68. 68. ミニファイ済ファイル名の設定
  69. 69. DEMO画像最適化
  70. 70. より優秀な画像最適化ツールImageOptimImageAlphaJPEGminihttp://imageoptim.com/http://pngmini.com/http://www.jpegmini.com/
  71. 71. DEMOプロジェクトの管理と共有
  72. 72. プロジェクト設定を有効にする
  73. 73. プロジェクトごとの設定をする
  74. 74. codekit-config.jsoncodekit-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. 実は、他にもありますHammerhttp://hammerformac.com/MIXTUREhttp://mixture.io/
  85. 85. まずは CodeKit で次世代のWeb制作を始めよう
  86. 86. 黒い画面への近道かも
  87. 87. 大丈夫、怖くない
  88. 88. だって、黒くないもん驚きの白さ!!
  89. 89. ありがとうございました木村哲朗 / 西畑一馬CodeKit で始める次世代Web制作

×