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/ へブラウザからアクセスで表示確認。

以上です。

参考

mysql2をインストールしようとしてエラーが出た対応メモ

Ubuntu + Mysql5 + Rails3.2 に mysql2 をインストールしようとしてエラーが出た時の対処メモ。

環境

  • OS: Ubuntu 12.04 64bit
  • Ruby: ruby 1.8.7 (2012-02-08 patchlevel 358) [x86_64-linux]
  • rvm: rvm 1.14.3 (stable)
  • Ruby on Rails: 3.2.6
  • Gem
    • mysql2 0.3.11

mysql2 をインストールしようとしてエラー

mysql2 をインストールするため Gemfile に追記します。

Gemfile
1
gem 'mysql2'

いつも通り bundle install を実行するとエラーが発生して mysql2 がインストール出来ません。

Terminal
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
Installing mysql2 (0.3.11) with native extensions
Gem::Installer::ExtensionBuildError: ERROR: Failed to build gem native extension.

/home/nanigashi/.rvm/rubies/ruby-1.8.7-p358/bin/ruby extconf.rb
checking for rb_thread_blocking_region()... no
checking for rb_wait_for_single_fd()... no
checking for mysql_query() in -lmysqlclient... no
checking for main() in -lm... yes
checking for mysql_query() in -lmysqlclient... no
checking for main() in -lz... yes
checking for mysql_query() in -lmysqlclient... no
checking for main() in -lsocket... no
checking for mysql_query() in -lmysqlclient... no
checking for main() in -lnsl... yes
checking for mysql_query() in -lmysqlclient... no
checking for main() in -lmygcc... no
checking for mysql_query() in -lmysqlclient... no
*** extconf.rb failed ***
Could not create Makefile due to some reason, probably lack of
necessary libraries and/or headers. Check the mkmf.log file for more
details. You may need configuration options.

Provided configuration options:
--with-opt-dir
--without-opt-dir
--with-opt-include
--without-opt-include=${opt-dir}/include
--with-opt-lib
--without-opt-lib=${opt-dir}/lib
--with-make-prog
--without-make-prog
--srcdir=.
--curdir
--ruby=/home/nanigashi/.rvm/rubies/ruby-1.8.7-p358/bin/ruby
--with-mysql-config
--without-mysql-config
--with-mysql-dir
--without-mysql-dir
--with-mysql-include
--without-mysql-include=${mysql-dir}/include
--with-mysql-lib
--without-mysql-lib=${mysql-dir}/lib
--with-mysqlclientlib
--without-mysqlclientlib
--with-mlib
--without-mlib
--with-mysqlclientlib
--without-mysqlclientlib
--with-zlib
--without-zlib
--with-mysqlclientlib
--without-mysqlclientlib
--with-socketlib
--without-socketlib
--with-mysqlclientlib
--without-mysqlclientlib
--with-nsllib
--without-nsllib
--with-mysqlclientlib
--without-mysqlclientlib
--with-mygcclib
--without-mygcclib
--with-mysqlclientlib
--without-mysqlclientlib


Gem files will remain installed in /home/nanigashi/.rvm/gems/ruby-1.8.7-p358@hoge_rails3/gems/mysql2-0.3.11 for inspection.
Results logged to /home/nanigashi/.rvm/gems/ruby-1.8.7-p358@hoge_rails3/gems/mysql2-0.3.11/ext/mysql2/gem_make.out
An error occured while installing mysql2 (0.3.11), and Bundler cannot continue.
Make sure that `gem install mysql2 -v '0.3.11'` succeeds before bundling.

必要なライブラリをインストール

調べたらライブラリが足りないとのことなのでインストールします。

Terminal
1
$ sudo aptitude install libmysql-ruby libmysqlclient-dev

再度 bundle install を実行すると無事入りました。

以上です。

terminator+tmuxでsshした先のvimを起動すると256色エラーが出る対応

Terminator + tmux を利用して ssh をした先で、vim を起動すると256色で表示されない対応メモ。
ちなみに、標準の端末では問題なく表示出来ました。

環境

  • OS: Ubuntu 12.04 64bit
  • Terminator 0.96
  • tmux 1.6-1

エラー内容

下記のエラーが出て256色にならない。

Terminal
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$ ssh 111.222.333.444
$ vim

E558: Trerminal entry not found in terminfo
'screen-256color' not known. Available builtin terminals are:
builtin_riscos
builtin_amiga
builtin_beos-ansi
builtin_pcansi
builtin_win32
builtin_vt320
builtin_vt52
builtin_xterm
builtin_iris-ansi
builtin_debug
builtin_dumb
defaulting to 'ansi'

対応内容

いろいろ足らないみたいだが、screen上だと再現しないみたいなので、手っ取り早くsshの時はscreen接続で回避することにする。
.bashrcもしくは.zshrcなどに下記を追記。

Terminal
1
alias ssh='TERM=screen ssh'

読み込んだ後、再度sshして接続すれば大丈夫です。

以上です。

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