読者です 読者をやめる 読者になる 読者になる

かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

Ruby Sinatraでstylusを使いたい。

Ruby Sinatra stylus

久々にRubyの勉強に戻ってきました。

作りながら学ぶRuby入門 第2版

作りながら学ぶRuby入門 第2版


けっこう古い書籍ですが、1つのアプリを作りながらRubyに慣れようと言った感じでアプリが出来ていくのでモチベーションを保ったまま学んでいくことができます。
最後の方の章で、WEBアプリ化していくのですが、WEBrick + REB で作る方法だったので、個人的にテンプレートエンジンはSlimを使いたいという事とRESTfulっぽくしたいという事でRailsはヘビー過ぎるので、Sinatraという軽量フレームワークを使ってみることにしました。個人的に勉強で本をこなすだけってのが苦手なので自分の興味がある事を混ぜながらする事が多いです。(そしてハマる...

http://www.sinatrarb.com/

Sinatra日本語のRead.meもあって導入、Slimテンプレートでの表示は非常に簡単に行うことができました。
しかし、StylusをCSSとして使う方法で少しハマってしまったのでメモです。

ファイル構成

app --- public
     |- views
     |   |- stylesheets
     |   |   |- main.styl
     |   |- index.slim
     |- main.rb

ポイントはStylusのファイルをviewsディレクトリ下に置くことです。
私は当初スタティックファイルを置くpublicディレクトリ下に置いていて上手く動作できませんでした。

Stylusのインストール

gemでインストールできる

$ gem install stylus

SinatraでStylusを使う

main.rbにStylusを使う記述をしていきます。

require 'sinatra'
require 'sinatra/reloader'
require 'slim'
require 'stylus'
require 'stylus/tilt'

# Routing
# CSS
get '/css/main.css' do
  stylus :'stylesheets/main'
end

# Index
get '/' do
  @title = 'sinatra + slim + stylus'
  slim :index
end

Stylusを使用するにはまず下記を読み込ませます。

require 'stylus'
require 'stylus/tilt'

stylus/tiltはgemでstylusをインストールすれば一緒に入ってきていました。

CSSもViewファイルのようにRoutingで指定します。

get '/css/main.css' do
  stylus :'stylesheets/main'
end

この時、stylus :'stylesheets/main'views/stylesheets/main.stylを見に行っています。
CSSだからViewテンプレートじゃないしな〜とスタティックファイルを置くpublic下に置いていると/css/main.cssが見つからず読み込みエラーになってしまいます。
Stylusに限らずSassとかでも同じように指定すればOKだと思います。

テンプレートからCSSを読み込む。

/css/main.cssにgetでアクセスすれば、views/stylesheets/main.stylが処理されて返されるので、気にせずlinkタグで /css/main.cssを指定すればOKです。

views/index.slim

doctype html
html lang="ja"
  head
    meta charaset="utf-8"
    title= @title
    link rel="stylesheet" href="/css/main.css"
  body
    h1 TEST

 
これでSinatraでのCSSプリプロセッサがそのまま使えるようになりました。
RubyのSlimテンプレートはよく使っていたjade(現pug)っぽくてとても書きやすいです。CSSRubyなんだからStylusじゃなくてSass使えよって感じですが、恐らく指定方法は同じだと思うのでSassに変えようかなと思ったときにでも試してみたいと思います。


[参考]

作りながら学ぶRuby入門 第2版

作りながら学ぶRuby入門 第2版