SinatraでWebアプリケーション開発を学ぶ


12年8月21日火曜日
今回の狙い
  ✤   以下2つを体験してもらうこと
      でWebアプリケーション開発
      に慣れてもらう
      ✤   Sinatra:Ruby製のWebアプ
          リケーションフレームワー
          ク
      ✤   irb:rubyの式を簡単に入力/
          実行できるツール



                                http://www.flickr.com/photos/alanant/4483533096/

12年8月21日火曜日
日常行う作業の自動化/効率化のようなツール開発




                        +



              作業の自動化等のためのツールであれば利用
              するライブラリは少なく(場合によっては1
                  つで済むことが多い)


12年8月21日火曜日
ツール開発例:
  CoffeeMeetingのミーティング情報自動取得ツール

   require 'nokogiri'
   require 'open-uri'                                                        nokogiriというライブラリ利用
   class Crawler
     def run()
       base_url = 'http://coffeemeeting.jp/hours/'
       0.upto(10).each {|i|                                                  open-uriというライブラリ利用
         count = (i*10)+1
         begin
           http = open(
                       base_url + count.to_s,
                       "User-Agent" => "My Agent",
                       "From" => "xxxx@mydomain",
                       "Referer" => "http://mydomain/"
                       )
         rescue OpenURI::HTTPError => e
           e.io.close
         end
           doc = Nokogiri::HTML(http)
           entry_data = {
             :hourdate =>doc.search('//p[@class="hourdate"]').text,
             :hourspotname =>doc.search('//div[@class="hourspotname"]').text,
             :hourlocation =>doc.search('//p[@class="hourlocation"]').text,
             :meeting_owner => doc.search('//div[@id="left-sidebar"]/div/div/p').text
           }
           puts entry_data
           sleep(2)
       }
     end
   end
   c = Crawler.new
   c.run



12年8月21日火曜日
Webアプリケーション開発の場合



              プログラミング       目的に合う最適なWebアプ
              言語の文法を覚   +   リケーションフレームワー
                 える          クを選定する/探す/作る



              自分が作りたいアプリケーションの
              規模によって最適なフレームワーク
                    が決まる



12年8月21日火曜日
主なWebアプリケーションフレームワークの位置づけ



                  軽量           中量級         重量級
   フレームワー
                 Sinatra     Padrino        Rails
    ク名称
                                         •実績豊富
                           •Sinatra並みに軽い
               •拡張性は・・                   •拡張性高(プラグイ
          特徴   •学習コストは低い
                           (らしい)
                                         ン)
                           •Modularity
                                         •学習コスト高

   ※参考までに         Slim
                            Cake PHP      symfony
    PHPだと         Silex

12年8月21日火曜日
SinatraとRailsの依存ライブラリ比較



      Gem sinatra-1.3.2             Gem rails-3.2.0

         rack (>= 1.3.6, ~> 1.3)      actionmailer (= 3.2.0)

         rack-protection (~> 1.2)     actionpack (= 3.2.0)

         tilt (>= 1.3.3, ~> 1.3)      activerecord (= 3.2.0)

                                      activeresource (= 3.2.0)

                                      activesupport (= 3.2.0)

                                      bundler (~> 1.0)

                                      railties (= 3.2.0)




12年8月21日火曜日
そもそもSinatraとは?


              Sinatra は、Ruby のための Webアプリケーションフ レ ー ム ワ ー ク で
        す 。 2010年3月 に バ ー ジ ョン 1.0 が リリ ースされました。 Ruby で
        Webアプリケーションと言えば Ruby on Rails(以下 Rails) が群を抜いて有
        名です が 、 Rails が「 フ ル ス タ ッ ク 」、 つ まり 必 要 な 機 能 が 最
        初 から入っていることを目標としているのに対し、 Sinatraは逆に限りなく
        シンプルであることを目標としています。

                                             WEB+DB PRESS Vol.57 P.55




