結局Sinatraにした

再びRailsに手を出していたのですが、RubyもWebも何もわかっていない状態でサンプルだけ真似していくのはツライ…。

ということで、Sinatraに挑戦してみることにしました。

規模が大きいプロジェクトはRailsが向いている、小さいものはSinatraの方が、など得意分野がそれぞれあるようなので、最終的にはどちらも使えるようになりたいところです。

インストール

Railsの環境をセットしているのであれば、[gem install sinatra]でほぼ完了なはず。

今回はHTMLのテンプレートエンジンにSlim、またCoffee-Scriptやsassを使用しているため、それぞれインストールしておきます(実のところSlim以外は別途インストールしなくても良さそうですが)。

gem install slim
gem install coffee-script
gem install sass

構成は以下のようにしています。

プロジェクトのルートディレクトリ
Ｌapp.rb     --- このアプリのコントローラ
Ｌconfig.ru  --- Webアプリのフレームワークの基盤となるRackの設定ファイル
ＬGemfile    --- このアプリで使用するGemパッケージを管理する
ＬViews
  Ｌlayout.slim  --- 各ページで共通するパーツ(ヘッダ・フッタなど)を設定する
  Ｌtop.slim     --- Topページ(ページ1)
  Ｌabout.slim   --- ページ2
  Ｌcss
    Ｌstyle.sass     --- 各ページで使用するスタイルシート(sass)
  Ｌjs
    Ｌscript.coffee  --- 各ページで使用するスクリプト(Coffee-Script)

各ファイルについて

Gemfile

まずはこのアプリで使用するGemパッケージを揃えます。

プロジェクトのルートディレクトリに、以下の内容でGemfileというファイルを作成します。

source 'https://rubygems.org'

ruby '2.1.5'

gem "coffee-script", '2.3.0'
gem "sass", '3.4.9'

gem 'sinatra', '1.4.5'
gem 'sinatra-base', '1.4.0'
gem 'sinatra-reloader', '1.0'

gem 'slim', '2.1.0'

上記を記述したら、ターミナルでプロジェクトのルートディレクトリを開いて、[bundle update]、[bundle install]を実行します。

ちなみに各パッケージのバージョンはバージョン指定せずにインストールしてみて、そのバージョンを後から確認したものです。

app.rb

アプリをコントロールするためのRubyファイルを作成します。

require 'coffee-script'
require 'sass'
require 'sinatra'
require 'sinatra/base'
# サーバーを再起動しなくてもリロードする
require 'sinatra/reloader'
require 'slim'

class MainApp < Sinatra::Base
  # localhost:XXXXにアクセスしたらTopページを表示する
  get '/' do
    slim :top
  end
  get '/about' do
    slim :top
  end

  get '/css/stylesheet.css' do
    sass :'css/style'
  end

  get '/js/javascript.js' do
    coffee :'js/script'
  end
end

クラスの中で実行される[get 'XXX' do 〜 end]という部分では、該当のURLにアクセスした時に、〜の部分で設定しているファイルを渡します。
例えば、プロジェクトのURLのトップ(http://localhost:9292/)にアクセスした場合は、TopページのSlimが渡されて表示されます。

なお〜の部分でファイルのパスを指定しますが、[views]ディレクトリからのパスとなっており、ファイルの拡張子は自動で指定されるため不要です。
またディレクトリが異なる場合はシングルクォテーションで囲んでやれば指定できます。

config.ru

以下の内容でコントローラとクラスを指定したファイルを作成しておくことで、[rackup]コマンドを実行してサーバーを起動できるようになります。

require './app.rb'
run MainApp

views/layout.slim

ページが読み込まれるときはこのファイルが最初に呼ばれ、ヘッダやフッタなど、各ページで共通の部分を設定できます。

erbやhamlでページを作成した場合も同様で、名前が「layout + 拡張子」である必要があります。

DOCTYPE
html
  head
    meta charset="utf-8"
    title SinatraTest
  body
    header SinatraTest
    == yield

とりあえずページのタイトル、ヘッダ(テキストだけ)をセットしてみました。

各ページの内容は、[== yield]の部分が置き換わって表示されます。

views/top.slim

Topページ(ページ1)です。

ここではCoffeeScript、スタイルシートを読み込んでいます(※layout.slimで指定した方が良い気もしますが、個別に指定できるかを試しています)。

head
  link href="/css/stylesheet.css" rel="stylesheet"
  script src="/js/javascript.js"

body
  javascript:
    function showalert1(){
      alert('test');
    }
  coffee:
    @hello = ->
      alert "Hello!"

  article Topページです。
  input type="button" onclick="showalert()" value="Alert"

なお、JavascriptやCoffeeScriptを(別のファイルに分けず)直接記述したい場合は、bodyタグの下にあるように[javascript:]や[coffee:]と書いてその中にfunctionを書いてやればOKです。

ちなみに、CoffeeScriptのfunction名に[@]をつけるところが分からず、しばらく頭を抱えながらググってました...。

views/about.slim

ページ2ですが、ほぼ何も書いてませんw

article このサイトについて

views/css/style.sass

articleタグの文字サイズ、色を指定しています。

article
  color: red
  font-size: 30px

views/js/script.coffee

アラートを表示します。

@showalert = ->
  alert "世界さんチーっす"

実行する

ターミナルでプロジェクトのルートディレクトリを開き、[rackup]を実行する
Webブラウザでhttp://localhost:9292にアクセスする

またはターミナルでプロジェクトのルートディレクトリを開き、[ruby app.rb]を実行してもOKです。
この場合のURLはhttp://localhost:4567になるかと。

とりあえずごくごく簡単なものはできたので、DBやRspecなどを続けて調べてみたいところ。

vaguely

和歌山に戻りました。ふらふらと色々なものに手を出す毎日。