チャットワークのbotを作る

## 特定のメッセージに応答するbotの作り方
# 環境
・Chatworkの利用環境
・Google Apps Script を使うためのGoogleアカウント


# 構築手順
#### チャットワークAPIトークンの取得
1. bot用アカウントを作成(任意)


2. 右上にある自分のアカウントをタップ
![Untitled design.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3857779/daf06c31-9d8a-a5bc-03f8-e56ba3949075.jpeg)


3. 表示されたメニューの「サービス連携」を選択


4. APIトークンを選択
![Untitled design.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3857779/7b04c8bc-5866-8c0b-06a8-d3f2ee874ace.png)

**APIトークンの取得完了です**
コピぺなどしてAPIトークンを覚えておきましょう。(第3者には絶対に見せないで下さい)


## GASでのプロジェクト作成とデプロイ
まずGoogle Apps Script で新しいプロジェクトを作りましょう。
https://script.google.com/

この画面が出てきた人はここからログインしましょう
![IMG_0631.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3857779/f1ae2ac5-5d46-f499-3a08-c97ad1ed3697.jpeg)
新しいプロジェクトを選択
![D7AA7458-02C2-466B-A205-B7C72AAD1B8F.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3857779/bd5d67a9-567f-b347-d9c5-e202b004ee12.png)

そして、プロジェクト名を設定し、以下のスクリプトを貼り付けて保存します。

![IMG_0591.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3857779/0289f735-52f3-0de7-d11e-378a3d5bf6af.jpeg)


以下のコードは、特定のメッセージに対する応答をChatWork APIを介して送信します。
```javascript
function doPost(e) {
  try {
    // アプリケーション設定を取得
    const appSettings = PropertiesService.getScriptProperties();
    const API_KEY = appSettings.getProperty('CHATWORK_API_KEY');
    const ROOM_ID = appSettings.getProperty('CHATWORK_ROOM_ID');
    const MY_ACCOUNT_ID = appSettings.getProperty('MY_ACCOUNT_ID'); 

    const contents = JSON.parse(e.postData.contents);
    Logger.log('Webhook payload: ' + JSON.stringify(contents));

    // Webhook イベントから必要な情報を取得
    var message = contents.webhook_event.body;
    var roomId = contents.webhook_event.room_id;
    var messageId = contents.webhook_event.message_id;
    var fromAccountId = contents.webhook_event.account_id;
    
    // 自分自身のメッセージには反応しない
    if (fromAccountId == MY_ACCOUNT_ID) {
      Logger.log('自分自身のメッセージです。スキップします。');
      return ContentService.createTextOutput('OK').setMimeType(ContentService.MimeType.TEXT);
    }
    
    // メッセージの重複処理を防止
    const processedMessagesJSON = PropertiesService.getUserProperties().getProperty('processedMessages') || '{}';
    const processedMessages = JSON.parse(processedMessagesJSON);

    if (processedMessages[messageId]) {
      Logger.log('メッセージは既に処理されています。スキップします。');
      return ContentService.createTextOutput('OK').setMimeType(ContentService.MimeType.TEXT);
    }

    // メッセージを処理
    if (message.includes('ここに反応する文字を入れる')) {
      Logger.log("メッセージが検出されました！");
      sendReply(API_KEY, ROOM_ID, messageId, fromAccountId, roomId, "検出した時に送る文字を入れる");
    } else {
      Logger.log('指定されたメッセージは検出されませんでした');
    }

    // メッセージが処理済みであることをマーク
    processedMessages[messageId] = true;
    PropertiesService.getUserProperties().setProperty('processedMessages', JSON.stringify(processedMessages));

    return ContentService.createTextOutput('OK').setMimeType(ContentService.MimeType.TEXT);
  } catch (error) {
    Logger.log('Error in doPost: ' + error.toString());
    return ContentService.createTextOutput('Error').setMimeType(ContentService.MimeType.TEXT);
  }
}

function sendReply(API_KEY, ROOM_ID, messageId, accountId, roomId, replyMessage) {
  const replyText = `[rp aid=${accountId} to=${roomId}-${messageId}] ${replyMessage}`;
  const url = `https://api.chatwork.com/v2/rooms/${ROOM_ID}/messages`;

  const options = {
    method: 'POST',
    headers: {
      'X-ChatWorkToken': API_KEY,
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    payload: `body=${encodeURIComponent(replyText)}`
  };

  const response = UrlFetchApp.fetch(url, options);
  Logger.log(response.getContentText());
}

