リバーシプラグインを元に、ナンプレプラグインを作成してみた
概要
kintone の一覧カスタマイズ画面で、ナンプレゲームが出来ます。
リバーシプラグインのコードを元にして、Gemini Code Assist で変更するとどうなるかを試してみた。
リバーシプラグインと同様に要件を指示することで、基本的なしくみは作成される。
文字の大きさや配置等の細かな調整は、マニュアルで調整した方が早い。
- レベル選択
マスコットキャラのリズに合わせた中二病的なレベル名
- 数字入力
普通のナンプレ操作（マスを選んで数字クリック）
ヒントボタンクリックで、空いているマスに一つ数字を入れてくれる。
- メモ入力
メモモードで、数字入力
ヒントボタンクリックで、空いているマスにメモを入れてくれる。
- プラグイン設定
リバーシプラグインと同じ。アイコンだけリズ（リスのマスコットキャラ）
- シミュレーション
レベル選択画面で、操作しないとシミュレーションが始まる
作成手順
違うゲームということで、初めにマスコットキャラのリズ画像作成
最初にマスコットキャラが決まっていると、ゲームにそれが反映しやすいような気がする。
- マスコットキャラのリズ画像作成
- Gemini で、おおざっぱなゲーム要件からGemini Code Assist 用のプロンプトを作成
- Gemini Code Assist で、ゲーム作成のプロンプト指示
- 結果チェック・要件追加の繰り返し...
マスコットキャラのリズ画像作成
DeeVid AI で、リバーシ・ジェンの画像からリスに変換して調整
ナンプレを作っている？
Gemini Code Assist 用のプロンプトを作成
Gemini で、おおざっぱなゲーム要件からGemini Code Assist 用のプロンプトを作成
それをたたき台にして、要件を調整
Gemini Code Assist で、ゲーム作成のプロンプト指示
リバーシプラグインのフォルダーを丸ごとコピーして、VSCode で、プロンプトを指示
結果チェック・要件追加の繰り返し...
最初から、シンプルだが一応動作するゲームになっている
- 最初のレベル選択画面
レベル機能が未実装なので、レベル選択しても同じレベルで動作
- 最初のゲーム画面
固定の数字で始まる
ゲーム要件の追加
初期バージョンに足りない要件を追加していきます。
ゲーム要件の追加は、ゲームをやりながら調整していくので、細かな調整を入れるとかなりの回数になります。
- 盤面の数字セットの生成
- 初期バージョンでは、固定の数値セットだったので、自動生成を追加
- ゲームとして成立するように数値セットのチェック追加
- 複数の正解パターンチェック
- ゲームをチェックすると、二つある数字のどちらを入れても正解になるケース
- 逆にどちらを入れていいか他のマスを見ても判断できないことになる
- レベル調整
- 空きマスの数でレベル調整
- レベル数を4つに変更
- レベル名の変更（中二病的な名前と説明）
- 縦、横、ブロック、数値でが揃ったら、アニメーション追加
- 同時に揃ったら、アニメーションが片方だけだったりを直すなど
- ゲーム完了時のアニメーションとの競合
- メモ機能
- よくある数字のメモ機能
- メモの数字が、枠外に表示を調整（位置調整、フォント調整）
- 他のマスで選択された数値は、メモから削除
- ヒント機能
- 空きマスに一つ数値を入れる
- メモモードの時は、一つの空きマスに入力可能な数値をメモ
- 間違い数カウント
- シミュレーション機能
- レベル選択画面で、10秒操作が無かったらシミュレーション動作追加
- 画面デザイン調整
- レベル選択画面の調整
- ゲーム画面でのフォント・位置調整
- ゲーム画面で、選択マス・数字の調整
- ゲーム完了時にダイアログ表示で、結果表示
- ショートカットキーでダイアログ表示
- カーソルキーで、選択マスを移動
要件プロンプト指示と変更点
変更分の差分表示が行われ、Accept クリックで、変更分が反映される
変更分のキャンセルも可能。
ただし、プロンプト指示で、以前実装したの機能が丸ごと無くなることがある。
途中経過をこまめに Git で管理した方がいい。
画面要素の位置や大きさ・色などは、プロンプトで調整するのは難しいことがあり、
その場合は CSS を直接直したりしたほうがいい。
何だか表示されないと思ってチェックすると、DOMに追加されていても枠外だったり、見えなかった状態だったりします。
Gemini Code Assist のエラー
プロンプト指示で、Gemini Code Assist のエラーが発生することがよくある。
VSCode のフォルダー開きなおしが必要な場合がある。
まとめ
既存のプラグインからGemini Code Assist でプラグイン作成もできそうですね。