久々にRubyの勉強に戻ってきました。
- 作者: 久保秋真
- 出版社/メーカー: SBクリエイティブ
- 発売日: 2013/11/21
- メディア: Kindle版
- この商品を含むブログ (3件) を見る
けっこう古い書籍ですが、1つのアプリを作りながらRubyに慣れようと言った感じでアプリが出来ていくのでモチベーションを保ったまま学んでいくことができます。
最後の方の章で、WEBアプリ化していくのですが、WEBrick + REB で作る方法だったので、個人的にテンプレートエンジンはSlimを使いたいという事とRESTfulっぽくしたいという事でRailsはヘビー過ぎるので、Sinatraという軽量フレームワークを使ってみることにしました。個人的に勉強で本をこなすだけってのが苦手なので自分の興味がある事を混ぜながらする事が多いです。(そしてハマる...
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)っぽくてとても書きやすいです。CSSもRubyなんだからStylusじゃなくてSass使えよって感じですが、恐らく指定方法は同じだと思うのでSassに変えようかなと思ったときにでも試してみたいと思います。
[参考]
- Sinatra
- Sinatra - Wikipedia
- Sinatra: README (Japanese)
- Sinatraとhaml,slim - Qiita
- How to use Stylus in a Heroku Sinatra app - Stack Overflow
- GitHub - forgecrafted/ruby-stylus: Ruby interface for Stylus
- 作者: 久保秋真
- 出版社/メーカー: SBクリエイティブ
- 発売日: 2013/11/21
- メディア: Kindle版
- この商品を含むブログ (3件) を見る