middleman guides & how to learn

Middleman Guides & How to LearnTokyo Middleman Meetup #1

2013/11/22 @株式会社ジェニュインブルー

自己紹介• てらじまゆうや / yterajima

• フリーのプログラマ(PHP, Ruby, JavaScript, C# etc)

• 群馬県東吾妻町 在住 (元 三鷹市民)

• guRuby, Gunma.web, agatsuma.survive

Middlemanと私• Middleman Guides 日本語版

• gems (RubyGems or On Github)

• middleman-slim

• middleman-pure

• middleman-assets

• [wip] middleman-bowest

利用シーン

• CSS, JS ライブラリのテスト

• モック, プロトタイプの開発時

• プロジェクト用ドキュメント • 静的サイト

話すこと

• 日本語版公開までの道のり • Middleman Guides を理解する

• 知られざる機能を知る

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

2011年秋 群馬にUターン

地方の案件といえば

• 予算が少ない

• クライアントにITに強い人が少ない

• 「安くできるんでしょ？」

安くできるんでしょ？

作業量を減らす

•HTMLをやめる

→ Slim

HTML

Slim

Slim (with iterator)

Slim (with iterator 2)

日本語README.mdhttps://github.com/yterajima/slim

作業量を減らす

•CSSをやめる

→ Sass

CSS

Sass

+Indent Style Markup

さて, ここで困った

毎回コマンド

$ slimrb -p target.slim > result.html

$ sass --watch sass:css

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

公開からの Milestone

日本語版ガイドを作る

群馬でも使い始める

みんな使い始める

都会の人たちが使い始めるｲﾏｺｺ!!

私の仕事が楽になる

Middleman Guides を理解する

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

Middlemanを3行で• テンプレートコンパイラ

• Preview Server • Static Site Build

• パーツ共有機能 (Layout, Partial)

• その他便利機能 (Asset Pipeline, Local Data, Frontmatter, Helper, Directory Index etc)

Middleman Guides の特徴

• すべての項目を説明してはいない • 1/2 読めば問題なく使える

• 日本語版は 2週間毎にUpdate

• 記述がないことをするのは大変

必読

混乱しそうなもの

Middleman を始める前に• テンプレートエンジン

• Haml, Jade, Slim, Markdown etc

• Sass, Less etc

• Syntax 対応のエディタ採用

• YAML

• Bundler, Git (できれば)

テンプレートエンジン

Haml http://fukuyama.co/haml2

Jade

Slim

Sass (+ Compass)

エディタ

• Vim

• emacs

• Sublime Text2

• その他 Syntax 対応が充実したもの

YAML

Rubyist Magazine プログラマーのための YAML 入門 (初級編)

http://magazine.rubyist.net/?0009-YAML

Bundler

• Ruby の gem (ライブラリ) 管理ツール

• プロジェクトごとに必要なライブラリを管理できる

• $ bundle install --path vendor/bundle

• $ bundle exec middleman server

Git (& Github)

• バージョン管理ツール • そろそろ使えて当たり前感 • 複数人のプロジェクトでは必須

+ Middleman Guides

知られざる機能を知る

middleman-*

• 機能別に分割されている • middleman (依存関係定義)

• middleman-core (基本機能)

• middleman-livereload (livereload)

• middleman-sprockets (Asset Pipeline)

基本設定• middleman-core の中を探す

• $ grep -r define_setting *

※ application.rb 内のdefine_setting 一覧

assets 用 gemを作る

• middleman-sprockets に Asset Pipeline に関する処理がある

• gem の中の特定のディレクトリを読み込む

• https://github.com/yterajima/middleman-assets

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/

CHANGELOG.md

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

気をつけること• 実現している/したい機能は

Middleman 自体の機能なのか

• ex. middleman-syntax

• ex. middleman-autoprefixer

Middleman は• モダンな web 開発の

• あらゆるショートカットや • ツールを採用した • 静的サイトジェネレータです。 • ※機能追加可能

おわりに

おさらい

• 日本語版公開までの道のり • Middleman Guides を理解する

• 知られざる機能を知る

帰ったらやること

目を通す

$ gem install middleman $ middleman init PROJECT