GPTsを使って子供にプログラミングを教える教師を作成する

# はじめに

ChatGPTはさまざまな質問などに、答えることができますが、個別の目的のために返答を行うためにはあらかじめ準備が必要です。GPTsという機能を使うことで、特定のテーマである程度教育された専用のbotを作成することができます。
今回、「子供達にゲームの作り方を教える」という目的に対して、様々なアプローチが考えられます。例えば、基礎的なHelloWorldのプログラミングを覚えてから、ゲームへ取り組むようなアプローチもあれば、先に動くゲームを生徒に与えた上で、少しずつ修正を繰り返していくことで全体を理解するような方法もあるでしょう。こうした手法は千差万別であり、どのように教えるべきかというのが、個々の先生たちのノウハウであるかと思います。ChatGPTにこうしたノウハウを教えながら、生徒をどのように教育していければ、より楽しんでもらえるかどうか、実際にどのように学習させて、返答を引き出していくのか、一連の流れを試してみたいと思います。

# 1.botを作成する

https://chatgpt.com/create

![スクリーンショット 2023-11-29 12.37.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43766/63be9e03-fac8-4528-f097-7e071697d533.png)


# 2.どんな先生を作りたいか学習させていく...

まずは、チャットに答えていくと、先生の名前や、アイコンなどを作ってくれます。
子供用のプログラミングの先生ということで、codebuddyという名前と可愛らしいアイコンを作成してくれました。

![スクリーンショット 2023-11-29 12.39.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43766/03f73173-52a3-c97d-e161-3ff640ecb0bc.png)

この中で、先生の趣味や性格のようなものも合わせて設定しておくとよいかもしれません。「よく褒めてくれる」とか「厳しい」などなど。

# 3.質問をしながら、先生の返答を調整していきます

ChatGPTは様々な事柄を網羅的に出力することは非常に得意です。そのため、何も学習させていない状態で「ゲームを作りたい」と要望を出すと、網羅的に答えが書き出され、子供にとってはわかりにくいのではないかと思います。

![スクリーンショット 2023-11-29 12.53.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43766/667ac4f6-f031-ab33-6440-006329fdc91b.png)

例えば、私が子供にゲームを教えるならどうするか考えてみました。ChatGTPのように、いきなりゲームを作る方法を教えるのではなく、動作しているところのイメージを持ってもらうために、サンプルとなるプログラムを実行してもらうところから始めるかな。と思います。

そのやり方で、AIにまず、参考のリンクを表示するように指示してみました。

![スクリーンショット 2023-11-29 13.01.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43766/09023f9b-311a-cd23-1927-7cf9631fff20.png)

指示を与えると、子供達が質問を行った回答が変化していきます。

![スクリーンショット 2023-11-30 8.44.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43766/124285fd-6804-13fe-b80f-7e1f246a896d.png)

これを繰り返していくことで、子供達にどのようにプログラミングを教えていけば良いか徐々にAIが学習していきます。

## 3-1. プログラミング言語や環境

教える言語や、動作環境を指定します。アプリを作りたいのか、ブラウザで作りたいのか、想定される環境はさまざまです。今回は、「GIGAスクール端末で動くように」という前提があると仮定した上で、インストールなどの必要ないブラウザで実行するようなゲームを作っていこうと思います。
ChatGPTに「ブラウザで実行するように」という指示を与えることもできますが、私の場合は、「JavaScriptでCodePenを使って、Phaserというライブラリでゲームを作りたい」という回答を持っているので、AIに指示を行います。このあたりは、支持する側がどの程度の事前知識を持っているかによってAIの答える中身が大きく変わってきます。

![スクリーンショット 2023-11-30 9.03.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43766/d132e455-912f-e05d-fb65-16f9d10dd134.png)

環境もちゃんと答えてくれるようになりました

![スクリーンショット 2023-11-30 9.07.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43766/a9417c0a-59a5-b85d-a414-94b1488cd9a9.png)


## 3-2.具体的なプログラミングの指示 

フラッピーバードのbirdを作っていきます。
具体的にどういったプログラミングを行えば良いか指示をしておきます。
すると、コードを返してくれるので子供達はcodepenに貼り付けるだけで簡単なプログラムを実行することができます。

