Ap-06 AIで作るウェブアプリ① 【30～40分】
GeminiのCanvasを利用して、オリジナルのウェブアプリを作成してみましょう。
授業で利用できるように、学習アプリや自習用のアプリを作成し、サイトでの配布やローカルファイルとして共有する基本的な操作を学びます。
作成する目的を明確にしてアプリの仕様を決める
- コードを生成する前に、作成するアプリの目的を明確にしておく。
・誰が使う（小学5 年生）」
・何を作る（単語クイズ・計算ドリル・暗記ものなど）
・何のために使う（自主学習・スキマ時間の定着のため）
Seet
1
コードの生成と動作の確認をする
- 指示文の工夫
・「単元名・対象学年」を具体的に書く
・「正解時に音や丸を表示」などの演出を入れる
・１つのHTML コードとして出力させる
Seet
2
教材コードの調整と確認
- コードの出力（HTML コード出力・エクスポート）
- エディタで開く（Windows メモ帳やローカルファイル「Text」で開く）
- データの修正 （問題文の追加など直接修正）
Seet
3
サイトへの埋め込みとアプリの起動
サイトへの出力方法は、環境や状況によって変化します。
いくつかの方法を覚えておくとよい。
- プレビューアプリから「エクスポート」→「Google サイト」
- Google サイトを開き、［ページ］［＋ページ全体の埋め込み］［埋め込みコード］
- HTML ファイル共有（ローカルから起動すること）
Seet
4
