【AI活用】

Claude・Codexを
活用しよう！

🔰 Cloudflare簡単登録
主催：ばいざー
WHO AM I

ばいざーです

バングラデシュ出身7歳から
ずっと日本
元コンビニ本部SVファミマで10年。
12店舗・約300店舗を担当
現在はAI・経営コンサルAIと経営の両面から
企業の課題解決

事業家と名乗りたいけど、まだ「創作家」です。気軽に話しかけてください！

SELF INTRODUCTION

みなさんも、10秒で自己紹介

① 名前呼んでほしい名前
② 活動内容仕事・副業・
いまやっていること
今日のゴール：アイデア、AIに頼む、公開URL。帰る頃には自分のURLがある
TIMETABLE

今日の流れ

13:00
主催者の自己紹介・全員10秒自己紹介・今日のゴール
13:10
AIエージェントって何？
13:16
Cloudflareって何？（ほかの公開先との比較）
13:24
みんなで無料登録
13:32
CloudflareとAIをつなぐ（API連携）
13:47
R2（動画・写真の倉庫）のやり方だけ説明
13:51
何を作るか考える → チームで自己紹介（作るものを発表）
14:00
黙々タイム：作って公開まで
14:15
シェア：メンバーを入れ替えて見せ合う
14:23
交流タイム：教え合って仕上げ・再公開
14:38
シェア②：元のチームで完成報告
14:46
アンケート＆集合写真
HANDOUT

このスライドを、手元でも開いてください

このスライドを開くQRコード

前の画面と同じスライドです。リンクは押せて、AIに貼る文は「コピー」で取れます。

スマホで読み取って、PCでも開いておくと便利です。← → でめくれます

🖥️ ＝ 自分のサーバー　　⚡ ＝ Cloudflareのサーバー（世界330都市以上のデータセンターに設置）

サーバー1台から届けるか、世界中のサーバーから届けるか

🖥️🙋🙋🙋🙋🙋自分のサーバー1台
① レンタルサーバー1台に置いて、見に来た人は全員そこまで取りに行く。部屋を先に借りるので毎月定額
🖥️⚡⚡⚡⚡🙋🙋🙋🙋自分のサーバーの前で、速く届ける
② もともとのCloudflare自分のサーバーの前に立ち、世界中のCloudflareのサーバーに置いたコピーから、近くの人へ速く・安全に届ける
⚡⚡⚡⚡⚡🙋🙋🙋🙋🙋自分のサーバーなしで、世界中に置く
③ 今日使うCloudflare（Pages）自分でサーバーを借りたり管理したりしなくていい。最初からCloudflareの世界中のサーバーに置ける。普通のサイトは0円
HOW IT WORKS

Cloudflareは、どうやって世界中から届けているの？

🙋 URLを開いた人 📶 回線会社（ネット・スマホ） 直結 🏢 近くのデータセンター（部屋は借りている） ⚡ Cloudflareのサーバー（自社のもの） ページを届ける・攻撃を防ぐ・プログラムを動かす どの拠点のサーバーも、全部の仕事ができる これが世界330都市以上にある
① 部屋は借りる世界中のデータセンターやネットの交換所の一角を借りている
② サーバーは自前そこに自社設計のサーバーの棚を置いている
③ 回線会社と直結家やスマホのデータが遠回りせず、近くの拠点に入る
④ 一番近い拠点へ全拠点が同じ住所を名乗る（エニーキャスト）
READY

AIを開いて、準備（1分）

  1. いつも使っているAI（Codexなど）を開く
  2. パソコンに今回専用の「offkai-site」フォルダを作り、そのフォルダを開く
  3. ここから先は、同じ会話のまま進める
CONNECT

CloudflareとAIをつなぐ

つなぐと、次からは「公開して」と頼むだけでAIが公開まで進めます。

みんなで一緒にやります。鍵（APIトークン）は人に見せない・共有しない。今日は練習用のアカウントで、有効期限を付けて作ります。終わったらCloudflareの画面から削除できます。

チャット版のAIの人は見るだけでOK。あとでドラッグ&ドロップで公開します

R2

R2＝動画や写真の倉庫（今日は説明だけ）

サイトは建物、動画や写真は倉庫。大きなファイルを置くときに使うのがR2です。

今日はやり方を見るだけ。カードの登録はしなくて大丈夫です。動画や大きな写真を使いたくなったときに、この手順で始められます。
IDEA

AIと一緒に、作るものを考える（3分）

AIに貼る
私の仕事・趣味・毎日の中で、AIに作ってもらうと便利なものを一緒に考えてください。
Webサイトに限らず、計算ツール・チェックリスト・診断・予約表・記録帳・ミニゲームなど、ブラウザで動いてURLで共有できるものなら何でもOKです。
まず、私の仕事・趣味・最近「面倒だな」と感じていることを、1問ずつ聞いてください。
そのあと、15分で作れる小さな案を5つ、「誰が・何に使うか」を添えて出してください。

作れるものの例

お店の紹介ページ割り勘・見積もり計算持ち物チェックリスト 性格・タイプ診断習慣の記録帳クイズ・ミニゲーム

決まったら、チームの自己紹介で「こんなものを作ろうと思ってます」と発表します

TEAM ─ SELF INTRODUCTION

チームで自己紹介（1人2分以内）

① 名前と今やってること名前と
今の活動
② それにつながる経歴今の活動に
つながるこれまで
③ 思い入れ大事に
していること
④ 趣味好きなこと・
ハマっていること
⑤ 今日作るもの「こんなものを
作ろうと思ってます」

テーブルA〜Dの3人チーム。チームの中で1・2・3番も決めておいてください（あとで使います）

MAKE

同じ会話で、これを送る（エージェントの人）

