話題の記事

SinatraとHamlとScssとCoffeeScriptでモダンなWeb制作環境を構築する #1

特集

山形 孝造

2013.01.28

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは山形です。
htmlやcss等を書いて静的なWebサイトを制作している方なら誰でも、より効率的な環境求めていると思います。
DreamweaverやAptana等のIDEを使うのも一つの手だと思いますが、より柔軟な環境構築としてご紹介したいと思います。

Rubyをインストールする

Windowsの場合

Engineyard社が提供しているRailsinstallerでサクッと入れてしまいましょう。

Railsinstallerはこちらからダウンロード出来ます

ダウンロードできたらexeを起動しウィザードに従ってインストールを実行してください。

Mac OS Xの場合

rbenvでのインストールを紹介します。

先にXcode Command line Toolsのインストールを済ませておいてください。

スクリーンショット_2013_01_22_17_53-2
Xcodeの環境設定からインストールできます。

# rbenvをgithubからcloneする
$ git clone git://github.com/sstephenson/rbenv.git ~/.rbenv

# rbenvのパスを通す
$ echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bash_profile

# 初期化コマンドを叩くようにしておく
$ echo 'eval "$(rbenv init -)"' >> ~/.bash_profile

# シェルを再起動
$ exec $SHELL -l

# ruby-buildをインストール
$ git clone git://github.com/sstephenson/ruby-build.git ~/.rbenv/plugins/ruby-build

# ruby最新版(執筆時では1.9.3-p374)をインストール
$ rbenv install 1.9.3-p374

インストールには少し時間がかかります。

Bundlerで必要なgemを管理する

rubyのインストールが出来たら必要なgemをインストールします。
まだbundlerがインストールされていなければ以下のコマンドを実行してください。

$ gem install bundler

# rbenvを使っている場合は以下も実行してください
$ rbenv rehash

bundlerが正しくインストールされていれば以下のようにバージョンが出力されます

$ bundle -v
Bundler version 1.2.2

適当な作業ディレクトリを作ってGemfileを作成してみます。

# 作業ディレクトリを作成して移動
$ mkdir sample
$ cd sample

# Gemfileのひな形を作成
$ bundle init
Writing new Gemfile to /path/to/workspace/sample/Gemfile

作成されたGemfileをエディタで開き以下のように編集してください。

# coding: utf-8
source "http://rubygems.org"

# sinatra本体と便利なプラグイン
gem "sinatra", require: "sinatra/base"
gem "sinatra-contrib", require: "sinatra/contrib/all"

# 開発用にサーバスクリプトをオートリロードするライブラリ
# gem "shotgun" # Sinatra::Reloaderを使えば同様のことができるので必要ありませんでした

# 三種の神器
gem "haml"
gem "sass"
gem "coffee-script"

編集できたらGemfileを保存して以下のコマンドでインストールします。

$ bundle install --path vendor/bundle

こうするとプロジェクトディレクトリの vendor/bundle 以下にgemがインストールされます。

Sinatraでアプリケーションを作る

とりあえずHello Worldを出力してみてきちんと動作するか確認してみましょう。
app.rb と config.ru というファイルを作成してそれぞれ以下のように記述してください。

app.rb

class App < Sinatra::Base
  register Sinatra::Reloader

  get '/' do
    'Hello World'
  end
end
[/ruby]

<p><strong>config.ru</strong></p>


<p>次にapp.rbと同じ階層に <strong>views</strong> というディレクトリを作成して <strong>index.haml</strong> を設置してください。</p>

<p>views/index.haml</p>

%h1 index.haml

このままではHTMLの開始タグなどが存在しませんのでviews以下に layout.haml を設置しください。

views/layout.haml

!!! 5
%html
  %head
    %meta{ charset: 'utf-8' }
    %title Sample App
  %body
    = yield

こうするとlayoutファイルの = yield の部分に index.haml の内容が入った状態でブラウザに返されるようになります。

部分的なhtmlに分割してみる

HTMLをパーツで分解しておきたい場合もあるかと思います。その場合は出力したい場所に以下のように記述して、パーツファイルを別に作成してください。

views/index.haml

%h1 index.haml
= haml :"shared/hoge"

views/shared/hoge.haml

%div this is shared haml.

以下の様なHTMLが返ってくるはずです。

<!DOCTYPE html>
<html>
  <head>
    <title>Sample App</title>
  </head>
  <body>
    <h1>hello</h1>
    <div>this is shared haml.</div>
  </body>
</html>

scssを書いてみる

基本的にはhamlと同じです。app.rbに以下のようにするとリクエストに合わせてscssをcssにコンパイルできます。

  get '/stylesheets/main.css' do
    scss :'scss/main'
  end

views/scss/main.scss

$bg_color: #ddd;

body {
  background: $bg_color;
}

部分的なcssに分割してみる

scssの @import ディレクティブを使えば実現出来ます。
呼び出し側のscssファイルからの相対パスで記述してください。

views/scss/main.scss

@import 'common/variables.scss';

body {
  background: $bg_color;
}

views/scss/common/variables.scss

$bg_color: #cccccc;

CoffeeScriptを書いてみる

これもhamlやscssと同じように記述できます。

views/app.rb

  get '/javascripts/main.js' do
    coffee :'coffee/main'
  end

views/coffee/main.coffee

class Hoge
  constructor: (@option) ->

まとめ

基本的なsinatraと各メタ言語の使い方は以上です。ただしこのままだと新しいファイルを作成するたびにapp.rbに記述を追加しなければいけないので次回以降で省略する方法を紹介したいと思います。

AWS