STEP 07 / 10
自分のページを作って、公開できるようにする
Vault に溜まった情報を、スマホからでも見られる1枚のページにします。 ついでに、Claude Code に「Webページを作らせて世に出す」という一連の流れが手に入ります。 このマニュアル自体も、まったく同じやり方で作られています。
💡点線のついた言葉は押すと意味が出ます。
01
先に決める:何を外に出して、何を出さないか
ここを決めずに進むのが、いちばん危ないパターンです。Vault の中身は、そのままネットに出してはいけません。 会議の書き起こし、取引先の名前、メールの本文が丸ごと入っているからです。
図:まずは真ん中(当たりさわりのないページ)から始めるのが安全です。慣れてから右へ広げてください。
⚠️
Cloudflare Pages の URL は、推測されにくいだけで「秘密」ではありません。
誰にも教えていなくても、URL が漏れれば誰でも開けます。「見られたら困るもの」は、ログイン不要のページに置かない。これが線引きです。
02
Cloudflare のアカウントを作る
無料アカウントを作る
dash.cloudflare.com/sign-up でメールアドレスとパスワードを登録します。 独自ドメインは要りません。クレジットカードも不要です。
メールの確認と、2段階認証をオンにする
届いたメールのリンクを開いて確認。そのまま2段階認証(2FA)も設定しておいてください。 ここはサイトを公開する権限を持つアカウントなので、乗っ取られると影響が大きい場所です。
ログインしたまま、Claude Code に戻る
次の手順で、ブラウザ経由の許可画面が出ます。ログイン済みだとスムーズです。
🔑
Cloudflare のパスワードを、Claude Code のチャット欄に貼らないでください。
このあとの接続は、ブラウザの許可画面(OAuth)で行います。あなたがパスワードを打つのは、Cloudflare 自身のログイン画面だけです。
03
まず1枚、当たりさわりのないページを出してみる
いきなり Vault の中身を出さず、練習として「自分用のリンク集」を1枚公開します。 これで「作る → 出す」の流れが体で分かります。
最初の1枚は中身がどうでもいいものにしてください。「作って出す」の流れさえ体で覚えれば、あとは何でも出せます。
PROMPT 07-A最初のページを作って公開する
Cloudflare Pages に、自分用のシンプルなページを1枚公開したいです。 ホームフォルダに my-page というフォルダを新しく作って、そこで作業してください。 (ai-vault の中には作らないでください) 【作るもの】 public/index.html を1枚。中身は次のとおり。 - タイトル: 「(あなたの名前)の作業用ページ」 ← 名前は私に聞いてください - よく使うリンクの一覧(Gmail・カレンダー・Slack・Obsidian のフォルダなど。私に聞いて決めてください) - 今日の日付を表示する小さな時計 - スマホでも読める、落ち着いた見た目(グラデーションや派手な装飾は使わないこと) - 個人情報・社名・取引先名は書かないこと 【公開の手順】 1. Cloudflare へのサインインが必要です。npx wrangler login を使い、 ブラウザで許可する手順を番号付きで教えてください。 ※私にAPIトークンやパスワードを入力させないでください。 2. サインインできたら、プロジェクト名を決めて Cloudflare Pages へデプロイしてください。 プロジェクト名の候補を3つ提案してください(英小文字・数字・ハイフンのみ)。 3. デプロイが終わったら、公開URLを教えてください。 4. そのURLを実際に開いて、ページが正しく表示されているか確認してください。 表示がおかしければ直して、もう一度デプロイしてください。 【最後に】 - このあと私が「内容を直して出し直す」ときに打てばいい一言を、1行で教えてください。 - 作ったフォルダの中身を、ファイルごとに1行で説明してください。 【禁止】 - ai-vault の中身をこのページに載せないこと。 - 実在の会社名・人名・メールアドレス・電話番号を書かないこと。
公開URLの形:
次からは:「このページのここを直して、出し直して」と言うだけで反映されます。
https://(プロジェクト名).pages.dev になります。次からは:「このページのここを直して、出し直して」と言うだけで反映されます。
| つまずきやすいところ | 症状 | 直し方 |
|---|---|---|
| ブラウザが開かない | サインインの画面が出てこない | 「ブラウザが開かないので、URLを表示して。自分で貼ります」と頼む |
| デプロイしたのに古いまま | URLを開いても内容が前のまま | ブラウザの再読み込み(キャッシュを無視して読み込み)。それでも古ければ、本番向けに出せているかAIに確認させる |
| 404 と出る | ページが見つからない | ファイルが public/index.html にあるか確認する |
| プロジェクト名が使えない | すでに使われている | 別の名前にする。名前は後から変えにくいので、少し長めのほうが安全です |
04
Vault の内容を見るページを作る(自分だけが見る)
練習ができたら、本命です。ここからは公開範囲の設定が必須になります。 ログイン不要のままにするなら、固有名詞と本文を出さない作りにしてください。
PROMPT 07-BVault の要約ページを作る
ai-vault の内容を、スマホで見られる1枚のページにまとめたいです。 my-page/public/ の中に status.html として作ってください。 【載せる内容】 1. 今週の動き(会議の件数、取り込まれたノートの件数、最終更新日時) 2. 返事が必要そうなもの(件数と、期限が近い順に上位5件のタイトルだけ) 3. 期限が近いもの(日付順。「動かせない期限」と「調整できる期限」を分けて) 4. AIからの質問(_internal/questions.md の未回答件数と、代表3件) 5. 毎朝の自動処理が動いているか(_internal/last-run.md の直近7日) 【重要な制約 — 必ず守ること】 - メールの本文・書き起こしの本文は載せないこと。 - 取引先の会社名・個人名は、イニシャルまたは「A社」「Bさん」に置き換えること。 - 金額・契約条件は載せないこと。 - 載せるのは「件数」「日付」「短いタイトル」までにすること。 【公開の設定】 公開する前に、次の2つの選択肢を私に提示して、選ばせてください。 (A) このままログイン不要で公開する(上の制約を守っているので、見られても実害が小さい) (B) Cloudflare Access をかけて、自分のメールアドレスだけが開けるようにする 選んだほうの手順を、番号付きで案内してください。 (B) を選んだ場合、私がダッシュボード上で何をクリックすればよいかまで具体的に書いてください。 【更新】 毎朝の daily-vault-sync が終わったあとに、このページも作り直されるようにしたいです。 新しい定期タスクを増やさず、既存のタスクの最後に1行足す形で実現してください。
ポイント:「定期タスクを増やさず、既存の最後に足す」と書いているのは意図的です。本数が増えるほど、朝の失敗と原因追跡が増えます。
ℹ️
Cloudflare Access は無料枠で使えます。「このURLは、この人のメールアドレスでログインした人だけ開ける」という関所を、
サイトの前に置く仕組みです。Vault の中身に近いものを出すなら、これを付けてください。
05
無料枠 — ここはほぼ気にしなくていい
結論は「無料のままで大丈夫」です。Cloudflare は、見られる回数も通信量も無料で無制限。 ただし1つだけ、うっかり当たる上限があるので、そこだけ覚えておいてください。
| 無料 | 有料(月5ドル) | この使い方だと | |
|---|---|---|---|
| ページを作り直す回数 | 月 500 回 | 月 5,000 回 | ここだけ注意。1日16回まで。手で更新するぶんには絶対に届きませんが、 「更新のたびに自動で作り直す」設定にすると、意外と早く減ります |
| 見られる回数・通信量 | 無制限 | 無制限 | 気にしなくて大丈夫です。ここが無料なのが Cloudflare の強みです |
| 置けるファイル数 | 2万ファイル | 2万ファイル | 普通のページなら数十ファイルです。届きません |
ℹ️
500回を使い切っても、サイトが落ちるわけではありません。
止まるのは「作り直し」だけで、すでに公開されているページはそのまま見えたままです。翌月1日に戻ります。
あわてて課金する必要はありません。
使用量の見張りは、ステップ06 の PROMPT 06-Cが GitHub のぶんと一緒に見てくれます。ここで別に何かする必要はありません。
使用量の見張りは、ステップ06 の PROMPT 06-Cが GitHub のぶんと一緒に見てくれます。ここで別に何かする必要はありません。
このステップの完了チェック
- Cloudflare のアカウントがあり、2段階認証がオン
- 練習ページが
*.pages.devで開ける - 「直して出し直して」で更新できることを1回試した
- Vault の内容を出すページは、固有名詞を伏せている or Access をかけている