やったこと
「また何もせず1か月経ってしまった..。
計画を立ててもその通り行動できず、
とりあえず現状に自覚的になろうと思って、
PCなりスマホで日々を記録しようとするも、
それすら続かない..。」
という現状を打破すべく、自動でしつこく予定をリマインドしてくる、
PC・スマホを操作せずとも音声対話でやり取りできるプログラム作ってみました。
chrome(上で動くjs)とGASで、PCのマイクとスピーカーで音声認識・音声合成するプログラムです。
- ページにアクセスすると、15分おきに「ちゃんと～に取り組んでる？」と聞いてくる
- 「違う」と答えると、「じゃあ何してるの？」と聞いてくる
- 「youtube見てる」とか答えると、「youtubeね。なんで？」と聞いてくる
- 「めんどくさいから..」とか答えると、「めんどくさいのね 。記録したよ」
的な会話できます。（会話の文言は自分で設定した文言になる）
スマートスピーカーでやったほうが良いの作れそうじゃんって感じですが、持ってないのでPCで代用しました。
コードもロジックもかなり荒い作りなので、もっとこうした方がいいよなど教えていただきたく投稿しました。
作ったコード
https://github.com/hugepeach/GAS-talk-reminderにソース置いています
目次
- 全体イメージ
- スプレッドシートの作成
- カレンダー記録用シート
- 返答用辞書シート
- ログ記録用シート
- ソースの作成 (from github)
- 音声合成 Synthesis (js)
- 音声認識 Recognition (js)
- 連携処理 (js & GAS)
- 使い方
- 音声リマインダーで日々の計画実行力は上がったか
1. 全体イメージ
- Google App Script
- Google スプレッドシート
- task カレンダーの予定保存
- dict 返答用辞書
- log 会話記録
- Google カレンダー
- javascript
- Web Speech API
- Speech Synthesis(音声合成)
- Speech Recognition(音声認識)
- Chrome(実行環境)
- マイク・スピーカー(PC内臓)
2. スプレッドシートの作成
スプレッドシートの準備をしていきます。
① 適当な名前でスプレッドシートを作成
② ツール>スクリプトエディタ から、GASのプロジェクトを立ち上げる
2-1. カレンダー記録用シート
カレンダーの予定タイトルと開始時間、終了時間を記録する用のシートを作成する。
① シートtaskを作成
② githubにあるtaskのCSVファイルをインポートする
2-2. 返答用辞書シート
聞き取った音声により返答する文言を分岐させる、辞書用のシートを作成する。
① シートdictを作成
② githubにあるdictのCSVファイルをインポートする
2-3. ログ記録用シート
PCが読み上げた文言と、聞き取った言葉を記録する用のシートを作成する。
① シートlogを作成
② githubにあるlogのCSVファイルをインポートする
3. ソースの作成 (from github)
githubにあるソースをGASのプロジェクトに張り付けていき、数か所コードを自分用に変え、トリガーの設定をすれば動くようになる。
ファイル通しの関係図は以下のイメージ👇
① ファイル名コード.gsをここからコピペし張り付ける
② 213行目カレンダーのカレンダーのIDを入力を書き換える
③ ファイル>新規作成>HTMLファイルを押し、ファイル名index.htmlとspeech-synthesis.htmlとspeech-recognition.htmlの3つを作成し、該当するコードを githubからコピペする
④ index.html9行目のスプレッドシートのIDを書き換える
⑤ カレンダーから自動で予定を取得させるトリガーを設定する
- 実行する関数：
getCalenderTask - 実行するデプロイを選択：
HEAD - イベントのソースを選択：
時間ベースのタイマー - 時間ベースのトリガーのタイプを選択：
日付ベースのタイマー - 時刻を選択：
午前0時~1時
とすると、毎晩翌日の予定をスプレッドシートのtaskに書き込んでおいてくれる。
⑥ webアプリの公開をする
これでプログラムが動くようになりました！
3-1. 音声合成 Synthesis (js)
speech-synthesis.htmlで音声合成する。
Web Speech APIのSpeechRecognitionを利用。
引数で受け取った値をそのまま読み上げる。発した音声はhtmlのtextarea id="speak_text"に書き込む。
3-2. 音声認識 Recognition (js)
speech-recognition.htmlで音声認識する。
Web Speech APIのSpeechRecognitionを利用。
聞き取っている音声が途切れるのを検知し、音声認識する。聞き取った文言はhtmlのtextarea id="recognize_text"に書き込む。
3-3. 連携処理 (js & GAS)
コード.gsとindex.htmlでtalk_dataという配列をやり取りし、条件分岐しながら返答している。
- gasからhtmlを呼び出す
- htmlが読まれたとき、15分間のカウントを始め、また現在時刻にカレンダーに予定されているタイトルを取得（@no1）
- jsからカレンダーのタイトルを格納した
talk_dataをgasに送る - gasでdictシートの探索をし、返答文言を生成
-
speech-synthesis.htmlのspeak関数で音声合成 -
speech-recognition.htmlのrecognize関数で読み取り開始 - 読み取りが完了し、画面に文言が表示されたら認識した文言を
talk_dataに格納し再びgasに送る - 会話が終わるまで
talk_dataのやり取りを繰り返す。無言で1分経過、セルの値が@exit、セルの値が@-、dictシートの最終行に到達、エラーが発生した場合、処理を終了する - 15分後新しいタブを開き、
1.から再度処理を開始
シートの参照方法
シートdictで返答文言を探す際のルールは、スプレッドシートの右の方にメモしてあります。
4. 使い方
chromeで公開したwebアプリのurlにアクセスすれば自動的に処理が始まります。
例：
bot「予約とる、に取り組んでいますか？」
you「違う」
bot「ちがう、ですね。何をしていますか？」
you「ライン」
bot「ライン、ですね。なぜですか？」
you「急ぎの連絡だから」
bot「急ぎの連絡だから、ですね。記録しました。」
という感じで会話できる。
※音声認識と返答文言の作成には数秒時間がか買ってしまいますが。
5. 音声リマインダーで日々の計画実行力は上がったか
無意識にだらつくことが減ると思う(意識的にだらつく)。若干、計画通り過ごさないとなというモチベーションは上がった。
ただ、音楽聞いてるときやラインとかの返信してるときとかにいきなりタブ開いて「～してますか？」と聞かれるとイライラする...
リマインダーというか目覚ましに近い気もする。
改良について
- googleアカウントさえあれば手軽に音声対話でき、GASとjsとhtmlを書けばどんどん拡張できる
- IFTTTとかと連動すると手軽に色々連動できそう
- イヤホンのマイクでもうまくうごくPCの設定にしたらもっと便利
- データの受け渡しとか、コールバック処理を整理したらもう少しレスポンスよくなる気がする
参考させて頂いた記事
Qiita: Google Spread Sheetを用いた音声対話型チャットボットを作ってみた
Qiita: Webページでブラウザの音声合成機能を使おう - Web Speech API Speech Synthesis
意見・アドバイスなどあればコメントください！