2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

試験対策大丈夫?ChatGPTとGlideでクイズアプリ作る

Last updated at Posted at 2025-08-14

試験対策に使える4択問題アプリの作成

22307268.jpg

突然、会社から命じられて試験を受けること、ありませんか?

私の会社ではお客さまの安全・安心を守るため、商品に関わる業務をしている従業員に対して「食品表示検定」の受験を推進しています。
私も初級は合格していますが、次回は中級を受験する予定なので、対策アプリを作成しました
:point_up:このアプリ、お子さんの定期テストにも活用できると思います。ぜひ作ってみてください!

無料テンプレートで簡単に作れると思っていたのに、クイズテンプレートが有料になっていて…残念すぎます(泣)
image.png

頑張って一から作ってみることにしました。

1 ChatGPTに作り方をおしえてもらう。

ざっくり流れを理解してから進めていきます。

「Glideで4択クイズ アプリを作りたい」からスタート

:robot:ChatGPT:

では、Glideで4択クイズアプリを初心者向けに、最初から最後まで分かりやすく説明しますね。「初めてアプリを作る人が迷子にならない」くらい丁寧に行きます。

🛠 ステップ1:準備するもの

・Googleスプレッドシート(問題と答えを入れるデータ)
・Glideアカウント(無料でOK)

📄 ステップ2:スプレッドシートを作る

1.Googleスプレッドシートを開く
2.1行目に見出しを入れる
image.png

3.例として2問分入力
image.png

💡 Correct Answer は正しい答えと同じ文字を入れておきます(Optionの内容と一致させる)

🌐 ステップ3:Glideに接続

1.Glide にアクセス
2.「New Project」→「Google Sheets」を選択
3.作ったスプレッドシートを選ぶ
4.自動でアプリが作られます(まだクイズっぽくはない)

🎨 ステップ4:画面をクイズ仕様に変更

1.左側メニューで タブ を選択
2.レイアウトを「Details」に変更
3.「Text」コンポーネントを追加して、Question を表示するように設定
4.「Choice」コンポーネントを4つ追加(Option A〜Dをそれぞれ表示)

🧠 ステップ5:回答を判定するしくみ

データエディタで「ユーザーが選んだ答え」を入れるための新しい列を追加(User Answerなど)
これは「ユーザー固有列(User-specific column)」にするChoiceコンポーネントのValueをこのUser Answer列に書き込むように設定 新しい列を作って、
「User Answer = Correct Answer」で正解かどうかを判定(True/False)

:ok_hand: なんとなく流れはわかったきがします。

2 ChatGPTに問題を作ってもらう

①ChatGPTに「食品表示検定中級の4択問題を50問、Excelで作ってください」とリクエストしましたが、使用制限に達してしまい、Excel形式で受け取ることができませんでした。
image.png
②問題文をExcelにそのままコピー&ペーストし、「区切り位置」で「コンマ」を指定すると、問題・選択肢・回答をそれぞれ区切ることができます。
image.png
③成功!
問題、選択肢、答えが列で分かれました。
image.png

問題、選択肢、答えが列で分かれました。
ここで問題が発生しました!
答えは「A」「B」「C」ではなく、選択肢の文章そのもの(=の言葉)にしなければなりません。
image.png
④ここでChatGPTに「答えをABCじゃなくて 選択肢とイコールにしてほしい」とお願いして、
Correct Answer は正しい答えと同じ文字を入れることに成功。
image.png
問題をコピー&ペーストして、「コンマ区切り」で項目を分けます。
image.png

3 スプレッドシートに保存

できた問題をスプレッドシートに貼り付けます。
image.png

4 Glideの画面設定をする

①GlideにLog inします。
NewApp でを選び、先ほどのシートをインポートします。
:raised_hands:なんかもうできたっぽいやーん
image.png
②ここから表示を設定していきます。
このままだと、選択肢Aが表示されることになるので
・スマホの上にあるレイアウトを押してITEMS DATA のDescription の”T選択肢A”を削除します。

image.png

image.png

5 「ユーザー固有(User-specific)列」を作る

アプリで回答している人の回答を入力する列をスプレッドシートで作成します。

①Glide の Data(データエディタ)を開く。
②右上の + ボタン(列を追加)を押す。
③「User-specific column(ユーザー固有)」を選ぶ(Glide の列タイプ選択で選べます)。
④列名を User Answer(または 回答(ユーザー別))にして、タイプは Text にします。

image.png

6 「正誤判定」列(If-Then-Else 列)を作る

Data エディタで + → 「If → Then → Else」列を追加。名前を Is Correct や 正誤 にする。
①条件を設定:If:User Answer is Correct Answer(=ユーザー回答 が 正解カラムと等しい)
 Then:正解(または True / 1 など好きな値)
 Else:不正解(または False / 0)
保存すると、ユーザーがボタンを押すたびに Is Correct が自動で 正解 / 不正解 に更新されます。
”If-Then-Else”は検索できます。
image.png
入力された答え(User Answer列)が答え(Answer列)と同じであれば”正解” 違えは”不正解”と表示されるように設定します。
image.png

7 回答を入力させる — 4つのボタンを使う(選択肢A〜D をボタンにする)

①Detail 画面に Button を4つ置く。

image.png
②各ボタンのラベルに 選択肢A / 選択肢 B / … を表示させる
③各ボタンの Action(アクション) を Set column(列に値を設定)にする。
④値(Value)にはそれぞれ 選択肢A(ボタンAは選択肢A の値)を入れる。
image.png

image.png
⑥これでユーザーがボタンを押すと User Answer に押した選択肢(文字列)が保存されます。
image.png

8 正解・不正解を画面に出す(ユーザーへのフィードバック)

If-Then-Else の結果をそのまま表示
①Text コンポーネントを Detail 内に置く、内容を Is Correct 列にバインド(正解 か 不正解 が表示される)。
image.png
②内容を 6で作った「正誤判定」列をえらぶ(正解 か 不正解 が表示される)。
image.png
③不要な項目は”Fields”から削除していきます。

できあがり

答えを選ぶと UserAnswerに選んだ答えが入り 
下段に正解か不正解かが表示されます。
image.png

作ってみて

最初は無料テンプレートでサクッと作ろうと取り組みましたが、まさかの有料化で、完成までに時間がかかってしまいました。
でも、実際にやってみると「何をどう設定すればいいのか」がわかってきたので、次からはサクッと作れそうな気がします。
気づいたのは、ChatGPTを信じすぎるのも良くないということです。私が理解できる内容で説明してくれなかったため、何度もやり取りすることになりました。
でも、ここは「聞き方」と「慣れ」で乗り越えていけそうです。
問題の画面に進むと、何も入力していないのに正解がでるまで”不正解”と表示されてしまうのはどうしたらいいのでしょうか…。改善方法を見つけたら、記事を更新します。

まわりの意見

問題集アプリを作ったことを報告したら、一緒に働くメンバー全員が「欲しい!」と言ってくれたので、シェアしました。
食品表示検定に特化した問題集アプリは世の中にあまりないと思うので、もしかしたらお金儲けができるかもしれません(笑)
ただ、問題を作ったのはChatGPTなので、利用は自己責任です:skull:

小4娘の意見

「カフート」で問題は作れるから:girl_tone1:

:person_frowning_tone1:「えっ?何それ?」
今どきの小学生は学校でこういうのを教えてもらうみたいです。

:raising_hand_tone1:でも一括で50問は作れないだろう!!〈ドヤ〉

image.png

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?