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.

Middleman Guides & How to Learn

2,232 views

Published on

Tokyo Middleman Meetup #1 発表資料

Published in: Technology

Middleman Guides & How to Learn

  1. 1. Middleman Guides & How to Learn Tokyo Middleman Meetup #1 2013/11/22 @株式会社ジェニュインブルー
  2. 2. 自己紹介 • てらじまゆうや / yterajima • フリーのプログラマ
 (PHP, Ruby, JavaScript, C# etc) • 群馬県東吾妻町 在住 (元 三鷹市民) • guRuby, Gunma.web, agatsuma.survive
  3. 3. Middlemanと私 • Middleman Guides 日本語版 • gems (RubyGems or On Github) • middleman-slim • middleman-pure • middleman-assets • [wip] middleman-bowest
  4. 4. 利用シーン • CSS, JS ライブラリのテスト • モック, プロトタイプの開発時 • プロジェクト用ドキュメント • 静的サイト
  5. 5. 話すこと • 日本語版公開までの道のり • Middleman Guides を理解する • 知られざる機能を知る
  6. 6. 日本語版公開までの 道のり
  7. 7. 2011年秋 群馬にUターン
  8. 8. 地方の案件といえば
  9. 9. • 予算が少ない • クライアントにITに強い人が少ない • 「安くできるんでしょ?」
  10. 10. 安くできる
 んでしょ?
  11. 11. 作業量を減らす • HTMLをやめる
 → Slim
  12. 12. HTML
  13. 13. Slim
  14. 14. Slim (with iterator)
  15. 15. Slim (with iterator 2)
  16. 16. 日本語README.md https://github.com/yterajima/slim
  17. 17. 作業量を減らす • CSSをやめる
 → Sass
  18. 18. CSS
  19. 19. Sass
  20. 20. + Indent Style Markup
  21. 21. さて, ここで困った
  22. 22. 毎回コマンド $ slimrb -p target.slim > result.html $ sass --watch sass:css
  23. 23. Slim + Sass で 最後にHTMLが刈り取 れるものが欲しい
  24. 24. 公開からの Milestone
  25. 25. 日本語版ガイドを作る 都会の人たちが使い始める イマココ!! みんな使い始める 群馬でも使い始める
  26. 26. 私の仕事が楽になる
  27. 27. Middleman Guides を理解する
  28. 28. Middleman Guides 日本語版 http://middlemanjp.github.io/
  29. 29. Middlemanを3行で • テンプレートコンパイラ • Preview Server • Static Site Build • パーツ共有機能 (Layout, Partial) • その他便利機能 
 (Asset Pipeline, Local Data, Frontmatter,
 Helper, Directory Index etc)
  30. 30. Middleman Guides の特徴 • すべての項目を説明してはいない • 1/2 読めば問題なく使える • 日本語版は 2週間毎にUpdate • 記述がないことをするのは大変
  31. 31. 必読
  32. 32. 混乱しそうなもの
  33. 33. Middleman を始める前に • テンプレートエンジン • Haml, Jade, Slim, Markdown etc • Sass, Less etc • Syntax 対応のエディタ採用 • YAML • Bundler, Git (できれば)
  34. 34. テンプレートエンジン
  35. 35. Haml http://fukuyama.co/haml2
  36. 36. Jade
  37. 37. Slim
  38. 38. Sass (+ Compass)
  39. 39. エディタ • Vim • emacs • Sublime Text2 • その他 Syntax 対応が充実したもの
  40. 40. YAML Rubyist Magazine プログラマーのための YAML 入門 (初級編) http://magazine.rubyist.net/?0009-YAML
  41. 41. Bundler • Ruby の gem (ライブラリ) 管理ツール • プロジェクトごとに必要なライブラ リを管理できる • $ bundle install --path vendor/bundle • $ bundle exec middleman server
  42. 42. Git (& Github) • バージョン管理ツール • そろそろ使えて当たり前感 • 複数人のプロジェクトでは必須
  43. 43. + Middleman Guides
  44. 44. 知られざる機能を知る
  45. 45. middleman-* • 機能別に分割されている • middleman (依存関係定義) • middleman-core (基本機能) • middleman-livereload (livereload) • middleman-sprockets (Asset Pipeline)
  46. 46. 基本設定 • middleman-core の中を探す • $ grep -r define_setting * ※ application.rb 内のdefine_setting 一覧
  47. 47. assets 用 gemを作る • middleman-sprockets に Asset Pipeline に関する処理がある • gem の中の特定のディレクトリを読 み込む • https://github.com/yterajima/middlemanassets

  48. 48. bower 連携 • config.rb で :bower_dir オプションを設定 • Middlemanの中でbowerを使う ~>3.1.4 
 http://www.e2esound.com/wp/2013/08/09/ bower_in_middleman_project_3-1-4/
  49. 49. CHANGELOG.md
  50. 50. feature を読む • 自然言語で書かれたテスト
  51. 51. 気をつけること • 実現している/したい機能は 
 Middleman 自体の機能なのか • ex. middleman-syntax • ex. middleman-autoprefixer
  52. 52. Middleman は • モダンな web 開発の • あらゆるショートカットや • ツールを採用した • 静的サイトジェネレータです。 • ※機能追加可能
  53. 53. おわりに
  54. 54. おさらい • 日本語版公開までの道のり • Middleman Guides を理解する • 知られざる機能を知る
  55. 55. 帰ったらやること
  56. 56. 目を通す
  57. 57. $ gem install middleman $ middleman init PROJECT

×