概要
webアプリ上でマルコフ連鎖を利用して応答するチャットボットを作った。
動機
「人工無脳」というアプリをご存じだろうか。
ユーザーが入力した言葉を覚えて会話をしていくボット
こちらが話す内容によっては全く違う性格を見せることもある。
一見賢そうに聞こえるが、なかなか会話はうまくいかないものだ、、
聞いてもいないことを答えたり、意味があるのかわからないような返しをしたり、
だが、それが楽しい。次はどんな返答をするのか、、、
それを見てて思った。
「これ、何とか再現できないかな」
やってみよう
開発環境
Google Apps Script(GAS)
仕様
ユーザーから入力された文章をもとにマルコフ連鎖を利用して応答文を生成する
実装
基本の挙動の流れ
webアプリ上で入力された文章を蓄積していく
生成の際は過去に入力されたものも含めて参照することで応答文章の内容に幅をもたせる
会話を続けたい
ブラウザ上で扱う（アプリ表示時の一時的なもの）変数だと、再読み込みした際にそこまでの履歴が消えてしまう
いつでもどこでも会話(?)を楽しめる形がいい
そこでGASの特徴を生かし、対話のログをGoogleドライブにアクセスして保存するということを行う。これによりいつでもデータを参照できるようになった。
Googleドライブに保存されたファイルには、それぞれ完全に個別のIDが割り当てられるため、それを利用し個々のログを識別する
アプリ上からIDを入力・読み込みできるようにすれば基本的な動作は完成だ
しかしID入力がめんどくさい。現状では、いちいちコピーして保存･管理、アプリに手入力（または貼り付け）という操作を行う必要があり、不便だと感じた。
、、、IDをファイルに格納して扱えば解決するのではないか
アプリ内でテキストファイルをダウンロードできればいちいちユーザー側でファイルを作成する手間がなくなる
こうすれば比較的扱いやすく、ファイル名を変更することで管理・関連付け等も容易だ（中身の内容は変わらないので安全）
加えてファイルからIDを読み取れるように（都度IDファイルを開く必要がない）コードを追加して完了
ひと手間
操作性やUIの細かな改善を行う
- 対話エリアの文に背景色がつく
- 送信文を入力後、Enterキーで送信できる
- ダウンロードするファイルの名前を変更できる
- スマホで表示しても見やすい
使い方
対話を始める
「チャット」エリアの入力欄（「ここに入力」）に文章を入力して、「send」ボタン（またはEnter）で確定する
ログの管理
「チャット」エリアの一番下にある「ID: ～」以降の内容をコピーする
それを「ログファイルを読み込む」の入力欄に入力することで、該当するログを読み込んで対話を再開することが可能
 ↑IDの下部にあるボタンから、テキストファイル形式でダウンロードすることもできる
|
 入力欄下部からは、デバイス内のファイルを選択して読み込める
|
|---|
IDのダウンロード
事前にファイル名を入力して変更すればわかりやすくなる
アプリを利用する
以下のリンクからアプリにアクセスできます。
「人工無能」
1.0.0
1.1.0 (2025.05.25)
1.2.0 (2025.07.15)
1.2.1 (2025.07.16)
1.2.2 (2025.08.01)
1.2.3 (2025.09.20)
アップデート情報
詳細
1.1.0
○応答文の読み上げ機能を追加
入力欄そばのボタンからON/OFFを切り替え可能
・応答時の自動スクロールを行う
仕様の影響で対話が進むにつれ入力欄が下に下がり、快適に入力しづらくなっていたため改善
・キー入力で入力欄にフォーカス
応答後にTabもしくはEnterを押すことですぐに入力可能な状態になる
1.2.0
〇BGMの再生機能を追加
「BGMを再生」の部分で操作が行える
デバイス内のファイルを読み込むことが可能
・その他細かい仕様変更
1.2.1
◯BGM再生機能の修正
Safariで音声ファイルが選択可能になった
1.2.2
〇ログ保存先が決定しない問題を解消
すでに作成してあるログのIDを読み込む際に、アプリ起動時の処理との兼ね合いでIDが正しく設定されない場合があった
1.2.3
・ログIDのダウンロードボタンが押せない問題を修正
・ID入力欄が空の場合読み込みボタンが押せないようになった
参考サイト
【初心者歓迎】HTML要素のdisabled属性を有効化・無効化させる方法とは
JavaScript | 論理演算子
40 代おっさん GASのフォルダ・ファイルのコレクションを操作する
【GAS 基礎】Blobオブジェクト ファイル・データ操作
GASでGoogleドライブのファイルに新しい版をアップロードする方法
[GAS] 関数の引数を省略・デフォルト値を設定
GASとHTMLで作ったWebアプリをスマホ対応させる方法
JavaScriptでtextareaの高さを計算して自動で可変させる方法
JavaScriptで要素からfocusを外す方法を現役エンジニアが解説【初心者向け】