ハルリンク
Webアプリの作り方ログイン/新規登録

Gemini CanvasでWebアプリをつくる

プログラミング不要・教職員向けかんたんガイド

プログラミングの知識がなくても、GoogleのGemini Canvasを使えば、 授業で使える学習アプリを会話するだけで作れます。ここではいちばん短い手順だけを紹介します。

そもそも、なにを作るの?

「Webアプリ」とは、ブラウザ(Chromeなど)で動く道具のことです。 かけ算クイズやタイピング練習のように、アプリをインストールしなくてもリンクを開くだけで使えるのが特長です。

GeminiのCanvas(キャンバス)は、会話のとなりに「作業スペース」を開き、 その場でアプリの画面やコードを作ってくれる機能です。 できあがったものをコピーすれば、ハルリンクに貼って教室へ届けられます。

手順

  1. 1. Geminiを開く

    パソコンのブラウザで gemini.google.comを開き、学校のGoogleアカウントでログインします。

    がっつり作るときは、スマホよりパソコンの方が作業しやすいです。

  2. 2. Canvasをオンにする

    メッセージ入力欄の近くにある「ツール」や「Canvas」を選びます。 これで、右側に編集・プレビュー用のスペースが使えるようになります。

  3. 3. 作りたいアプリを言葉で伝える

    「何の教科か」「どう遊ばせたいか」「1つのHTMLファイルにまとめて」を書いて送ります。 くわしく書くほど、思いどおりに近づきます。

    小学3年生向けのかけ算タイムアタックゲームを作ってください。
    ・1つのHTMLファイルにまとめる(CSSとJavaScriptも同じファイルに入れる)
    ・問題は九九からランダムに出る
    ・制限時間は60秒
    ・正解数を点数として表示する
    ・外部のライブラリやネット接続は使わない
    ・スマホでも使いやすい大きなボタンにする
  4. 4. プレビューで動かし、直してもらう

    右側のCanvasで画面を確認します。気になるところは、そのまま会話で頼んでください。

    例:「ボタンをもっと大きく」「制限時間を90秒に」「正解したら効果音のかわりに文字で『せいかい!』」

  5. 5. コードをコピーする

    Canvasで「コード」表示に切り替え、HTML全体をコピーします。 (コピーボタンがあればそれを使います)

    ハルリンクは「1枚のHTML」に対応しています。ファイルが分かれていると貼れないので、「1つのHTMLにまとめて」が大切です。

そのあとは、ハルリンクへ

コピーしたHTMLをマイページに貼り付けると、生徒向けのURLとQRコードが発行されます。 あとはClassroomやプリントで配るだけです。

マイページを開く

うまくいかないときのコツ

  • 「外部サイトの画像やライブラリは使わないで」と書いておく(教室の制限に合いやすい)
  • エラーが出たら、表示された英文をそのままGeminiに貼って「直して」と頼む
  • 一度にたくさん頼まず、「まず動くものを → あとから見た目」の順がおすすめです

トップへ戻る

児童生徒の個人情報を登録するアプリは公開しないでください。
Webアプリの作り方利用規約プライバシーポリシーお問い合わせ©CMOS