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

#はじめに
ITスキルがないけど、プログラム未経験だけど、LINEでチャットボットを作って見たい方が
一定数いると勝手に想像して、その方々に向けて本記事を書きました。
なので、必要以上に丁寧に手順を記載しておりますので、あしからず。

これを機にITの世界やプログラミングの世界に、ハマっていただけると嬉しいです。

#概要

今回は、できるだけ簡単にチャットボットを作ります。
目標タイム３分です。

#参考元
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

#今回のボットができること
めんどくさかった夏休みの１行日記。。。
これがLINEで書くことができたら、あんなに最終日に徹夜することもなかったのに。。。

ということで、LINEにメッセージを送って、Googleスプレッドシートに書き溜めてくれるボットを作りましょう！


#まずは最小構成で
目指したのは、ノンコーディングで費用０。
でも、無理でした。３０行弱のコードだけお許しください。

LINEとGoogle Apps ScriptとGoogle Spreadsheet　で。

#準備するもの
- LINE アカウント
- Google　アカウント

#つくります
※本作業はすべて「Chrome」で行ってください。

##まずはLINE DeveloperでLINE側の設定
LINEのボット設定をします。
こちらがボットの口と耳になります。

[LINE Developerコンソール](https://developers.line.biz/ja/)にアクセスして右上の「ログイン」から自分のアカウントでログインしてください。

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

「新規プロバイダー作成」をクリックして、プロバイダー作成画面に移ります。
![WS000004.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/326362/0cf79e85-3211-4295-e22d-169c6f1d4f1f.jpeg)


「プロバイダー名」を入力し、「確認する」をクリックします。
これから作るボットの提供元名です。
自分の名前やチーム名などお好きにどうぞ。
![WS000005.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/326362/fde15603-7ad7-1d66-e5dd-5d825ba1a141.jpeg)


「作成する」をクリックします。
![WS000006.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/326362/b934a0ee-8c38-8767-93ac-c02bdb7f5160.jpeg)

「Messaging API」の「チャネルを作成する」をクリックします。
![WS000007.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/326362/e96182d9-35b6-15fd-ed7f-7d6bfc097677.jpeg)

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

- アプリ名：**任意のアプリ名**（ここでは「夏休み１行日記お助けマン」）
- アプリ説明：**任意のアプリ説明**
- プラン：**Developer Trial**
- メールアドレス：**ご自身のメールアドレス**
![WS000009.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/326362/7778bfb6-bcec-d1c7-c84c-a7fc0b93b2ad.jpeg)


「同意する」をクリック
![WS000010.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/326362/34f91159-e2b4-8afd-a7f7-4846f96ed3bf.jpeg)


各規約に同意して、「作成」をクリック
![WS000011.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/326362/d24a84d9-ba58-8f61-658e-fc124f6432a3.jpeg)


作成したチャネルのアイコンをクリック
![WS000012.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/326362/6c994ae8-3f4b-ce26-6c0b-dfb6b4c6640c.jpeg)

アクセストークン（ロングターム）の「再発行」をクリック
※ボットから返信しない場合は必要ないですが、今後の展開も考慮して
![WS000013.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/326362/2d729e82-50c9-71a6-a51a-2409819911fb.jpeg)

「再発行」をクリック
![WS000014.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/326362/1ccaed6c-110c-04c6-6584-62ac47e8ecbf.jpeg)



下記の設定をします。
**メッセージ送受信設定**
- Webhook送信: **利用する**

**LINE@機能の利用**
- 自動応答メッセージ: **利用しない**
- 友達追加時あいさつ: **利用しない**

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

##Google SpreadSheetの準備
[Google Drive](https://drive.google.com/drive/my-drive)にアクセスします。

任意の場所にスプレッドシートを作成します。
左上の「新規」から「Googleスプレッドシート」→「空白のスプレッドシート」をクリックし、新規スプレッドシート編集画面に移ります。
![WS000060.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/326362/78445ca3-0c1a-2678-178e-f79de57e86b5.jpeg)

下記項目を入力します。

- ファイル名：**任意**（ここでは「１行日記」）
- A列の１行目：**年月日**
- B列の１行目：**天気**
- C列の１行目：**今日あったこと**
![WS000063.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/326362/eae268fb-9902-82b9-e66d-8f85db5c31b4.jpeg)


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




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

[Google Drive](https://drive.google.com/drive/my-drive)にアクセスします。

左上の「新規」から「その他」→「Google Apps Script」をクリックし、コード作成画面に移ります。
![WS000042.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/326362/4a21fb82-00bb-4289-68be-6ee217991e5a.jpeg)

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

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列に天気（メッセージの１行目）
  targetSht.getRange('B' + (lastRow + 1)).setValue(messageParameter[0]);
  //C列に今日あったこと（メッセージの２行目）
  targetSht.getRange('C' + (lastRow + 1)).setValue(messageParameter[1]);
  
  return ContentService.createTextOutput(JSON.stringify({'content': 'post ok'})).setMimeType(ContentService.MimeType.JSON);
  
}
```

![WS000058.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/326362/de06e250-54a7-8719-4ca8-be083789a8fd.jpeg)


「公開」→「ウェブアプリケーションをして挿入」をクリックします。
![WS000048.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/326362/ebe5c02c-3132-23f8-6268-a51ce99c35a0.jpeg)

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

- プロジェクトバージョン：**New**
- 次のユーザーとしてアプリケーションを実行：**自分（メールアドレス）**
- アプリケーションにアクセスできるユーザー：**全員（匿名ユーザーを含む）**
![WS000049.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/326362/1add1378-b3ae-3cf8-7f22-adbff14d1866.jpeg)


「許可を確認」をクリックします。
![WS000050.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/326362/2761de8e-3b0d-1dbf-303b-1e0b24bdc271.jpeg)

「詳細」をクリックします。
![WS000051.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/326362/4af276f8-1b49-0951-4ae2-8a0e31a8b33a.jpeg)

「（安全ではないページ）に移動」をクリックします。
![WS000052.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/326362/e1e6f28e-f0ba-8f67-fdb8-1a34ef66fa4c.jpeg)

「許可」をクリックします。
![WS000054.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/326362/1e52921f-83b4-c296-1c5f-b2f8acbc9f39.jpeg)

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

「OK」をクリックします。
![WS000055.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/326362/ea56c439-a87a-3c87-db7f-396919749992.jpeg)


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

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

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

![WS000056.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/326362/31bf5668-bc40-24ab-9981-0cc302d784d6.jpeg)


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

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


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

![WS000057.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/326362/16009e3d-5b99-cd88-9d97-2bcb2da9a154.jpeg)

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

- 1行目：**天気**
- 2行目：**今日あったこと**

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


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

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