無料でdiscordBotっぽいことする

はじめに

※DiscordのWebhook機能＋GASを利用して、スプシの編集を検知して通知するBotっぽいことをするだけなのでBotではないです。

• 簡単に実装できる
• 毎回ローカルで立ち上げたりなどしなくていい
• 日常で使える

をテーマに考えていたため、

• 環境構築もGit操作もコンパイルもない、お金もかからない。
• 書くだけでデプロイなど必要ない。
• Googleのサービスを起点にSNSに通知するできるのでHelloWorld!を出すよりは実用的。

ということでこちらの記事を作成します。

準備

• アカウント作成
  • discord
  • google
• 自分が管理者のdiscordサーバー作成
  • 管理者じゃなくとも権限があれば良いのですが、そこの説明は割愛。
  • また、この記事の内容でサーバーに不利益が起こっても責任は負いませんのでよくわからない場合は新規サーバーを作成してそこで試したほうが良いです。
• スプレッドシートの作成
  • こちらも同様に分からなければとりあえず新規のものを作成したほうが良いです。

discordのWebhook設定

サーバ名右側の下向き矢印からメニューを開いて「サーバー設定」を選択。

「ウェブフックを作成」を選択。

個々では他に、「新しいウェブフック」を選択したら追加されたウェブフックを選択して名前の変更と、通知を行うテキストチャンネルの選択ができます。

ウェブフックURLをコピーを選択してURLが作成できればウェブフックの準備は一旦終了です。

ここでアイコンや、名前を変更しなくとも通知時に送信者の名前はカスタムできるので変更してもしなくてもどちらでもいいですが、チャンネルはもし共有のサーバーであればBot用テキストチャンネルを作成してそこに設定しておいたほうが通知が邪魔にならないので無難です。　

スプシとGas作成

スプレッドシートの作成は割愛。

スプレッドシートが作成できたらメニューの「拡張機能」を開いて「Apps Script」を選択します。

スクリプトプロパティ(環境変数)

Apps Scriptのページが開けたらまずスクリプトプロパティの登録を行います。
スクリプトプロパティはGASにおける環境変数というもので、これを利用することでパスワードやアクセスキー、ウェブフックのURLのような人目に晒したくない情報をコードにそのまま記載するよりも安全に使用することができます。

サイドメニューから「プロジェクトの設定」を選択し、
先程取得したウェブフックURLとプロパティ名を入力します。

プロパティ名は何でも良いですが、今回はDISCORD_WEB_HOOK_URLとします。

GAS

事前準備が終了したので、下記のような形でコードを書いて行きます。
messageのusernameとavatar_urlは設定しなければウェブフック作成時に設定したものが使われるだけなので、こだわりがなければなくても良いです。

function onSheetEdit() {
  // 先程設定したウェブフックURLをスクリプトプロパティから取得
  const DISCORD_WEB_HOOK_URL = PropertiesService.getScriptProperties().getProperty("DISCORD_WEB_HOOK_URL");

  // 送信するメッセージを設定
  let message = {
    "username": "スプシBOT",// BOTの名前
    "avatar_url": "https://s3-ap-northeast-1.amazonaws.com/qiita-image-store/0/3634175/237b480caf9ab0aefcdef16c9b30fe0257474c25/x_large.png?1701617742",// BOTのアイコン
    "content": "スプレッドシートが編集されました。", // メッセージ本文
  }
  
  // メッセージをウェブフックが受け取れる形に整形
  const param = {
    "method": "POST",
    "headers": { 'Content-type': "application/json" },
    "payload": JSON.stringify(message)
  }

  UrlFetchApp.fetch(DISCORD_WEB_HOOK_URL, param); // HTTPリクエストを行いレスポンスを戻すメソッド
}

トリガー設定

ここまで来たら後はonSheetEditを呼び出すトリガーを設定するだけです。

