Download to read offline
![Middlemanと私
• Middleman Guides 日本語版
• gems (RubyGems or On Github)
• middleman-slim
• middleman-pure
• middleman-assets
• [wip] middleman-bowest](https://image.slidesharecdn.com/middlemanguideshowtolean-131122055427-phpapp02/75/Middleman-Guides-How-to-Learn-3-2048.jpg)
Middleman Guides & How to Learn
- 1. Middleman Guides & Howto Learn Tokyo Middleman Meetup #1 2013/11/22 @株式会社ジェニュインブルー
- 2. 自己紹介 • てらじまゆうや /yterajima • フリーのプログラマ (PHP, Ruby, JavaScript, C# etc) • 群馬県東吾妻町 在住 (元 三鷹市民) • guRuby, Gunma.web, agatsuma.survive
- 3. Middlemanと私 • Middleman Guides日本語版 • gems (RubyGems or On Github) • middleman-slim • middleman-pure • middleman-assets • [wip] middleman-bowest
- 4. 利用シーン • CSS, JSライブラリのテスト • モック, プロトタイプの開発時 • プロジェクト用ドキュメント • 静的サイト
- 5. 話すこと • 日本語版公開までの道のり • MiddlemanGuides を理解する • 知られざる機能を知る
- 6.
- 7.
- 9.
- 10. • 予算が少ない • クライアントにITに強い人が少ない •「安くできるんでしょ？」
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23. 毎回コマンド $ slimrb -ptarget.slim > result.html $ sass --watch sass:css
- 24. Slim + Sassで 最後にHTMLが刈り取 れるものが欲しい
- 26.
- 27.
- 28.
- 29.
- 30.
- 31. Middlemanを3行で • テンプレートコンパイラ • PreviewServer • Static Site Build • パーツ共有機能 (Layout, Partial) • その他便利機能 (Asset Pipeline, Local Data, Frontmatter, Helper, Directory Index etc)
- 32. Middleman Guides の特徴 •すべての項目を説明してはいない • 1/2 読めば問題なく使える • 日本語版は 2週間毎にUpdate • 記述がないことをするのは大変
- 33.
- 34.
- 35. Middleman を始める前に • テンプレートエンジン •Haml, Jade, Slim, Markdown etc • Sass, Less etc • Syntax 対応のエディタ採用 • YAML • Bundler, Git (できれば)
- 36.
- 37.
- 38.
- 39.
- 40.
- 41. エディタ • Vim • emacs •Sublime Text2 • その他 Syntax 対応が充実したもの
- 42. YAML Rubyist Magazine プログラマーのための YAML入門 (初級編) http://magazine.rubyist.net/?0009-YAML
- 43. Bundler • Ruby のgem (ライブラリ) 管理ツール • プロジェクトごとに必要なライブラ リを管理できる • $ bundle install --path vendor/bundle • $ bundle exec middleman server
- 44. Git (& Github) •バージョン管理ツール • そろそろ使えて当たり前感 • 複数人のプロジェクトでは必須
- 45.
- 46.
- 47. middleman-* • 機能別に分割されている • middleman(依存関係定義) • middleman-core (基本機能) • middleman-livereload (livereload) • middleman-sprockets (Asset Pipeline)
- 48. 基本設定 • middleman-core の中を探す •$ grep -r define_setting * ※ application.rb 内のdefine_setting 一覧
- 49. assets 用 gemを作る •middleman-sprockets に Asset Pipeline に関する処理がある • gem の中の特定のディレクトリを読 み込む • https://github.com/yterajima/middlemanassets
- 50. 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/
- 51.
- 52.
- 53. 気をつけること • 実現している/したい機能は Middleman自体の機能なのか • ex. middleman-syntax • ex. middleman-autoprefixer
- 54. Middleman は • モダンなweb 開発の • あらゆるショートカットや • ツールを採用した • 静的サイトジェネレータです。 • ※機能追加可能
- 55.
- 56. おさらい • 日本語版公開までの道のり • MiddlemanGuides を理解する • 知られざる機能を知る
- 57.
- 58.
- 59. $ gem installmiddleman $ middleman init PROJECT