rails編は以前書いたのでsinatraでやってみる
用途としてはDBとかいらないスタティックなサイトの構築で、でもhtml、css、jsを生で書くのとか耐えられない。phpはマジ勘弁みたいなときにこうしてますよって感じのことを書きます。
（bundlerの使い方ってゆうかrubyでのweb制作全般って感じですね…）
まず適当な場所にプロジェクトのディレクトリを作ります。
hogeとかもアレなんでポートフォリオにしときます。
$ cd ~/Web $ mkdir portfolio $ cd portfolio
でプロジェクトのルートでGemfileをつくる
$ bundle init Writing new Gemfile to /Users/kozo/Web/portfolio/Gemfile
中身はこんな感じだから...
$ vim Gemfile # A sample Gemfile source "https://rubygems.org" # gem "rails"
以下に書き換えます
source "https://rubygems.org" gem "sinatra" gem "sass" gem "haml" gem "coffee-script" gem "shotgun"
自分はnode.jsを入れてるんでアレですが、環境によってはjavascript実行環境が無いと怒られるかもしれないんで、そんときは以下のgemを足してみてください。
gem 'therubyracer'
でgemをインストールします。
bundle install --path vendor/bundle --without production Fetching gem metadata from https://rubygems.org/..... Installing coffee-script-source (1.3.1) Installing multi_json (1.3.2) Installing execjs (1.3.0) Installing coffee-script (2.2.0) Installing haml (3.1.4) Installing rack (1.4.1) Installing rack-protection (1.2.0) Installing sass (3.1.16) Installing tilt (1.3.3) Installing sinatra (1.3.2) ....
よしこれでgemが揃いました。
さらに作業環境を整えます。
sinatraを動かすアプリが必要なので app.rb と config.ru
sassやhamlを入れておくviewsディレクトリ、
ドキュメントルートになるpublicディレクトリをつくります。
$ touch app.rb $ touch config.ru $ mkdir views $ mkdir public
アプリケーションのコードはこんな感じです
$ vim app.rb
require "sinatra/base"
require "sass"
require "haml"
require "coffee-script"
module Portfolio
class App < Sinatra::Base
get '/' do
'hello'
end
end
end
$ vim config.ru require "./app" run Portfolio::App
でアプリがちゃんと動くかどうか確認してみる
shotgunを入れておいたので
$ bundle exec shotgun == Shotgun/WEBrick on http://127.0.0.1:9393/ [2012-04-26 23:49:20] INFO WEBrick 1.3.1 [2012-04-26 23:49:20] INFO ruby 1.9.2 (2011-07-09) [x86_64-darwin11.2.0] [2012-04-26 23:49:20] INFO WEBrick::HTTPServer#start: pid=457 port=9393
localhost:9393にアクセスして hello が表示されればOKです
そしたらこっからガシガシコード書いていくんですが、shotgun使ってるのでapp.rbを編集してもサーバの再起動が必要ありません。
home、about、galleryの３ページと仮定して以下のように書き換えました
$ vim app.rb
module Portfolio
class App < Sinatra::Base
before do
@site_name = 'My Portfolio'
@nav = ['home', 'about', 'gallery']
end
get '/' do
haml :index
end
get '/about/?' do
haml :about
end
get '/gallery' do
haml :gallery
end
end
end
before do ... end の中で共通の処理を記述できます。
site_nameとnavを用意しておきました。変数に@をつけておくとインスタンス変数と言ってviewに渡せるようになります。
htmlはhamlで書くので以下のようにします。
$ vim views/index.haml
%h1= @site_name
%nav
%ul
- @nav.each do |n|
%li
%a{href:"/#{n}"}= n
%p welcome to my portfolio site
でもこれだとheadとかないので layout を作成します
$ vim views/layout.haml
!!! 5
%html
%head
%meta{charset:'utf-8'}
%title= @site_name
%body
= yield
yieldの部分に各ページの内容が入ります。
次はsassというかscssを使ってみます。
まずはapp.rbを編集して、
$ vim app.rb get '/stylesheets/base.css' do scss :base end
galleryの下に追記しておきました。
ここまで出来たら後はviews内にscssファイルを作って作業していくだけです。
簡単ですね！
ちなみにrubyのシンボル（:で始まる文字列）は " で囲めば / とかも使えるので
views内でファイルが平置きになってるのが嫌な人は views/haml や views/scss を作っておいて
app.rbで
haml :"haml/index"
と指定すればちゃんと呼び出せますよ！
sinatraとかhamlとかscssとかcoffeescriptの詳しい使い方はドキュメントを読もー