GasにはSimple Triggersというものがデフォルトで存在しており、スクリプトの名称を規定のものにするだけで「スプシを開いたとき」や「編集した」ときをトリガーとしてスクリプトを実行することができます。
ですが、これらの権限は最も低いものとなっているため一部の操作を行うと画像のように権限エラーが発生してしまいます。
（onEdit内でUrlFetchApp.fetchを実行）

そのため今回はonEditを使用せずにトリガーを自作します。
サイドメニューから「トリガー」を選択し、画面右下の「トリガーを追加」を選択します。

　

「実行する関数を選択」に先ほど作成したonSheetEditを設定して、
「イベントの種類を選択」では「編集時」に変更して「保存」します。

「保存」を選択するとGoogleの認証画面が開くので、自分のアカウントを選択してください。
その後のポップアップは画面左下の「Advanced」を押して、
「Go to discordWebHook (unsafe)」を押すことで先に進めます。

よく読み問題がなければ実行してください。

その次の画面でも内容をよく読み問題がなければ進んで
「Allow」を選択することでトリガーの設定は完了です。

動作確認

スプレッドシートを編集してみます。
するとこのように設定したアイコンと名前で、メッセージが送信されれば成功です。

もし送信されていない場合は、
サイドメニューの「実行数」からログが確認できるのでそれを参考に調査してみてください。

おわりに

今回はお金をかけずに日常生活で利用可能なものを作成しました。
お金をかければもっとしっかりしたBotを作ることもできると思いますが、多機能なものが必要でなければこのぐらいチープに作ってみるのもいかがでしょうか。

+α

メッセージを豪華に

送信するメッセージにembed(埋め込みメッセージ)を使うことで画像をつけたりなど色々な装飾が可能になります。

function onSheetEdit() {
  // 先程設定したウェブフックURLをスクリプトプロパティから取得
  const DISCORD_WEB_HOOK_URL = PropertiesService.getScriptProperties().getProperty("DISCORD_WEB_HOOK_URL");

  // 送信するメッセージを設定
  // let message = {
  //   "username": "スプシBOT",// BOTの名前
  //   "avatar_url": "https://s3-ap-northeast-1.amazonaws.com/qiita-image-store/0/3634175/237b480caf9ab0aefcdef16c9b30fe0257474c25/x_large.png?1701617742",// BOTのアイコン
  //   "content": "スプレッドシートが編集されました。", // メッセージ本文
  // }
  var message = {
    "username": "スプシBOT",
    "avatar_url": "https://s3-ap-northeast-1.amazonaws.com/qiita-image-store/0/3634175/237b480caf9ab0aefcdef16c9b30fe0257474c25/x_large.png?1701617742",
    "content": "スプレッドシートが編集されました。",
    "embeds": [ // ここから埋め込みリンク
      {
        "title": "通知",
        "description": "編集通知です",
        "url": "https://s3-ap-northeast-1.amazonaws.com/qiita-image-store/0/3634175/237b480caf9ab0aefcdef16c9b30fe0257474c25/x_large.png?1701617742",
        "timestamp": new Date(),
        "color": 5620992,
        "image": {
          "url": "https://s3-ap-northeast-1.amazonaws.com/qiita-image-store/0/3634175/237b480caf9ab0aefcdef16c9b30fe0257474c25/x_large.png?1701617742"
        },
      }
    ]
  };

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

  UrlFetchApp.fetch(DISCORD_WEB_HOOK_URL, param);
}

スプシからもっと情報を取得

下記のようにonSheetEdit(e)に引数を持たせたりすることで変更があったシート名や、変更内容なども取得して送信することもできます。

function onSheetEdit(e) {
  var sheet = e.source.getActiveSheet()
  console.log('シート名　 =', sheet.getName())
  console.log('変更範囲　 =', e.range)
  console.log('変更前の値 =', e.oldValue)
  console.log('変更後の値 =', e.value)
  // 以下略
}

参考文献