GASでChatGPTを組み込んだLINEbotを構築する

# はじめに
本記事では、Google Apps Script（GAS）を使って超簡単にChatGPTを組み込んだLINEbotを構築する方法をまとめます。
プロンプトをカスタマイズして、自分専用のChatGPTをLINEから簡単にアクセスできるようにしちゃいましょう!
![スクリーンショット 2025-01-25 0.08.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626170/659e5a95-067e-b813-a1bb-0d35a21e9acb.png)

# GASとは
Google Apps Script（Google アップス スクリプト）は、Google が提供するJavaScriptベースのスクリプト環境で、Google Workspaceアプリケーションを拡張、統合、自動化するために使用されます。
たとえば、Google Sheets、Google Drive、Google Docs、Gmail などのアプリケーションにカスタム機能を追加したり、これらのアプリケーション間でタスクを自動化したりすることができます。

### 主な特徴
1. JavaScript ベースのスクリプト:
JavaScript をベースにしたスクリプト言語となっています。
2. クラウド上で動作:
Google Apps Script は完全にクラウドベースで、ローカルマシンに何もインストールせず、ウェブブラウザ内で開発と実行が可能です。
3. Google Workspace アプリとの統合:
Google Sheets のカスタム関数作成、Gmail メールの自動送信、Google Calendar イベントの管理、Google Drive ファイルの操作などが可能です。
4. トリガーで自動化:
時間ベース（例えば毎日）、イベントベース（例えばフォーム送信後）など、様々な条件でスクリプトを自動実行するトリガーを設定できます。
5. 無料で利用可能:
基本的に無料で利用可能です！

# bot構築の流れ
簡単に流れを紹介しておきます。
1. LINE公式アカウントを作成
2. Messaging APIを有効にする
3. GASでコーディング
4. LINEと連携

では早速1番からやっていきます。

