コードを書かずにGASでLINE Bot入門

# はじめに

巷にはノーコードでLINE Botを作れるツールが沢山あります。
以前、私はMakeでLINE Botを作成しました。

https://qiita.com/hoshieee/items/e499ecbdf2f79c0cd5d6

ノーコードツールだと難しいコードを知らなくても簡単にLINE Botを作成できますが
無料枠では使用に制限があったり、自分の思うように設定できない場合があったりします。
今回、Google Apps Scriptで作成するLINE Botは、Googleアカウントがあれば、無料で作成でき自分の作りたいLINE Botを簡単に作成できます。
とはいえ（私のように）コードは書けない...
そんな方でもChatGPT等の生成AIを使用すればコードが書けなくても簡単に作成できます。

## 使用ツール

・[Google Apps Script](https://workspace.google.com/intl/ja/products/apps-script/)（GAS）
・[LINE Developers](https://developers.line.biz/ja/)
・[ChatGPT](https://chatgpt.com/)（別の生成AIでもOKです）

<b>【事前準備】</b>
LINE BotにはLINE Developersからチャネルアクセストークンが必要となります。
LINE Developersの登録方法については下記を参考にしてください。

https://qiita.com/cog1t0/items/f6e832d54a7b0e692434

※2024年9月4日以降、LINE Messaging APIの作成がLINE Developersコンソールから直接作成できなくなる発表がされております。
LINE Official Account Managerを利用するにはLINE公式アカウントの作成が必要です。

https://developers.line.biz/ja/news/2024/08/14/no-longer-possible-to-create-messaging-api-channels-from-console/

https://qiita.com/course_k/items/00804420e61b7514bf30

## 作成方法
### Google Apps Scriptのコード画面

今回、スプレッドシートは使用しません。
GAS単体で動かします。

:::note
- [ ] <b>1. Googleドライブから新規を選択
- [ ] <b>2. その他を選択
- [ ] <b>3. Google Apps Scriptを選択
- [ ] <b>4. スクリプトを作成
:::

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3754093/8d7f46c5-f7eb-175e-4b1a-f4ffde610f81.png)

:::note
- [ ] <b>5. エディタ画面が開くので、プロジェクト名を任意の名前に変更
:::

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3754093/6575daa8-0168-4635-4d2c-4d644fb999c0.png)

エディタ画面が開いたら、一旦置いておいて、ChatGPTにコードを書いてもらいます。

### ChatGPTでコードを作成

まず初めにオウム返しBotを作成します。

いきなり自分が作りたいLINE Botのコードを書きだすとうまくいく時といかない時があり、コードを理解していないとどこでつまづいているのか理解できない場合があります。そんな時は、まず初めに「オウム返し」LINE Botを作成してみてちゃんと返信が来るかを確認してから作成し始めるといいと思います。

:::note
- [ ] <b>1. ChatGPTにプロンプト入力
:::

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3754093/62877398-f42a-9fa5-0467-aedaa5d4a6fd.png)

:::note warn 
<b>POINT！</b>
LINE Botにはチャネルアクセストークンが必要になります。
LINE DevelopersのMessaging API設定からチャネルアクセストークンをコピーしてコード部分に設定するのですが、コードを変更する度に、チャネルアクセストークンをコピーし貼り付けしていると大変なので、GASのプロジェクトの設定でスクリプトプロパティに設定します。
:::

ChatGPTに以下を追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3754093/e0a654ba-54f9-c03a-60d0-eb5f5f88d13a.png)

### スクリプトプロパティの設定

ChatGPTでできたコードを貼り付ける前に、スクリプトプロパティの設定をします。
ChatGPTで設定方法に下記のような指示がでてくると思います。
スクリプトプロパティで指示通りに設定をします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3754093/61f2e99b-6184-edaf-44b8-a3c33801ae26.png)

:::note
- [ ] <b>1. GASエディタの左メニューから「プロジェクトの設定」を選択
- [ ] <b>2.「スクリプトプロパティ」からスクリプトプロパティを追加を選択
- [ ] <b>3. ChatGPTで指定されたプロパティ名を入力しスクリプトプロパティの保存
:::

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3754093/0036bbbf-317a-2e35-ee99-3e9a2efcc178.png)



※この場合、プロパティにCHANNEL_ACCESS_TOKEN　値にLINE Developersコンソールからコピーしたチャネルアクセストークンを入力します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3754093/a036a33f-6371-e9b3-6320-82a061bcab86.png)

:::note
- [ ] <b>4. 左メニューからエディタに戻り、ChatGPTのコード部分をコピーして貼付
- [ ] <b>5. プロジェクトの保存
:::

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3754093/b91722d5-cb3e-20cd-7912-68228d5313ee.png)



### デプロイ

コードの設定ができたら、デプロイをします。
デプロイとはアプリケーションを利用可能な状態にすることです。

:::note
- [ ] <b>1. 右上の「デプロイ」から新しいデプロイを選択
- [ ] <b>2. 種類の選択から「ウェブアプリ」を選択
- [ ] <b>3. 説明分　＝　任意の名前を設定
　次のユーザーとして実行　＝　自分
　アクセスできるユーザー　＝　全員
:::

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3754093/970e174d-d426-1f3a-e1d0-6a3ca712a9a8.png)

