こんにちは。久しぶりの投稿です〜。今回は趣味全開記事です。

ここ数年、リアルタイム脱出とか謎解きとか流行ってますよね。謎解きを自作されてる方も結構いると思います。
自分もプライベートで程々に、オフライン・オンライン謎解き作ってきましたので、今回はDiscord botによる謎解きアプリの作り方を解説していきます。

Discordはテキストや通話だけでなく、ロールの権限付与で可視範囲をコントロール出来たり非常に表現が豊かなので、謎解きアプリ的には結構面白いことが出来ると思ってます。一方で実在する例が少なかったり、デプロイどこにする問題があったり一長一短です。

もくじ

「Discord bot 作り方」で検索すると記事たくさん出てきますが、内容が古いものも多くコピペしても動かないものもあるので、全部軽めに解説します。

実装周り解説
botの作り方
サーバの準備
遊んでみた
サンプルコード紹介

の構成で行きます。不要な章は適宜飛ばしてください！

実装周り解説

今回はnode.js(v16.6)で実装しました。discord botでググるとPythonの例とかあるので言語は好みです。
後述するTOKENを使い、返事するbotの実装をして動かしてみましょう！

const Discord = require('discord.js');
const client = new Discord.Client({ intents: [Discord.Intents.FLAGS.GUILDS, Discord.Intents.FLAGS.GUILD_MESSAGES] });

// ベタ書き良くないですが、今回はかんたんな例なのでここに書いていきますね
const TOKEN = "後述するTOKENを記載"

client.once('ready', () => {
  console.log(`${client.user.tag} でログインしています。`)
})

