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

ruby
200件のシェア(すこし話題の記事)

この記事は公開されてから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

config.ru

require 'bundler'
Bundler.require

require './app'

run App

app.rb では Sinatra::Base クラスを継承していて、GETリクエストのパスが / の時に Hello World を返すようにしています。

追記 2013/01/31:
sinatra-contribのプラグインSinatra::Reloaderを登録するようにしました。サーバスクリプト変更の反映はshotgunでオートリロードしていましたが、Sinatra::Reloaderで同様のことが出来るようです。

config.ru はbundlerを使い Gemfile に記述されているgemを全て読み込んだ後に、app.rbを読み込んで最後に run App することでサーバを起動できるようにしています。

プロジェクトのディレクトリに移動して以下のコマンドを叩くとサーバを起動出来ます。

$ cd path/to/workspace/sample

# Sinatra::Reloaderでサーバスクリプトのオートリロードが出来ますのでこのコマンドは不要です。
$ bundle exec shotgun

# 代わりにこちらのコマンドでサーバを起動してください。
$ bundle exec rackup

== Shotgun/WEBrick on http://127.0.0.1:9393/
[2013-01-28 19:07:23] INFO  WEBrick 1.3.1
[2013-01-28 19:07:23] INFO  ruby 1.9.3 (2012-11-10) [x86_64-darwin12.2.0]
[2013-01-28 19:07:23] INFO  WEBrick::HTTPServer#start: pid=10608 port=9393

基本的にshotgunで起動したサーバはつけっぱなしでよいのでこのコンソールはこのまま閉じないようにしておいてください。
ブラウザで http://localhost:9393/ にアクセスして Hello World が返ってきたら成功です。

bundle exec rackupでサーバを起動するとデフォルトでは http://localhost:9292/ でサーバが起動します。
ちなみにサーバを停止したい場合は Ctrl + c と打てば停止できます。

hamlを書いてみる

それではhamlでHTMLを書いてみましょう。app.rbを以下のように編集します。

app.rb

class App < Sinatra::Base
  get '/' do
    haml :index
  end
end

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

views/index.haml

%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 Cloud Roadshow 2017 福岡

  • http://www.facebook.com/NHKumkMRT 趙自然

    Rubyの初心者です。
    Windows 8の環境で試してみました。
     ・・・

    $ cd path/to/workspace/sample
    $ bundle exec shotgun
    ここまでできましたが、
    bundle exec shotgun

    を実行すると、こんなエラーが出てきました。
    C:/TestGround/RubyTest/sample/vendor/bundle/ruby/1.9.1/gems/shotgun-0.9/bin/shotgun:99:in “’: No such file or directory – uname (Errno::ENOENT)
    from C:/TestGround/RubyTest/sample/vendor/bundle/ruby/1.9.1/gems/shotgun-0.9/bin/shotgun:99:in `block in ‘
    from C:/TestGround/RubyTest/sample/vendor/bundle/ruby/1.9.1/gems/shotgun-0.9/bin/shotgun:98:in `each’
    from C:/TestGround/RubyTest/sample/vendor/bundle/ruby/1.9.1/gems/shotgun-0.9/bin/shotgun:98:in `find’
    from C:/TestGround/RubyTest/sample/vendor/bundle/ruby/1.9.1/gems/shotgun-0.9/bin/shotgun:98:in `’
    from C:/TestGround/RubyTest/sample/vendor/bundle/ruby/1.9.1/bin/shotgun:23:in `load’
    from C:/TestGround/RubyTest/sample/vendor/bundle/ruby/1.9.1/bin/shotgun:23:in `’

    アドバイスお願いします!!

    • http://twitter.com/kozo002 やまがた こうぞう

      > 趙自然 さん

      shotgunと同様の機能が sinatra-contrib に入っていることがわかりました。

      Appクラスの中で register Sinatra::Reloader を追加して、
      bundle exec shotgun の代わりに bundle exec rackup でサーバを起動してみてください。

      Gemfile の gem ‘shotgun’ は不要なので消しても大丈夫です。

    • http://twitter.com/kozo002 やまがた こうぞう

      趙自然さん

      shotgunと同様の機能が sinatra-contrib に入っていることがわかりました。

      Appクラスの中に register Sinatra::Reloader を追加して、
      bundle exec shotgun の代わりに bundle exec rackup でサーバを起動してみてください。

      Gemfileの gem ‘shotgun’ は不要なので消しても大丈夫です。

      windows7での検証しか出来ていませんが shotgun を使わない方法ですので試してみてください。

  • http://www.facebook.com/NHKumkMRT 趙自然

    やまがたさん
    おっしゃったとおり、Appクラスに
    require ‘sinatra/reloader’ と register Sinatra::Reloader追加したあと、
    bundle exec rackupで無事に起動できました!
    ありがとうございました!

  • http://www.facebook.com/NHKumkMRT 趙自然

    やまがたさん

    おっしゃったとおり、Appクラスに

    require ‘sinatra/reloader’ と register Sinatra::Reloader追加したあと、

    bundle exec rackupで無事に起動できました!

    ありがとうございました!