#27 AIと一問一答アプリを作る①――GASで、まず動くものを

前回は、教師がAIで何をするのかについて、私の考えを書きました。
よかったら一読いただいたうえで、この後をお読みください。

自分の授業プリントに合う問題が欲しい。
その問題を、一問ずつ繰り返し練習できるようにしたい。

では、実際に作ってみます。

といっても、最初から完成品を目指すと、なかなか進みません。
解説も欲しい。記録も残したい。アカウントとも連携したい。
欲しいものは増えますが、動かない時に、どこが悪いのかもわからなくなる。

今回は、問題を見る。答えを見る。次へ進む。
そこまでです。

少ない。
でも、まずはそれを、自分の手元で動かしてみたい。

「AIに作ってもらう」の、その間を埋める

「AIに頼めば、アプリを作れます」

そう言われて、頼んでみる。
すると、長いコードが出てくる。

で、これをどうするのか。

ここがわからなければ、出力されたところで止まります。
コードが書けることと、それを自分が使えることの間には、まだ作業があるのです。

今回は、AIに依頼し、コードを置き、画面を開き、操作を確かめるところまで扱います。

こうして、言葉で希望を伝え、AIが出したコードを動かしながら直していく作り方は、バイブコーディングと呼ばれることがあります。

ただ、言葉で頼めるからといって、何も知らなくてよいわけではありません。
どこに何を置くのか。何が動けば成功なのか。
最低限、そこは押さえたい。

今回の完成条件を決める

作るのは、練習用の一問一答アプリです。

問題は3問だけにします。
正誤判定や学習記録は、まだ付けません。

前回書いた即時解説や不正解回数の記録には、それぞれ仕組みが必要です。
今回は、その前にある基本の動きを作ります。

何ができれば、いったん完成なのか。

そこを先に決めておかないと、動いた後にも、注文だけが増えてしまいます。

用語を少しだけ・・・

使うのは、Google Apps Script。略してGASです。
Googleの環境でプログラムを作り、動かすための仕組みです。

PCのブラウザ、Googleアカウント、コードを生成できるAIを用意します。
学校のアカウントでApps Scriptを開けない場合は、利用設定を確認してください。
この回では、生徒の情報や実際の学習記録は使いません。

先に、よく出てくる言葉を整理します。
思った以上にいっぱい出てきます（笑）
全部覚えるというより、AIの説明を読む時の手掛かりです。

| フロントエンド |
問題やボタンが見える画面と、その画面での動き。今回は主に`Index.html`に書きます。「HTML」がそれにあたります。
「HTML」は画面の構造、「CSS」はページの見た目、「JavaScript」は画面内の動きを担当します。
今回は、それらを一つのHTMLファイルにまとめます。

| バックエンド |
Google側で動く処理。今回は`.gs`のファイルに、画面を返す処理を書きます。 読み込んだり書き込んだりする命令文の置き場所。

| スクリプト |
処理の手順を書いたプログラム。GASのコードも、画面で動くJavaScriptも、この仲間です。

| データベース（DB） |
問題や記録などのデータを整理して保存する仕組み。この連載ではスプレッドシートを問題の保存・管理場所として使います。今回はシートを用意し、問題自体はまだコード内に置きます。 バックエンドの指示で読み込まれたり、書き込まれたりします。

| デプロイ |
作ったものを、利用できる形で提供すること。今回はテスト用のURLで動作を確認します。

・・・もうしんどいですね。
正直、そこまで覚えなくても、アプリは作れます。 

とりあえず、知って欲しいのは、置き場所が二つということ。
画面を返す`.gs`のファイル
画面を作る`Index.html`です。

この分け方は、GASのHTMLサービスでウェブアプリを作る基本の形です。Google公式の説明

スプレッドシートから、GASを開く

まず、Googleスプレッドシートで新しいファイルを作ります。
https://docs.google.com/spreadsheets/u/0/
名前は、例えば「一問一答・問題管理」としておきます。

このシートが、次回から問題と答えを管理する場所になります。
今回は、セルに問題を入力する必要はありません。

上部のメニューから「拡張機能」→「Apps Script」を選びます。