// discordにメッセージが送信されると呼ばれる
client.on('messageCreate', message => {
  // botの発言を無視したい
  if (!message.author.bot) {
    // messageに色んな情報やメソッドがあるので後ほど解説
    message.channel.send("おはよう");
  }
}

client.login(TOKEN);

slackbot等と違い、discordbotは実装をどこかにデプロイしなきゃいけないです(ここがメンドイんよ)、今回はローカルで動かしますね。

botが招待されたdiscordサーバで適当に発言すると、botが返事してくれます。

上記の例は「メッセージ送信」をトリガーに処理をしましたが、トリガーは他にもたくさんあります。

// メッセージ
client.on('messageCreate', message => {
  console.log(`オウム返しするよ。${message.content}`)
});
// リアクション
client.on('messageReactionAdd', (reaction, user) => {
  console.log(`${user.tag}がしてくれたリアクションは${reaction.emoji.name}です`)
});
// サーバから退出
client.on('guildMemberRemove', member => {
  console.log(`さいようなら${member.displayName}`)
});

...などなど。
自分はDiscord.js Japan User Groupをたくさん参考にしました。リアクション周りは、リアクションされる時の処理を見ましたし、ロール周りはメンバーにロールの追加・削除したいあたりとかですね。

謎解きアプリ的には

トリガー
- 答えの送信
- 特定のリアクション
返却値
- テキストの返答
- 画像の返却
- ロールの付与/削除

あたりが使えそうですね！

問題に対して適切な答えをメッセージ送信していくタイプの謎解きを想定して messageCreate をもう少しだけ触れます。Messageクラスの中身を見てみると、プロパティとかメソッドとか色々見えてきますね。

client.on('messageCreate', message => {
  // メッセージの中身
  const text = message.content;

  // メッセージしたメンバー(GuildMemberクラス)
  const member = message.member;
  // 付与されているrole一覧
  console.log(member.roles);
  // memberにroleを付与
  member.roles.add(/*付与したいRoleクラスを引数にわたす*/);

  // メッセージが送信されたチャンネル(Channelクラス)
  const channel = message.channel;
  // 該当チャンネルに返答する
  message.channel.send("botに喋らせる内容");
  message.channel.send({ files: ['./botが返す画像.jpg'] });

  // サーバ情報(Guildクラス)
  const guild = message.guild;
  // サーバにいるメンバーやチャンネル、ロール一覧はキャッシュから取る

  console.log(guild.members.cache);
  console.log(guild.channels.cache);
  console.log(guild.roles.cache);
});

自分が実装する上で気をつけなきゃ！と思った点がいくつかありまして

`members.cache` から取れないユーザがいる。

検証してもわからなかったのですが、恐らくdiscord上でアクティブ非表示にしているメンバーは、members.cacheから取れないので、謎解きを遊んでもらう時は表示ONにしてもらってます。

`ID` ベースでやりとりしないケースがある。

何か取得する時って getXXXById とかを想像すると思うのですが、discordサーバのテンプレを用いた運用だとサーバAサーバB作って両方のサーバにbot入れて、動かして・・・となると、ID決め打ちできないんですよね。

更に参加者が「チャンネルA」で回答を書いたら「チャンネルB」に次の問題を送る、みたいな処理を実現しようとすると
message.guild.channels.cache.find(c => c.name === "チャンネルB").send("次の問題") みたいな実装になりますが message.guild.channels にチャンネルだけじゃなく「カテゴリ」も含まれちゃうんですよね。区別の仕方はもちろんあると思いますが、カテゴリとチャンネル、同名のもの作らない！が一番安全かもです。

なのでIDベースでやりたいところではありますが、名前ベースでfind、getせざるを得ないケースもあるので、そのあたりは要注意です。

botの作り方

それでは謎解きアプリ作りましょう！サンプルは「3分で分るポケットモンスター赤緑」でいきましょう。流れとしてはこんな感じかな。

博士から御三家もらう
ジム巡り
チャンピョンになる
ミュウツーゲット

ではオーキド博士botを作りましょう。世の中にたくさん記事あるのでざっくり目で。Developerに入り「New Application」からbotを作りましょう。

作成後botの詳細ページに進みます

GeneralInformationは、表示名やアイコン周りの設定
BotタブにてBuild-A-Bot追加。そうすると TOKEN が得られる！
OAuth2のURLGeneratorで「SCOPESをbot」「BOT PERMISSIONSをAdministrator」にして以下のようなURLをゲット
- ※ちゃんと権限設定したほうが良いかもしれないけど一旦これで作ってみよう

https://discord.com/api/oauth2/authorize?client_id=○○○○○&permissions=8&scope=bot

botが必要なサーバにinviteする

これでbotの招待は完了です！

サーバの準備

今回は簡単ロール運用でいきます(以前作ったアプリはロールが40個ぐらいあって大変だった。。)
注意事項としてbotをinviteすると、権限最下位になります。このbotは何も権限付与できませんw

付与していく権限よりも高い権限にしてあげましょう。

サーバのテンプレートを作れば、チャンネル・カテゴリ・ロールの設定が全部引き継がれるので、便利です。

遊んでみた

遊ぶ側がどんな体験が出来るのかイメージしやすいよう、スクショを交えて紹介します。
参加者の皆さんは、何の権限も付与されていないので「マサラタウン」チャンネルしか見れませんね。

「冒険開始」の合図とともに「研究所」チャンネルが見えてきましたね。裏では「冒険開始」ロールが付与されてます。

ヒトカゲ貰っておきましょう。画像の返却もばっちし！

ロールの運用だけで、こういう細かい出し分けもできます。他人のヒトカゲを強奪しちゃだめです！

本当はヒトカゲがほしかったライバル君は仕方なくフシギダネを貰いましょう。おや「中盤」カテゴリのチャンネルがたくさん見えてきましたね。
(どうでも良いですが、ここゼニガメを取るべきだったわ笑)

ちなみにですがbotが反応する言葉を他のチャンネルに書き込んでも、反応しないようにすると完成度が高く見えますね。

「おいしいみず」の言葉で「ヤマブキシティ」チャンネルを見れる権限をゲットします。

本当に雑ですけど「終盤」カテゴリの「セキエイ高原」チャンネルが出てきました、これで四天王にチャレンジできますね！

よっしゃ！殿堂入り！RTA走者顔負けのスピード感でしたね。
おや、先程「中盤」カテゴリには無かった「ハナダの洞窟」チャンネルが見えてきましたね。

1割の確率でゲットできるように実装しました。ひたすらボールを投げましょう。

。。。。本当に確率10%か？？？？？？？

ということで「マサラタウン」しか見えなかったレッドも最終的にはこんなにチャンネルが解放されました。

ざっくり流れがイメージ出来たかなと思います。ロールの付与削除でチャンネル見えなくしたり、リアクションやpinを使うことも出来るので、本当に表現が豊かです。
是非皆さんも、discordで謎解きアプリ作ってみましょ〜！

サンプルコード

可読性とか一旦無視してやりたいことざっくり書いてます。参考になれば幸いです。

const Discord = require('discord.js');
const client = new Discord.Client({ intents: [Discord.Intents.FLAGS.GUILDS, Discord.Intents.FLAGS.GUILD_MESSAGES] });

const TOKEN = "xxxxxxxxxxxx"

client.once('ready', () => {
  console.log(`${client.user.tag} でログインしています。`);
})

/**
 * messageCreate: chat内でメッセージが送信された時
 */
client.on('messageCreate', message => {
  /**
   * messageクラスプロパティ
   * guild: guildクラスは鯖情報を持つ。roles.cache、.channels.cache、.members.cacheで取得可能
   * member: 投稿者
   * content: テキスト情報
   * channel: 投稿されたチャンネル情報
   */
  // botの発言を除外する
  if (!message.author.bot) {
    // チャンネル取得関数。channelクラスを1つ返却。
    const findChannelByName = channelName => message.guild.channels.cache.find(c => c.name === channelName);
    // role取得関数。roleクラスを1つ返却。
    const findRoleByName = roleName => message.guild.roles.cache.find(r => r.name === roleName);
    // 特定のroleが付与されてるmemberを取得する関数。memberクラスを複数返却。
    const findMembersByRoleName = roleName => {
      const targetRole = findRoleByName(roleName);
      return message.guild.members.cache.filter(m => m._roles.includes(targetRole.id))
    }
    // role付与関数。返却値不要。
    const addRoleByRoleName = roleName => {
      // 引数のrole名から、付与したいroleを取得
      const targetRole = findRoleByName(roleName);
      // roleを付与したいメンバー = 冒険開始roleを持つメンバー
      const targetMember = findMembersByRoleName("冒険開始");
      //　roleの付与
      targetMember.forEach(m => m.roles.add(targetRole));
    }

    switch (message.content) {
      // 開始
      case "冒険開始":
        if (message.channel.name === "マサラタウン") {
          // 全員に付与するので addRoleByRoleName関数は使わない
          message.guild.members.cache.forEach(m => m.roles.add(findRoleByName("冒険開始")));
          findChannelByName("研究所").send("ゆめと ぼうけんと!ポケットモンスターの せかいへ!レッツゴー!");
        }
        break;
      // 御三家選び
      case "フシギダネ":
        if (message.channel.name !== "研究所") {
          break;
        }
        if (findMembersByRoleName("フシギダネ").size > 0) {
          findChannelByName("研究所").send("残ってないぞ");
          break;
        }
        // 投稿者にだけroleつける
        message.member.roles.add(findRoleByName("フシギダネ"));
        findChannelByName("研究所").send("フシギダネを選ぶんじゃな");
        findChannelByName("研究所").send({ files: ['./img/fushigidane.png'] });
        if (findMembersByRoleName("ヒトカゲ").size > 0 || findMembersByRoleName("ゼニガメ").size > 0) {
          addRoleByRoleName("旅開始");
          findChannelByName("研究所").send("それでは期待しておるぞ");
        }
        break;
      case "ヒトカゲ":
        if (message.channel.name !== "研究所") {
          break;
        }
        if (findMembersByRoleName("ヒトカゲ").size > 0) {
          findChannelByName("研究所").send("残ってないぞ");
          break;
        }
        // 投稿者にだけroleつける
        message.member.roles.add(findRoleByName("ヒトカゲ"));
        findChannelByName("研究所").send("ヒトカゲを選ぶんじゃな");
        findChannelByName("研究所").send({ files: ['./img/hitokage.png'] });
        if (findMembersByRoleName("フシギダネ").size > 0 || findMembersByRoleName("ゼニガメ").size > 0) {
          addRoleByRoleName("旅開始");
          findChannelByName("研究所").send("それでは期待しておるぞ");
        }
        break;
      case "ゼニガメ":
        if (message.channel.name !== "研究所") {
          break;
        }
        if (findMembersByRoleName("ゼニガメ").size > 0) {
          findChannelByName("研究所").send("残ってないぞ");
          break;
        }
        // 投稿者にだけroleつける
        message.member.roles.add(findRoleByName("ゼニガメ"));
        findChannelByName("研究所").send("ゼニガメを選ぶんじゃな");
        findChannelByName("研究所").send({ files: ['./img/zenigame.png'] });
        if (findMembersByRoleName("フシギダネ").size > 0 || findMembersByRoleName("ヒトカゲ").size > 0) {
          addRoleByRoleName("旅開始");
          findChannelByName("研究所").send("それでは期待しておるぞ");
        }
        break;

      // 中盤
      case "おいしいみず":
        if (message.channel.name.match(/ゲート/)) {
          addRoleByRoleName("通行OK");
          message.channel.send("マブキシティに行けるようになったぞ")
          findChannelByName("ヤマブキシティ").send("いらっしゃい");
        }
        break;
      case "ゴールドバッジ":
          if (message.channel.name === "ヤマブキシティ") {
            addRoleByRoleName("四天王戦");
            message.channel.send("ポケモンリーグ挑戦しにいこう")
            findChannelByName("セキエイ高原").send({ files: ['./img/quiz.jpg'] });
          }
          break;
      // 終盤
      case "はい":
        break;
      case "いいえ":
        addRoleByRoleName("殿堂入り");
        message.channel.send("おめでとう!");
        findChannelByName("ハナダの洞窟").send({ files: ['./img/myutsu.jpg'] });
        break;

      // おまけ
      case "モンスターボール":
        if (message.channel.name !== "ハナダの洞窟") {
          break;
        }
        // 確率1割
        if (Math.floor(Math.random() * 10) > 8) {
          addRoleByRoleName("ミュウツー");
          message.channel.send("やった!ミュウツーを手に入れた!")
        } else {
          message.channel.send("ダメだ!ボールから出てしまった!")
        }
        break;
      default:
        break;
    }
  }
})

/**
 * トークンを使って、botをオンラインにする
 */
client.login(TOKEN);