はじめに
ITスキルがないけど、プログラム未経験だけど、LINEでチャットボットを作って見たい方が
一定数いると勝手に想像して、その方々に向けて本記事を書きました。
なので、必要以上に丁寧に手順を記載しておりますので、あしからず。
これを機にITの世界やプログラミングの世界に、ハマっていただけると嬉しいです。
概要
今回は、できるだけ簡単にチャットボットを作ります。
目標タイム3分です。
参考元
LINEのBot開発 超入門(前編) ゼロから応答ができるまで
https://qiita.com/nkjm/items/38808bbc97d6927837cd
Google Spreadsheet を簡易 Webサーバーとして動かして、手軽にWebHookを受け取る方法
https://qiita.com/kunichiko/items/7f64c7c80b44b15371a3
Google Apps ScriptからHTTP POST
https://qiita.com/n0bisuke/items/a31a99232e50461eb00f
今回のボットができること
めんどくさかった夏休みの1行日記。。。
これがLINEで書くことができたら、あんなに最終日に徹夜することもなかったのに。。。
ということで、LINEにメッセージを送って、Googleスプレッドシートに書き溜めてくれるボットを作りましょう!
まずは最小構成で
目指したのは、ノンコーディングで費用0。
でも、無理でした。30行弱のコードだけお許しください。
LINEとGoogle Apps ScriptとGoogle Spreadsheet で。
準備するもの
- LINE アカウント
- Google アカウント
つくります
※本作業はすべて「Chrome」で行ってください。
まずはLINE DeveloperでLINE側の設定
LINEのボット設定をします。
こちらがボットの口と耳になります。
LINE Developerコンソールにアクセスして右上の「ログイン」から自分のアカウントでログインしてください。
初回ログイン時は、ユーザ登録を求められるので必要事項を入力します。
「新規プロバイダー作成」をクリックして、プロバイダー作成画面に移ります。
「プロバイダー名」を入力し、「確認する」をクリックします。
これから作るボットの提供元名です。
自分の名前やチーム名などお好きにどうぞ。
「Messaging API」の「チャネルを作成する」をクリックします。
チャネルの以下の値を設定し、「確認」をクリック
アクセストークン(ロングターム)の「再発行」をクリック
※ボットから返信しない場合は必要ないですが、今後の展開も考慮して
下記の設定をします。
メッセージ送受信設定
- Webhook送信: 利用する
LINE@機能の利用
- 自動応答メッセージ: 利用しない
- 友達追加時あいさつ: 利用しない
以上で一旦、LINE側の設定は完了です。
後ほど、この画面に戻ってくるのでそのまま残しておいてください。
Google SpreadSheetの準備
Google Driveにアクセスします。
任意の場所にスプレッドシートを作成します。
左上の「新規」から「Googleスプレッドシート」→「空白のスプレッドシート」をクリックし、新規スプレッドシート編集画面に移ります。
下記項目を入力します。
スプレッドシートIDをコピーします。
Chrome(ブラウザ)のURL欄の「https://docs.google.com/spreadsheets/d/」以降から「/edit#gid=0」の間の文字をコピーします。
これが【スプレッドシートID】となります。
Google Apps Script の設定
Google Apps Scriptでコーディングします。
こちらがボットの脳になります。脳と言いつつ、ものすごく単純です。。。
Google Driveにアクセスします。
左上の「新規」から「その他」→「Google Apps Script」をクリックし、コード作成画面に移ります。
表示されているコードをすべて下記コードに貼り替えます。
2行目の「'ここをスプレッドシートIDで貼り替え'」の部分を、先ほどコピーした【スプレッドシートID】で貼り替えます。
保存します。(「ファイル」→「保存」)
//対象のスプレッドシートのID(対象のURLを開いてURLの「https://docs.google.com/spreadsheets/d/」以降から「/edit#gid=0」の間の文字列)
var SPREADSHEET_ID = 'ここをスプレッドシートIDで貼り替え';
function doPost(e) {
// ユーザーのメッセージを取得
var userMessage = JSON.parse(e.postData.contents).events[0].message.text;
//LINEメッセージを「改行」で分割
var messageParameter = userMessage.split(/\r\n|\n/);
//対象のスプレッドシートを取得
var targetSs = SpreadsheetApp.openById(SPREADSHEET_ID);
//対象のシート取得
var targetSht = targetSs.getSheetByName('シート1');
//最終行取得
var lastRow = targetSht.getLastRow();
//現在年月日取得
var date = Utilities.formatDate(new Date(), 'Asia/Tokyo', 'yyyy年MM月dd日');
//各セルに書き込み
//A列に年月日
targetSht.getRange('A' + (lastRow + 1)).setValue(date);
//B列に天気(メッセージの1行目)
targetSht.getRange('B' + (lastRow + 1)).setValue(messageParameter[0]);
//C列に今日あったこと(メッセージの2行目)
targetSht.getRange('C' + (lastRow + 1)).setValue(messageParameter[1]);
return ContentService.createTextOutput(JSON.stringify({'content': 'post ok'})).setMimeType(ContentService.MimeType.JSON);
}
「公開」→「ウェブアプリケーションをして挿入」をクリックします。
下記設定をし、「導入」をクリックします。
「現在のウェブアプリケーションのURL」欄に表示されているURLをコピーします。
これが【Webhook URL】になります。
もう一度、LINEの設定
先ほどのLINE設定画面を表示します。
「Webhook URL」の「編集」をクリックし、先ほどコピーした【Webhook URL】を貼り付けます。
※「https://」は、省いてください。
「更新」をクリックします。
お疲れ様です!!!
完成しました!!!
では、動作確認してみましょう!
動かしてみよう!
LINEの設定画面の下の方に、友達追加用のQRコードやLINE IDが表示されいますので、これを利用して
まずは、作成したボットとお友達になりましょう。
お友達なったボットアカウントに対して、下記の構成でメッセージを送ると、自動的に作成したスプレッドシートに各項目が書き込まれるはずです!!
- 1行目:天気
- 2行目:今日あったこと
例:
晴れ
LINEボットを作成しました。楽しかったです。
まとめ
いかがでしたでしょうか。
3分で作れましたでしょうか。
近々、返答機能を追加したボットの作り方も公開予定です。