あかんわ

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

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

記事の概要

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

目次

開発環境

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

ノビィと会話する

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

アプリケーションディレクトリの構成
~/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.erbstyles.cssで作成していますので、このnoby.rbは、unmo.rbからチャットボットオブジェクトを生成し、ユーザの入力に対してresponder.rbからの応答を表示する役割のみを担っています。

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

unmo.rbは、1行目のrequire responderrequire_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については、こちらの記事を参考にさせていただきました。

関連記事

- 恋するプログラムをSinatraでWebアプリにするPart.0[はじめに]
- 恋するプログラムをSinatraでWebアプリにするPart.1[CHAPTER3 ほんとに無能]
- 恋するプログラムをSinatraでWebアプリにするPart.2[CHAPTER4 あこがれのGUI]①
- 恋するプログラムをSinatraでWebアプリにするPart.3[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[おわりに]