AIに貼る
私のアイデアを、ブラウザで動く1ページのもの（サイト・ツール・診断・ゲームなど）にしたいです。初心者なので、質問は必ず1問ずつにして、私の答えを待ってから次を聞いてください。
聞いてほしいこと：1. 何のためのサイトか（実在する活動か、練習用の架空の企画か）　2. 誰に見てほしいか　3. 最初のページで伝える内容を3つまで　4. 見た人にしてほしい行動を1つ
質問が終わったら、作る内容を短くまとめて私に確認してください。私が「作って」と答えたら制作してください。
HTML・CSS・必要ならJavaScriptで作ってください。ビルド不要とし、React・TypeScript・外部API・ログイン・決済は使わないでください。スマホでも読みやすくしてください。住所・電話・価格・実績を勝手に作らず、私用の連絡先や顧客情報は求めないでください。架空の内容なら、ページに「練習用サンプル」と表示してください。既存のファイルや公開中のサービスは変更しないでください。追加契約・有料プラン・有料APIが必要になる場合は、理由を説明して止まり、私が了承するまで実行しないでください。
完成後は、公開するフォルダの絶対パスと、開くindex.htmlの場所を教えてください。
公開URLは、ほかの人も見られます。今日は架空の名前・予定で。自宅住所・個人の連絡先・顧客情報は入れません。
MAKE ─ CHAT

チャット版のAI（Claude・ChatGPTなど）の人は

AIに貼る
私のアイデアを、ブラウザで動く1ページのもの（サイト・ツール・診断・ゲームなど）にしたいです。初心者なので、質問は必ず1問ずつにして、私の答えを待ってから次を聞いてください。
聞いてほしいこと：1. 何のためのサイトか　2. 誰に見てほしいか　3. 伝える内容を3つまで　4. 見た人にしてほしい行動を1つ
質問が終わったら、作る内容を短くまとめて私に確認してください。私が「作って」と答えたら制作してください。
Cloudflareにそのままアップロードできるよう、HTML・CSS・JavaScriptを1つのindex.htmlにまとめてください。React・TypeScript・npm・APIキーは使わないでください。スマホでも読みやすくしてください。住所・電話・価格などは勝手に作らず、架空の内容なら「練習用サンプル」と表示してください。
完成したら、index.htmlの全文を1つのコードとして出してください。
  1. ダウンロードボタンがあれば、それで保存
  2. なければコードをコピーして、テキストエディット（Macは「標準テキスト」）やメモ帳に貼る
  3. index.html という名前で「offkai-site」フォルダに保存
  4. ダブルクリックして、ブラウザで開ければOK

Windowsのメモ帳は、保存形式を「すべてのファイル」に

MAKE IT ─ 1

黙々タイム：作って、公開まで

15:00

この15分でやること：

  1. AIに作ってもらう
  2. 公開する（つないだ人はAIに「公開して」／チャット版はドラッグ&ドロップ。次の2ページ）
  3. スマホでURLを開く

小さく作って、まず公開。詰まったら手を挙げてください🙋

PUBLISH

Cloudflareで公開する（ドラッグ&ドロップ）

  1. 左メニュー「コンピュート」→「Workers & Pages」
  2. 「アプリケーションを作成」→ Pagesの「始める」→ ドラッグ&ドロップの方法を選ぶ
    （画面によっては、下の小さなリンク「Pages を導入しようとお考えですか？ 始める」が入口）
  3. プロジェクト名を半角英数で（＝名前.pages.dev のURLになる）
  4. index.htmlが入ったフォルダをドラッグ →「サイトをデプロイ」
  5. 出てきたURLを、スマホで開く
真っ白なら：フォルダの直下に index.html があるか確認。CSSや画像が一緒でも大丈夫。直らなければ、URLと画面を講師に見せてください。
IMPROVE

1つ足して、もう一度公開

希望を1つ足す
いま作ったサイトに、〔例：一番上に大きな見出しの写真エリア〕を1つだけ足してください。
ほかの部分は変えないでください。直したら、スマホ幅でも崩れていないか確認してください。
困ったとき
作ったサイトで困っています。
期待した結果：〔どう表示されてほしいか〕
実際の結果：〔画面やエラー文。パスワードや鍵などの秘密は除く〕
直前の操作：〔何をしたか〕
どこで問題が起きたか調べ、直して再確認してください。
直したら再公開：Cloudflareで同じプロジェクトを開き「新しいデプロイを作成」→ 同じフォルダをもう一度アップ → 公開URLを再読み込み
SHARE ─ ROUND 1

メンバーを入れ替えて、作ったものをシェア

移動のしかた（テーブルは A→B→C→D→A の順に回る）

1番その場に残る
2番1つ先のテーブルへ（A→B、D→A）
3番2つ先のテーブルへ（A→C、C→A）

話すこと（1人2〜3分）

  1. 何を作ろうとしている？
  2. 公開したURLを見せる（途中でもOK）
  3. 困っていること・聞きたいこと

このまま交流タイムへ

MEET & POLISH

交流タイム：教え合って仕上げる

15:00

この時間は、話しながらでOK：

  1. まだ公開できていない人を手伝う
  2. ほかの人の作品を触ってみる・感想を伝える
  3. もらった意見で1つ足して、再公開

席を立って、ほかのテーブルに行ってもOKです

SHARE ─ ROUND 2

元のチームで、完成報告

① 何を作った？一言で
② 画面を見せるスマホでURLを開く
途中でもOK
③ 次に直したい1点もっと良くするなら？
THANK YOU

アンケート＆集合写真

アンケートのQRコード

3分で終わります。
今後の会を良くするためにご協力ください🙏

アンケートを開く

回答が終わったら、集合写真を撮ります📸
顔出しNGの方はスタンプで隠します