ベースの社則AIへの機能追加と修正

社則AIに「要望」という機能を追加してみました。
これは社員が会社に対して様々要望を申請できる機能です。

今回はその要望機能に追加した「削除ボタン」の調整をGeminiCLIで
どのように行ったかをご紹介します！

このコラムでは以下の内容を書きました！

• 削除ボタンを調整しよう
• GeminiCLIはこんな簡単な指示で機能を作ってくれる

まずは要望フォームをお見せします。こんな感じです。

「新しい要望を出す」ボタン押下でフォームが出てくるのですが、
このフォームのレイアウトも細かく指定したわけではなく、
「要望を提案できるようにしたい」
というざっくりとしたプロンプトでGeminiCLIが作ってくれました。

削除ボタンの位置を調整

次に、そこから更に処理済みタブのデータに「削除ボタン」を追加しました。

「削除ボタンを追加して」というプロンプトに対して、
ボタン色を赤にしてくれたり、ゴミ箱アイコンを付けてくれたりとても優秀ですね。

しかしここで
「削除ボタンだけの行があるとデータ1件の縦幅が大きすぎて無駄かな」と思いました。
ここは少ないスクロールで少しでも多くの件数を表示したいはずなので
修正していきます。

そして、
GeminiCLIに「データの縦幅を縮めたい。削除ボタンの位置を修正して」
と頼んで修正してもらいます。

どこでどんな修正をするのかがハイライトされていて分かりやすいですね。
内容を確認後、承認して反映します。

エラーが発生その①

先ほどの修正内容の反映結果を確認してみようと画面を確認したら
エラーが発生していました。

エラーの箇所を確認してみると、HTMLの開始タグと終了タグが異なっていました。

「タグが間違ってる？これくらいはGeminiCLIを使わず手打ちで修正しよう」
とサッと直します。

このような見てすぐにわかるエラーは自分で修正した方が早いですね。
全部GeminiCLIに任せてもいいのですが、気を利かせすぎてなのか、
もっと大きい範囲の修正をされることがあります。

気にせず「修正して」をプロンプトで続けると理解できない
修正の無限連鎖に陥ります…。

そして再度画面を確認。するとエラーが消えて無事画面が表示されました。

エラーが発生その②

しかし、次はログインして承認済みタブを確認するとエラーが発生。

ブラウザの開発者モードでエラー内容が確認できました。

ここでも早速GeminiCLIの能力をフル活用します。先ほどのブラウザで出ていた
エラー内容を貼って修正をお願いします。

修正範囲と内容を確認して修正を反映。

削除ボタンの位置移動が完了！

無事エラーが解消できました！

削除ボタンの位置は承認済みステータスの右に移動していました。
データ1件の縦幅がすっきりしましたね。

「データの縦幅を縮めたい。削除ボタンの位置を修正して」という
ざっくりとしたプロンプトで、いい感じに修正してくれましたね。

しかし、今回の「ボタン⇒アイコンのみに変更」のように書いていない内容で
かなり調整をしてくるので、明確なイメージができているのであれば、
しっかりプロンプトで伝えておく必要があります。

削除ボタン押下時の確認も追加

削除ボタンについてはこれで完成！と思いましたが、
削除を押したら確認なしですぐにデータが削除されました。

さすがに削除の確認ダイアログは必要なので追加していきます。
こちらもGeminiCLIに「削除ボタン押下時に確認を出すようにして」
とプロンプトを打って実行します。

というわけで削除ボタン押下時の確認ダイアログが追加されました！

今回はチーム内で「好きなように機能を追加してみよう」というアイデアが出たため、
自分で必要なことを考えながらGeminiCLIの使い勝手の良さをじっくり体感できました。
実際に使ってみることで、どんな機能が求められているか見えてきて、
AIエージェントの具体的な活用方法を自分のペースで学べたのが良かったです。

こうした自由な試みを通じて、チーム全体の理解も深まり、
新しい技術への興味もぐっと高まりました。
今回作った要望機能はさらにブラッシュアップして、
社員みんなで会社に要望を出していこうと思います！