PCカフェ（No.35：補講ーGeminiでhtml）（AI-№9）

開催日時：2026年6月23日（火）19:00　〜　20:40
参加者 8名：石田、伊藤、江口、江守、久保田、長澤、山本、赤染

1.復習（AI（Gemini）活用術-3/3）

• メインテーマ：AI（Gemini）活用術 3/3（最終回）
  • 今回でAI（Gemini）に関するテーマは一度終了となりました。
  • Canvasを使って文章を共同作成。一部修正もCanvasで可能。
  • 定型処理にはGemを使って。
  • メニューが盛りだくさんで、「Htmlを使うとこんなツールも作れてしまう」が未消化でした。
    ６月に繰延となりました。
• ご参照URL（AI活用情報）：[https://wp55.akazome.com/2026/05/26/pccafe_no-34/]

2.Canvasで共同作成は文章だけではありません。「HTMLで作って」でコードも書いてくれます。
ーー「自分専用の道具を作る」（プログラミング知識ゼロで実用的なツールを作る）ーー

「コードなんて分からない！」、大丈夫です。CanvasならGeminiが作ったコードを「プレビュー」画面に表示して試すことができます。
不具合があれば、入力欄に修正を依頼する内容を入れるだけで大丈夫です。
先ずは、事前にお願いした課題の内容をここでやってみましょう。

※「Vibe Coding（バイブ・コーディング）」とは、一言でいうと「プログラミングの知識がゼロでも、AIと『おしゃべり』しながら、なんとなくの雰囲気（バイブス）でアプリやWebサイトを作ってしまうこと」です。・・・CanvasとVibe Cording（詳しい説明）

（１）5月26日のPCカフェ実施記録の「（4）プラスα」に目を通してください。

（２）（4）プラスα」にある例題1と例題2に取り組んでください。

（3）Geminiに「HTMLファイルとはどのようなファイルですか？このファイルを作るとどのようなことができますか？」と質問してみてください。

（4）（必要に応じてGeminiに相談しながら）HTMLファイルを1つ作成してください。
AIに指示を出すと、AIがプログラムを作ってくれます。
やりたい内容をAIに解らせれば、コードはAIに任せれば良いのです。

（ご参考）
Canvasは文章だけでなく、プログラム（コード）もAIと一緒に書くことができます。AIには普通の言葉で修正などをお願いすると、AIはコードを書き換えてくれる。

1.「ゲームをhtmlで作ってください」と言うだけで・・・・こんなゲームができました。
・ネオンブロック崩し
・コズミックドッジ　
・サイバースネーク

2.2.「エクスプローラでOneDriveを開くとファイルに色々な雲のアイコンがある。Explorerの画面を表示して、このアイコンの説明を分かりやすくhtmlで作ってください。」
プレビュー画面を見て、「リアルなexplorerの画面にしてください。」と修正を依頼した。　Camvasには「コード」、「プレビュー」タブがある。「プレビュー」画面でアプリを試すことができ、文章と同じように手直しをお願いできる。
・OneDriveのアイコン説明

3.耳寄り情報

メンバーの皆さんがキャッチした「耳寄り情報」があったら、是非お知らせください。
このホームページの「コメント欄」、「お問い合わせ」に入力いただいてもOKです。

無料ZOOMの時間制限突破ツール

無料版ZOOMには、制限時間40分の壁があります。２つのミーティングルーム（第１ルーム、第２ルーム）を交互に切り替えて、Geminiのhtmlでこの時間制限の壁を突破するツールを作成しました。このツールには、タイマー機能もあり制限時間の5分前にアナウンスが流れます。
従来からPCカフェでも２つのZOOMルームを交互に使用していますが、
①次のルームは第１？、第２とわからなくなってしまうのが問題でした。(右側「ルーム管理」で解決)
②制限時間が来たのに気づかず、突然ZOOMが終了するのも問題でした。（左側「タイマー管理」で解決）
このツールは、この２つの問題をクリアするツールです。
「ルーム管理」は全員が、タイマー管理は主催者などが使用すれば良いでしょう。

「時間制限突破ツール」アプリの画面説明

• ルーム管理（右側上）「ルーム交代」：「現在の部屋」は第１ルームなので、右の「次の部屋」をクリックすると下の緑のボタンが「第２ルームに接続する」に変更になる。変更になった緑のボタンを押すと、第２ルームに入れる。
• ルーム管理（右側下）「各ルーム情報の設定」：ここで「第１ルーム」「第２ルーム」の情報を入力する（ダミー情報が入っているので削除して入力）。
  この画面の内容でHTMLファイルを作るには、「この設定を埋め込んだHTMLを保存する」をクリックして、名前をつけて保存する。
• タイマー管理（左側）：（第１ルーム進行中）大きな時計「00:00」にはZOOMのタイマー（経過時間）を入力する。ZOOMに入った後経過時間を確認し、下の「時間調整」（オレンジ）をクリックして入力する。実際のZOOMとは連動していない単なる目覚まし時計の機能。

（１）事前準備
　　必要なのは次の２つだけです

• ZOOM時間制限突破ツール
• ２つのミーティングルームデータ（URL、ミーティングID、パスコード）

（２）配布用「ZOOM時間制限突破ツール」の作成（対象：会の主催者など）

1. この「耳寄り情報」の最後にある「ZOOM時間制限突破ツール」のリンクをクリックすると、ツールが開く（上記表示のツール）。
2. ツールの右側（ルーム管理）の、「各ルーム情報の設定」のルーム１、ルーム２にはダミーデータが入っているので削除する。
3. ルーム１、ルーム２のデータを入力したら、その下にある青いボタン「この設定を埋め込んだHTMLを保存する」を押す。
4. 保存用ダイアログボックスが出るので、任意の名前（例：寄り道ZOOM）をつけて保存する。
5. 「寄り道ZOOM.html」が配布用ファイルとなる。

（3）ツールの使い方（対象：会の参加者全員）

1. ファイル「寄り道ZOOM.html」を右クリックし、プログラムから開く「ChromeまたはEdgeを指定」。
2. ルーム１、ルーム２にデータが入力されているのを確認したら、（次回すぐ開けるように）ブックマークに保存する。
   （「寄り道ZOOM.html」のショートカットをデスクトップに置き、右クリックでブラウザを開いても良い）
3. ルーム１をクリックするとルーム１に参加できる。
4. ルームを切り替える時は、「現在の部屋」（ルーム１）を確認し「次の部屋」をクリックするとボタンが「第２ルームに接続する」に変わる。

　※タイマーは自分だけの、単なる目覚まし時計。（全員操作可能だが）オーナーだけが操作するだけで良い。
　　ミーティングルームのタイマーと同期させるだけで、35分経過後（終了５分前）にアナウスが流れる。
※※ZOOM中はルームを切り替えるときに使用するので、ツールを消さない（ブラウザを最小化など）。

ZOOM時間制限突破ツール（←クリックするとダミーのツールが開きます。第１・第２ルームのデータを上書き入力後、任意の場所に保存して使用してください。）

（ご参考）ZOOMのルーム情報の調べ方：

←ここをクリック
自分のミーティングルームを作るには、ZOOMアカウントが必要です。
ZOOMにサインインしたホームからルーム情報を取得する方法と、
ZOOMミーティングの会議中の画面からルーム情報を取得する方法の２通りあります。

ZOOOMルーム情報の取得手順書ダウンロード