Gemini CanvasでWebアプリをつくる
プログラミングの知識がなくても、GoogleのGemini Canvasを使えば、 授業で使える学習アプリを会話するだけで作れます。ここではいちばん短い手順だけを紹介します。
そもそも、なにを作るの?
「Webアプリ」とは、ブラウザ(Chromeなど)で動く道具のことです。 かけ算クイズやタイピング練習のように、アプリをインストールしなくてもリンクを開くだけで使えるのが特長です。
GeminiのCanvas(キャンバス)は、会話のとなりに「作業スペース」を開き、 その場でアプリの画面やコードを作ってくれる機能です。 できあがったものをコピーすれば、ハルリンクに貼って教室へ届けられます。
手順
1. Geminiを開く
パソコンのブラウザで gemini.google.comを開き、学校のGoogleアカウントでログインします。
がっつり作るときは、スマホよりパソコンの方が作業しやすいです。
2. Canvasをオンにする
メッセージ入力欄の近くにある「ツール」や「Canvas」を選びます。 これで、右側に編集・プレビュー用のスペースが使えるようになります。
3. 作りたいアプリを言葉で伝える
「何の教科か」「どう遊ばせたいか」「1つのHTMLファイルにまとめて」を書いて送ります。 くわしく書くほど、思いどおりに近づきます。
小学3年生向けのかけ算タイムアタックゲームを作ってください。 ・1つのHTMLファイルにまとめる(CSSとJavaScriptも同じファイルに入れる) ・問題は九九からランダムに出る ・制限時間は60秒 ・正解数を点数として表示する ・外部のライブラリやネット接続は使わない ・スマホでも使いやすい大きなボタンにする
4. プレビューで動かし、直してもらう
右側のCanvasで画面を確認します。気になるところは、そのまま会話で頼んでください。
例:「ボタンをもっと大きく」「制限時間を90秒に」「正解したら効果音のかわりに文字で『せいかい!』」
5. コードをコピーする
Canvasで「コード」表示に切り替え、HTML全体をコピーします。 (コピーボタンがあればそれを使います)
ハルリンクは「1枚のHTML」に対応しています。ファイルが分かれていると貼れないので、「1つのHTMLにまとめて」が大切です。
そのあとは、ハルリンクへ
コピーしたHTMLをマイページに貼り付けると、生徒向けのURLとQRコードが発行されます。 あとはClassroomやプリントで配るだけです。
うまくいかないときのコツ
- 「外部サイトの画像やライブラリは使わないで」と書いておく(教室の制限に合いやすい)
- エラーが出たら、表示された英文をそのままGeminiに貼って「直して」と頼む
- 一度にたくさん頼まず、「まず動くものを → あとから見た目」の順がおすすめです