あかんわ

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

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

チャットボット Sinatra Ruby プログラミング

記事の概要

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

目次

開発環境

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

ボタンをクリックすると数字が増える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については、こちらの記事を参考にさせていただきました。

関連記事

- 恋するプログラムをSinatraでWebアプリにするPart.0［はじめに］
- 恋するプログラムをSinatraでWebアプリにするPart.1［CHAPTER3 ほんとに無能］
- 恋するプログラムをSinatraでWebアプリにするPart.3［CHAPTER4 あこがれのGUI］②
- 恋するプログラムをSinatraでWebアプリにするPart.4［CHAPTER4 あこがれのGUI］③
- 恋するプログラムをSinatraでWebアプリにするPart.5［CHAPTER5 辞書を片手に］
- 恋するプログラムをSinatraでWebアプリにするPart.6［CHAPTER6 感情コントロールの魔術師］①
- 恋するプログラムをSinatraでWebアプリにするPart.7［CHAPTER6 感情コントロールの魔術師］②
- 恋するプログラムをSinatraでWebアプリにするPart.8［CHAPTER7 学習のススメ］①
- 恋するプログラムをSinatraでWebアプリにするPart.9［CHAPTER7 学習のススメ］②
- 恋するプログラムをSinatraでWebアプリにするPart.10［CHAPTER7 学習のススメ］③
- 恋するプログラムをSinatraでWebアプリにするPart.11［CHAPTER8 文章を作り出す］
- 恋するプログラムをSinatraでWebアプリにするPart.12［CHAPTER9 ノビィ、ネットワークにつながる］
- 恋するプログラムをSinatraでWebアプリにするPart.13［おわりに］

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