すると、このスプレッドシートに紐づいたGASの編集画面が開きます。
プロジェクト名は、例えば「一問一答・練習用」に変えておきます。
Google公式の作成手順

アプリのコードを直す時も、作成したスプレッドシートの「拡張機能」から開けます。
問題を管理するシートと、アプリを作る場所を、最初からセットで用意しておく。
次回も、同じシートと同じGASプロジェクトを使います。

まず、AIに頼む

「一問一答アプリを作って」だけでも、何かは出てくるでしょう。
ただ、その「何か」が、今回欲しいものとは限りません。

最初は、使う環境、必要な動き、コードの渡し方まで指定します。
次の文章を、そのままAI（ChatGPTやGeminiなど）に送ってみてください。

Google Apps Scriptで、練習用の一問一答ウェブアプリを作ってください。
私は初学者です。まず自分だけで動作確認します。
新しく作ったGoogleスプレッドシートの「拡張機能」→「Apps Script」から、
シートに紐づいたGASプロジェクトを開いています。
このシートは後で問題の管理場所にしますが、今回はまだ読み書きしません。

【必要な動き】
・問題を1問ずつ表示する。
・問題番号を「1 / 3」のように表示する。
・最初は答えを隠す。
・「答えを見る」で答えを表示する。
・「次の問題」で次へ進み、答えを再び隠す。
・最後の問題では「次の問題」を「もう一度」に変える。
・「もう一度」で最初の問題に戻り、答えを隠す。
・答えを見る前でも次の問題へ進める。

【練習用の問題と答え】
1. 「走る」の品詞は？ → 動詞
2. 「美しい」の品詞は？ → 形容詞
3. 「静かだ」の品詞は？ → 形容動詞

【構成】
・GASのスクリプトファイルと、Index.htmlの2ファイルだけにする。
・doGetでHtmlService.createHtmlOutputFromFile('Index')を返す。
・問題と答えのデータはIndex.htmlのJavaScript内に置く。
・HTML、CSS、JavaScriptをIndex.htmlにまとめる。
・外部ライブラリ、外部APIは使わない。
・今回はスプレッドシートの読み書きや、そのための処理を追加しない。
・ログイン機能、個人情報、正誤判定、記録保存は追加しない。
・スマートフォンでも読みやすく、ボタンを押しやすくする。
・見た目はシンプルにする。
【出力の仕方】
・2ファイルを明確に分け、どちらも省略せず全文を出す。
・コードブロックの前にファイル名を書く。
・コードの後に、GASへの貼り付け方とテスト用URLの開き方を書く。
・追加の機能は提案だけにとどめ、コードには入れない。

大事なのは、上手な言い回しではありません。
自分が確かめられる条件にすることです。

「使いやすく」だけでは、どこを見ればよいかわからない。
「次の問題では答えが隠れる」なら、実際に押して確かめられます。

出てきたコードを、二つのファイルに置く

先ほど、スプレッドシートから開いたGASの編集画面に戻ります。

最初からある`.gs`のファイルを開きます。
`myFunction`などの初期コードが入っていたら、全体をAIが出したGAS側のコードに置き換えます。
これは、今回新しく作ったスプレッドシートに紐づくプロジェクトで行う作業です。

続いて、左側のファイル追加の「＋」から「HTML」を選び、名前を`Index`にします。

`.html`は自分で付けず、名前の欄には`Index`と入力します。
作成された`Index.html`の中身を、AIが出したHTML側のコードに置き換えます。

コピーするのは、コードブロックの中身です。
（前後の説明や、コードを囲むバッククォートは含めません。）

ここで、名前を確認します。
GAS側にある
`createHtmlOutputFromFile('Index')`
と、
HTMLファイルの`Index`。
大文字と小文字も含めて、同じにします。

一文字の違いで、画面が開かないこともあります。
最初は、自分なりに名前を変えず、そのまま揃える方がよいでしょう。

二つのファイルを保存します。
HTMLファイルの追加と`doGet`の役割は、先ほどのGoogle公式資料にも載っています。

「実行」ではなく、URLから開く

コードを貼ると、上に「実行」があります。
押したくなる。

