🟢 アプリが完成した人向け・希望者のみ

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

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

※ この手順は、HTMLファイル1つで動くアプリ向けです（オフ会の献立アプリはこれでOK）

💡 なぜ「公開」するの？

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

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

⚠️ 公開すると、URLを知っている人なら誰でも見られるようになります。
自分のスマホだけに送る操作ではありません。個人情報が入ったアプリは公開しないでね。

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

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

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

📄 フォルダの中のファイル名は、必ず index.html にします。
この名前でないと、公開したURLを開いても「ページが見つかりません（404）」になります。

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

オフ会で作った献立アプリのHTMLファイルを、デスクトップに「my-app」という新しいフォルダを作ってコピーしてください。 - コピーしたファイルの名前は「index.html」にしてください - フォルダを開いたら、すぐに index.html が見える状態にしてください（フォルダの中にさらにフォルダを作らない） - そのフォルダの中には、index.html 1つだけが入っている状態にしてください - このHTMLファイル1つだけでアプリが動くか確認してください。別の画像やファイルが必要な場合は、先に教えてください - 元のファイルはそのまま残してください - できたらそのフォルダを開いてください

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

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

Chromeが自動で日本語に翻訳すると、ボタンの名前がこの手順書と変わってしまいます。
（例：Create application →「アプリケーションを作成」）
迷子になりやすいので、先にオフにしておくのがおすすめです。

Chromeの右上の ⋮（メニュー）をクリック
翻訳を選ぶ
「英語を常に翻訳」の項目に✓が入っていたら、オフにする

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

3Cloudflareにログインする

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

🌐 Cloudflareを開く ↗

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

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

※ Googleアカウントがない人は、メールアドレスとパスワードでも登録できます。

📷 写真はタップすると大きく表示できます

4プロジェクトを作る

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

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

できたURLはこうなります👇
https://（つけた名前）.pages.dev ※ 名前の後ろに英数字が付くこともあります（例：menu-app-a8r.pages.dev）。同じ名前がすでに使われているときにこうなります。そのままで大丈夫です😊

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

いよいよ最後です。

folder をクリックして、手順1で作ったフォルダを選ぶフォルダごとドラッグ＆ドロップしてもOKです
ファイルが入ったのを確認して Deploy site をクリック

🎉 完成！

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

すぐに表示されない場合は、2〜3分待って、もう一度開いてください😊

それでも「404」「ページが見つかりません」と出るときは、手順1のフォルダを確認しましょう。
フォルダを開いてすぐの場所に index.html はありますか？ファイル名が違う（例：kondate.html）ときは、index.html に直してから、下の「🔄 最新版として公開したいとき」の手順で上げ直してください

🔄 修正・追加したアプリを、最新版として公開したいとき

アプリを直したり機能を追加したりしたら、同じようにフォルダをアップロードするだけで、公開中のサイトが最新版に入れ替わります。

まず、直した最新版のアプリを、手順1のフォルダにコピーし直す デスクトップのフォルダは、最初にコピーしたときのままです。元のアプリを直しても、こちらは自動では変わりません
修正した献立アプリの最新版のHTMLファイルを、デスクトップの「my-app」フォルダに「index.html」という名前で上書きコピーしてください。 - フォルダの中は index.html 1つだけの状態にしてください - 元のファイルはそのまま残してください - コピーできたら、その index.html をブラウザで開いて、修正が反映されているか見せてください
Cloudflare を開き、左のメニューの Compute → Workers & Pages をクリック手順4の①と同じです
一覧の中から、自分でつけたプロジェクト名をクリック名前を忘れたら、公開したURLの最初の部分を見てね（例：menu-app.pages.dev なら menu-app）
Create deployment をクリック
最初に公開したときと同じように、フォルダを選んでアップロード
Save and deploy をクリック上の「Production」に●が付いたままでOKです（Previewを選ぶと、公開中のサイトは入れ替わりません）

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

⏪ 前の状態に戻したいとき

直したら逆に変になった……というときは、前のバージョンに戻せます。

Cloudflare を開き、左のメニューの Compute → Workers & Pages をクリック手順4の①と同じです
一覧の中から、自分でつけたプロジェクト名をクリック
下の方にある All deployments（これまでにアップロードした記録）の一覧を見る
戻したい行の右端の … をクリック一番上の行は、今公開中のものです。戻したいのは、それより下（前の時間）の行です
Rollback to this deployment を選ぶ

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

🗑️ 公開したサイトを削除したいとき

Cloudflare を開き、左のメニューの Compute → Workers & Pages をクリック手順4の①と同じです
一覧の中から、消したいプロジェクト名をクリック
画面上のタブの Settings をクリック
一番下までスクロール
赤い文字の Delete をクリック確認の画面が出たら、表示に従って進めてください

⚠️ 消すと元に戻せません。これまでにアップロードした記録も全部消えます。

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