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
1
2
rvm use 1.9.3
rvm 1.9.3@sinatra

bundler のセットアップ

Terminal
1
2
$ bundle init
iting new Gemfile to /home/hoge/sinatra/Gemfile

Gemfile を編集

Gemfile
1
2
3
4
# A sample Gemfile
source "https://rubygems.org"

gem "sinatra"

Sinatra をインストール

Terminal
1
2
3
4
5
6
7
8
$ 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
1
2
3
4
5
6
7
8
9
10
#!/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
1
2
3
4
require 'rubygems' unless defined? ::Gem
require File.dirname( __FILE__ ) + '/app'

run Sinatra::Application

サーバ起動。

Terminal
1
$ bundle exec rackup config.ru

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

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

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

tree
1
2
3
4
5
6
7
8
9
sinatra/
├── Gemfile
├── Gemfile.lock
├── app.rb
├── config.ru
└── views
├── index.haml
├── layout.haml
└── style.scss

Gemfile に追記。

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

Gemfile
1
gem "haml"

app.rb を修正。

app.rb
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#!/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
1
2
3
4
5
6
7
!!!
%html
%head
%link{"rel" => "stylesheet", "href" => "style.css", "type" => "text/css"}
%title Hello, World
%body
!= yield

view を作成。

views/index.haml
1
2
3
4
5
6
- @items.each do |key, val|
%section
-# 見出し毎に出力
<#{key}>#{val}</#{key}>
%p{:class => key}
= val

スタイルシートを作成。

views/stylesheet.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
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
1
$ bundle exec rackup config.ru

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

以上です。

参考

© 2018 磁力式駆動 All Rights Reserved.
Theme by hiero