設定パネルを作り直した話と、その部品を公開した話

こんにちは。BotShade を作っている Tettu です。

v2.5.4 で、Discord 上に表示される設定パネルを、設定画面を持つ機能のすべてで作り直しました。リリースノートには「見た目とボタンの位置がそろいます」と書きましたが、なぜそんなことになっていたのか、どう直したのかは、あちらに書くと長すぎるので分けました。

最後に、この作り直しで生まれた部品を オープンソースとして公開した 話も書いています。

本記事の目次:

• ボタンの位置がばらばらになる理由
• 「間違えて書けない」構造にする
• 作り直して分かったこと
• KageKit として切り出しました
• 公開しました

ボタンの位置がばらばらになる理由

BotShade の Bot は 19 個の機能を持っていて、そのほとんどが Discord 上に設定パネルを表示します。/protection settings を開けば保護機能の設定が、/ticket settings を開けばチケットの設定が出てくる、あれです。

これらは同じ人間が同じリポジトリの中に書いていたのに、「戻る」ボタンの位置が機能によって違いました。あるパネルではカードの中に、別のパネルでは画面の一番下に置かれていました。設定の区切り方も、色の使い方も、機能ごとに少しずつ違いました。

理由は単純で、Discord が提供する新しいコンポーネントの仕組み（Components V2）が 何でも作れてしまう からです。何でも作れるということは、パネルを 1 枚作るたびに次のことを毎回決め直すということです。

• 絞り込みのタブはカードの中か、外か
• 「取り消せません」を伝える赤は、どの赤か
• サブメニューを開くとき、新しいメッセージを積むか、同じメッセージを書き換えるか

19 機能ぶん、それぞれ別の日に決めれば、答えは当然ずれます。規約を書いて「こう書きましょう」と決めても、規約は破っても動く ので、忙しい日には破られます。

「間違えて書けない」構造にする

そこで、規約を文章ではなく 構造 にしました。「どこに何を置くか」をこちらが決めてしまい、書く側には 中身だけを宣言してもらう 形です。

具体的には、パネルを次の 4 つの層で表現するようにしました。

• タブ — 「開催中 / 終了 / すべて」のような、そのページが何を表示しているか を切り替えるもの。ページ全体の話なので、カードの外側の一番上に置きます
• カード — 設定の中身。内容が違うものは別のカードに分け、カードの色（緑・灰色・赤）がその設定の状態や危険度を示します
• ページ送り — カードの 中身 を進めるもの。⏮ ◀ [ 3 / 12 ] ▶ ⏭ の形で、中央を押すとページ番号を直接指定できます
• 操作バー — 「更新」「戻る」「閉じる」。メッセージ全体 に対する操作なので、一番下、すべてのカードの外側に置きます

大事なのは、この並びが 選べない ことです。書く側は「タブはここ」「戻るはここ」と指定するのではなく、タブとカードと戻るを渡すだけで、位置は構造が決めます。位置を間違えるという行為が、そもそも表現できなくなりました。

もうひとつ効いたのが、送信する前に容量を確認する ようにしたことです。Discord のメッセージには「1 通あたり最大 40 個の部品まで」という上限があり、これを超えると Discord 側に拒否されます。拒否されたときのエラーは「何が多すぎるのか」を教えてくれないので、これまでは実際に送ってみて初めて気づく類の失敗でした。いまは送信前に止まり、何を減らせばいいか が分かるようになっています。

作り直して分かったこと

19 機能を順番に移していく作業は、それ自体が既存のパネルの棚卸しになりました。移す前は気づいていなかった問題が、並べ替えている途中で見つかりました。

• ウェルカムメッセージのパネルで、本文を設定済みのときだけ、設定行がプレビューの枠の中に流れ込んでいた。カードの区切りを手で書いていたために起きていたもので、宣言に置き換えたら消えました
• 色を数値で直接書いていた箇所が、あちこちに散らばっていた。同じ「成功の緑」が場所によって微妙に違う値になっていました。いまは 1 か所から取ります
• ボタンなのに押しても何も起きない、という状態が作れてしまっていた。いまは、押したときの動作が指定されていないボタンは 押せない見た目 で表示されます

これらは「バグ報告が来ていたわけではないが、確かにおかしかった」類のものです。作り直しの副産物としては、いちばん嬉しいものでした。

KageKit として切り出しました

ここまで書いた「タブ・カード・ページ送り・操作バー」という仕組みは、BotShade に固有の話がひとつもありません。Discord の Components V2 で設定パネルを作る人であれば、誰でも同じところで悩むはずです。

そこで、この部分を BotShade 本体から切り離し、KageKit という名前の独立した部品にしました。日本語の「影（かげ）」から取っています。BotShade の Shade と揃えつつ、既存のライブラリと名前がぶつからないものを探した結果です。

切り離すにあたって、KageKit の中には BotShade の文言・色・プラン別の上限を一切書かない ようにしました。それらは外から渡す形にしてあり、渡し忘れても混ざらないよう、混入を検出する仕組みも入れています。BotShade のブランドカラーは BotShade 側から注入されているだけで、KageKit 自体は色を持っていません。

依存しているのは discord.py と Python の標準ライブラリだけです。

公開しました

KageKit は MIT ライセンスで公開しています。

• ソースコード: github.com/VorEdgeJP/kagekit
• パッケージ: discord-kagekit

pip install discord-kagekit

Python 3.11 以降・discord.py 2.7 以降で動きます。現在のバージョンは 0.1.0 で、まだベータの位置づけです。実運用での使用実績は、v2.5.4 の 19 機能ぶんの移行がそのまま最初の一件になります。

不具合の報告や「こういう部品が欲しい」というご要望は、GitHub の Issue でお待ちしています。

BotShade をご利用の方にとっては、正直なところ 設定パネルが使いやすくなった という以上の関係はない話です。ただ、自分たちが困って作ったものが、同じところで困っている人の役に立つのであれば出しておきたい、というだけの動機で進めています。

ご意見・ご感想は サポートページ からお気軽にどうぞ。

それでは、また。