トップページ -> 情報工学,情報スキルの教材 -> Ruby による Web/データベース・プログラミング -> Sinatra をインストールし,使ってみる
[サイトマップへ]  

Sinatra をインストールし,使ってみる

Sinatra をインストールし,使ってみます<。Sinatra のインストールは簡単です

In this Web pager, installing and using Sinatra is explained.


Sinatra をインストールし,使ってみる (Install Sinatra and try to use it)

◆ インストール (Install)

  1. ruby, rubygesm, sinatra のインストール (Install ruby, rubygems and sinatra)

    ◆ Ubuntu での実行手順例 (Instal Sinattra on Ubuntu)

    sudo apt-get install ruby
    sudo apt-get install ruby-dev
    sudo apt-get install rubygems
    sudo gem install sinatra
    

  2. erubis, eruby のインストール (Install erubis and eruby)
    sudo apt-get -yV install erubis
    sudo apt-get -yV install erubis-doc
    sudo apt-get -yV install liberubis-ruby
    sudo apt-get -yV install eruby
    

◆ テスト実行 (try to use using a simple example)

Classic スタイルの場合 (In case of "Classic Style" of Sinatra)

  1. ファイル hi.rb を作成 (edit hi.rb)
    require 'rubygems' 
    require 'sinatra'
    
    get '/hi' do
      erubis "Hello World!"
    end
    

  2. サーバの起動 (execute a server)
    ruby hi.rb
    

    ◆ Ubuntu での実行手順例 (In case of Ubuntu)

  3. Web ブラウザを使って開いてみる (Open a Web page using Web browser)

    http://localhost:4567/hi

■ Moudlar スタイルの場合

  1. ファイル hi.rb を作成 (edit hi.rb)
    require 'rubygems'
    require 'sinatra/base'
    class MyApp < Sinatra::Base
      get '/hi' do
        erubis "Hello World!"
      end
    end
    MyApp.run! :host => 'localhost', :port => 4567
    

  2. 起動
    ruby hi.rb
    

    ◆ Ubuntu での実行手順例

  3. Web ブラウザを使って開いてみる

    http://localhost:4567/hi


◆ 試しに使ってみる (try to use)

  1. redis サーバの起動
    cd /tmp
    redis-server 
    

  2. ファイル hello.rb を作成 (edit hello.rb)
    require 'rubygems'
    require 'redis'
    require 'erubis'
    require 'sinatra/base'
    class MyApp < Sinatra::Base
      get '/hoge/new/key=:key&&field=:field&&value=:value' do
        @redis = Redis.new(:host => "127.0.0.1", :port => "6379", :db => "hoge")
        @redis.hset(params[:key], params[:field], params[:value])
      end
      get '/hoge/show' do
        @redis = Redis.new(:host => "127.0.0.1", :port => "6379", :db => "hoge")
        @keys = @redis.keys(glob = "*")
        erb :show
      end
      get '/hoge' do
        @redis = Redis.new(:host => "127.0.0.1", :port => "6379", :db => "hoge")
        @keys = @redis.keys(glob = "*")
        erb :show
      end
    end
    MyApp.run! :host => 'localhost', :port => 4568
    

  3. ファイル views/show.erubis を作成 (edit views/list.erubis)
    <HTML>
    <BODY>
    
    <table>
    <tr>
      <td width="150">key</td>
      <td width="150">field</td>
      <td width="150">value</td>
    </tr>
    
      <% @keys.each do |key| %>
      <%   @fields_and_values = @redis.hgetall(key) %>
      <%   @fields_and_values.each do |field_and_value| %>
    <tr>  
        <td><%= key %></td>
        <td><%= field_and_value[0] %></td>
        <td><%= field_and_value[1] %></td>
    </tr>
    <% end %>
    <% end %>
    </table>
    
    
    
    

  4. 起動
    ruby hello.rb
    

    ◆ Ubuntu での実行手順例

  5. Web ブラウザを使って開いてみる

    http://localhost:4568/hoge/new/key=T:2&&field=x&&value=101

    次に http://localhost:/hoge/show


Sinatra を使ってみる

ここで行うこと

ここで行うルーティングは下の通り。

REST URL without REST 処理
GET /hoge GET /hoge/show 「... => index」と表示
GET /hoge/new GET /hoge/new 「... => new」と表示
GET /hoge/[id]:edit GET /hoge/edit/[id] 「... => edit ...」と表示
GET /hoge/[id] GET /hoge/show/[id] 「... => show ...」と表示
DELETE /hoge/[id] GET /hoge/destroy/[id] 「... => destroy ...」と表示
PUT /hoge/[id] POST /hoge/update/[id] 「... => update ...」と表示
POST /hoge POST /hoge/create 「... => create ...」と表示

