SinatraとHamlとScssとCoffeeScriptでモダンなWeb制作環境を構築する #1
こんにちは山形です。
htmlやcss等を書いて静的なWebサイトを制作している方なら誰でも、より効率的な環境求めていると思います。
DreamweaverやAptana等のIDEを使うのも一つの手だと思いますが、より柔軟な環境構築としてご紹介したいと思います。
Rubyをインストールする
Windowsの場合
Engineyard社が提供しているRailsinstallerでサクッと入れてしまいましょう。
Railsinstallerはこちらからダウンロード出来ます
ダウンロードできたらexeを起動しウィザードに従ってインストールを実行してください。
Mac OS Xの場合
rbenvでのインストールを紹介します。
先にXcode Command line Toolsのインストールを済ませておいてください。
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に記述を追加しなければいけないので次回以降で省略する方法を紹介したいと思います。
![[Ruby] Sinatra + PostgreSQL + Unicorn な Web サーバーを Heroku に構築する](https://devio2023-media.developers.io/wp-content/uploads/2014/04/ruby.png)
