Skip to content

Instantly share code, notes, and snippets.

@udzura
Last active December 28, 2015 15:39
Show Gist options
  • Save udzura/7523623 to your computer and use it in GitHub Desktop.
Save udzura/7523623 to your computer and use it in GitHub Desktop.
ミドルマン入門したがき

ミドルマン入門

自分

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

技術基盤チーム

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

技術基盤チーム

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

技術基盤チーム

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

本題

ミドルマンって何

何がすごい

  • 対応言語がめちゃくちゃ多い&ほとんどすぐ使える
    • 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とか試すにも便利
  • ガチアプリはぼくはやったことないけど多分出来る
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment