GASで簡単に作るDiscord Bot

GAS(Google Apps Script)を使うと、簡単にDiscordのボットが作成できたので作り方を紹介します。
# Discordで開発者モードを有効にする
- Discord左下の歯車を右クリック > 詳細設定 を選択します。
![スクリーンショット 2021-06-20 192539.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/938939/70b65883-17b7-d764-0650-ca32021f9ac6.png)


- 開発者モードを有効にします
![スクリーンショット 2021-06-18 093245.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/938939/7321f8bc-3156-f6bf-7f01-bdeccd15ffa9.png)

# DiscordのWebHookURLを作成する
- 左サイドバーのボットを導入したいサーバのアイコンを右クリック > サーバー設定 > 連携サービス を選択します。
![スクリーンショット 2021-06-17 193945.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/938939/5a3f7cc9-8155-3f96-a7d9-796865de4111.png)

- 連携サービスメニュー内にある**ウェブフックを作成**を押し、ウェブフック設定画面に移動します。
- ウェブフック設定画面ではボットの名前やチャットの投稿先となるチャンネルを設定できます。
  - 名前やチャンネルを変更した際は変更の保存を忘れずに行ってください。
  - ボットのテスト用に`#bot-sandbox`のようなプライベートチャンネルを作ってもいいかもしれません。
![スクリーンショット 2021-06-17 234024.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/938939/6b15e1fe-fd07-b781-cf1e-24c31d6118b9.png)
- ボットの設定が完了したら、**ウェブフックURLをコピー**を押してください。
このコピーしたウェブフックURLはGAS作成時に使います。

以上でDiscordの設定は終わりです。
# Discordにチャットを投稿するGASを作る
チャットを投稿する方法はシンプルで、投稿するチャット内容と設定をまとめたオブジェクトを作成して、Jsonに整形します。
そして、先ほど作成したウェブフックURLに対してPostリクエストを投げます。

```js
function myFunction() {
  // discord側で作成したボットのウェブフックURL
  const discordWebHookURL = "https://discord.com/api/webhooks/000000/XXXXX";

  // 投稿するチャット内容と設定
  const message = {
    "content": "Hello!", // チャット本文
    "tts": false  // ロボットによる読み上げ機能を無効化
  }

  const param = {
    "method": "POST",
    "headers": { 'Content-type': "application/json" },
    "payload": JSON.stringify(message)
  }

  UrlFetchApp.fetch(discordWebHookURL, param);
}
```
- GASエディタ上部にある「実行」ボタンを押すことで、チャットがDiscordに投稿されます。
![スクリーンショット 2021-06-18 093408.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/938939/3050b189-3ffd-4768-a8d8-575438e323b3.png)

- ちなみにウェブフックURLのような他人に知られたくないものは、プロパティ機能を利用して隠蔽するといいと思います。
  - [プロパティ機能設定方法](https://auto-worker.com/blog/?p=2365)(GASエディタが新しくなってGUIで設定できなくなっています...)

## メンション
- 文中に`<@[ユーザID]>`を含めるとメンションを飛ばせます
  - ユーザIDはサーバ内に表示されている名前ではなく18桁の数字です。([IDの確認方法](https://camon.tokyo/discord/development-bot-id/))

```js
  const message = {
    "content": "<@1234567890> Hello!!",
    "tts": false,
  }
```
## 埋め込みコンテンツ
- 埋め込みコンテンツでは通常のテキストよりもリッチなチャットを投稿することができます
- 埋め込みコンテンツの投稿には`embeds`フィールドを利用します。
  - `color`フィールドで投稿文の色を指定できますが、カラーコードは10進数である必要があるため、`const colorCode = parseInt("ff6fac", 16);`で16進数のカラーコードを10進数に変換しています。

```js
  const colorCode = parseInt("ff6fac", 16);
  const message = {
    "content": "おすすめ動画です！",
    "tts": false,
    "embeds": [
      {
        // 本文
        "title": "【ウマ娘 プリティーダービー】OP映像", 
        // リンク(上のタイトルと組み合わせるとリンクテキストになります)
        "url": "https://youtu.be/cmuTy73jzSs",
        // 投稿文右上に指定URLの画像をサムネイル表示
        "thumbnail": { "url": "https://cdn.icon-icons.com/icons2/1584/PNG/512/3721679-youtube_108064.png" },
        // 画像を埋め込み
        "image": { "url": "http://img.youtube.com/vi/cmuTy73jzSs/mqdefault.jpg" },
        // 投稿文の色を指定(10進数で指定が必要)
        "color": colorCode,
        // 簡単なタイトルと文章を表のように並べることができます(1行:3つまで, サムネイルが入ると2つまで表示)
        "fields": [
          {
            "name": ":arrow_forward: 再生数",
            "value": "362万",
            "inline": true
          },
          {
            "name": ":thumbsup: 高評価",
            "value": "6.5万",
            "inline": true
          }
        ],
        // フッター(アイコンも指定可能)
        "footer": {
          "text": "https://twitter.com/uma_musu?s=20",
          "icon_url": "https://help.twitter.com/content/dam/help-twitter/brand/logo.png"
        }
      }
    ]
  }
```

結果
![スクリーンショット 2021-06-20 224638.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/938939/b3c79c04-c165-4120-a919-2d18ab514d1d.png)
***
- この他にも指定できるパラメータがあるので詳しくは下記を参照してください
  - https://discord.com/developers/docs/resources/webhook#execute-webhook-jsonform-params
- ちなみにpythonでも実装が可能です(こちらはHeroku等のサーバーを用意する必要があります)
  - https://qiita.com/1ntegrale9/items/9d570ef8175cf178468f

# 参考
- https://qiita.com/bakuwarorin/items/164f29c446f8723d787b
- https://discord.com/developers/docs/resources/webhook