Tokyo Middleman Meetup #1 発表資料

1. Middleman Guides
& How to 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. 話すこと
• 日本語版公開までの道のり
• Middleman Guides を理解する
• 知られざる機能を知る

6. 日本語版公開までの
道のり

7. 2011年秋
群馬にUターン

9. 地方の案件といえば

10. • 予算が少ない
• クライアントにITに強い人が少ない
• 「安くできるんでしょ？」

11. 安くできる
んでしょ？

12. 作業量を減らす
•
HTMLをやめる
→ Slim

13. HTML

14. Slim

15. Slim (with iterator)

16. Slim (with iterator 2)

17. 日本語README.md
https://github.com/yterajima/slim

18. 作業量を減らす
•
CSSをやめる
→ Sass

19. CSS

20. Sass

21. +
Indent Style Markup

22. さて, ここで困った

23. 毎回コマンド
$ slimrb -p target.slim > result.html
$ sass --watch sass:css

24. Slim + Sass で
最後にHTMLが刈り取
れるものが欲しい

26. 公開からの
Milestone

27. 日本語版ガイドを作る
都会の人たちが使い始める
ｲﾏｺｺ!!
みんな使い始める
群馬でも使い始める

28. 私の仕事が楽になる

29. Middleman Guides
を理解する

30. Middleman Guides 日本語版
http://middlemanjp.github.io/

31. Middlemanを3行で
• テンプレートコンパイラ
• Preview Server
• 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. Haml
http://fukuyama.co/haml2

38. Jade

39. Slim

40. Sass (+ Compass)

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. + Middleman Guides

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. CHANGELOG.md

52. feature を読む
• 自然言語で書かれたテスト

53. 気をつけること
• 実現している/したい機能は
Middleman 自体の機能なのか
• ex. middleman-syntax
• ex. middleman-autoprefixer

54. Middleman は
• モダンな web 開発の
• あらゆるショートカットや
• ツールを採用した
• 静的サイトジェネレータです。
• ※機能追加可能

55. おわりに

56. おさらい
• 日本語版公開までの道のり
• Middleman Guides を理解する
• 知られざる機能を知る

57. 帰ったらやること

58. 目を通す

59. $ gem install middleman
$ middleman init PROJECT