みなさん、こんにちは。Shiftallの佐藤です。
私の職種は営業・マーケティングなのですが、まだ始まったばかりの会社ということもあって現在は主にオフィス作りに関わる部分で活動をしています。具体的には必要備品の発注・搬入・組み立てなどの作業だったりなど。
とはいえ時間があるので、ちょうど1ヶ月ぐらい前から日常の業務と平行してプログラミングを学び始めました。何日か学習したのち、最初の成果物である「ごみ捨て当番をランダムで決めてくれるbot」を作りました。
Botがゴミ捨て当番を無作為に決めてくれるので、誰かが「ああ、ゴミ溜まってる。。。捨てなきゃ～」と余計な心配や苦労をする必要がないのと、また誰か指図されるわけでなく当番が決まるため、誰かを恨む、恨まれることはありません。社内はとても平和に保たれています。プログラミング最高！
今回はそのGoogle Apps Scriptを用いたTypetalkのチャットBotの作り方について紹介します。
Google Apps Scriptを選んだ理由
私は今回「Google Apps Script」という、Google社が提供しているJavaScriptベースの開発環境を使いました。
プログラミングというとまずはPC上でプログラムを動かすために開発環境を構築する必要がありますが、Google Apps Scriptはクラウド型の開発環境なのでインターネットにつながる環境さえあれば、ブラウザからアクセスして直ぐにコードを書くことができます。またGoogle Apps Script独自のメソッドを使うことでGmailやGoogleカレンダーなどの各サービスを操作したり、情報を引っ張ってくることができるので、各種Googleアプリと連携させたいという時に非常に便利です。
また今回紹介するようなチャットBotなどWeb上で情報をやりとりさせる必要のある仕組みだと、いつでも動かせられるようにWebサーバーを立てる必要がありますが、Google Apps ScriptではそのままGoogleのサーバー上で動かすことができるので、わざわざサーバーを立てる必要がないのもポイントです。
こうした理由からプログラミングを始める人に取っつきやすそうだなと思い、私はGoogle Apps Scriptを選びました。
Botの仕様
Botの仕様ですが、Typetalk上に作られたBotにメンションを送ると指定したGoogle Apps Scriptにトリガーが送られ、スクリプトが起動するようになっています。スクリプト内で社員の名前とTypetalkのIDがランダムで選ばれ、最終的にテキストになってチャットに返されるという仕組みです。
それでは作り方を見ていきましょう！
1. TypetalkでBotのアカウントを作成する
まずBotのアカウントを作成するところから始めましょう。
TypetalkでBotを動かしたい好きなトピック（チャットグループ）にアクセスします。今回は例に「My Bot Room」というトピック内にBotを作ることにします。トピック名のとなりにある「歯車」マークをクリックして設定画面を出します。
メニューから「ボット」を選択します。そして「新規追加」をクリック。
適当にIDと名前を入力し「作成」ボタンをクリックします。
今回のアプリは、ユーザーがBotにメンションを送ったら動く仕組みなので「Webhook」という、Typetalk側からGoogle Apps Scriptを動かすためのURLを設定する必要があります。今の段階ではGoogle Apps Script側の準備が完了していないので、その設定はあとに回します。
先ほどの設定画面のBot一覧画面に作成したアカウントが表示されていたら、Botアカウントの作成が完了です。
これでトピック内に「@」をつけてメンションを送ろうとすると、作成したBotの名前が出るようになりました。当たり前ですがBotの裏では何もスクリプトに紐付いていないので、この状態ではどんなにメッセージを送っても何も反応が返ってきません。
2. Google Apps Script側を設定する
次にGoogle Apps Script（以下、GAS）側で、ゴミ捨てする人を選びTypetalkのボットに情報を返す、という処理を行うコードを書いていきましょう。
GASのプログラミングは、Googleが用意した「スクリプトエディタ」というWeb上ツールを使って書いていきます。そのため、GASプログラミングはスクリプトエディタを開く動作からはじまります。
スクリプトエディタの開き方には、いくつか種類があるのですが、今回はスプレッドシートと組み合わせてプログラムを書いていきますので、まずGoogleスプレッドシートを開くところから始めていきます。
2-1. スプレッドシートを開く
Googleドライブを開き、左側にある「新規」と書かれたメニューから「Google スプレッドシート」をクリックして開きます。
2-2. スプレッドシートに名前とTypetalk IDを記入する
スプレッドシートが開いたら、Botにランダムで選択してあげたい名前とTypetalk IDを並べて書いていきます。
2-3. スクリプトエディタを開く
スプレッドシートのメニューにある「ツール」をクリックして「スクリプトエディタ」を開きます。
そうすると「スクリプトエディタ」が立ち上がります。最初はmy functionとしか書かれていないまっさらな状態になっているかと思います。ここに名前とTypetalk IDを選びチャットに返すコードを書いていきます。
2-4. コードを記入する
今回はこんな感じで書いてみました。それぞれのポイントは、以下で説明します。
function doPost(e) {
//アクティブなスプレッドシートを定義
var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
//スプレッドシートの「名前」「TypetalkID」を取得し、定義する
var sheetdata = sheet.getRange(2, 1, sheet.getLastRow()-1, 2).getValues();
//取得した配列データの件数からランダムで何番目か出し、その値を定義（今回の場合、ランダムで0～4がでる仕組み）
var row = Math.floor(Math.random() * sheetdata.length);
//ランダムな数字から名前とTypetalkIDを参照し、定義する
var name = sheetdata[row][0];
var ID = sheetdata[row][1];
//定義した名前とTypetalkIDを使い、チャットに返すメッセージを決める
var result =
{
"message" : "ゴミが溜まっている情報を察知:pouting_cat:\nゴミ捨て当番は"+ name +"さんですニャ。よろしくお願いしますニャ @"+ ID
};
//チャットにつぶやきを返す
return ContentService.createTextOutput(JSON.stringify(result)).setMimeType(ContentService.MimeType.JSON);
}
function名をdoPostにする
TypetalkのWebhookを通じて送信される情報は、GAS側でdoPostという関数名を定義してあげることで受け取ることができます。そのため関数名はdoPostにしてあげましょう。詳細はTypetalk公式のドキュメントを参照してみてください。
名前とTypetalk IDの情報を配列にいれる
名前とTypetalkIDの情報をチャットに返すため、スプレッドシートに記入したデータをGASのスクリプト上で参照できるように「配列」という形で取得します。
「getRange()」というのは、スプレッドシートの範囲を指定してあげるメソッドです。今回の場合は「シートの2列目、1行目を起点にして、スプレッドシートの最終行セルの行番号から1引いた分を縦方向に、2つ横方向に範囲を指定する」と範囲を決め、「getValues()」というメソッドでその範囲の値を取得しました。その取得したデータを今回は変数「sheetdata」と定義してあげます。
文字にするとわかりにくいですが、図にするとこんなかんじです。
これで得られる値は、配列という形で格納され、以下のようになります。
sheetdata == [[佐藤, kazu67], [社員A, sampleA], [社員B, sampleB], [社員C, sampleC], [社員D, sampleD]];
「佐藤」という名前を参照したい時は、配列は0から数えるので、変数「sheetdata」の0番目の中の0番目ということになります。
sheetdata[0][0] == "佐藤";
sheetdata[0][1] == "kazu67";
配列の順番をランダムで決めるにはMath.random()を使う！
ゴミ当番選択Botの要となる、ランダムで社員を選ぶ方法を書いていきます。今回は選ばれる人が5人なので、配列で数えて0～4の数字がランダムで出力されるようにします。
JavaScriptには「Math.random()」という、0以上1未満の乱数を自動生成するメソッドがあるので、それを使います。そしてsheetdata全体の要素数を掛け算してあげましょう。配列の要素数は配列の変数名に「.length」と入れることで出すことができます。
Math.random() * sheetdata.length
これで関数が起動するたびに0以上～5未満の数字が出力されるようになります。0.12のときもあれば、3.27、4.8という数が出てくるようになります。
そこにMath.floorという小数点以下を切り捨てしてくれるメソッドで括ってあげることで、0～4の値をランダムで出力できるようになりました。今回はこれを変数「row」と定義してあげます。
var row = Math.floor(Math.random() * sheetdata.length);
2-5. 作成したスクリプトをアプリケーション化して、URLを発行する
コードが完成したら、Typetalkから自動でプログラムを動かせるようにトリガーとなるURLを発行してあげます。メニューバーの「公開」から「ウェブ アプリケーションとして導入…」をクリックします。
すると設定画面が登場。「プロジェクトバージョン」や「次のユーザーとしてアプリケーションを実行」は特にいじる必要がありませんが、「アプリケーションにアクセスできるユーザー」は必ず「全員（匿名ユーザーを含む）」にしましょう。他の項目にしてしまうとBotからのアクセスが遮断され、チャットBotはうんともすんとも言わない結果になってしまいます。
「導入」をクリックすると、URLが発行されます。このURLは次のTypetalk側のBot設定で使います。
3. Typetalk側のWebhook URLにGASのURLをペーストする
Typetalkの画面に戻り、先ほどのチャットのボット設定の項目に戻りましょう。ページの中段にある「Webhookを利用する」という項目にチェックを入れるとURLを入れるテキストボックスが出てきます。ここにGAS側で生成したURLを入れて「更新」をクリックしましょう。これでWebhookを通じてBotから裏側のGASとつながるようになりました。準備完了です！
4. さあ実践！
さて試してみましょう！
書いたコードがはたして動くのかは、プログラミング初心者からだからもしれませんがドキドキの瞬間。
さあ……
動けっ！
……………
………
……
…
！！！！！！！
これでBotの紹介は以上です。今回はすでにスプレッドシート上で記入された情報の中からランダムで配列の番号を乱数で出力し、チャットに返すというものでした。このBotを作ってしばらくしたのち弊社エンジニアお手製の勤怠システムができてからは、オフィスにいる人の情報を外部から取得してその中からランダムで選ぶという形式にアップデートさせました。いずれその話もこのブログで紹介されるでしょう。
おわりに
Google Apps ScriptとTypetalkを使ったBotの作成ですが、思っていたよりも簡単だったのではないでしょうか？ 今回はチャットBotにメンションが送られたらGAS側にトリガーを送るという仕組みについて説明しましたが、そのほかにもGASのトリガー機能を使って、ある特定のタイミングになったらチャットに情報を出力させるなんてこともできます。
TypetalkとGASを使った他のBot制作事例はTypetalk公式のブログでも公開されているので、チャットBotの作成に興味を持たれたら、ぜひこちらも参考にしてみてくださいね。それではまた！
Typetalk で Google カレンダーの予定を確認 〜 お手軽ボットレシピ | Typetalk ブログ
https://www.typetalk.com/ja/blog/typetalk-bot-manage-googlecalendar/お天気をお知らせするTypetalkボットの作り方 | Typetalk ブログ
https://www.typetalk.com/ja/blog/create-typetalk-bot-weather-alerts/