Sinatra + Haml + Scss で Hello, World を表示したりするメモ

html5 のテスト基盤になる環境を Sinatra で作ってみるメモ。

環境

• OS: Ubuntu 12.04 64bit
• rvm: rvm 1.14.3 (stable)
• Ruby: ruby 1.9.3p194 (2012-04-20 revision 35410) [x86_64-linux]
• Sinatra: 1.3.3

環境作成

rvmを利用して環境を作る

.rvmrc

rvm use 1.9.3
rvm 1.9.3@sinatra

bundler のセットアップ

Terminal

$ bundle init
iting new Gemfile to /home/hoge/sinatra/Gemfile

Gemfile を編集

Gemfile

# A sample Gemfile
source "https://rubygems.org"

gem "sinatra"

Sinatra をインストール

Terminal

$ bundle install
Fetching gem metadata from https://rubygems.org/.....
Installing rack (1.4.1)
Installing rack-protection (1.2.0)
Installing tilt (1.3.3)
Installing sinatra (1.3.3)
Using bundler (1.1.4)
Your bundle is complete! Use `bundle show [gemname]` to see where a bundled gem is installed.

ひとまず “Hello, World” をやってみる

app.rb を作成。

app.rb

#!/usr/bin/env ruby
# -*- encoding: utf-8 -*-
# -*- coding: utf-8 -*-

require 'rubygems' unless defined? ::Gem
require 'sinatra'

get '/' do
  'Hello, World'
end

Rackの設定をする config.ru を作成。

config.ru

require 'rubygems' unless defined? ::Gem
require File.dirname( __FILE__ ) + '/app'

run Sinatra::Application

サーバ起動。

Terminal

$ bundle exec rackup config.ru

http://localhost:9292/ へブラウザからアクセスで表示確認。

haml と SCSS と HTML5 を利用してみる

最終的なディレクトリ構造。

tree

sinatra/
├── Gemfile
├── Gemfile.lock
├── app.rb
├── config.ru
└── views
    ├── index.haml
    ├── layout.haml
    └── style.scss

Gemfile に追記。

追記後 bundle install を実行して haml をインストールする。

Gemfile

gem "haml"

app.rb を修正。

app.rb

#!/usr/bin/env ruby
# -*- encoding: utf-8 -*-
# -*- coding: utf-8 -*-

require 'rubygems' unless defined? ::Gem
require 'sinatra'

# HTML5を利用
set :haml, :format => :html5

# root_path
get '/' do
  @items = {"h1" => "見出し1", "h2" => "見出し2", "h3" => "見出し3"}
  haml :index
end

# スタイルシート
get '/style.css' do
  scss :style
end

レイアウトを作成。

views/layout.haml

!!!
%html
  %head
    %link{"rel" => "stylesheet", "href" => "style.css", "type" => "text/css"}
    %title Hello, World
  %body
    != yield

view を作成。

views/index.haml

- @items.each do |key, val|
  %section
    -# 見出し毎に出力
    <#{key}>#{val}</#{key}>
    %p{:class => key}
      = val

スタイルシートを作成。

views/stylesheet.scss

body {
  background-color: black;
}

section {
  h1 {
    color: red;
  }

  h2 {
    color: blue;
  }

  h3 {
    color: yellow;
  }

  p.h1 {
    color: #F0E68C;
  }

  .h2 {
    margin: 0 0 0 10px;
    color: #FA8072;
  }

  p.h3 {
    margin: 0 0 0 50px;
    color: #BC8F8F;
  }
}

サーバ起動。

Terminal

$ bundle exec rackup config.ru

http://localhost:9292/ へブラウザからアクセスで表示確認。

以上です。

参考

• Sinatra:http://www.sinatrarb.com/
• haml:http://haml.info/
• Sass:http://sass-lang.com/

Sinatra: Up and Running: Ruby for the Web, Simply[Kindle版]

posted with ヨメレバ

Alan Harris,Konstantin Haase O'Reilly Media 2011-11-21

Kindle

Amazon[書籍版]