恋するプログラムをSinatraでWebアプリにするPart.2［CHAPTER4 あこがれのGUI］①

記事の概要

『恋するプログラム』の［CHAPTER4 あこがれのGUI］で作成するGUIプログラムのサンプルを参考に、Sinatraを使ったWebアプリ*1を作成します。

開発環境

OSX 10.11.2 El Capitan
- テキストエディタ： MacVim
- ターミナルエミュレータ： Macターミナル
- シェル： zsh
- パッケージマネージャ： Homebrew
- ブラウザ： Firefox
Ruby 2.0.0p645
- バージョンマネージャ： rbenv
- Webフレームワーク： Sinatra

参考記事
Rubyの開発環境構築は、こちらの記事を参考にさせていただきました。

rbenvつかってrailsチュートリアルやってみよう！ | niwatako$

ボタンをクリックすると数字が増えるWebアプリ

Webアプリの手始めに、クリックすると数字が増えるボタンをブラウザに表示します。

アプリケーションディレクトリの構成

~/programinlove
    |- proto.rb         // このアプリには関係ありません
    |- unmo.rb          // このアプリには関係ありません
    |- responder.rb     // このアプリには関係ありません
    |- app.rb           // 数字が増えるWebアプリのメインファイル
    |- /views           // ビューのテンプレートを配置するディレクトリ
          |- index.erb  // ボタンを表示するビュー

ソースコード

app.rbでは、サンプルプログラムを参考にして作ったMyFormクラスをSinatraのルーティングで操作し、ビューに表示するインスタンス変数@timesを生成します。

index.erbには@btn_captionの値を表示するボタンを設置し、SinatraのルーティングでMyFormクラスのインスタンス変数@timesの値を表示します。

app.rb

require 'sinatra'
require 'sinatra/reloader'

# ブラウザに表示するフォームのクラス
class MyForm
  # @timesへのアクセスメソッド
  attr_accessor :times  

  def initialize
    @times = 0    # ボタンをクリックした回数
  end

  def btn_clicked
    # ボタンをクリックするとカウントアップ
    @times += 1
  end
end
 
myform = MyForm.new

# URL'/'にアクセス
get '/' do
  # ボタンの数字を0にしてviewsフォルダのindex.erbを表示
  myform.times = 0
  @btn_caption = myform.times
  erb :index
end

# URL'/'にPOSTメソッドでアクセス
post '/' do
  # ボタンの数字を増やしてviewsフォルダのindex.erbを表示
  @btn_caption = myform.btn_clicked
  erb :index
end

views/index.erb

<html>
  <body>
    <!-- ボタンを押すとPOSTメソッドで'/'にアクセス -->
    <form action="/" method="post">
      <!-- Rubyで生成したインスタンス変数@btn_captionをボタンに表示 -->
      <button type="submit"><%= @btn_caption %></button>
    </form>
  </body>
</html>

このコードのコミットには、[chapter4-2]のタグが付いてます。

実行結果

まず最初に、ターミナルでapp.rbを動かします。

~/programinlove
$ruby app.rb
[2016-01-02 14:10:45] INFO  WEBrick 1.3.1
[2016-01-02 14:10:45] INFO  ruby 2.0.0 (2015-04-13) [x86_64-darwin12.6.0]
== Sinatra (v1.4.6) has taken the stage on 4567 for development with backup from WEBrick
[2016-01-02 14:10:45] INFO  WEBrick::HTTPServer#start: pid=8299 port=4567

Sinatraに呼ばれてWebサーバのWEBrickが動いたのを確認したら、ブラウザにhttp://localhost:4567を入力します。

f:id:b0npu:20160107142020p:plain

ターミナルには、GETでアクセスしたログが表示されます。

::1 - - [02/Jan/2016:14:12:33 +0900] "GET / HTTP/1.1" 200 286 0.1703
localhost - - [02/Jan/2016:14:12:33 JST] "GET / HTTP/1.1" 200 286
- -> /

表示されたボタンをクリックすると数字が増え、

f:id:b0npu:20160107152215p:plain

ターミナルにPOSTでアクセスしたログが表示されます。

::1 - - [02/Jan/2016:14:13:35 +0900] "POST / HTTP/1.1" 200 286 0.0016
localhost - - [02/Jan/2016:14:13:35 JST] "POST / HTTP/1.1" 200 286
http://localhost:4567/ -> /

参考書籍

参考記事

Sinatraについては、こちらの記事を参考にさせていただきました。

*1:ブラウザで動くGUIアプリ

あかんわ

覚えたことをブログに書くようにすれば多少はやる気が出るかと思ったんです