:::note
- [ ] <b>4. デプロイ ※アクセスを承認してください
:::

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3754093/540e9042-079a-e5c2-7335-674572a6ef2f.png)

:::note
- [ ] <b>5. デプロイのウェブアプリURLをコピー
:::

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3754093/54881e49-def9-ada9-03e3-d847e30e329e.png)

:::note
- [ ] <b>6. LINE Developerページに移動し、「Messaging API設定」の「Webhook URL」にコピーしたURLを貼り付ける
- [ ] <b>7. 検証をクリックし、成功と出ればＯＫ
:::
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3754093/af024df7-2512-69c8-fab1-9e9e1a7468ee.png)


### LINEで確認

LINE Developersで設定したLINE Botをお友達登録して、メッセージを送ってみましょう。
うまくオウム返しができたら完成です。

### デプロイの管理

１度新規デプロイしたコードを修正した場合は、再度デプロイが必要です。
デプロイからデプロイの管理を選択し、編集します。
バージョンを新バージョンに設定し、デプロイします。
※ウェブアプリURLは、Webhook設定にコピーは不要です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3754093/5f68c8a0-c659-444f-af89-87c23d1d4865.png)

### コード
<details><summary>サンプルコード</summary>

```Javascript
function doPost(e) {
  var replyToken = JSON.parse(e.postData.contents).events[0].replyToken;
  var userMessage = JSON.parse(e.postData.contents).events[0].message.text;

  var url = 'https://api.line.me/v2/bot/message/reply';
  var channelToken = PropertiesService.getScriptProperties().getProperty('CHANNEL_ACCESS_TOKEN');

  var headers = {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer ' + channelToken
  };

  var postData = {
    'replyToken': replyToken,
    'messages': [{
      'type': 'text',
      'text': userMessage
    }]
  };

  var options = {
    'method': 'post',
    'headers': headers,
    'payload': JSON.stringify(postData),
    'muteHttpExceptions': true
  };

  UrlFetchApp.fetch(url, options);
}
```
</details>

# GASの制限概要
GASは無料で使える反面制限もあります。
GASの制限についてはこちらの詳細を参照してください。

https://qiita.com/kakakaori830/items/84a7dcba2d6119ed320a

# 応用編

オウム返しLINE Botに、自分が実装したい機能をChatGPTに指示していきます。
毎朝「本日のスケジュール」ですと教えてくれる秘書が欲しい....
と思ったので以下のようなLINE Botを作成してみました！

## Googleカレンダーから今日の予定を毎朝通知してくれるLINE秘書Bot</b>

### 完成品
https://x.com/hoshiee38/status/1829878917177753750

### プロンプト例
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3754093/eb628326-b7f2-2554-eb16-70397a3fcfe2.png)

:::note
flexメッセージとは、通常のLINEメッセージより、CSSを使用してよりインタラクティブなレイアウトが可能なメッセージです。
https://developers.line.biz/ja/docs/messaging-api/using-flex-messages/
:::

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3754093/29a9d640-29ba-f11d-0459-cd9f6facc98c.png)

:::note
OpenAI APIを使用して画像をランダムに生成しようとしたのですが、あまりにもしょぼい画像ばかりだったので、画像生成AIで作成した画像をドライブに保存しランダム表示にしました。
:::

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3754093/8872b790-192b-9b77-d4d3-f2c9de5c8ca2.png)

:::note
Googleマップとの連携も簡単
:::

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3754093/c7fae18e-92cb-c239-2d5c-e78659811673.png)

:::note
天気API（OpenWeatherMap APIを使用）を使用してGoogleカレンダーに登録された場所から天気情報も取得可能。
:::

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3754093/514f5c8b-d351-d070-d2c4-60527b367cf3.png)

:::note 
〇〇だったら画像を表示といった条件分岐も簡単作成。
:::

こんな感じにやりたいことをただただプロンプトに入力するだけで自分の作りたいLINE BotがGASで作成できます！
今回はスケジュールを通知するだけですが、LINEからGoogleカレンダーにスケジュール登録する機能を追加することもできます。

### トリガー設定
毎朝決まった時間に通知するというトリガーを設定します。

:::note
１．左メニューからトリガーを選択
２．右下の　＋トリガーを追加を選択
:::
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3754093/3bdb4ebf-165a-b89c-38db-0e4a974e8d94.png)

:::note
３．トリガー設定
　　・実行する関数を選択　＝　コードの一番上の関数（になっているはず）
　　・イベントのソースを選択　＝　時間主導型
　　・時間ベースのトリガーのタイプを選択　＝　日付ベースのタイマー
　　・時間を選択　＝　任意の時間を選択
４．保存
:::

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3754093/a4189c6d-2877-3d8d-0132-54a0fed83f0c.png)

毎朝同じ時間にこのスクリプトが実行されLINEに通知されます。

# 最後に
今回、ChatGPTでGASを作成しましたが、Claudeで試してみましたが、書かれているコードは違うものの、同じくオウム返しLINE Botが作成できました。自分に合った生成AIで試してみてください。