12年8月21日火曜日
なぜ今回Sinatraを選んだのか?


  ✤   Webアプリの仕組みを理解しやすい

      ✤   HTTPメソッドについてしっかり学べる

                                                  require 'sinatra'

                                                  get '/hello' do

                                                    'hello'

                                                  end
   http://www.actlink.co.jp/text/php/01/01.html
   より図を引用



                   ①のリクエストに相当する部分                 ②のレスポンスに相当する部分

12年8月21日火曜日
Photo by Jeezny
                     (http://www.flickr.com/photos/jeezny/3484147492/)




  Sinatra 1st Step


12年8月21日火曜日
1.Documentsフォルダを開いて、そのフォル
  ダ内に今回作るアプリ用のフォルダを作成




12年8月21日火曜日
2.フォルダ作成したらエディタ起動します




12年8月21日火曜日
3.先ほど作成したフォルダ配下にapp.rbとい
  うファイルを作成します




              ①先ほど作ったフォルダが   ②app.rbと入力
              表示されているはずなので
              右クリック




                                ③入力したらSaveボタンをク
                                リック



12年8月21日火曜日
参考情報:エディタ(Sublime2)のフォント
  サイズ変更したい場合




              ①Preferencesの
              Setting-Userを選択します



                                   ②font_sizeの数値を変更し
                                   ます




12年8月21日火曜日
4.基本のHello Worldなアプリ

     require 'sinatra'   Sinatraのライブラリを読み込みます


                         http://xxxx/hello というURLにアクセスがあっ
     get '/hello' do     た場合に、do・・endの処理が実行されます

       'hello'           画面上にhello と表示します


     end




12年8月21日火曜日
5.アプリケーション起動します

   以下の黒文字の所がコマンドなのでその部分だけをターミナル上で入力します
   $ cd ~/Documents/先ほど作ったフォルダ名   ・・該当のフォルダに移動
   $ ruby ./app.rb   ・・現在のフォルダ配下にあるapp.rbを実行




                 このようなメッセージが表示さ
                 れていればOKです。




12年8月21日火曜日
6.Webブラウザ起動して確認します




     左上の「アプリケーションメニュー」
                                localhost:4567/hello
     → Internet → Firefoxeを選択   とアドレスバーに入力




12年8月21日火曜日
Photo by Tech109
              (http://www.flickr.com/photos/craigsd/4687453830/)




  先ほどのアプリをブラッシュアップ


12年8月21日火曜日
先ほど作ったアプリに以下を追記します

     require 'sinatra'

     get '/hello' do
       'hello'
     end

     ※以下を追記します

                                      :yourname が変数のような役割を果たして
     get '/hello/:yourname' do
                                      ます
                                      params[:yourname] とすることで、上記
       'hello!' + params[:yourname]   の :yourname に格納された値を取り出す
                                      ことができます
     end




12年8月21日火曜日
テンプレート機能利用準備①




              現在作業中のフォルダ上で
              右クリックしてNew Folder
              を選択




                             画面一番下にフォルダ名入力のボックスが表示さ
                             れるので views と入力します
12年8月21日火曜日
テンプレート機能利用準備②




                               ②index.erbと入力
              ①先ほど作ったviewsフォ
              ルダ上で右クリック




                                  ③入力したらSaveボタンをク
                                  リック



12年8月21日火曜日
ERBというテンプレート機能を利用します

     app.rb                             views/index.erb

     require 'sinatra'                  <html>
     get '/hello' do                      <head>
       'hello'                              <title>erb sample</title>
     end                                  </head>
     get '/hello/:yourname' do          <body>
       'hello!' + params[:yourname]       hello
     end                                </body>
                                        </html>
     ※以下を追記します

     get '/template' do
       erb :index                       ひとまずこの段階ではERBになれてもらうために単
                                        純なHTMLを記述してます。
     end


      index.erb というテンプレートファイル利用することを宣言してます


      ※ 参考情報:仮にファイル名をlayout.erbとした場合には erb :layout という記述になります

12年8月21日火曜日
Photo by Tech109
              (http://www.flickr.com/photos/craigsd/4687453830/)




  今回の学習の仕上げ


12年8月21日火曜日
動作イメージ



 ①localhost:4567/template   ②Sintara実行   ③twitter APIアクセス




        ⑤tweet結果を加工して画面表示         ④tweet取得




12年8月21日火曜日
まずは irb(InterativeRuby)で動作確認

  ✤   ターミナル上でrubyの式を簡単
      に入力/実行できるツール

  ✤   ターミナル上で irb と入力して
      Enterキーを押すことで、irbが
      利用可能になります




12年8月21日火曜日
irbでtwitterのパブリックタイムラインを確認
  する
  $ruby-1.9.2-p320 :001 > url ='https://api.twitter.com/1/statuses/
  public_timeline.json?count=3'
  => "https://api.twitter.com/1/statuses/public_timeline.json?count=3"
  $ruby-1.9.2-p320 :002 > require('json')
  => true
  $ruby-1.9.2-p320 :003 > require('open-uri')
  => true
  $ruby-1.9.2-p320 :004 > json = open(url).read
  => [..内容多いので省略]
  $ruby-1.9.2-p320 :005 > JSON.parse(json).each { |items| p items['text']}
  => [..内容多いので省略]



  ※注意※
  $ruby-1.9.2-p320 :xxx> 以降の文字だけ入力していきます
  灰色の部分がターミナル上で表示される結果になります。



12年8月21日火曜日
index.erbの修正

    views/index.erb

    <html>
      <head>
        <title>erb sample</title>
      </head>
    <body>
      <h1>ERB sample</h1>
      <ul>
        <%
           url ='https://api.twitter.com/1/statuses/public_timeline.json?count=3'
           json = open(url).read
           JSON.parse(json).each do |items|
        %>
        <li>
          <%= items["text"] %>
        </li>
        <% end %>
      </ul>
    </body>
    </html>




12年8月21日火曜日
app.rb 完成版

   require 'sinatra'
   require 'open-uri'
   require 'json'

   get '/hello' do
     'hello'
   end

   get '/hello/:yourname' do
     'hello!' + params[:yourname]
   end

   get '/template' do
     erb :index
   end




12年8月21日火曜日

Sinatraでwebアプリケーション開発を学ぶ

  • 1.
  • 2.
    今回の狙い ✤ 以下2つを体験してもらうこと でWebアプリケーション開発 に慣れてもらう ✤ Sinatra:Ruby製のWebアプ リケーションフレームワー ク ✤ irb:rubyの式を簡単に入力/ 実行できるツール http://www.flickr.com/photos/alanant/4483533096/ 12年8月21日火曜日
  • 3.
    日常行う作業の自動化/効率化のようなツール開発 + 作業の自動化等のためのツールであれば利用 するライブラリは少なく(場合によっては1 つで済むことが多い) 12年8月21日火曜日
  • 4.
    ツール開発例: CoffeeMeetingのミーティング情報自動取得ツール require 'nokogiri' require 'open-uri' nokogiriというライブラリ利用 class Crawler   def run()     base_url = 'http://coffeemeeting.jp/hours/'     0.upto(10).each {|i| open-uriというライブラリ利用       count = (i*10)+1       begin         http = open(                     base_url + count.to_s,                     "User-Agent" => "My Agent",                     "From" => "xxxx@mydomain",                     "Referer" => "http://mydomain/"                     )       rescue OpenURI::HTTPError => e         e.io.close       end         doc = Nokogiri::HTML(http)         entry_data = {           :hourdate =>doc.search('//p[@class="hourdate"]').text,           :hourspotname =>doc.search('//div[@class="hourspotname"]').text,           :hourlocation =>doc.search('//p[@class="hourlocation"]').text,           :meeting_owner => doc.search('//div[@id="left-sidebar"]/div/div/p').text         }         puts entry_data         sleep(2)     }   end end c = Crawler.new c.run 12年8月21日火曜日
  • 5.
    Webアプリケーション開発の場合 プログラミング 目的に合う最適なWebアプ 言語の文法を覚 + リケーションフレームワー える クを選定する/探す/作る 自分が作りたいアプリケーションの 規模によって最適なフレームワーク が決まる 12年8月21日火曜日
  • 6.
    主なWebアプリケーションフレームワークの位置づけ 軽量 中量級 重量級 フレームワー Sinatra Padrino Rails ク名称 •実績豊富 •Sinatra並みに軽い •拡張性は・・ •拡張性高(プラグイ 特徴 •学習コストは低い (らしい) ン) •Modularity •学習コスト高 ※参考までに Slim Cake PHP symfony PHPだと Silex 12年8月21日火曜日
  • 7.
    SinatraとRailsの依存ライブラリ比較 Gem sinatra-1.3.2 Gem rails-3.2.0 rack (>= 1.3.6, ~> 1.3) actionmailer (= 3.2.0) rack-protection (~> 1.2) actionpack (= 3.2.0) tilt (>= 1.3.3, ~> 1.3) activerecord (= 3.2.0) activeresource (= 3.2.0) activesupport (= 3.2.0) bundler (~> 1.0) railties (= 3.2.0) 12年8月21日火曜日
  • 8.
    そもそもSinatraとは? Sinatra は、Ruby のための Webアプリケーションフ レ ー ム ワ ー ク で す 。 2010年3月 に バ ー ジ ョン 1.0 が リリ ースされました。 Ruby で Webアプリケーションと言えば Ruby on Rails(以下 Rails) が群を抜いて有 名です が 、 Rails が「 フ ル ス タ ッ ク 」、 つ まり 必 要 な 機 能 が 最 初 から入っていることを目標としているのに対し、 Sinatraは逆に限りなく シンプルであることを目標としています。 WEB+DB PRESS Vol.57 P.55 12年8月21日火曜日
  • 9.
    なぜ今回Sinatraを選んだのか? ✤ Webアプリの仕組みを理解しやすい ✤ HTTPメソッドについてしっかり学べる require 'sinatra' get '/hello' do   'hello' end http://www.actlink.co.jp/text/php/01/01.html より図を引用 ①のリクエストに相当する部分 ②のレスポンスに相当する部分 12年8月21日火曜日
  • 10.
    Photo by Jeezny (http://www.flickr.com/photos/jeezny/3484147492/) Sinatra 1st Step 12年8月21日火曜日
  • 11.
  • 12.
  • 13.
    3.先ほど作成したフォルダ配下にapp.rbとい うファイルを作成します ①先ほど作ったフォルダが ②app.rbと入力 表示されているはずなので 右クリック ③入力したらSaveボタンをク リック 12年8月21日火曜日
  • 14.
    参考情報:エディタ(Sublime2)のフォント サイズ変更したい場合 ①Preferencesの Setting-Userを選択します ②font_sizeの数値を変更し ます 12年8月21日火曜日
  • 15.
    4.基本のHello Worldなアプリ require 'sinatra' Sinatraのライブラリを読み込みます http://xxxx/hello というURLにアクセスがあっ get '/hello' do た場合に、do・・endの処理が実行されます   'hello' 画面上にhello と表示します end 12年8月21日火曜日
  • 16.
    5.アプリケーション起動します 以下の黒文字の所がコマンドなのでその部分だけをターミナル上で入力します $ cd ~/Documents/先ほど作ったフォルダ名 ・・該当のフォルダに移動 $ ruby ./app.rb ・・現在のフォルダ配下にあるapp.rbを実行 このようなメッセージが表示さ れていればOKです。 12年8月21日火曜日
  • 17.
    6.Webブラウザ起動して確認します 左上の「アプリケーションメニュー」 localhost:4567/hello → Internet → Firefoxeを選択 とアドレスバーに入力 12年8月21日火曜日
  • 18.
    Photo by Tech109 (http://www.flickr.com/photos/craigsd/4687453830/) 先ほどのアプリをブラッシュアップ 12年8月21日火曜日
  • 19.
    先ほど作ったアプリに以下を追記します require 'sinatra' get '/hello' do   'hello' end ※以下を追記します :yourname が変数のような役割を果たして get '/hello/:yourname' do ます params[:yourname] とすることで、上記   'hello!' + params[:yourname] の :yourname に格納された値を取り出す ことができます end 12年8月21日火曜日
  • 20.
    テンプレート機能利用準備① 現在作業中のフォルダ上で 右クリックしてNew Folder を選択 画面一番下にフォルダ名入力のボックスが表示さ れるので views と入力します 12年8月21日火曜日
  • 21.
    テンプレート機能利用準備② ②index.erbと入力 ①先ほど作ったviewsフォ ルダ上で右クリック ③入力したらSaveボタンをク リック 12年8月21日火曜日
  • 22.
    ERBというテンプレート機能を利用します app.rb views/index.erb require 'sinatra' <html> get '/hello' do   <head>   'hello'     <title>erb sample</title> end   </head> get '/hello/:yourname' do <body>   'hello!' + params[:yourname]   hello end </body> </html> ※以下を追記します get '/template' do   erb :index ひとまずこの段階ではERBになれてもらうために単 純なHTMLを記述してます。 end index.erb というテンプレートファイル利用することを宣言してます ※ 参考情報:仮にファイル名をlayout.erbとした場合には erb :layout という記述になります 12年8月21日火曜日
  • 23.
    Photo by Tech109 (http://www.flickr.com/photos/craigsd/4687453830/) 今回の学習の仕上げ 12年8月21日火曜日
  • 24.
    動作イメージ ①localhost:4567/template ②Sintara実行 ③twitter APIアクセス ⑤tweet結果を加工して画面表示 ④tweet取得 12年8月21日火曜日
  • 25.
    まずは irb(InterativeRuby)で動作確認 ✤ ターミナル上でrubyの式を簡単 に入力/実行できるツール ✤ ターミナル上で irb と入力して Enterキーを押すことで、irbが 利用可能になります 12年8月21日火曜日
  • 26.
    irbでtwitterのパブリックタイムラインを確認 する $ruby-1.9.2-p320 :001 > url ='https://api.twitter.com/1/statuses/ public_timeline.json?count=3' => "https://api.twitter.com/1/statuses/public_timeline.json?count=3" $ruby-1.9.2-p320 :002 > require('json') => true $ruby-1.9.2-p320 :003 > require('open-uri') => true $ruby-1.9.2-p320 :004 > json = open(url).read => [..内容多いので省略] $ruby-1.9.2-p320 :005 > JSON.parse(json).each { |items| p items['text']} => [..内容多いので省略] ※注意※ $ruby-1.9.2-p320 :xxx> 以降の文字だけ入力していきます 灰色の部分がターミナル上で表示される結果になります。 12年8月21日火曜日
  • 27.
    index.erbの修正 views/index.erb <html>   <head>     <title>erb sample</title>   </head> <body>   <h1>ERB sample</h1>   <ul>     <%        url ='https://api.twitter.com/1/statuses/public_timeline.json?count=3'        json = open(url).read        JSON.parse(json).each do |items|     %>     <li>       <%= items["text"] %>     </li>     <% end %>   </ul> </body> </html> 12年8月21日火曜日
  • 28.
    app.rb 完成版 require 'sinatra' require 'open-uri' require 'json' get '/hello' do   'hello' end get '/hello/:yourname' do   'hello!' + params[:yourname] end get '/template' do   erb :index end 12年8月21日火曜日