top
技術

Image

はじめに

題名の通り、Discord で動作する Chat GPT と対話できるボットを作ってみました✨

作ってみるといっても、Discord Bot は以前から開発 & 自分のサーバーで運用していたので、Discord のアップデートによって導入されたスラッシュコマンド対応を行うついでに、最近話題の Chat GPT 機能を追加してみた形です。

本題

Chat GPT

最近話題の Chat GPT。

自分はあまり関心がなかったのですが、Twitter など様々なメディアで想像以上に流行っていたので、ただ使ってみるのではなく Chat GPT API を使った簡単なアプリを作ってみようと考えました。

入力したテキストに対して答えを返す単純なコンソールアプリを作るでもよかったのですが、それだとイマイチ芸がないと思い Discord Bot として動作させることにしました。

ちょうど、以前から自分のサーバーで運用していた 「HiLow BOT」 という Discord Bot があるので、この 「HiLow BOT」 略してハイロボに Chat GPT 機能を導入することにしました😊

ハイロボは Discord.js で開発しているので、Chat GPT 導入には OpenAI 公式 Node.js パッケージの OpenAI Node を採用。

サンプルコード通りに記述すれば、すぐに Chat GPT を動かすことができます。

公式サイトの Chat GPT アプリや Edge ブラウザのチャット機能のような文脈を記憶させて会話を行うためには、メッセージのやり取りを配列などに一時的に記憶しておいて、最大数を超えたら古いメッセージから削除していくなどの処理が別途必要になります。

また、Chat GPT API にアクセスが集中するのか、頻繁にタイムアウトやサーバーエラーが発生したため、エラーのハンドリングはしっかりと行った方が良いようです。

Image

メッセージを任意のタイミングで消去できるように、返信内容に消去ボタンを追加するようにして、無事にハイロボに Chat GPT 機能を追加することが出来ました🏵

スラッシュコマンド

Chat GPT の機能追加と並行して対応したのが、この Discord Bot のスラッシュコマンド対応です。

スラッシュコマンドとは、Discord でメッセージを入力する際に先頭にスラッシュ (/) を入れると、コマンドの候補が自動的に表示されて入力の補助をしてくれる機能です。

従来の Discord だと、使用するコマンドをユーザーが記憶する必要があり、コマンド使用に対するハードルが高かったのですが、スラッシュコマンドの登場でそのハードルが下がることになりました。

Disocrd.js ではバージョン 13 以上からスラッシュコマンドが使えます。

スラッシュコマンド対応をする際に困ったのが、作成したスラッシュコマンドを API 経由で呼び出しが出来ない点でしたね・・・

自分が管理するサーバーでは、GAS (Google Apps Script) のタイマーを使って定期的に使うコマンドの自動投稿を行っているのですが、この方法だとスラッシュコマンドとして Discord は認識しないので、従来型のテキストのコマンド形式とスラッシュコマンド形式を両立するようにコマンドの設計をする必要がありました。

export abstract class Command {
    public readonly data: RESTPostAPIChatInputApplicationCommandsJSONBody;

    public constructor(data: RESTPostAPIChatInputApplicationCommandsJSONBody) {
        this.data = data;
    }

		// スラッシュコマンド
    public async execute(interaction: Interaction<CacheType>) {
        console.log(interaction);
    }

    // 従来型のコマンド
    public async executeFromMessage(message: Message, args: string[]) {
        console.log({ message, args });
    }
}

ハイロボは discord.js 12 で作っていたことも有り、設計を結構修正する必要がありましたが、何とがスラッシュコマンド & リファクタリングも終了。

無事にハイロボは対話が出来る対話ボットとして生まれ変わりました😊

Image

Image

おわりに

HiLow BOT」 を作るきっかけは、自分が好きな Discord の機能の一つにリアクション機能と呼ばれる絵文字返信機能があるですが、絵文字を最初に付ける場合は操作が少し面倒で、定型的な文章には自動的にリアクションを返して、二人目以降がリアクションをする手続きの負担を減らしたいと思ったことからでした。

以後も、天気予報の取得機能や文章の翻訳機能など、様々な機能を導入したハイロボですが、ついに今回対話もできるようになったこと、開発当初の自分は想像もしてませんでした。感無量!

今回 Chat GPT を導入した 「HiLow BOT」 はポートフォリオページに掲載しています。

もし良ければ、他の作品もあわせて御覧になってくださいね✨