🟢 早い人向け

作ったアプリを
スマホでも見られるようにしよう📱

ブラウザのクリックだけでできます。
コマンドは使いません😊

💡 なぜ「公開」するの？

作ったアプリはパソコンの中の「ファイル」です。このファイルをスマホに送っても、 スマホではうまく開けません（コードがそのまま表示されたりします）。

ネット上に置いてURLにすると、スマホでもタップひとつで使えるようになります。 これが「公開する」ということです。

1アプリだけのフォルダを作る

公開したいファイルだけを、専用のフォルダにまとめます。

なぜ分けるの？
このあとフォルダごとアップロードします。つまりそのフォルダの中身が、そのままネットに公開されます。 関係ないファイルが混ざっていると、見せるつもりのないものまで公開してしまいます。 「公開していいものだけ」を入れた箱を作っておけば、その事故が防げます。

ファイルの場所がわからない人は、これをクロコに貼ればやってくれます👇

今日作ったアプリのHTMLファイルを、デスクトップに 「my-app」という新しいフォルダを作ってコピーしてください。 - そのフォルダの中には、そのHTMLファイル1つだけが入っている状態にしてください - 元のファイルはそのまま残してください - できたらそのフォルダを開いてください

2ブラウザの翻訳をオフにする

この手順書は英語の画面をもとに書いています。

Chromeが自動で日本語に翻訳すると、ボタンの名前がこの手順書と変わってしまいます。 （例：Create application →「アプリケーションを作成」）
迷子になりやすいので、先にオフにしておくのがおすすめです。
  1. Chromeの右上の ⋮（メニュー）をクリック
  2. 翻訳 を選ぶ
  3. 「英語を常に翻訳」のような項目がオンになっていたら、オフにする

※ もう日本語で表示されてしまっている場合は、ページを再読み込みしてください。

3Cloudflareにログインする

アプリを置く場所を用意します。無料です。

🌐 Cloudflareを開く ↗
💡 初めての人は 「Googleで続ける」 を選ぶとラクです。
メール認証がいらないので、そのまま先に進めます😊

※ 利用目的などを聞かれたら、Skip（スキップ）で大丈夫です。

📷 ここにログイン画面の写真が入ります

4プロジェクトを作る

「アプリの置き場所」に名前をつける作業です。

  1. 左のメニューの Compute を開き、一番上の Workers & Pages をクリック
    📷 メニューの写真
  2. Create application をクリック
    📷 ボタンの写真
  3. 「Make something new」の一番下にある Continue to Pages をクリック 下の方にあるので見落としやすいです。スクロールしてね
    📷 Continue to Pages の写真
  4. 「Drag and drop your files」の Get started をクリック
    📷 Get started の写真
  5. プロジェクト名を自分で入力する → 右側に✅が出たら Create project ⚠️ この名前はURLの一部になって、誰でも見られます。
    本名・メールアドレス・誕生日・電話番号は使わないでください。
    例：my-app-7391 のように、好きな言葉＋数字4桁がおすすめ
    📷 プロジェクト名の入力画面
できたURLはこうなります👇
https://（つけた名前）.pages.dev

5アプリをアップロードして公開

いよいよ最後です。

  1. folder をクリックして、手順1で作ったフォルダを選ぶ フォルダごとドラッグ＆ドロップしてもOKです
    📷 アップロード画面の写真
  2. ファイルが入ったのを確認して Deploy site をクリック
    📷 Deploy site の写真
🎉 完成！

表示されたURLをクリックすると、自分のサイトが開きます。
同じURLをスマホで開けば、スマホでも使えます📱

すぐ開けなくても大丈夫。2〜3分待つと表示されるようになります😊

🔄 アプリを直して、上げ直したいとき
アプリを修正したら、同じように上げ直せます。
  1. プロジェクトのページで Create deployment をクリック
  2. さっきと同じようにフォルダを選んでアップロード
  3. Deploy site をクリック

URLは変わりません。何度でも上げ直してOKです。

⏪ 前の状態に戻したいとき
直したら逆に変になった……というときは、前のバージョンに戻せます。
  1. Deployments の一覧を開く
  2. 戻したい行の右端の … をクリック
  3. Rollback to this deployment を選ぶ

※ Delete はそのアップロード分だけ消す機能です。サイト自体は消えません。

🗑️ サイトを消したい（非公開にしたい）とき
  1. プロジェクトのページで Settings をクリック
  2. 一番下までスクロール
  3. 赤い文字の Delete をクリック

公開したままでも料金はかかりません。気になる人だけ消せばOKです😊

🤖 クロコが「公開できません」と止まったとき
クロコに公開を頼んだとき、「エンジニアに相談してください」のように言われて止まることがあります。

これは不具合ではありません。 自分で入れた安全ルール（CLAUDE.md）がちゃんと効いているだけです。 勝手に外部公開しないように守ってくれています。
止まったときは、この手順書の方法（ブラウザで手動）で公開すれば大丈夫です。
ルールを外す必要はありません。

それでも困ったときは、近くのスタッフに声をかけてください😊

📚 もっと詳しく知りたい人へ

Cloudflareの使い方や、Git・データベースまで踏み込んだ解説はこちらが詳しいです。
Vibecoding Notes ↗ （タツヲさん / ククデ会）