#29 AIと一問一答アプリを作る③――「ちょっと直して」の前に伝えること

前回は、一問一答アプリを四択にして、回答直後に○×を表示し、問題ごとの不正解回数を残す形を扱いました。

動くものができると、少し変えたくなります。
文字を大きくしたい。ボタンの位置を変えたい。

そこで、AIに
「もう少し使いやすくして」
と頼んでみる。

そんな時、文字は大きくなったけれど、画面の色も配置も変わってしまったら？

確かに、直っている。
でも、そこまでは頼んでいない。

今回は、最初の依頼に入れておきたい条件と、後から直す時の小技をまとめます。

最初に、次も使う条件を書いておく

作り始める時に、次に直す時のことも入れておきたい。
毎回作り直すより、動いたものを使い続けたいからです。

#27や#28の機能を頼む文章に、例えば、次を添えます。

【作り方と、今後の修正について】
GASのスクリプトファイルとIndex.htmlの2ファイルにまとめてください。
見た目の色や文字サイズは、後から直す場所がわかるようにまとめ、短いコメントを付けてください。
指定していない機能は追加せず、提案だけにしてください。
後の修正では、その時に渡すコードをもとに、指定部分を変更してください。
他の動作・見た目・データの形式を変える必要があれば、理由を説明し、確認してから進めてください。
変更したファイルは、ファイル名を付け、省略せず全文を出してください。
変更点と、私が画面で確かめる操作を短く添えてください。

これで、意図しない変更を完全に防げるわけではありません。
ただ、機能の希望だけでなく、どう直していきたいかも伝えられます。

変更されたファイルだけを置き換えます。
全文を頼むのは、差し替える場所を探す手間を減らすためです。元の機能が残る保証にはなりません。

後日なら、「今のコード」も渡す

同じチャットで頼んでいるから、前のコードもわかっている。
そう思いたくなります。

でも、前にAIが出したものと、今GASに入っているものは同じでしょうか。
自分で直した部分や、別の回答から貼った部分があるかもしれません。
しかも、改修が進んだり、壁打ち（AIとのやり取り）が進むと、コードの機微はAIの設定次第では、忘れ去られてしまいます。

修正を頼む時は、できる限り実際に使っている二つのファイル（コード）を渡します。
ファイル名を付けて、それぞれのコードを貼る。添付できるなら、ファイルとして渡してもよいでしょう。

「これが現在使っているコードです。これをもとに直してください」

この一文を添えます。秘密のキーや生徒の情報があれば、送る前に除きます。

見た目を残したい時は、現在の画面の画像も手掛かりになります。ただ、画像だけでは、問題の読み込みや記録の仕組みまでは伝わりません。

「変えること」と「残すこと」を分ける

例えば、問題文を読みやすくしたい場合です。
「見やすくして」では、色も配置も変える余地があります。

今回は文字の大きさだけ。
そう決めたなら、その範囲を伝えます。

【今回変えること】
問題文の文字サイズを、現在より4px大きくしてください。
スマートフォンで、文字が画面の横にはみ出さないようにしてください。

【残すこと】 背景色、ボタンの色・位置・文言は維持してください。
 四択、回答直後の○×、回答後の選択肢ロック、次の問題へ進む動きは変えないでください。
 問題シートのA〜G列の構成と、問題IDの扱いを維持してください。
 不正解回数の保存先・保存キー・データ形式は変えず、既存の記録を消さないでください。
 この変更に必要な部分だけを直してください。

「デザインはそのまま」も、色や位置に分けると確かめやすくなります。
記録も同じです。数字が表示されていても、前の記録を引き継いでいるとは限りません。

#28の不正解回数は、同じブラウザ内に残す設計でした。その前提まで、修正のたびに変えたくはありません。

動かない時は、操作と結果を伝える

不具合の修正なら、見た目の希望とは少し違います。

どこを押したのか。
本来どうなってほしいのか。
実際にはどうなったのか。

この三つを並べます。

「1問目で不正解を選ぶと、×と不正解回数1が表示されます。同じ選択肢をもう一度押すと、回数が2になります。最初の回答だけを数え、回答後は選択肢を押せないようにしてください。他の動作と見た目は維持してください」

これは、不具合が起きた場合の伝え方の例です。
「記録がおかしい」より、確かめる操作が見えます。

エラー文が出たら、そのまま添えます。
文字サイズの変更と記録の修正を一度に頼まず、一つ直して確かめてから、次へ進む。
どの変更で動きが変わったのかを追いやすくするためです。

直す前に、戻せる状態を残す

コードを置き換える前に、動いている二つのファイル（コード）を控えておきます。
日付と「四択・記録まで確認済み」などのメモを付けて、手元に保存します。

後で、どれが動いたコードだったかを探し直したくはありません。

修正後は保存し、#27から使っている末尾が/devのテスト用URLを再読み込みします。このURLは、最後に保存したコードを使うものです。Google公式の説明

文字が大きくなったかだけでなく、正解と不正解を選ぶ。連打する。次へ進む。最後から最初へ戻る。
再読み込みして、控えておいた不正解回数が残っているかも見ます。

コードを戻しても、消えた記録まで戻るとは限りません。
まず練習用の問題と記録で試すことは、この回でも変えません。

欲しい道具を、使い続けるために

伝えて、貼り替えて、確かめる手間は残ります。
それでも私には、自分の授業に合う道具を作れることに意味があります。

ただ、作った後の修正まで大仕事になると、続けにくい。

欲しいものを全部、最初から言葉にするのは難しいでしょう。
動かしてみて初めて、欲しくなるものもある。

だから、修正が要らない依頼文を目指すより、次も直せる形を残したい。
教師の仕事を減らすために作った道具で、別の仕事を増やしすぎないように。

次回でシリーズ最後です・・・

スキ、コメントお待ちしております。