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

記事の概要

『恋するプログラム』の［CHAPTER4 あこがれのGUI］で作成するGUI版のチャットボットプログラムを参考に、チャットボットのWebアプリをSinatraを使って作成します。

開発環境

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

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

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

ノビィと会話する

ブラウザにビデオチャットのようなインターフェースを表示し、ユーザの入力に応答するチャットボットを動かします。

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

~/programinlove
    |- proto.rb                 // CUIチャットボットのメインファイル
    |- unmo.rb                  // チャットボットオブジェクトのモデル
    |- responder.rb             // 応答オブジェクトのモデル
    |- noby.rb                  // Webアプリのメインファイル
    |- /views                   // ビューのテンプレートを配置するディレクトリ
    |     |- index.erb          // チャットのインターフェースを表示するビュー
    |- /public                  // 静的ファイルを配置するディレクトリ
          |- styles.css         // チャットのインターフェースをレイアウトするcss
          |- /img               // 画像ファイルを格納するディレクトリ
               |- /normal       // 平常時の画像を格納するディレクトリ
               |    |-0000.png
               |- /blink        // 瞬きの画像を格納するディレクトリ
                    |-0000.png
                    |-0001.png

ソースコード

noby.rbは、前回までの記事でメインファイルとして使用していたapp.rbのファイル名を変更して作成しました。
Webアプリ版のチャットボットでは、GUI部分はindex.erbとstyles.cssで作成していますので、このnoby.rbは、unmo.rbからチャットボットオブジェクトを生成し、ユーザの入力に対してresponder.rbからの応答を表示する役割のみを担っています。

チャットボットオブジェクトの生成や応答機能の記述は、他に良い書き方があるかもしれませんが、とりあえず動くコードが書けたのでこれで進めていこうと思います。

unmo.rbは、１行目のrequire responderをrequire_relative responderに変更しましたが、responder.rbはサンプルプログラムと同様の記述で、変更はありません。

noby.rb

require 'sinatra'
require 'sinatra/reloader'

require_relative 'unmo'


# 会話ログを格納する配列
log_area = []

# ヘルパーメソッドを定義する
# ルーティングメソッドの中で使う
helpers do
  def noby
    # ノビィ生成
    @noby ||= Unmo.new('noby')
  end

  def prompt(resp_opt)
    # 応答を表示する際のプロンプトを作成
    resp_opt ? "#{noby.name}：#{noby.responder_name}" : "#{noby.name}"
  end
end

# URL'/'にアクセス
get '/' do
  # 会話ログを初期化してnobyfomを表示
  log_area = []

  erb :index
end

# URL'/'にPOSTメソッドでアクセス
post '/' do
  # ユーザの入力を取得
  talk_text = params['inputarea']

  # Responderを表示するチェックボックスの状態を取得
  # チェックされてる場合は状態を維持
  resp_opt = params['respoption']
  @check = "checked" if resp_opt

  # ユーザの入力があれば応答して会話ログに表示
  unless talk_text.empty?
    @responder_resp = noby.dialogue(talk_text)
    log_area << "> #{talk_text}<br>"
    log_area << "#{prompt(resp_opt)}> #{@responder_resp}<br>"
  end

  @talk_log = log_area.join

  erb :index
end

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

実行結果

ターミナルでnoby.rbを動かし、ブラウザにhttp://localhost:4567を入力します。

~/programinlove
$ruby noby.rb

f:id:b0npu:20160107142020p:plain

ブラウザチェックはFirefoxしかしていませんし、ろくなテストもしていないので、どんな誤動作があるかはわかりませんが、瞬きをするキャラクターと噛み合わない会話を楽しむことが出来ます。

f:id:b0npu:20160118221025p:plain

参考書籍

参考記事

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

あかんわ

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