udzura/middleman.md

## middleman.md

      
    Raw
  

              middleman.md
            
          
    ミドルマン入門


自分


近藤うちお
paperboy&co. 技術基盤チーム
ルビーとかを少し書けます
WEB†DBとかパーフェクトルビーとかを書きました

技術基盤チーム


隣の席があんちぽさんです

技術基盤チーム


IRCボット作ったり
Rubyプロジェクトのレビューをしたり
AndroidのCIを仕込んだり
社内勉強会したり
アジャイル行為をしたり
JSまだ書いてないぞ！書こう

技術基盤チーム


各チームがいい感じになるようになんでもやるチーム
※ 個人の感想です

本題

ミドルマンって何


静的サイトジェネレータ
ルビー
http://middlemanapp.com/

何がすごい


対応言語がめちゃくちゃ多い＆ほとんどすぐ使える

SASS/SCSS
Compass
CoffeeScript


便利拡張もたくさん

似たもの比較


Hoodie

バックエンドの自動生成的なもの
データの永続化などを意識しないでやってくれる


Middleman

完全に静的
AltJS / CSSプリプロセッサ使い放題的なアプリ


Jekyll

完全に静的
サイトジェネレータの走りなのでプラグインは多い
AltJSとかはちょっとめんどくさい


やってみよう

# rbenv を入れ、Rubyを入れる
$ gem install middleman
$ middleman init sample-klab
できた


なんかファイルできる


開発サーバ立ち上げ

$ middleman server
== The Middleman is loading
== The Middleman is standing watch at http://0.0.0.0:4567
== Inspect your site configuration at http://0.0.0.0:4567/__middleman/
ビルド

$ middleman build
      create  build/images/background.png
      create  build/images/middleman.png
      create  build/javascripts/all.js
      create  build/stylesheets/normalize.css
      create  build/stylesheets/all.css
      create  build/index.html

これでただの静的ファイルになる

HTML5 ボイラープレートとか

$ middleman init sample-klab2 --template=html5

なんかいっぱいプロジェクトテンプレートがある
自作も比較的簡単っぽい

CoffeeScript


application.js

//= require sample

sample.js.coffee

alert "Whoa!"
HTML側は


application.js だけ

<script src="js/application.js"></script>
すると...


sample.js.coffeeの中身も走る


突然のジャバスクリプト #PerlJP

＿人人人人＿

＞　Rails　＜

￣Y^Y^Y￣

Asset Pipelineと同じ仕組み


レールズ慣れてるとすごい楽らしい

便利なやつ


プラグインを紹介してお茶を濁すの巻

middleman-livereload

gem "middleman-livereload", "~> 3.1.0"
activate :livereload

Chromeで表示
これでライブにリロード

middleman-deploy


middleman build && middleman deploy でデプロイできる
選べる手段
rsync
git checkout
FTP(ロリポでも使えて便利!!!!!!!!!!!!!)

などなど

ところで


フロントエンドと言えばボワー


MiddlemanとBowerを連携させる

専用テンプレート

$ # node, npm, bower 入れる
$ mkdir ~/.middleman
$ git clone \
      https://github.com/headcanon/middleman-bower-template.git \
      ~/.middleman/html5bower
$ middleman init sample-klab3 --template=html5bower
$ cd sample-klab3
$ bower install
$ bundle install
$ middleman s

livereload, deploy いきなり入ってて便利

Knockout.js でも試すか

{
  "name": "middleman",
  "version": "0.0.0",
  "dependencies": {
    "jquery": "~2.0",
    "normalize-scss": "~2.1",
    "modernizr": "~2.6.2",
    "knockout":
      "https://github.com/bowerjs/knockout.git"
  }
}
bower install

assets/js/app.coffee

#= require jquery/jquery
#= require knockout/knockout

${ROOT}/components にAsset Pipelineのパスが通る
bowerがそこにインスコするJSを参照できる

チュートリアル


index.haml

.sample
  %p
    First name:
    %strong{data: {bind: "text: firstName"}} ----
  %p
    Last name:
    %strong{data: {bind: "text: lastName"}} ----

チュートリアル


view_models/person_view_model.coffee

class PersonViewModel
  firstName: "Alice"
  lastName: "Cartelet"

(exports = this).PersonViewModel = PersonViewModel
チュートリアル


app.coffee

#= require jquery/jquery
#= require knockout/knockout
#= require_tree ./view_models

(($) ->
  $(window).on('load', () ->
    ko.applyBindings(new PersonViewModel)
  )
)(jQuery)
便利最高


最高便利


まとめ


Middleman + Bower さっくりJSの勉強するのに便利
たぶんSCSSとか試すにも便利
ガチアプリはぼくはやったことないけど多分出来る