見出し画像

Discordにbot発言できるツ~ル

なんだこれは?

発言を書いて『発言する』ボタンをクリック
(上記画像はそれぞれ箱船みかんさん、やいさん、いちかわつよしさん、かのさんに描いていただいたアイコンです)
するとdiscordにbot発言が投稿されます

そんな感じのツールです。
htmlとjavascript製。
パソコンがあれば誰でも動かせると思います。


使い方

  1. zipファイルをダウンロード(html,css,jsファイル同梱)する

  2. 解凍する

  3. 「setting.js」を編集(後述)

  4. index.htmlを開き、発言入力、発言ボタンを押す

  5. Webhook指定のDiscordチャンネルに投稿される

3.「setting.js」の編集について

(Windows)
左クリック→プログラムから開く→メモ帳 で開けます。
編集が終われば『上書き保存』でOK!

・WEBHOOKのURLを書き換える
・デフォルトの発言者名を書き換える
・アイコンリストの発言者名と画像URLを書き換える

(デフォルトは殺風景でさみしかったのでいらすとやの鶏をいれています)

/** webhookのurl設定 */
const webhook_url = 'WEBHOOKのURL';

//デフォルトの発言者名(空欄だとアイコンリストのname=空欄だとこれが表示されます)
const default_name = "発言者";

/*
表示アイコンを増やしたいときはここを編集してください
name:表示名
 url:アイコン画像のURL
*/
const icon_list = [
  {
    name: "発言者",
    url: "https://cdn.discordapp.com/attachments/948028039005098054/994598742692991016/niwa.png",
  },
  {
    name: "発言者2",
    url: "https://cdn.discordapp.com/attachments/948028039005098054/994598742692991016/niwa.png",
  },
  {
    name: "発言者3",
    url: "https://cdn.discordapp.com/attachments/948028039005098054/994598742692991016/niwa.png",
  },
  {
    name: "発言者4",
    url: "https://cdn.discordapp.com/attachments/948028039005098054/994598742692991016/niwa.png",
  },
  {
    name: "発言者1",
    url: "https://cdn.discordapp.com/attachments/948028039005098054/994598742692991016/niwa.png",
  },
  {
    name: "発言者1",
    url: "https://cdn.discordapp.com/attachments/948028039005098054/994598742692991016/niwa.png",
  },
  {
    name: "発言者1",
    url: "https://cdn.discordapp.com/attachments/948028039005098054/994598742692991016/niwa.png",
  },
  {
    name: "発言者1",
    url: "https://cdn.discordapp.com/attachments/948028039005098054/994598742692991016/niwa.png",
  },
  {
    name: "発言者1",
    url: "https://cdn.discordapp.com/attachments/948028039005098054/994598742692991016/niwa.png",
  },
  {
    name: "発言者1",
    url: "https://cdn.discordapp.com/attachments/948028039005098054/994598742692991016/niwa.png",
  },
];

こんな感じの遊びができます

スクショ画像提供:うつぎさん(ロール文章もうつぎさんです)

つくった経緯

世にはDiscordでロールする人たちがいると知り、需要があると思ったため。
アイコン画像つきでPCのロールがあったら……うれしいし……。

なにかあれば・導入方法がわからないなど

noteのコメント欄にどうぞ(集合知になります)。
szstの知らない人は丁寧語での書き込みお願いします。知らない人にタメ口で話しかけられると怯えるノミの心臓なので……。

謝辞

入力フォームの背景色・文字色などなどはヒサギGM作PBC【Clip Traveler】 のデザインを使用させていただいております。ご許可くださいまして本当にありがとうございます。

Discordのログ取り

それ用のツールがあるそうです。調べてみてね。

更新履歴

更新方法は解凍した後に「setting.js」以外を上書きしてください。

2022/07/08 公開
2022/07/10 切り替えがうまくいかない不具合を修正(radioタグにname属性つけ忘れた)

参 考

作成にあたり以下の記事に助けられました。

ブラウザのXMLHttpRequest(xhr)でSlackとDiscordのWebhook URLにPOSTするサンプル