◆ ルーティング(テンプレート無し,レイアウト無し)の例

  1. 次のファイルを作り、hi.rb のようなファイル名で保存する (edit "hi.rb")

    HTML エスケープのためのメソッドとして hを定義している。

    require 'rubygems'
    require 'sinatra/base'
    require 'erubis'
    
    class MyApp < Sinatra::Base
      helpers do
        # define method "h" to escape HTML                                       
        include Rack::Utils; alias_method :h, :escape_html 
      end
      get '/hoge' do
        erubis h "GET <</hoge>>       => index"
      end
      get '/hoge/show' do
        erubis h "GET <</hoge/show>>  => index"
      end
      get '/hoge/new' do
        erubis h "GET <</hoge/new>>   => new"
      end
      get %r{^/hoge/([0-9]+):edit$} do
        erubis h "GET <</hoge/#{params[:captures]}>>         => edit #{h params}"
      end
      get %r{^/hoge/edit/([0-9]+)$} do
        erubis h "GET <</hoge/edit/#{params[:captures]}>>    => edit #{h params}"
      end
      get %r{^/hoge/([0-9]+)$} do
        erubis h "GET <</hoge/#{params[:captures]}>>         => show #{h params}"
      end
      get %r{^/hoge/show/([0-9]+)$} do
        erubis h "GET <</hoge/show/#{params[:captures]}>>    => show #{h params}"
      end
      delete %r{^/hoge/([0-9]+)$} do
        erubis h "DELETE <</hoge/#{params[:captures]}>>      => destroy #{h params}"
      end
      get %r{^/hoge/destroy/([0-9]+)$} do
        erubis h "GET <</hoge/destroy/#{params[:captures]}>> => destroy #{h params}"
      end
      put %r{^/hoge/([0-9]+)$} do
        erubis h "PUT <</hoge/#{params[:captures]}>>        => update #{h params}"
      end
      post %r{^/hoge/update/([0-9]+)$} do
        erubis h "POST <</hoge/updte/#{params[:captures]}>> => update #{h params}"
      end
      post '/hoge' do
        erubis h "POST <</hoge>>                            => create #{h params}"
      end
      post '/hoge/create' do
        erubis h "POST <</hoge/create>>                     => create #{h params}"
      end
    end
    MyApp.run! :host => 'localhost', :port => 4567
    

    Sinatra でのルーティングの要点

  2. 起動
    ruby hi.rb
    

  3. Web ブラウザを使って開いてみる

    下のように 「<</hoge/show/123>>:」のように表示される(たしかにHTML エスケープが行われている

◆ ルーティング(テンプレート有り,レイアウト無し)の例

  1. 次のファイルを作り、hi.rb のようなファイル名で保存する (edit "hi.rb")

    , :locals => {:id => "#{params[:captures]}" }」 の部分は,erubis ファイルの中で使いたいローカル変数の設定を行っている.

    require 'rubygems'
    require 'sinatra/base'
    require 'erubis'
    
    class MyApp < Sinatra::Base
      helpers do
        # define method "h" to escape HTML                                       \
                                                                                  
        include Rack::Utils; alias_method :h, :escape_html
      end
      
      get %r{^/hoge/show/([0-9]+)$} do
        erubis :show, {:id => "#{params[:captures]}" }
      end 
    end
    MyApp.run! :host => 'localhost', :port => 4567
    

  2. views/show.erubis ファイルの作成

    Sinatra の流儀では、 テンプレート・ファイルは,デフォルトでは,/views ディレクトリ下に置くことになっている。

    テンプレート・ファイルのファイル名には、拡張子「.erubis」を忘れないこと。

    <HTML>
    <BODY>
    <p>
    id = <%= h id %>
    </BODY>
    </HTML>
    

  3. 起動
    ruby hi.rb
    

  4. Web ブラウザから使ってみる

    http://localhost:4567/hoge/show/123

    下のように /views/show.erubis の評価結果が、 「id = 123」のように表示される

◆ erubis ファイルの中で Ruby のメソッド呼び出し

〜.erubis ファイルの中で,他の Ruby ファイルを取り込みたい. これは,Ruby ファイルで,クラスや関数を定義しておいて, 〜.erubis ファイルの中で使いたいということです.

  1. 先ほどの「erubis ファイルをビューファイルとして使う」での hi.rb をそのまま使う (use the previout "hi.rb")

  2. hoge.rb の例 (edit views/hoge.rb)

    def f(n)
      2 * n
    end
    

  3. views/show.erubis ファイルの作成

    Sinatra の流儀では、 テンプレート・ファイルは,デフォルトでは,/views ディレクトリ下に置くことになっている。

    拡張子「.erubis」を忘れないこと。

    <HTML>
    <BODY>
    <p>
    <% require 'views/hoge.rb' %>
    <p>
    id = <%= h id %>
    <p>
    f id = <%= f id.to_i %> 
    </BODY>
    </HTML>
    

  4. Web ブラウザから使ってみる

    http://localhost:4567/hoge/show/123

    下のように /views/show.erubis の評価結果が 表示される。「f 123 = 246」の部分は、Ruby のメソッドの評価結果を表示している。 これは、erubis ファイルでは「f id = <%= f id.to_i %>」の部分である。

◆ erubis ファイルの中で JavaScript を使ってみる。

「erubis ファイル」と言っているのは、HTML の中に erubis のプログラムが埋め込まれたようなものであった。 HTML なので JavaScript を使うことも問題なく行える(Sinatra の側で何かの設定を行うようなことはない)。 念のため試してみる。

  1. 先ほどの「erubis ファイルをビューファイルとして使う」での hi.rb をそのまま使う (use the previout "hi.rb")

  2. views/show.erubis ファイルの作成

    Sinatra の流儀では、 テンプレート・ファイルは,デフォルトでは,/views ディレクトリ下に置くことになっている。

    拡張子「.erubis」を忘れないこと。

    <!DOCTYPE html public "-//w3c//dtd html 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
      <head>
        <meta http-equiv="Content-Type" content="text/html; initial-scale=1.0; charset=Windows-31J" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="MSThemeCompatible" CONTENT="yes" />
    
        <title>Google Maps API sample</title>
    
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript">
          <!--
    	   google.maps.event.addDomListener(window, 'load', function() {
    	   var latlng = new google.maps.LatLng(33.104053, 131.78092); 
    	   var myOptions = {
    	   zoom: 12,
    	   center: latlng,
    	   mapTypeId: google.maps.MapTypeId.ROADMAP,
    	   scaleControl: true,
    	   };
    	   var map = new google.maps.Map(document.getElementById("googlemap"), myOptions);
    	   });
    	   // -->
          </script> 
        </head>
    
        <body style="width : 500px; height : 400px;">
          <p> 
            id = <%= h id %>
          <p> 
            <div id="googlemap" style="width : 400px; height : 300px;"></div> 
        </body>
    </html>
    
    

  3. Web ブラウザから使ってみる

    http://localhost:4567/hoge/show/123

    下のように /views/show.erubis の評価結果が 表示される。

◆ erubis ファイルの中で JavaScript を使ってみる。

「erubis ファイル」と言っているのは、HTML の中に erubis のプログラムが埋め込まれたようなものであった。 HTML なので JavaScript を使うことも問題なく行える(Sinatra の側で何かの設定を行うようなことはない)。 念のため試してみる。

  1. 次のファイルを作り、hi.rb のようなファイル名で保存する (edit "hi.rb")
    require 'rubygems'
    require 'sinatra/base'
    require 'erubis'
    
    class MyApp < Sinatra::Base
      helpers do
        # define method "h" to escape HTML                                       \
                                                                                  
        include Rack::Utils; alias_method :h, :escape_html
      end
      
      get '/hoge/show' do
        erb :show
      end
      get '/hoge/new' do
        erb :new
      end
      post '/hoge/create' do
        erb :create, :locals ='> {:params ='> params }
      end
    end
    MyApp.run! :host ='> 'localhost', :port ='> 4567
    

  2. views/show.erubis ファイルの作成
    <!DOCTYPE html public "-//w3c//dtd html 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
      <head>
        <title>show</title>
        </head>
    
        <body>
          <% require 'rubygems' %>
          <% require 'sqlite3' %>
          <% db = SQLite3::Database.new("/home/windowslike/views/mydb") %>
          <% a = db.execute("SELECT * FROM persons;") %>
          <% db.close() %>
          <%= a %>
        </body>
    </html>
    

  3. views/new.erubis ファイルの作成
    <!DOCTYPE html public "-//w3c//dtd html 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
      <head>
        <title>new</title>
        </head>
    
        <body>
        <p>Please input your name</p>
        <form action='/hoge/create' method='POST'>
          <p>
          name: 
          <input type='text' name='name'>
          <p>
          commente: 
          <input type='text' name='comment'>
          <p>
          <input type='submit' value='Send'>
        </form>
    
        </body>
    </html>
    

  4. views/create.erubis ファイルの作成
    <!DOCTYPE html public "-//w3c//dtd html 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
      <head>
        <title>create</title>
        </head>
    
        <body>
          <p> 
            name = <%= params[:name] %>
          <p> 
            comment = <%= h params[:comment] %>
    
          <% require 'rubygems' %>
          <% require 'sqlite3' %>
          <% db = SQLite3::Database.new("/home/windowslike/views/mydb") %>
          <% db.execute("INSERT INTO persons VALUES ( '#{params[:name]}', '#{params[:comment]}' )") %>
          <% db.close() %>
        </body>
    </html>
    

  5. 起動
    ruby hi.rb
    

  6. Web ブラウザから使ってみる

    http://localhost:4567/hoge/new