Webアプリのモックアップ作業土台を作るその1

Slim, Sass/SCSS, CoffeeScript が使えて Livereload してくれるフロント周辺の作業環境がほしいと思いながらも自分にしっくりくる構成ができなかったんですが、最近 rack-livereload を見つけてピースが埋まった感じがしたのでまとめます。

https://github.com/cu39/workbench

記事を書くにあたり naoya さんのひな型に大いに影響されてますが、ここでは npm でインストールするのは bower だけにして基本的には Sinatra と Guard に任せています。

Sinatra, Slim, Sass, CoffeeScript

土台の土台としてシンプルな Sinatra アプリから。Gemfile を書いて bundle。

Gemfile

source 'https://rubygems.org'

gem 'sinatra'
gem 'sinatra-contrib'
gem 'sass'
gem 'slim'
gem 'coffee-script'

group :develoopment do
  gem 'shotgun'
  gem 'thin'
end

workbench.rb

require 'sinatra/base'
require 'sinatra/reloader'
require 'slim'
require 'sass'
require 'coffee-script'

class Workbench < Sinatra::Base
  configure :development do
    register Sinatra::Reloader
  end

  get '/' do
    @title = 'Index'
    slim :index
  end

  get '/css/application.css' do
    sass :application
  end

  get '/js/application.js' do
    coffee :application
  end
end

views/layout.slim

doctype html
html
  head
    title= @title + ' | Site Workbench'
    link href="/css/application.css" rel="stylesheet"
  body
    == yield
    script src="/js/application.js"

views/index.slim

h1 Workbench
p Workbench for my site.

views/application.sass

body
  background: hsl(0, 0%, 90%)

views/application.coffee

() ->
  'Hoge'

config.ru

require 'bundler'
Bundler.setup
require File.expand_path(File.join('..','workbench'), __FILE__)
run Workbench

これで bundle exec shotgun --server=thin --port=3000 するとサーバーが立って、とりあえずプレビューできます。コマンド名が気持ちいい shotgun。

Guard, guard-livereload, rack-livereload

Livereload 環境にするため guard, guard-livereload, rack-livereload を導入。rack-livereload があればブラウザ拡張は必要ありません。
Gemfile

# ...
group :develoopment do
  gem 'shotgun'
  gem 'thin'
  gem 'guard'
  gem 'guard-livereload'
  gem 'rack-livereload'
end

bundle, bundle exec guard init したら Guardfile を編集。

guard 'livereload' do
  watch(%r{views/.+\.(erb|haml|slim|s[ac]ss|coffee)$})
end

ターミナルをもう1枚開いて、片方でさっきの shotgun サーバー、もう片方で bundle exec guard を実行すると Liverelaod になっているはずです。

Foreman

でもターミナル2枚使ってそれぞれコマンドとか面倒なので foreman に任せよう。Gemfile に foreman を追加して bundle したら設定ファイルを作ります。

Procfile

guard: bundle exec guard
application: bundle exec shotgun --server=thin --port=3000

bundle exec foreman start で一発起動。

bower + require.js で JavaScript ライブラリ管理

では bower で JavaScript ライブラリを導入していきます。bower init または手書きで bower.json を作成し以下の内容に。

bower.json

{
  "name": "workbench",
  "version": "0.0.0",
  "dependencies": {
    "requirejs": "latest",
    "jquery": "latest"
  }
}

bower install ./public/js/vendor とすると指定ライブラリが public/js/vendor インストールされ、 .bowerrc も作成されます。これを先に書いてから bower install でもOK。

.bowerrc

{
  "directory": "public/js/vendor"
}

テンプレートを編集して使えるようにする。

views/layout.slim の script タグ変更。

  body
    == yield
    script src="/js/vendor/requirejs/require.js" data-main="/js/application"

views/application.coffee

require.config
  paths:
    jquery: 'vendor/jquery/jquery'

require ['jquery']

Compass を導入

ビュー関連のフレームワークも好みが分かれるところとは思いますが、ここでは Compass と Twitter Bootstrap（bootstrap-sass gem）を導入します。まずは Compass から。

Gemfile に追加

gem 'compass'

workbench.rb で Compass に path を教えたり Sinatra の sass エンジンを変更したり。

# ...
require 'compass'
# ...
class Workbench < Sinatra::Base
  configure do
    Compass.configuration do |config|
      config.project_path = File.dirname(__FILE__)
      config.sass_dir = 'views'
    end

    set :haml, { format: :html5 }
    set :sass, Compass.sass_engine_options
    set :scss, Compass.sass_engine_options
  end
  # ...

views/application.sass

@import compass

body
  background: hsl(0, 0%, 90%)
  @include column-grid-background

で Compass の Mixin が使えるようになっている。

Twitter-bootstrap (bootstrap-sass) を導入

bootstrap-sass を利用して Twitter Bootstrap を導入します。「Compass はいらない、Bootstrap だけあればいい」という場合でも bootstrap-sass は別フレームワークを必要とするので、やはり compass は必要*1。

Gemfile に追加して bundle

gem 'bootstrap-sass'

workbench.rb に追加 *2

require 'bootstrap-sass'

これだけで *.sass ファイル内でインポートできます。

views/application.coffee

@import bootstrap

views/layout.slim を2カラムに。

body
  .wrap.container-fluid
    .main.row
      .content.span9
        == yield
      .side.span3
        == slim :_side

views/_side.slim

ul
  li foo
  li bar

参考

つづき（予定）

さらに assets (js, css) のサービスを Sprockets に任せる変更を加えていきます。

*1:Rails で使う場合には Compass が必要なくなる。

*2:面倒な人は Bundler.require で。