line-bot-sdk-gas で GAS に簡単に LINE ボットを構築できたので紹介する

## LINE DC Advent Calendar 2023

本記事は LINE DC Advent Calendar 2023 の16日目の記事です。

https://qiita.com/advent-calendar/2023/lineapi

## はじめに

LINE Developers Community の LT 大会に登壇し、個人開発した LINE ボットについて紹介しました！
下記の 1:17:00 ぐらいから出てきます。

https://m.youtube.com/watch?v=L6F9c8EUfv8&t=4590s

### 本記事の目的

上記動画で紹介している LINE ボットは GAS をサーバーとして、Messaging API を利用しています。
GAS から Messaging API を利用する際に、[kobanyan](https://github.com/kobanyan) さんの [line-bot-sdk-gas](https://github.com/kobanyan/line-bot-sdk-gas) という Messaging API の GAS 用 SDK を利用させていただいたのですが、初心者の私にも非常に便利だったので、勝手に紹介します。

## 使い方

### 呼び出し方

Messaging API のアクセストークンをもたせた状態でインスタンスを作成します。

```javascript
const lineClient = new LineBotSDK.Client({
  channelAccessToken: 'アクセストークン',
});
```

インスタンスからメソッド（`replyMessage()` など）を呼び出すだけで Messaging API の各機能を実装できます。

```js
lineClient.replyMessage(replyToken, { type: 'text', text: 'こんにちは' });
```

### メソッド

使用できるメソッド（関数）に関しては、[line-bot-sdk-gas](https://github.com/kobanyan/line-bot-sdk-gas)の**メソッド**に記載されているので、ご参照ください。

## 実装例

例として、ユーザーが友だち登録するとあいさつメッセージを送信する機能を実装していきます。

![Pasted image 20231213141034.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2983766/c58d59c3-1125-ee20-2fb4-2eaea3ef20c8.png)

### GAS にライブラリを追加する

まず GAS で SDK を利用するためにライブラリの追加をしていきます。

手順1：ライブラリ横の「＋」ボタンを押下する

![Pasted image 20231213131205.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2983766/d6e0bb6f-2609-1e41-66b3-64b86b4e1c7b.png)


手順2：スクリプトID（下記）を入力して、「検索」を押下する

```
1EvYoqrPLkKgsV8FDgSjnHjW1jLp3asOSfDGEtLFO86pPSIm9PbuCQU7b
```

![Pasted image 20231213131405.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2983766/023c2336-c50c-e641-9540-8f0c6407c6d3.png)


手順3：検索できたら「追加」を押下する

![Pasted image 20231213131609.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2983766/6445b5ea-3d12-f425-07dc-470d64c1e527.png)

ライブラリ欄に「LineBotSDK」が表示されればライブラリの追加は完了です！

![Pasted image 20231213131709.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2983766/b4ecb622-6f26-098b-6908-6064b52e79f1.png)

### doPost で HTTP リクエストを受け付ける

まず前提として Messaging API からの Webhook 送信を GAS で受け付ける必要があります。
GAS では以下のように `doPost` 関数を定義することで、HTTP リクエストを受け付けることができます。

```javascript
function doPost(e) {
  // WebHookで取得したJSONデータをオブジェクト化し、取得
  const event = JSON.parse(e.postData.contents).events[0];
  const eventType = event.type;
  const replyToken = event.replyToken;

  // 友だち登録された場合に実行
  if(eventType === 'follow') {
	greetRegisteredUser(event, replyToken)
  }
}
```

### あいさつメッセージの送信

あいさつメッセージ送信の関数群を実装していきます。
下記はコード全体です。

```javascript
 * スクリプトが持つスクリプトプロパティを取得して、呼び出し元に渡す
 * @return {string} scriptPropertiesValues スクリプトプロパティの内容
 */
function getScriptPropertiesValues() {
  var scriptProperties = PropertiesService.getScriptProperties();
  var scriptPropertiesValues = scriptProperties.getProperties();
  return scriptPropertiesValues;
}

const scriptPropertyValues = getScriptPropertiesValues();
const accessToken = scriptPropertyValues['accessToken'];

// インスタンス生成
const lineClient = new LineBotSDK.Client({
  channelAccessToken: accessToken // アクセストークン
});

function greetRegisteredUser(event, replyToken) {
  // ユーザー情報
  const userId = event.source.userId;

  // LINE API でユーザー情報を取得するメソッド
  const user = getUserProfile(userId, replyToken);
  const userDisplayName = user.displayName;
  const pictureUrl = user.pictureUrl;

  lineClient.replyMessage(replyToken, [
    {
	  type: 'text',
	  text: `こんにちは、${userDisplayName} さん！`,
    },
    {
	  type: 'image',
	  originalContentUrl: pictureUrl,
	  previewImageUrl: pictureUrl,
    },
  ]);
}

function getUserProfile(userId) {
  //LINE Messaging APIにリクエストし、ユーザーからの投稿に返答する
  const result = lineClient.getProfile(userId);
  return result;
}
```

#### インスタンスの生成

まず LineBotSdk のインスタンスを生成します。
今回、チャネルへのアクセストークンをスクリプトプロパティという GAS プロジェクトの保管場所に配置しているので、その取得処理も記載しています。

```javascript
 * スクリプトが持つスクリプトプロパティを取得して、呼び出し元に渡す
 * @return {string} scriptPropertiesValues スクリプトプロパティの内容
 */
function getScriptPropertiesValues() {
  var scriptProperties = PropertiesService.getScriptProperties();
  var scriptPropertiesValues = scriptProperties.getProperties();
  return scriptPropertiesValues;
}

const scriptPropertyValues = getScriptPropertiesValues();
const accessToken = scriptPropertyValues['accessToken'];

const lineClient = new LineBotSDK.Client({
  channelAccessToken: accessToken // アクセストークン
});
```

#### ユーザー情報の取得

`getProfile` 関数を使用してユーザー情報を取得します。

```javascript
function getUserProfile(userId) {
  //LINE Messaging APIにリクエストし、ユーザーからの投稿に返答する
  const result = lineClient.getProfile(userId);
  return result;
}
```

#### メッセージの送信

取得したユーザー情報からユーザー名 と ユーザーのアイコン画像 を抽出し、`replyMessage` 関数を使用してそれらを送信します。

```javascript
function greetRegisteredUser(event, replyToken) {
  // ユーザー情報
  const userId = event.source.userId;

  // LINE API でユーザー情報を取得するメソッド
  const user = getUserProfile(userId, replyToken);
  const userDisplayName = user.displayName;
  const pictureUrl = user.pictureUrl;

  lineClient.replyMessage(replyToken, [
    {
	  type: 'text',
	  text: `こんにちは、${userDisplayName} さん！`,
    },
    {
	  type: 'image',
	  originalContentUrl: pictureUrl,
	  previewImageUrl: pictureUrl,
    },
  ]);
}
```

これ実装は完了です！

### デプロイして Messaging API とつなげる

GAS をデプロイします。

![Pasted image 20231213224813.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2983766/e49b2b78-1837-d4c4-39fb-524ce7aee46e.png)

* 種類：ウェブアプリ
* アクセスできるユーザー：全員

上記を設定して「デプロイ」を押下する

![Pasted image 20231213224400.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2983766/a96d5acf-1cc9-1eca-1ce8-66719fcf31ab.png)

デプロイすると URL が発行されるので、それを LINE Developers console に作成したチャネルの Messaging API 設定の Webhook URL に設定すれば準備は完了です！

※ LINE Developers console 上での作業は割愛しています。
以下記事がわかりやすいのでご参照ください。

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

## おわりに

テスト用など簡単な LINE ボットを構築するときに GAS を使うのですが、このライブラリで簡単に実装できるのですごく助かります！これからも愛用していこうと思います。

### 参考文献

https://github.com/kobanyan/line-bot-sdk-gas

https://qiita.com/kobanyan/items/1a590cda9deb85e86296