【アーティファクト編②】ゲーム教材が簡単に作れる魔法！ーGoogleサイトで作るグループウェア(147)ー

🙇🏻いつも、Googleサイトで作るグループウェアを見ていただき、ありがとうございます！

この記事を読んで欲しい方

企業DXや校務DXの進め方に悩んでいる方
クラウドアプリの導入に悩んでいる方
自分だけのGoogleサイトを作ってみたい方

①Claude3.5ソネットの神器、アーティファクトでゲーム教材が簡単に作れる！

　みなさんこんにちは。
　前回から引き続いてClaude3.5ソネットの神器、アーティファクトの可能性を追求していますが、なんとゲームが簡単に作れるとのことで、ためしにカードゲーム教材を作ってみました。

②データを投入してプロンプト実行

　まず、ITパスポート国家試験のOCRされたPDFをClaude3.5ソネットに添付します。

　次に、プロンプトを入力して実行します。ちなみにメモリーカードゲームというのは神経衰弱のことです。

添付ファイルを参考に、ITパスポート試験の内容を学ぶためのメモリーカードゲーム「ITパスポート用語マッチング」を作成してください。
なお、Googleサイトに埋め込むため、すべてHTMLで作成してください。

　はい、すぐにできました。
でもちょっと神経衰弱とは違いますね。
カードがみんな表（おもて）になってペアを選ぶだけです。

　更にプロンプトを入力し、実行します。

カードは裏返しにしてください。

　かなり、それっぽくできてきましたが、文字がはみ出しているカードが有りました。また、カードがペアになったら消えてほしいですね。

　さらに、プロンプトに追加し、実行します。

用語の内容のフォントは、すこし小さくしてください。
ペアがマッチしたら、カードが消えるようにしてください。

　はい、できました。
　ほぼこれでいいのですが、カードの表の「IT用語」が気になるので、表示を変えます。

　プロンプトを入力し、実行します。

かーどのIT用語の部分は、かわいいロボットの絵文字にしてください

　はい、これで完成です。

　なんと、とても簡単にゲーム教材が作れました！

　このアプリ画面のCodeを選択して、クリップボードにコピーした後、Googleサイトに、ページ全体の埋め込みで埋め込みコードを貼り付けます。
　これで、ネット上からアクセスできるようになりました。（画像はさらに改良したものです。経過時間を追加し、表示位置を上に移動し、カードが全部取れたら紙吹雪が出るようにしました）

③CloudTopでアプリ公開

　できたアプリをはこちらで公開しています。

④おわりに

　いかがでしたでしょうか？
　まさに、Claude3.5ソネットのアーティファクトの威力は凄まじいものです。
　簡単なゲームが作れるということは、それが、即教材になるということです。
　いままでに、かなりのプログラム能力がなければ作れなかったものが、このように簡単にノーコードで作れてしまいます。
　さらに、つくったゲーム教材は、Googleサイトに埋め込んで利用することができます。

　まさに、令和の教材革命や！

※有料エリアには何も書かれていません。もし、記事が気に入ったら、購入願います。