非エンジニアでもLINE Bot開発できる！ SpreadsheetをデータベースにGASで動かす

YouTube(2020年３月更新): https://youtu.be/9K_EKn2QQUQ
YouTube(2022年5月更新): https://youtu.be/4MkEbRFGP14
![https://youtu.be/4MkEbRFGP14](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216701/cb8153ac-ae1a-6aa9-ecde-216714dcf943.gif)
# 無料！ 追加インストールなし！ 環境依存なし！
黒い画面でコマンドを打ったり、何か新しく登録やインストールをしたり、WindowsやMacなどの環境の違いで動かなかったり、そんなことは一切ありません！
<b>LINEがスマホに入っていて、Googleアカウントを持っている人</b> なら誰でも無料で簡単に、最初からGoogleスプレッドシートの機能としてある「Apps Script」（下の写真参照）でLINEボットを作ることが可能です。

![スクリーンショット 2022-04-06 9.55.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216701/2d12f9f3-11df-4077-0a41-6a6fa0335c0e.png)


## 下準備① LINE Messaging API

まず、[LINE Developers](https://developers.line.biz/ja/)にアクセスして、「コンソール」のボタンか、右上の「ログイン」で、ログインします。


![Connect with LINE Developers](https://i.gyazo.com/04c55e4b40e42f629c526c3447c62b0f.jpg)



<img width="402" alt="スクリーンショット 2019-05-16 17.23.43.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216701/683c82c0-2bcf-adf0-559c-499048ead0ea.png">

ログインできたら、以下の手順でプロバイダーを作成し、「LINE Messageing API」のチャネルを作成します。

<img width="1278" alt="スクリーンショット 2019-05-16 17.24.22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216701/4dfac4fe-9762-f186-e5a9-17eba105f203.png">

![スクリーンショット 2022-04-06 10.23.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216701/e47d2f59-5d7a-2c5b-4b00-6c226d034b9a.png)

![スクリーンショット 2022-04-06 10.28.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216701/bbbb113d-0843-08ce-5a1b-b7e2cc7cb315.png)
![スクリーンショット 2022-04-06 10.27.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216701/a6198a26-72a6-2527-d145-8ff469892491.png)

次に、入力必須項目を埋めていきます。
<img width="1049" alt="スクリーンショット 2019-05-16 17.33.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216701/b8cece7e-ee01-0c3a-1613-dab90d0fa89c.png">

最終的に、下記のように新規チャネルが作成されればOK!

![スクリーンショット 2022-04-06 10.33.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216701/f6131b32-007b-a877-064c-2b8bd70ab44f.png)


### LINE Official Account Managerの応答設定を編集

LINE Developersのページの「チャネル基本設定」から、[LINE Official Account Manager](https://manager.line.biz/account)ページに移動します。

<img width="1165" alt="スクリーンショット 2020-03-25 午前11.27.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216701/0f8475c9-5510-0159-2dce-f5138eed8f0d.png">

次に、左側の応答設定をクリックします。

<img width="1280" alt="スクリーンショット 2020-03-25 午前11.31.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216701/cad4a879-bb85-ecab-f63d-fc2ed30ea099.png">

下記のように設定されていれば大丈夫です。

<img width="1280" alt="スクリーンショット 2020-03-25 午前11.36.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216701/f9ab54a5-0f60-47b4-30f3-7eb14e26da30.png">

- 応答モード: **BOT**
- あいさつメッセージ: **オン**
- 応答メッセージ: **オフ**
- Webhook: **オン**

## 下準備② Google Apps Script
[スプレットシート](https://spreadsheet.new)を開き、拡張機能から「Apps Script」を選んでください。
![スクリーンショット 2022-04-06 9.55.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216701/ab9916c4-41d6-d67c-52fe-2ed4ad17c5ef.png)


下記のデフォルトのコードは使わないので、全部選択してdeleteで消してください。

```コード.js
function myFunction() {
  
}
```

代わりに、下記のコードをコピーして貼り付けてください。

```コード.js
// LINE developersのメッセージ送受信設定に記載のアクセストークン
const LINE_TOKEN = 'チャネルアクセストークン（ロングターム）'; // Messaging API設定の一番下で発行できるLINE Botのアクセストークン（Channel Secretはいらないみたいです。）
const LINE_URL = 'https://api.line.me/v2/bot/message/reply';

//postリクエストを受取ったときに発火する関数
function doPost(e) {
  
  // 応答用Tokenを取得
  const replyToken = JSON.parse(e.postData.contents).events[0].replyToken;
  // メッセージを取得
  const userMessage = JSON.parse(e.postData.contents).events[0].message.text;
  
  // メッセージを改行ごとに分割
  const all_msg = userMessage.split("\n");
  
  // 返答用メッセージを作成
  // スタンプのリスト -> https://developers.line.biz/en/docs/messaging-api/sticker-list/
  const messages = [
    {
      "type": "sticker",
      "packageId": "446",
      "stickerId": "1988"
    }
  ]
  
  // ***************************
  // スプレットシートからデータを抽出
  // ***************************
  // 1. 今開いている（紐付いている）スプレッドシートを定義
  const sheet     = SpreadsheetApp.getActiveSpreadsheet();
  // 2. ここでは、デフォルトの「シート1」の名前が書かれているシートを呼び出し
  const listSheet = sheet.getSheetByName("シート1");
  
  // ***************************
  // スプレッドシートにデータを入力
  // ***************************
  // 最終列にデータを新しく入力
  listSheet.appendRow(all_msg)
  
  // 返答用メッセージを追加
  const after_msg = {
    'type': 'text',
    'text': "データを入力しました。",
  }
  messages.push(after_msg);
  
  // lineで返答する
  UrlFetchApp.fetch(LINE_URL, {
    'headers': {
      'Content-Type': 'application/json; charset=UTF-8',
      'Authorization': `Bearer ${LINE_TOKEN}`,
    },
    'method': 'post',
    'payload': JSON.stringify({
      'replyToken': replyToken,
      'messages': messages,
    }),
  });
  
  ContentService.createTextOutput(JSON.stringify({'content': 'post ok'})).setMimeType(ContentService.MimeType.JSON);
  
}
```

### アクセストークン
[LINE Developers](https://developers.line.biz/)の、自分のLINE Message APIのチャネルの中の、「Messging API設定」の部分の一番下に書いてあるチャネルアクセルトークンをコピーして、2行目のアクセストークンの部分に上書きしてください。
<img width="1277" alt="スクリーンショット 2020-03-19 午前11.36.36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216701/09971fe7-ce1b-88ca-faa3-3b245df0dea4.png">

### Webアプリケーションとして導入

Webhookに使うために、Apps Script　の画面右上の「デプロイ」から「新しいデプロイ」をクリックして、デプロイタイプは「ウェブアプリ」でURLを発行します。

![スクリーンショット 2022-04-06 10.35.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216701/d00b7a9e-fa75-88af-3f5c-4fc9064a1d94.png)

![スクリーンショット 2022-04-06 10.47.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216701/14a575b6-49f4-7a23-bbcc-a8efe96146b0.png)

下記の通り、アクセスできるユーザーは「全員」に設定して、右下の「デプロイ」を押してください。

![スクリーンショット 2022-04-06 10.39.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216701/5cb3250e-ab06-727b-ad06-e24b0d87c59e.png)


許可しますか？と聞かれるところは、全て許可してください。
確認しますか？と聞かれるところは、安全ではないページに移動をしてください。
<img width="693" alt="スクリーンショット 2020-03-19 午前11.52.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216701/c9c90857-53e7-ca1a-67b9-40c8130e2c06.png">

デプロイが成功すると、下記のようにウェブアプリのURLが発行されます。このURLを、Webhook URLとして使用します。

![スクリーンショット 2022-04-06 10.51.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216701/233763c7-548f-f7a9-04a3-6d46d16b0286.png)



## LINE BOTと連携
GASで発行されたWebhook URLをコピーして、[LINE Developers](https://developers.line.biz/)の、Messging API設定の部分の真ん中辺りにあるWebhook設定に、コピーしたURLを貼り付けてください。

<img width="1280" alt="スクリーンショット 2020-03-19 午前11.56.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216701/876a1bea-c0b5-26d1-0366-901f0e7e8d3a.png">

作ったLINE BOTに、下記のようなメッセージを送って、それなりな感じで返事がくれば完成です。すぐ下のWebhookをonにするのを忘れずに！

<img width="559" alt="スクリーンショット 2020-03-26 午前1.06.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216701/a1242140-9208-27fe-3902-c996951426c0.png">

新しくプログラムを書き換えたら、もう一度右上の「デプロイ」から「デプロイを管理」をクリックして、ポップアップの右上の編集マークをクリックします。この際、バージョンを「新バージョン」に変更しても、Web hook URLは変わらずに新しいプログラムに書き換えることができるので、新バージョンを作成して再度「デプロイ」しましょう。

![スクリーンショット 2022-04-06 10.54.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216701/c07fcb9f-3b8d-73ae-ed1d-ea4ceb14f2b4.png)

URLは特に変わっていないので、ウェブアプリのURLをLINE DevelopersのページのWebhook
設定で更新する必要はございません。

## 完成

まず、一番上の列に何か色を塗り（塗らなくても大丈夫）、入れたいデータのタイトルと、サンプルデータを一つ入力してください。

<img width="413" alt="スクリーンショット 2020-03-26 午前0.56.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216701/1c20a611-b9f4-0109-61e3-b272426a4c3b.png">

次に、作成したLINE Botを開き、入れたいデータを順番に改行を挟みながら入力します。
<img width="358" alt="スクリーンショット 2020-03-26 午前1.32.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216701/291e962d-a479-9530-f08d-8d84d4d4f390.png">

無事、スプレッドシートにこのように入力されていれば成功です。

<img width="359" alt="スクリーンショット 2020-03-26 午前1.33.05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216701/918b540d-0041-0472-6d43-afbf2d7a6ac3.png">

## ストアカ講座あり
このQiita通りにやっても動かなかった、もしくは挫折した方は、ストアカで2時間みっちり対応しています。
https://www.street-academy.com/myclass/121336

## 今回のBOTを作った経緯
[TSfCM](https://tsfcm.dev)主催のハッケーション（ハッカソン×バケーション）を富士吉田で行いました。
イベント詳細：https://tsfcm.jp/hackation01

その時に、まだプログラミング経験1ヶ月弱のTSfCMスクール生と一緒に深夜3時まで、LINEボットを開発していました。その簡易版が、この記事の内容です。誰でも簡単にLINEボット開発はできるので、是非色々と試してください & 引き続きハッカソンの作品の開発はスクールで進めていくので、応援してくれると嬉しいです！

## TSfCM生の書いたQiita記事

- [【GAS】LINE botでメッセージを(定期)配信](https://qiita.com/haruka1008/items/a07a62a0cdc968b90737)

## 続き

- おうむ返しは[こちら](https://qiita.com/njn0te/items/194d8d1b834041fefea7)
https://qiita.com/njn0te/items/194d8d1b834041fefea7

- LIFFフォームは[こちら](https://qiita.com/njn0te/items/53c4b19208924567af7b)
https://qiita.com/njn0te/items/53c4b19208924567af7b

## Udemyで2つのコースを配信中

Udemyで「LINE BOTのコース」と「Google Apps Script 入門コース」を出しています。
- [1時間でWeb API とスクレイピングを学びながらGoogle Apps Script で簡単にできるLINE BOT](https://www.udemy.com/course/web-api-scraping-gas-linebot-tsfcm/?referralCode=7E2EB0DD484E08FA1413)
- [【Google Apps Script 超入門講座】2時間で知識ゼロから基礎をマスター](https://www.udemy.com/course/googleappsscript/?referralCode=9EC52D89F0F5F497933A)