# LINE公式アカウントを作成
LINEbotを作成するには、まず公式アカウントを作成する必要があります。
公式アカウントの作り方は、公式がわかりやすく説明してくれているので、[こちら](https://developers.line.biz/ja/docs/messaging-api/getting-started/)を参照してください。

# Messaging APIを有効にする
公式アカウントが作成できたら、Messaging APIを有効にしましょう。
これも先ほどの[公式の記事](https://developers.line.biz/ja/docs/messaging-api/getting-started/)でまとめられていますので参考にしてください、、

# GASでコーディング
Messaging APIの有効化まで終わったところで、GASのコーディングに入ります。
GASの立ち上げ方は様々ありますが、今回はGoogle Driveから直接ファイル作成します。
Google Driveを開き、左上の「新規」から「その他」→「Google Apps Script」を選択します。
![スクリーンショット 2025-01-24 22.13.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626170/31ea76eb-e74b-b06c-84b1-e35246fe3958.png)
作成できると、コーディングできるようになります。
このmyFunctionとかかれている部分のコードを書き換えてbotを作成します。
![スクリーンショット 2025-01-24 22.27.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626170/d5218fd8-4155-c066-26cc-9a71c4e22f27.png)

### APIキーやトークンの設定
まず、OpenAIのAPIキーやLINEのトークンを設定します。
コードの先頭に次のプログラムを記述してください。このプログラムは、これから設定する環境変数から、APIキーやトークンを取得するプログラムになっています。
```
const OPENAI_APIKEY = PropertiesService.getScriptProperties().getProperty("OPENAI_APIKEY"); 
const LINE_TOKEN = PropertiesService.getScriptProperties().getProperty("LINE_TOKEN"); 
```
環境変数の設定方法ですが、左のメニューから「プロジェクトの設定」を選択します。設定画面を下にスクロールすると、「スクリプトプロパティ」という項目があるかと思います。ここで環境変数を設定します。
![https___qiita-image-store.s3.ap-northeast-1.amazonaws.com_0_626170_bd4ac68e-4fa3-3caa-14b1-59096cf7bb3aのコピー2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626170/5e48a328-d248-158a-f035-105584aa5708.png)

![スクリーンショット 2025-01-24 22.33.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626170/c80fb9eb-a36e-19c6-6827-9680a31c27ff.png)

OpenAIのAPIキーは、[この記事](https://qiita.com/kurata04/items/a10bdc44cc0d1e62dad3)を参考にして取得してみてください。

LINEのトークンは、Developersコンソールから取得できます。
Messaging API設定に移動し、一番下までスクロールします。
「発行」をクリックするとトークンが取得できます。
![スクリーンショット 2025-01-24 22.37.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626170/23e5be61-7a16-16ba-9388-9a7fa7c1759d.png)
![スクリーンショット 2025-01-24 22.41.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626170/46f7c03f-649c-8d30-0e94-d9b1fd71c158.png)

### GASのコーディング
次に、GASのコーディングを行います。
基本的な機構は次の通りです。コピペして使って頂いて構いません。
今回の例では、送信された文章を要約して返信するものになっています。
```javascript
const OPENAI_APIKEY = PropertiesService.getScriptProperties().getProperty("OPENAI_APIKEY"); 
const LINE_TOKEN = PropertiesService.getScriptProperties().getProperty("LINE_TOKEN"); 

const LINE_URL = 'https://api.line.me/v2/bot/message/reply'; 
const GPT_MODEL = "gpt-4o"; 

// メッセージ送信関数
function sendMessage(reply_token, message) {
  const option = {
    'headers': {
      'Content-Type': 'application/json; charset=UTF-8',
      'Authorization': 'Bearer ' + LINE_TOKEN,
    },
    'method': 'post',
    'payload': JSON.stringify({
      'replyToken': reply_token,
      'messages': [{
        'type': 'text',
        'text': message,
      }],
    }),
  }

  UrlFetchApp.fetch(LINE_URL, option);
}

// ChatGPTの応答を取得する関数
function simpleChatComp(prompt) {
  const requestOptions = {
    'method': 'post',
    'headers': {
      'Content-Type': 'application/json',
      'Authorization': 'Bearer '+ OPENAI_APIKEY
    },
    'payload': JSON.stringify({
      'model': GPT_MODEL,
      'messages': [
        {'role': 'user', 'content': prompt}
       ]
    })
   }

  const response = UrlFetchApp.fetch("https://api.openai.com/v1/chat/completions", requestOptions);
  const responseContext = response.getContentText();
  const jsonChat = JSON.parse(responseContext);
  const responseText = jsonChat['choices'][0]['message']['content'].trim();

  return responseText;
}


//ユーザーがメッセージを送信した時に下記を実行
function doPost(e) {
  const json_line = JSON.parse(e.postData.contents);
  const reply_token = json_line.events[0].replyToken;

  // ユーザーが送信したメッセージを取得
  const messageFromUser = json_line.events[0].message.text;

  // 検証で200を返す
  if (typeof reply_token === 'underfined') {return;}

  // ChatGPTに渡すプロンプト（【例】要約してもらう）
  const prompt = `
  次の【テキスト】の内容を要約してください。

  【テキスト】
  ${messageFromUser}
  `; 

  // simpleChatComp関数からChatGPTの応答を取得
  const messageFromBot = simpleChatComp(prompt); 

  // 応答を送信
  sendMessage(reply_token, messageFromBot)

  return; 
}
```

### コードの公開
コーディングができたので、次はコードを公開します。
GASでは公開が簡単にできるため、その点で「超簡単」と言っています。
「デプロイ」から「新しいデプロイ」を選択します。
![スクリーンショット 2025-01-24 23.17.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626170/2f919e61-ba59-7a79-6f8f-9c1002b076da.png)
デプロイの種類を選ぶように言われるので、「種類の選択」から「ウェブアプリ」を選択します。
![スクリーンショット 2025-01-24 23.18.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626170/b44115d0-126e-8b1c-1625-091a662cd7a9.png)
「アクセスできるユーザー」を「全員」に設定し、「デプロイ」します。
![スクリーンショット 2025-01-24 23.20.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626170/e336b7af-c961-37cc-80ec-3145f99fdfa1.png)
デプロイすると、「ウェブアプリ」の「URL」が取得できます。
このURLをコピーしておきます。
![https___qiita-image-store.s3.ap-northeast-1.amazonaws.com_0_626170_e35db1e1-d479-2b0b-56b1-c661845a7786のコピー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626170/0227f3be-048a-beb6-5f4a-6ccf204c1540.png)
これでコードの公開は完了です！

### デプロイで警告が出る場合
デプロイ時に警告が出るかもしれません。
![スクリーンショット 2025-01-24 23.42.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626170/cfffca35-def1-6eec-a795-61752a479e30.png)
「アクセスを認証する」と、このような画面になります。
![スクリーンショット 2025-01-24 23.43.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626170/769332b6-c535-6b9b-48fc-54d2a72111b5.png)
この警告が出た際は、「Advanced」をクリックし、「Go to プロジェクト名（unsafe）」をクリックするとパスできます。
![スクリーンショット 2025-01-24 23.43.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626170/ccf4881b-c794-68fa-4e68-b1aebc300f32.png)


# LINEと連携
ここからはLINEと連携し、botが機能するようにしていきます。
### Webhookの設定
まず、コピーしたURLをMessagingAPIと紐付けます。
Developersコンソールに移動し、「Messaging API設定」を開きます。
「Webhook設定」に「Webhook URL」があるので、「編集」から先ほどコピーしたURLを入力します。
![スクリーンショット 2025-01-24 23.24.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626170/604be398-38c9-3087-ca78-83066a57a572.png)
「検証」をクリックして「成功」と表示されればOKです。
![スクリーンショット 2025-01-24 23.29.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626170/2d0fb769-bdda-f4af-04f6-3685f34259d7.png)
Webhookの利用をオンにするのを忘れないでください。
![スクリーンショット 2025-01-24 23.45.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626170/98f6c1e8-530b-ca7f-a6da-3bfcf9672caa.png)


### LINE公式アカウント機能の設定
次に、LINE公式アカウント機能の設定を行います。
Developersコンソールの「Messaging API設定」の画面を下にスクロールすると、「LINE公式アカウント機能」の項目があります。
ここは全て「無効」にしておきましょう。
![スクリーンショット 2025-01-24 23.30.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626170/a29a83a1-dce1-de3f-ddf1-753eaa2b5fe8.png)


# 実際に動かしてみる
以上でコーディングや設定は終了です。
最後に実際に動かしてみましょう。
「QRコード」から公式アカウントを友達追加します。
適当な文章を送って、要約された文章が返ってくるか確認しましょう！
![スクリーンショット 2025-01-24 23.53.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626170/b75e22d8-df72-f066-3d37-fa97cac3bf34.png)
問題なく動くことが確認できました！

# 終わりに
今回はGASを使ってLINEbotを作成しました。
ChatGPTのプロンプトを変更することで、botの返答をカスタマイズできるので、自由に組み替えてみてください！