9
17

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

3分で作る超簡単LINEチャットボット

Posted at

#はじめに
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コンソールにアクセスして右上の「ログイン」から自分のアカウントでログインしてください。

初回ログイン時は、ユーザ登録を求められるので必要事項を入力します。

「新規プロバイダー作成」をクリックして、プロバイダー作成画面に移ります。
WS000004.JPG

「プロバイダー名」を入力し、「確認する」をクリックします。
これから作るボットの提供元名です。
自分の名前やチーム名などお好きにどうぞ。
WS000005.JPG

「作成する」をクリックします。
WS000006.JPG

「Messaging API」の「チャネルを作成する」をクリックします。
WS000007.JPG

チャネルの以下の値を設定し、「確認」をクリック

  • アプリ名:任意のアプリ名(ここでは「夏休み1行日記お助けマン」)
  • アプリ説明:任意のアプリ説明
  • プラン:Developer Trial
  • メールアドレス:ご自身のメールアドレス
    WS000009.JPG

「同意する」をクリック
WS000010.JPG

各規約に同意して、「作成」をクリック
WS000011.JPG

作成したチャネルのアイコンをクリック
WS000012.JPG

アクセストークン(ロングターム)の「再発行」をクリック
※ボットから返信しない場合は必要ないですが、今後の展開も考慮して
WS000013.JPG

「再発行」をクリック
WS000014.JPG

下記の設定をします。
メッセージ送受信設定

  • Webhook送信: 利用する

LINE@機能の利用

  • 自動応答メッセージ: 利用しない
  • 友達追加時あいさつ: 利用しない

以上で一旦、LINE側の設定は完了です。
後ほど、この画面に戻ってくるのでそのまま残しておいてください。

##Google SpreadSheetの準備
Google Driveにアクセスします。

任意の場所にスプレッドシートを作成します。
左上の「新規」から「Googleスプレッドシート」→「空白のスプレッドシート」をクリックし、新規スプレッドシート編集画面に移ります。
WS000060.JPG

下記項目を入力します。

  • ファイル名:任意(ここでは「1行日記」)
  • A列の1行目:年月日
  • B列の1行目:天気
  • C列の1行目:今日あったこと
    WS000063.JPG

スプレッドシートIDをコピーします。
Chrome(ブラウザ)のURL欄の「https://docs.google.com/spreadsheets/d/」以降から「/edit#gid=0」の間の文字をコピーします。
これが【スプレッドシートID】となります。

##Google Apps Script の設定
Google Apps Scriptでコーディングします。
こちらがボットの脳になります。脳と言いつつ、ものすごく単純です。。。

Google Driveにアクセスします。

左上の「新規」から「その他」→「Google Apps Script」をクリックし、コード作成画面に移ります。
WS000042.JPG

表示されているコードをすべて下記コードに貼り替えます。

2行目の「'ここをスプレッドシートIDで貼り替え'」の部分を、先ほどコピーした【スプレッドシートID】で貼り替えます。

保存します。(「ファイル」→「保存」)

コード.js
//対象のスプレッドシートの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);
  
}

WS000058.JPG

「公開」→「ウェブアプリケーションをして挿入」をクリックします。
WS000048.JPG

下記設定をし、「導入」をクリックします。

  • プロジェクトバージョン:New
  • 次のユーザーとしてアプリケーションを実行:自分(メールアドレス)
  • アプリケーションにアクセスできるユーザー:全員(匿名ユーザーを含む)
    WS000049.JPG

「許可を確認」をクリックします。
WS000050.JPG

「詳細」をクリックします。
WS000051.JPG

「(安全ではないページ)に移動」をクリックします。
WS000052.JPG

「許可」をクリックします。
WS000054.JPG

「現在のウェブアプリケーションのURL」欄に表示されているURLをコピーします。
これが【Webhook URL】になります。

「OK」をクリックします。
WS000055.JPG

##もう一度、LINEの設定
先ほどのLINE設定画面を表示します。

「Webhook URL」の「編集」をクリックし、先ほどコピーした【Webhook URL】を貼り付けます。
※「https://」は、省いてください。

「更新」をクリックします。

WS000056.JPG

お疲れ様です!!!
完成しました!!!

では、動作確認してみましょう!

#動かしてみよう!
LINEの設定画面の下の方に、友達追加用のQRコードやLINE IDが表示されいますので、これを利用して
まずは、作成したボットとお友達になりましょう。

WS000057.JPG

お友達なったボットアカウントに対して、下記の構成でメッセージを送ると、自動的に作成したスプレッドシートに各項目が書き込まれるはずです!!

  • 1行目:天気
  • 2行目:今日あったこと

例:
晴れ
LINEボットを作成しました。楽しかったです。

#まとめ
いかがでしたでしょうか。
3分で作れましたでしょうか。

近々、返答機能を追加したボットの作り方も公開予定です。

9
17
4

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9
17

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?