13. Webアプリ開発(Sinatra編)

Sinatra(シナトラ)はRubyのWebアプリケーションフレームワークの一つです。
Webアプリケーションフレームワークとは、フレームワークごとに決められた規則に従ってプログラムを記述することにより、簡単にWebアプリケーションを作ることための機能をまとめたものです。
RubyのWebアプリケーションフレームワークには他に、Ruby on RailsやPadrinoなどがあります。
Sinatraを使うことで、Rubyを利用した動的なWebページの作成や表示が可能です。

Sinatraのディレクトリ構成

Sinatraを使う場合、以下のようなディレクトリ構成にします。

1
2
3
4
5
6
7
8
9
/sinatra_practice/
  ├ /controller : コントローラーファイルを管理しておくディレクトリ
  ├ /lib        : ライブラリファイルを管理しておくディレクトリ
  ├ /public     : 静的ファイルを管理しておくディレクトリ
  ├ /views      : テンプレートファイルを管理しておくディレクトリ
  ├ app.rb      : メインアプリケーション
  ├ config.ru   : 起動ファイル
  ├ Gemfile     : gemを管理するファイル
  :

それぞれのディクトリには、役割があります。

Sinatraを使ってみよう(一緒にやってみよう)

手順1: ディレクトリの作成

• 例題ディレクトリ examples 配下に sinatra_practice というディレクトリを作成してください。

  1
  2
  # アプリケーションの内容がわかる名前でディレクトリを作成
  $ mkdir ~/Documents/ruby_lecture/examples/sinatra_practice/
  

• そのディレクトリに移動してください。

  1
  2
  # ディレクトリ移動
  $ cd ~/Desktop/ruby_lecture/examples/sinatra_practice/
  

手順2: Sinatraのインストール(bundle install)

• GemをBundlerで管理するために、Gemfileの雛形を生成します。

1
$ bundle init

• 作成された Gemfile に、以下のように記述してください（ここにはない記述があるかもしれませんが、この研修では削除してしまって構いません）。

1
2
3
4
source "https://rubygems.org"

gem "sinatra"
gem "webrick"

• sinatraをbundle installします。

1
2
$ bundle config set path 'vendor/bundle'
$ bundle install

手順3: アプリケーションの実装

• sinatra_practiceディレクトリ直下に、以下のファイルを作成してください。

1
2
3
4
5
6
7
require "sinatra/base"

class SampleApp < Sinatra::Base
  get "/" do
    "Hello Sinatra!"
  end
end

※この app.rb というファイルが、Sinatraの心臓部分です。
処理内容を言葉で表すと、次のようになります。

手順4: アプリケーション実行ファイルの作成

sinatra_practiceディレクトリ直下、config.ruというファイルを作成してください。
これは、アプリケーションを実行するためのファイルです。

1
2
3
require "./app.rb"

run SampleApp

手順5: Sinatraの起動

下記コマンドを実行して、Sinatraを起動します。

1
$ bundle exec rackup config.ru

ブラウザでhttp://127.0.0.1:9292/にアクセスしてみてみましょう。
以下のように「Hello Sinatra!」という文字が表示されたでしょうか。

これで最低限の設定は完了です。

手順6: アプリケーションの拡張

他にもページを作ってみましょう。
先ほどの app.rb のクラス内に以下のコードを追加して下さい。

1
2
3
4
5
6
7
8
9
10
11
require "sinatra/base"

class SampleApp < Sinatra::Base
  get "/" do
    "Hello Sinatra!"
  end

  get "/hello/taro" do
    "Hello taroさん!"
  end
end

app.rb を更新したため、現在起動中のアプリケーションを一旦再起動する必要があります。
ターミナル上でcontrol + cを押してアプリケーションを中断し、再実行してください。

1
$ bundle exec rackup config.ru

今度は、ブラウザでhttp://127.0.0.1:9292/hello/taroにアクセスしてみてください。
以下のように表示されれば成功です。

この処理は、/hello/taroというパスに新たなページを追加したことを意味しています。

1
2
3
[2017-03-22 19:14:06] INFO  WEBrick 1.3.1
[2017-03-22 19:14:06] INFO  ruby 2.3.1 (2016-04-26) [x86_64-darwin15]
[2017-03-22 19:14:06] INFO  WEBrick::HTTPServer#start: pid=32831 `port=9292`

パラメータ

先ほどの実装では、名前を追加するたびに app.rb に

1
2
3
  get "/hello/xxx" do
    "Hello xxxさん!"
  end

という記述を追加しなければなりません。
これでは、人数が増えると対応しきれなくなってしまいます。

そこで、URLによって表示する内容を動的に変化させてみましょう。
先ほどの app.rb を以下のように修正して下さい。

1
2
3
4
5
6
7
8
9
10
11
12
require "sinatra/base"

class SampleApp < Sinatra::Base
  get "/" do
    "Hello Sinatra!"
  end

  get "/hello/:name" do
    "Hello #{params[:name]}さん!"  # params変数(Hash)で取得
  end

end

アプリケーションを再起動し、ブラウザで以下のURLにアクセスすうとどうなるでしょうか。

• http://localhost:9292/ => Hello Sinatra!
• http://localhost:9292/hello/taro => Hello taroさん!
• http://localhost:9292/hello/jiro => Hello jiroさん!

:name ように、パスの中で :(コロン)を先頭につけた文字列は変数として扱われ、paramsというハッシュでその値を受け取ることができます。

次はクエリを使用して、動的にページを変えてみましょう。
先ほどと同様、 app.rb のクラス内に以下を追記してください。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
require "sinatra/base"

class SampleApp < Sinatra::Base
  get "/" do
    "Hello Sinatra!"
  end

  get "/hello/:name" do
    "Hello #{params[:name]}さん!"  # params変数(Hash)で取得
  end

  get "/travel" do
    "出発は#{params[:from]}で、到着は#{params[:to]}"
  end
end

ブラウザで以下のURLにアクセスしてみてください。

http://localhost:9292/travel?from=kouenji&to=osaka

このようにクエリパラメータもparamsで取得することができます。
この機能により、動的なページを作成できるようになります。

オートリロード

app.rb を更新するたびに再読み込みするのは面倒ですよね。
そんな時に便利なgemがありますので、紹介しておきます。
Gemfileにsinatra-reloaderというgemを追加して、bundle installを行いましょう。

1
2
3
4
5
source "https://rubygems.org"

gem "sinatra"
gem "sinatra-reloader"
gem "webrick"

1
$ bundle install # 2回目なのでpathの指定は不要

そして、 app.rb に以下のように記述します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
require "sinatra/base"
require "sinatra/reloader"

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

  get "/" do
    "Hello Sinatra!"
  end

  # (省略)

end

これでもうcontrol + cとはおさらばです。
手順がめんどくさい、自動化したい、その感覚を忘れずに！

まとめ

TipsにSinatraを利用したWebアプリケーションの構築手順をまとめておきます。
わからなくなったら参考にしてください。
(ERB編に続く)