ただ、編集画面で`doGet`を実行しても、それだけで一問一答の画面が開くわけではありません。ここで「デプロイ」が必要になります。
今回は、ウェブアプリのURLから開きます。

右上の「デプロイ」から、「新しいデプロイ」を開きます。

種類の選択から「ウェブアプリ」を選び、表示されたURLをクリック。
またはコピーして、同じGoogleアカウントでログインしたブラウザで開きます。

プロジェクトの編集権限がある人だけが開けるもので、最後に保存したコードが使われます。
今回は自分だけで試すので、元のスプレッドシートも他の人に共有せずに進めます。
その後「デプロイ」

画面の表示名は、言語や更新で多少異なることがあります。
目的は、ウェブアプリURLを開くことです。

権限の確認画面が出た場合は、求められている内容を確認します。
今回の構成に不要なメールやファイルへのアクセスを求められたら、そのまま進めず、AIに出したコードを見直してもらってください。

URLを開いてみた方は、もうわかると思います。
「できた。」
あとは、調整。
これが時間がかかるんですね

開いたら、押して確かめる

画面が出た。
これで完成、としたくなります。

ただ、見えていることと、狙いどおりに動くことは別です。

最初の問題で、答えが隠れているか。
「答えを見る」で、対応する答えが出るか。
次へ進むと、前の答えが消えるか。
3問目の後に、最初へ戻れるか。
答えを見ずに次へ進んでも、問題番号と答えがずれないか。

一通り押して確かめます。
最後にページを再読み込みし、最初の問題から始まることも確認します。

今回は記録を保存していません。
前回の続きから始められなくても、この段階では想定どおりです。

逆に、問題だけ変わって答えが前のままなら、直す必要があります。
教材の内容が正しくても、それでは練習に使えません。

動かなければ、「何が違うか」を返す

AIの出力は、毎回同じとは限りません。
この依頼文でも、一度で動くことは保証できません。

その時、「動きません」だけで終わると、AIも原因を絞れません。
押したボタン、期待した動き、実際の動きを分けて伝えます。

例えば、次のように。

1問目で「答えを見る」を押すと、答えは表示されます。
その後「次の問題」を押すと、問題は2問目に変わりますが、
1問目の答えが表示されたままです。
次の問題に進んだ時は、答えが隠れるように直してください。
問題の内容や見た目、他の動きは変えないでください。 
変更したファイルは、差分ではなく全文を出してください。

エラーが出たら、エラー文もそのまま伝えます。
スクリーンショットでも良いでしょう。
必要なら、今使っている二つのファイルのコードも添えます。
ただし、アカウント情報や秘密のキーなどは含めません。

直したファイルを置き換えて保存し、「新しいデプロイ」を行います。
この操作をすると、アプリ（サイト）のURLが変わります。

URLを変更したくない時は
「デプロイを管理」→「編集（ペンマーク）」→「バージョン」→「新バージョン」→「デプロイ」
この操作を行うと、URLが変わりません。

以前の記事でも書きましたが、「ちょっと直して」には、変えてほしいことと、変えてほしくないことがあります。
アプリでも、そこは同じです。

詳しい修正のコツは、#29で改めて扱います。
今回は、一つの不具合を一つずつ伝えるところまで。

動いた。では、問題をどう増やすか

ここまでできれば、問題を表示して、答えを確かめる道具の基本はできています。

ただ、まだ授業で使う完成品ではありません。
問題を増やすたびにコードを開くのは、使い続けるには面倒です。
別の教材に変える時にも、毎回コードを触るのか。

それでは、準備の手間が別の場所に移っただけかもしれません。

次回の#28では、今回用意したGoogleスプレッドシートに問題と答えを置き、同じGASプロジェクトのアプリがそこから読み込む形にします。
シートを問題の管理場所として使い、画面の仕組みと、教材の内容を分けます。

自分の授業プリントに合う問題を作り、繰り返し使えるようにする。
そこへ向けて、今回はまず、3問が動くところまで。

立派なアプリができたかよりも、何を頼み、どこに置き、何を確かめたのか。
次にも同じ手順を使えることを、大切にしたいと思います。

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