1
2025年度 第12回Javascriptプログラミング6-7
デジタル人財育成道場
浦添市
CoderDojo浦添
2
今日やること
モンスターを使ったゲーム作り
2
モンスタークリエイター
1
モンスタークリエイター
3
みんなでモンスターをつくる！
4
5
① ３〜４名でチームをつくろう！
チーム名も
きめてね！
6
② みんなペンをもとう！
7
③ えがくじゅんばんを決めよう！
1
2
3
8
④ さいごの人が、モンスターの体の場所を指定します
1
2
3
鳥っぽい体をかいて！
9
⑤ 紙を次の人にわたして、はじめの人が指示します
目を３つ
かいて！
10
⑥ また次の人にわたして、前の人がえがく場所を指定します
やばそうなクチバシ
かいて！
11
⑦ 時間までじゅんばんにモンスターをかいていきましょう
12
最後に名前をみんなでつけましょう
チクチクハリケーン
みんなのモンスターをみてみよう！
13
14
写真取るので机においてください
ちょっと休憩
15
タイピング・れんしゅう!!
16
タッチ・タイピング！
17
モンスターでプログラミング！
18
ワークの準備をしましょう
19
20
Google にログインしましょう
まずGoogle Chromeを起動して、Googleにログインしましょう。
21
Google にログインしましょう
Gmailのメールアドレスとパスワードを入力してログインします。
**********
22
Gmailを開きましょう
ログインできたら、Gmailを選択します。
23
「参加者用サイト」メールを探しましょう
Tedako / Urasoe「参加者用サイト」と件名に書いてあるメールを探して選択しましょう。
24
メールのリンクを開きましょう
もういちどメールを開いて次のリンクを選択しましょう。
25
参加者用サイト
参加者用サイトが開いたら「資料」を選択します。
26
今日の資料を開く
資料ページから今日の資料を探して右上にマウスを重ねて矢印アイコンを選択しましょう。
Geminiもひらく
27
Geminiにいつでも質問できるようにしておこうね！
モンスターをかいぞうしよう！
28
Geminiをひらこう
30
Geminiでモンスターの絵をかいぞうするよ！
ツールをクリック
31
画像をつくる、Nano bananaをえらぶよ！
Imagenをえらぶ
32
「Imagenで画像生成」をえらんでね！
バナナマークがでる
33
「画像」がえらばれて、バナナマークが出ている？
「＋」マークをえらぶ
34
ダウンロードしたモンスターをえらぶよ！
ファイルアップロード
35
「ファイルをアップロード」をえらんでね！
モンスターを選ぶ
36
さっきダウンロードしたモンスターを選んでね！
アップロード完了
37
選んだモンスターが、Geminiのプロンプトに表示されるよ！
かいぞうする
38
好きなプロンプトを入力して、モンスターをかいぞうしよう！
ポケモン風のモンスターにしてください。
たとえば、
かいぞうする
39
イメージ通りのモンスターになった？いろいろためしてね！
背景を消す
40
モンスターだけにしてみようね！
背景を消してモンスターだけにしてください
背景を削除
41
モンスターだけになった？
モンスターを選ぶ
42
モンスターをダウンロードするには、クリックしてね！
ダウンロードしよう
43
モンスターが大きく表示されたら右上のダウンロード！
ダウンロード完了
44
画像はダウンロードフォルダに保存されてるよ！
プログラミングの準備！
45
46
VSCodeを開きましょう
Visual Studio Code
47
「ファイル」->「フォルダを開く」
48
「書類」で「新規フォルダ」を選択
49
「day12」を英字で入力して「作成」
day12
50
「day12」フォルダができたら「開く」
51
「エクスプローラー」でDAY12が表示される
VSCodeでGemini！
52
53
VSCodeの「拡張機能」を選ぶ
54
「gemini」を入力して検索
55
「Gemini Code Assist」をインストール
56
「拡張機能の再起動」が出たらクリック
57
右下にメッセージが出たらバツで閉じます
58
Geminiを選択して「Sign in」をクリック
59
自分のアカウントを選択
60
ログインを選択する
61
Cookieのメッセージは「同意しない」
62
Geminiにログイン完了
メッセージはX（ばつ）アイコンを選んでとじる
63
「表示」->「コマンドパレット」を選択
64
「基本設定：ユーザー設定を開く（JSON）」を選ぶ
65
GeminiのAgentモードを有効にする行を追加
"geminicodeassist.updateChannel": "Insiders",
66
白い◯がついていると保存されていない
67
「ファイル」->「保存」で保存
または、キーボードの
control + S
でも保存できるよ！
68
Agentのスイッチをオンにします
69
ひらいているファイルを✖️で閉じます
70
ぜんぶ閉じて、エクスプローラーを選ぶ
Geminiにルールを教える
71
まもってね!
72
ルールをダウンロード
73
VSCodeとダウンロードフォルダを並べる
74
「GEMINI.md」をドラッグアンドドロップ
マウスでファイルを「エクスプローラー」に移動させます
75
GEMINI.mdがVSCodeに入った
76
✖️でGEMINI.mdを閉じる
77
Geminiを選ぶ
これでゲームを作るじゅんびができたよ！
ゲームつくろう！
78
79
また、VSCodeとダウンロードを並べる
80
Geminiで改造したモンスターを探す
81
右クリックして名称変更
82
「monster.png」に名前を変える
monster.png
83
「monster.png」をダブルクリックして開く
84
「ツール」->「背景を削除」を選ぶ
85
「ファイル」->「保存」を選択する
86
赤い閉じるボタンをクリックして閉じる
87
ファイルをVSCodeにドラッグアンドドロップ
88
モンスターがVSCodeに入った
89
✖️で閉じる
90
Geminiを選ぶ
91
ゲームを作るプロンプトを入力して実行
これからの作業は、必ずGEMINI.mdのルールに沿って下さい。
プロジェクトフォルダにあるmonster.pngファイルをモンスターにして、シューティングゲームを作って下さい。
92
Geminiがゲームプログラミングを開始
93
Acceptが出たら「Always accept…」を選ぶ
94
終わったら「▷」になります
95
エクスプローラーを選んでできたファイルを確認
index.htmlみたいなファイルができてるかな？
96
右下のGoLiveでゲームをみてみよう
97
右クリック「Open with Live Server」でもOK
98
ゲームが表示される
99
プレイしてみよう
100
おかしかったらプロンプトで直してもらう
Geminiに何がおかしいかつたえて、なおしてもらおうね！
かいぞうしよう！
101
102
ゲームオーバーのアニメーション
ゲームオーバーになったら、1匹のモンスターを画面いっぱいに拡大表示して、笑っているアニメーションにして。
103
ゲームオーバーが変わった
なんかウザっ...w
104
Geminiとゲームをかいぞう
あとは自分のアイデアでいろいろかいぞうしてみてね！
105
次の開催（土曜日）