![スクリーンショット 2023-11-30 10.07.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43766/5211204a-327f-21e0-089d-e721bb773601.png)


![スクリーンショット 2023-11-30 9.44.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43766/646547be-c335-bf67-083b-0e9c5f809e22.png)

迫ってくる壁を追加してみる...

![スクリーンショット 2023-11-30 9.49.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43766/123923b9-6aa8-9648-f9e8-17403781666c.png)

...という形で少しずつ、子供達は指示を仰ぎながらゲームを完成に近づけていきます

## 3-3. バグを発見するために...

うまく動かない場合には、コードを全て貼り付けることでどこが間違っているかを確認してもらうことができます

![スクリーンショット 2023-11-30 10.10.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43766/3c8b812a-9f17-f4d5-35c6-da2d8f7060bd.png)

![スクリーンショット 2023-11-30 10.10.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43766/451ba9dc-ddec-5b9c-2f2a-0fab3dfb0eeb.png)

## 3-4.子供達のもっとこうしたい！を叶える

例えば、画像を鳥の画像に変えたり、背景を変えるなど、子供達のもっとこうしたい！に答えるように指示を与えていきます。

例えば、今は円で表示されている鳥を画像に変えたいという要望があるとします。
何も指示を与えない場合は、鳥の画像を入れるURLを入れるコードが提示されますが、子供達にとっては、鳥の画像をどこかのサーバーにアップロードすること自体がハードルになる可能性があるので、このように指定しておきます。

![スクリーンショット 2023-11-30 13.19.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43766/35bcdf2d-cfb9-6fc9-9987-8a46939c2284.png)


![スクリーンショット 2023-11-30 13.15.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43766/2a78639f-2fba-24f0-690d-a998919cc1fc.png)

そのため、このように指示を行い、事前に用意したアセットのファイルを使うように子供達に説明することで、この辺りの引っ掛かりを取ることができます。

最初から何度も質問を繰り返して、子供たちがどこに引っ掛かるかどうか、その引っ掛かりをどう解決していけば良いかを想定しながら、AIに学習させていく作業を行います。


# 4.画像生成を駆使して、スプライトシートを作成する

アニメーションにしたい場合も、AIに指定する場合には、「ピクセルアートでスプライトシートを作って動かしたい」という指示をするとうまくいく可能性が高いのですが、子供達にとってスプライトシートという単語自体が出てこないはずなので、こういったことも「アニメーション」というワードと紐付けてあらかじめ、学習させておくと良いかもしれません。
ともかくこうした微調整を繰り返していきます。

![スクリーンショット 2023-12-01 9.21.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43766/86a102c5-2d45-25fa-2c42-c4c6e673bca9.png)


# 5.まとまったデータをインポートする


# 6. テストプレイ

ある程度、botができてきたら、最初から全体を通してテストプレイを行います。
まだ学習させている内容が少ないうちは、アクションゲームを想定しているのにRPGやパズルゲームの質問が出ないように、シナリオをあらかじめ作って渡しておいた方がスムーズかもしれません。子供に実際にやらせてみても良いですし、子供になったつもりで一連の流れを試してみましょう。子供がハマったところがあれば、AIに追加で学習をするということを繰り返してブラッシュアップしていきます。

「ゲームを作ってみよう」

質問例(しつもんれい)

1. ゲームをつくってみたいけど、何から始めたらいい？

2. たとえば[フラッピーバード]のようなゲームを作りたい　

3. 私のパソコンで、どうやってプログラムをうごかせばいい？

4. ゲームのコードをおしえて

5. バグをみつけて...[コードをはりつける]

6. [鳥の動きがアニメーションになる]のような機能をつけてみたい

# 5.体裁を整えて保存します。

![スクリーンショット 2023-11-30 13.43.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43766/4a5c90d6-f457-47d9-c9f2-3855e7b50952.png)


# 7.その他の課題

# 7-1.MicrobitなどPC内で完結しないものについてはどのように説明できるか？写真や画像を用いる？

# 7-2.


# 参考
https://codepen.io/ju-az/pen/eYJQwLx
https://codepen.io/mitstark/pen/zEEYqd