View
1.736
Download
3
Category
Preview:
DESCRIPTION
Tokyo Middleman Meetup #1 発表資料
Citation preview
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)
作業量を減らす
•CSSをやめる
→ Sass
CSS
Sass
+Indent Style Markup
さて, ここで困った
毎回コマンド
$ slimrb -p target.slim > result.html
$ sass --watch sass:css
Slim + Sass で 最後にHTMLが刈り取れるものが欲しい
公開からの Milestone
日本語版ガイドを作る
群馬でも使い始める
みんな使い始める
都会の人たちが使い始めるイマココ!!
私の仕事が楽になる
Middleman Guides を理解する
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 (できれば)
テンプレートエンジン
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
Recommended