function sendMessageWithoutReply(API_KEY, ROOM_ID, message) {
  const url = `https://api.chatwork.com/v2/rooms/${ROOM_ID}/messages`;

  const options = {
    method: 'POST',
    headers: {
      'X-ChatWorkToken': API_KEY,
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    payload: `body=${encodeURIComponent(message)}`
  };

  const response = UrlFetchApp.fetch(url, options);
  Logger.log(response.getContentText());
}
```


コード内の
**ここに反応する文字を入れる**
**検出した時に送る文字を入れる**
にお好きな文字を入れて下さい。
#### 複数個追加したい場合
`if` 文の使い方について解説します。以下に、具体的な例とともに説明します。

### 基本的な `if` 文の構造

`if` 文は特定の条件を満たす場合に、指定されたコードブロックを実行します。基本的な構造は以下の通りです。

```javascript
if (条件) {
  // 条件が真の場合に実行されるコード
}
```

### `message === 'test'` の場合

`message` という変数が `test` という文字列と完全に一致するかどうかをチェックしています。この場合、条件が真であれば以下のコードブロックが実行されます。

```javascript
if (message === 'test') {
  Logger.log("testが検出されました！");
  sendReply(API_KEY, ROOM_ID, messageId, fromAccountId, roomId, "テスト検出！");
}
```

### `message.includes('aaa')` の場合

`message` という変数が `aaa` という文字列を含むかどうかをチェックしています。この場合、条件が真であれば以下のコードブロックが実行されます。

```javascript
if (message.includes('aaa')) {
  Logger.log("aaaが検出されました！");
  sendReply(API_KEY, ROOM_ID, messageId, fromAccountId, roomId, "iii");
}
```

### 他の `if` 文の追加方法

新しい条件をチェックするための `if` 文を追加するには、次のように記述します。例えば、「おはよう」というメッセージが含まれている場合に特定の返信をする `else if` 文を追加します。

```javascript
else if (message.includes('おはよう')) {
  Logger.log("おはようメッセージが検出されました！");
  sendReply(API_KEY, ROOM_ID, messageId, fromAccountId, roomId, "いい夢見れた？");
}
```

### `if` 文の使い方のポイント

- **完全一致チェック**: `===` を使って変数が特定の値と完全に一致するかをチェックします。
  ```javascript
  if (message === 'test') {
    // message が 'test' と完全一致する場合の処理
  }
  ```
- **部分一致チェック**: `.includes` メソッドを使って変数に特定の文字列が含まれているかをチェックします。
  ```javascript
  if (message.includes('おはよう')) {
    // message に 'おはよう' が含まれている場合の処理
  }
  ```



`if` 文を使うことで、特定の条件に応じて異なる処理を実行することができます。`message` の内容に応じた処理を追加したい場合は、条件に応じて適切な `if` 文を追加していきます。
<br>
JavaScriptで追加のif文を追加するには、else if文を使用します。else if文はいくつでも追加することができます
<br>
**ログの部分は自分が見やすい様に変えてください。**
```javascript
Logger.log("ログ");
```
#### #追加した例
```javascript
// メッセージを処理
    if (message.includes('ここに反応する文字を入れる')) {
      Logger.log("参加メッセージが検出されました！");
      sendReply(API_KEY, ROOM_ID, messageId, fromAccountId, roomId, "検出した時に送る文字を入れる");
    } else if (message.includes('反応する文字２')) {
      Logger.log("反応する文字２が検出されました！");
      sendReply(API_KEY, ROOM_ID, messageId, fromAccountId, roomId, "反応！");
    } else {
      Logger.log('指定されたメッセージは検出されませんでした');
    }
```
### 反応するメッセージ
もし自分の送ったメッセージにも反応させたい場合には以下のコードを消して下さい
```javascript
    // 自分自身のメッセージには反応しない
    if (fromAccountId == MY_ACCOUNT_ID) {
      Logger.log('自分自身のメッセージです。スキップします。');
      return ContentService.createTextOutput('OK').setMimeType(ContentService.MimeType.TEXT);
    }
```

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


![IMG_0596.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3857779/22f69701-bc0d-1e85-b0a2-3f51b4e87b95.png)
スクリプトプロパティにそせぞせの値を入れます
| プロパティ          | 値                                                     |
|-------------------|--------------------------------------------------------|
| CHATWORK_API_KEY  | 初めに取得したAPIトークンを入れる |
| CHATWORK_ROOM_ID  | ここにはルームIDを入れます。<br>ルームIDはグループチャットURL末尾の数字と同様の番号です。<br>`例・以下の「*********」の箇所　https://www.chatwork.com/#!rid*********` |
| MY_ACCOUNT_ID     |ここにはアカウントIDを入れて下さい<br>[このリンクは、アカウントIDの確認の仕方です。](https://help.chatwork.com/hc/ja/articles/360000142962-%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88ID%E3%82%92%E7%A2%BA%E8%AA%8D%E3%81%99%E3%82%8B)||


入力したらスクリプトプロパティを保存を押して完了します。

## このプロジェクトをウェブアプリとしてデプロイ

1
デプロイから新しいデプロイを選択
![IMG_0613.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3857779/616148fd-a224-275c-f37c-5c86b1b62d5c.png)
2
ウェブアプリを選択
![名称未設定のデザイン.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3857779/f38e8ecd-4149-81ee-44a3-81316fa0cae8.png)
3
アクセス出来るユーザーを全員に変更し、デプロイを選択
![0F04CE53-66DF-4214-A195-F0764F9D4797.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3857779/484dfcda-0b2d-2d01-4f1e-b333c903a2ec.png)
4
アクセスを承認を選択
![名称未設定のデザイン.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3857779/49af88cf-5ec5-9242-cb31-5f0ec9c19d22.png)
5
警告が出てきますが、Advancedを選択
![IMG_0623.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3857779/1436ec2f-57fd-112b-94da-5ce30eb1f862.jpeg)
6 
(unsafe）を選択
![IMG_0624.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3857779/f0b39ccc-165a-7d11-4703-47d485f80431.jpeg)
7
Googleアカウントを選択

8
allowを選択
![名称未設定のデザイン.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3857779/5f9955b3-b5dc-5efe-2d40-c2b7e5a3c636.jpeg)
9
WebアプリのURLをコピー
![名称未設定のデザイン.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3857779/d0c8e14e-9292-b324-99f7-7f943b611562.png)

## チャットワーク側の設定
初めに　構築手順で、チャットワークAPIトークンの取得した時の画面で
![IMG_9152.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3857779/e3595c31-bf51-e1e8-d0dd-661ca1b1818d.png)
Webhookを選択
<br>
<br>
1
新規作成を選択
![8CC69A5B-862A-4E8B-9F34-81AC9F76E972.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3857779/de0a6e60-120d-a4fe-78e0-837c3c5d5262.png)
![2214290B-42DF-4698-B4EC-530C83BD6CCF.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3857779/8616add7-df87-d996-5495-5d323223aa71.png)

・ルームイベントを選択
・メッセージ作成にチェックを入れる
・ルームIDにbotを使用するルームのIDを入れる
|名前|入れるもの|
|-------------------|--------------------------------------------------------|
|Webhook名|お好きな名前を入れる|
|Webhook URL|先程コピーしたWebアプリのURL|

作成を選択して完了する
# 確認
![IMG_0629.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3857779/92828452-2ea4-6d69-5f21-86c55df14fa7.jpeg)
きちんと反応しました！
これで完了ですお疲れ様でした。

[実際に使っているコードです。](https://github.com/siawaseok3/chatwork-bot.git)