トップ > sinatra

Webアプリのモックアップ作業土台を作る その3 Sass Source Map

sinatra ruby web sourcemap sass css

その1 と その2 Sprockets の続きです。が、今回の作業は その1 の途中からブランチしてます。

Google Chrome の Dev Tools は Sass/SCSS の Source Map に対応しているので利用できるようにしてみます。が、Source Map は仕様も実装も流動的な状態で、環境によって動作しない可能性も大ありなので、あくまで参考まで。

リポジトリ上では Sprockets も Bootstrap も Compass も導入する前の段階からブランチを生やしました。

新仕様と旧仕様

CSS リクエストへのレスポンスでブラウザに Source Map の位置（パス）を知らせる必要があり、その方法は2種類あります。

  1. レスポンスの HTTP ヘッダで渡す
  2. ボディ内のコメントで渡す
続きを読む

Webアプリのモックアップ作業土台を作る その2 Sprockets

ruby sinatra web

前回のつづき。

前回作った作業台に Sprockets を導入して assets 提供を分離します。といっても Sprockets 使っていくかどうか自分でも確信持ててないのでリポジトリではブランチにしておきました。

Sprockets を導入するメリットとしては、このままデプロイするケースを視野に入れたときに圧縮機能を追加しやすかったりプリコンパイルできたりするところでしょうか（どちらも今回はやってません）。

というわけで、まずは Gemfile に sprockets 関連の gem を追加して bundle。

gem 'sprockets'
gem 'sprockets-helpers'
gem 'sprockets-sass'
続きを読む

Webアプリのモックアップ作業土台を作る その1

web ruby sinatra

Slim, Sass/SCSS, CoffeeScript が使えて Livereload してくれるフロント周辺の作業環境がほしいと思いながらも自分にしっくりくる構成ができなかったんですが、最近 rack-livereload を見つけてピースが埋まった感じがしたのでまとめます。

記事を書くにあたり naoya さんのひな型に大いに影響されてますが、ここでは npm でインストールするのは bower だけにして基本的には Sinatra と Guard に任せています。

Sinatra, Slim, Sass, CoffeeScript

土台の土台としてシンプルな Sinatra アプリから。Gemfile を書いて bundle。

Gemfile

source 'https://rubygems.org'

gem 'sinatra'
gem 'sinatra-contrib'
gem 'sass'
gem 'slim'
gem 'coffee-script'

group :develoopment do
  gem 'shotgun'
  gem 'thin'
end

workbench.rb

require 'sinatra/base'
require 'sinatra/reloader'
require 'slim'
require 'sass'
require 'coffee-script'

class Workbench < Sinatra::Base
  configure :development do
    register Sinatra::Reloader
  end

  get '/' do
    @title = 'Index'
    slim :index
  end

  get '/css/application.css' do
    sass :application
  end

  get '/js/application.js' do
    coffee :application
  end
end

views/layout.slim

doctype html
html
  head
    title= @title + ' | Site Workbench'
    link href="/css/application.css" rel="stylesheet"
  body
    == yield
    script src="/js/application.js"

views/index.slim

h1 Workbench
p Workbench for my site.

views/application.sass

body
  background: hsl(0, 0%, 90%)

views/application.coffee

() ->
  'Hoge'

config.ru

require 'bundler'
Bundler.setup
require File.expand_path(File.join('..','workbench'), __FILE__)
run Workbench

これで bundle exec shotgun --server=thin --port=3000 するとサーバーが立って、とりあえずプレビューできます。コマンド名が気持ちいい shotgun。

Guard, guard-livereload, rack-livereload

Livereload 環境にするため guard, guard-livereload, rack-livereload を導入。rack-livereload があればブラウザ拡張は必要ありません。

続きを読む

Ubuntu Oneiric + nginx + uwsgi + sinatra (rack)

ubuntu uwsgi ruby rack sinatra nginx haml

Ubuntu Oneiric (11.10) + nginx + uwsgi な環境で Sinatra アプリを uwsgi に載せるまで。

まず sinatra のインストールから。 apt で sinatra をインストールしたい場合、現在は ruby-rack がみつからず依存関係エラーが出る。

$ sudo -s
# apt-get install ruby-sinatra
[...]
以下のパッケージには満たせない依存関係があります:
 ruby-sinatra : 依存: ruby-rack しかし、インストールすることができません
E: 問題を解決することができません。壊れた変更禁止パッケージがあります。
# apt-get install ruby-rack
[...]
パッケージ ruby-rack はデータベースには存在しますが、利用できません。
おそらく、そのパッケージが見つからないか、もう古くなっているか、
あるいは別のソースからのみしか利用できないという状況が考えられます

E: パッケージ 'ruby-rack' にはインストール候補がありません

ubuntu-proposed リポジトリに対策済みパッケージがあるので、有効にしてから ruby-sinatra をインストール。

参考：Bug #843734 in ruby-sinatra (Ubuntu): “ruby-sinatra : Depends: ruby-rack but it is not installable”

# vi /etc/apt/sources.list
...
deb http://jp.archive.ubuntu.com/ubuntu/ oneiric-proposed main restricted universe multiverse
deb-src http://jp.archive.ubuntu.com/ubuntu/ oneiric-proposed main restricted universe multivers
...
# apt-get update
# apt-get install ruby-sinatra

Sinatra DSL の Hello World なファイルを作る。

続きを読む