Geminiで授業アプリを作って、ライブラリに投稿するまでの全手順
前回の記事で、「授業アプリライブラリ」というプラットフォームをご紹介しました。
AIで作った教材アプリを投稿すれば、全国の先生と共有できる場所です。
でも、こんな声が聞こえてきそうです。
「アプリって、どうやって作るの？」 「コードって何？難しそう…」
大丈夫です。プログラミングの知識は一切不要です。Googleアカウントさえあれば、今日から始められます。この記事では、GeminiでHTMLアプリを作り、授業アプリライブラリに投稿するまでの全手順を、一つひとつ丁寧に説明します。
関連記事
そもそも「HTMLアプリ」って何？
難しく考えなくて大丈夫です。
HTMLとは、ウェブページを作るための言語のこと。でも先生が覚える必要はありません。Geminiに作ってもらうだけでいいからです。
できあがるのは、こんなものです。
- クリックすると答えが出てくるクイズ
- 繰り返し練習できる計算ゲーム
- スライダーを動かすと変化するシミュレーション
- フラッシュカード形式の漢字練習
ブラウザで開くだけで動くので、インストール不要。タブレットでもパソコンでも使えます。
STEP 1：Geminiを開く
まず、Googleアカウントでログインした状態で以下にアクセスします。
Googleのサービスなので、GmailやGoogleドライブと同じアカウントで使えます。
STEP 2：プロンプトを入力する
Geminiのチャット画面に、作りたいアプリの内容を入力します。このとき、最後に「HTMLで作成してください」と付け加えるのがポイントです。
プロンプトの例
小学3年生の算数「かけ算九九」の練習ができるアプリを
HTMLで作成してください。
・ランダムに問題が出題される
・答えを入力して「答え合わせ」ボタンを押すと正誤がわかる
・正解数と問題数が表示される
・子どもが楽しめるようなデザインにしてください
ポイントは3つです。
① 対象学年と教科を明記する 「小学3年生の算数」のように具体的に書くと、内容が合ったものが生成されます。
② やりたいことを箇条書きにする 「ランダムに問題が出る」「答え合わせができる」など、欲しい機能を具体的に書きましょう。
③「HTMLで作成してください」を必ず入れる これがないとコードが出てこないことがあります。
STEP 3：コードをコピーする
Geminiが返答を返したら、<!DOCTYPE html> から始まるコードのブロックが表示されます。
コードの右上に「コピー」ボタンがあるので、それをクリックしてコード全体をコピーします。
うまく動かなかったら
「プレビューで確認したい」と思ったときは、Geminiに続けてこう伝えてみましょう。
このコードをプレビューで見せてください
またはコードに問題があった場合は、
エラーが出ました。修正してください
と伝えるだけで、Geminiが直してくれます。何度でも修正を依頼して大丈夫です。
STEP 4：授業アプリライブラリに投稿する
コードが準備できたら、ライブラリに投稿します。
投稿ページを開く
入力する内容
① メールアドレス（必須） 承認・却下の連絡と、投稿状況の確認に使います。
② コードの貼り付け 「コードを貼り付け」タブを選んで、Geminiからコピーしたコードをそのまま貼り付けます。
③ プレビューで確認 貼り付けると右側にプレビューが表示されます。実際に動かして確認しましょう。「全画面で確認」ボタンで大きく表示することもできます。
④ アプリ情報を入力
- タイトル（例：九九トレーニング）
- 説明（どんなアプリか、使い方など）
- 教科
- 校種（複数選択可）
- 対象学年
- 投稿者名（ハンドルネームでOK）
⑤「公開申請する」を押す
STEP 5：承認を待つ
投稿すると、自動的に管理者に通知が届きます。あなたには受付確認のメールが届きます。
管理者が内容を確認して、問題なければ承認されます。承認されると、ライブラリに公開され、あなたにも承認メールが届きます。
投稿状況はいつでもマイページで確認できます。
よりよいアプリを作るためのヒント
「もっとこうしたい」はGeminiに伝える
一度で完璧なものができなくても大丈夫です。Geminiとのやりとりを続けて、少しずつ改善できます。
背景をもっと明るい色にしてください
問題が終わったら「おめでとう！」と表示されるようにしてください
ボタンをもっと大きくしてください
このように、日本語で普通に伝えるだけで修正してくれます。
特別支援学校向けに作るときのポイント
・文字は大きめに
・シンプルな操作（クリックだけで進む）
・色のコントラストをはっきりさせる
・一度に表示する情報を少なくする
このような要望を最初のプロンプトに加えると、より使いやすいアプリになります。
完成度より「使えるかどうか」
凝ったデザインよりも、授業で実際に使えるかどうかが大切です。子どもたちが直感的に操作できるシンプルなものから始めましょう。
まずは「九九の練習アプリ」を作ってみてください
この記事のSTEP 2で紹介したプロンプトをそのままコピーして、Geminiに貼り付けるだけで始められます。
最初はうまくいかないこともあるかもしれません。でも、Geminiは何度修正を頼んでも嫌がりません。試行錯誤しながら、自分の授業に合ったアプリを育てていく感覚で取り組んでみてください。
そして、できたものをぜひライブラリに投稿してください。
あなたが試行錯誤して作ったアプリが、全国のどこかの教室で使われるかもしれません。
前回の記事：先生が作った授業アプリを、先生たちへ届けよう。
本吉研究室 — 教育とテクノロジーの接点で、現場の先生を支えるツールを作り続けます。
コメント