この2時間が終わったら、こんなことができるようになります
| 時間 | 内容 | 形式 |
|---|---|---|
| 00:00 - 00:10 | 前回振り返り・今日のゴール | 対話 |
| 00:10 - 00:30 | Webアプリの仕組みとデプロイとは | 座学 |
| 00:30 - 00:55 | ワーク①: シンプルなWebアプリを作る | ハンズオン |
| 00:55 - 01:05 | 休憩 | ― |
| 01:05 - 01:25 | Cloudflare Pagesとデプロイの流れ | 座学 |
| 01:25 - 01:50 | ワーク②: 作ったアプリをインターネットに公開する | ハンズオン |
| 01:50 - 02:00 | まとめ・次回予告 | 対話 |
Claude Codeと外部サービスを
つなげる仕組み。
Gmail・カレンダー等を
AIから直接操作できた。
メールの自動作成・送信
カレンダーの予定管理
複数ツールの連携
自分だけのWebアプリを作り、
インターネットに公開する。
URLを持った「自分のサービス」へ。
普段使っている「あれ」も、実はWebアプリです
インストール不要
ブラウザがあれば使える
スマホでもPCでもOK
URLでアクセスする
= Webアプリ
自分だけのWebアプリを
Claude Codeに作らせる。
そしてURLを発行して
誰でもアクセスできるようにする！
家を建てるのと同じで、3つの役割があります
文章・ボタン・入力欄など
「何があるか」を決める。
家でいうと柱や壁。
構造を作る役割。
色・サイズ・配置など
「どう見えるか」を決める。
家でいうと壁紙やインテリア。
おしゃれにする役割。
ボタンを押したら計算する等
「どう動くか」を決める。
家でいうと電気や水道。
機能を動かす役割。
index.html（HTML）
style.css（CSS）
app.js（JavaScript）
+ フレームワーク
+ ビルドツール
→ ファイルがたくさん
index.html 1ファイルだけ！
HTML + CSS + JS を
全部1つのファイルに書く。
→ 管理がラク、デプロイも簡単
難しそうな言葉だけど、やっていることはシンプルです
HTMLファイルをダブルクリック
→ 自分のブラウザで見える
→ 自分だけが見られる
URLは file:///Users/...
他の人は見えない
ファイルをサーバーに置く
→ 世界中の人が見られる
→ URLを共有するだけ！
URLは https://my-app.pages.dev
スマホからもアクセス可能
Claude CodeにWebアプリを作らせる
→ ブラウザで動くか確認する
Cloudflare Pagesにデプロイする
→ URLをもらって、スマホで見る！
全部Claude Codeで作って、Cloudflare Pagesで公開しています
FPコンサルのお客様に
事前に情報を入力してもらうフォーム。
HTML + CSS + JS の1ファイル構成
データはlocalStorageに保存（サーバー不要）
→ URLを送るだけで使ってもらえる
毎月の収支を記録・管理するアプリ。
グラフ表示・カテゴリ分け・CSV出力
スマホ対応（レスポンシブ）
→ お客様への提案ツールとしても活用
自分の仕事や生活で「あったら便利」なものを選びましょう
このテンプレートを使えば、すぐにアプリが作れます
Finderで index.html を見つけて
ダブルクリックするだけ！
ブラウザが開いて
アプリが表示されます。
Claude Codeが
open index.htmlを実行してくれます。
一発で完璧にならなくてOK。会話しながら育てましょう
Claude Codeに日本語で指示しただけで、
本当に動くWebアプリが完成しました。
でもまだ「自分のPCでしか見えない」状態。
後半で、これを世界に公開します！
Webアプリを公開するための「場所」を提供してくれるサービスです
個人利用なら完全無料。
月間リクエスト数の制限も
かなり余裕がある。
クレジットカード登録も不要。
世界中にサーバーがあり、
どこからアクセスしても速い。
HTTPS（暗号化）も
自動で対応してくれる。
ファイルをアップロードするだけ。
〇〇.pages.dev という
URLが自動で発行される。
独自ドメインも設定可能。
Cloudflareのダッシュボードで
「Create a project」をクリック
→ ファイルをドラッグ&ドロップ
→ URLが発行される
メリット: 視覚的でわかりやすい
デメリット: 毎回手動操作が必要
ターミナルからコマンド1つでデプロイ
Claude Codeに「デプロイして」と言うだけ
メリット: コマンド1つ、自動化しやすい
デメリット: 初回セットアップが必要
→ 今日はこちらを使います！
コマンドを覚える必要はありません
my-first-app.pages.dev
Cloudflareが自動で発行。
これだけで十分使える。
今日はこれでOK！
app.example.com
自分で取得したドメインを設定可能。
Cloudflareのダッシュボードから設定。
ビジネスで使うならおすすめ。
スマホからもアクセスできる。
このURLを誰かに送れば、その人も使える。
あなたは今日「Webサービスのオーナー」になりました。
プログラミングを一切書いていないのに！
ブラウザが自動で開かない場合、表示されたURLを手動でコピーしてブラウザに貼り付けてログイン。
ファイル名が index.html になっているか確認。フォルダの指定を間違えている場合も。Claude Codeに聞けば修正してくれます。
既に誰かが使っている名前は使えません。ユニークな名前に変えましょう。例: my-todo-app-2024
Claude Codeに「スマホで見るとレイアウトが崩れます。修正して再デプロイしてください」と伝えるだけでOK。
今日作ったアプリを実際に使ってみる。
「ここを変えたい」が出てきたら
Claude Codeに指示して修正→再デプロイ。
→ 「作って終わり」でなく「育てる」体験
もう1つ別のアプリを作ってみる。
仕事で本当に使えそうなものがベスト。
→ 2つ目のデプロイで「もう慣れた」を実感
「外部のデータを取ってきて
自動で処理してくれるアプリ」を
作って公開する。
→ 「放っておいても動く」仕組みを体験
第10回: アプリ作成・Cloudflareデプロイ ― 完了
次回: API連携・自動化・スケジュール実行
ご質問はいつでもお気軽にどうぞ ― LINE / メール / 次回の講座で
Claude Code パーソナル講座
講師: 山本 朋美