保存・公開・適用

Essepageでコードを編集した後は、作業内容を保存し、準備ができた内容を公開または適用して公開サイトに反映します。

それぞれの操作には異なる役割があります。

• 保存（Save）：作業内容を開発環境に保存します。
• 公開（Publish）：新しいページを初めて公開します。
• 変更を適用（Apply Changes）：すでに公開されているページに変更を反映します。
• すべて適用（Apply All）：複数の公開ページに変更をまとめて反映します。

基本的な作業の流れは次のとおりです。

コードを編集する → 保存する → プレビューする → 公開または適用する → 公開ページを確認する

このガイドでは、それぞれの操作の違いと、状況に応じた使い方を説明します。

保存と公開は異なる操作です

ファイルを保存することと、訪問者が見るサイトを変更することは別の操作です。

ファイルを何度保存しても、公開サイトは変更されません。

訪問者が見るページを変更するには、ファイルを保存した後に公開、変更を適用、またはすべて適用を実行する必要があります。

作業内容を保存する

コードを編集してファイルを保存すると、変更内容が開発環境の作業用バージョンに反映されます。

ファイルを保存するには、次のキーボードショートカットを使用します。

• macOS：Cmd + S
• WindowsまたはLinux：Ctrl + S

たとえば、次のような見出しがあるとします。

<h1>Welcome to My Website</h1>

次のように変更して、ファイルを保存します。

<h1>Welcome to My New Website</h1>

保存した変更はプレビューで確認できます。ただし、訪問者が見る公開サイトには以前の内容が引き続き表示されます。

保存すると開発環境の作業内容は変更されますが、公開サイトは変更されません。

そのため、作業中は何度でもファイルを保存して結果を確認できます。

リアルタイムプレビューの後も保存が必要です

リアルタイムプレビューを使用すると、ファイルを保存する前でもコードの変更をすぐに確認できます。

ただし、プレビュー画面が変わっても、ファイルが自動的に保存されるわけではありません。

変更を残すには、編集が終わった後に必ずファイルを保存してください。

リアルタイムプレビューはコードの変更結果をすばやく表示する機能であり、作業内容を保存する機能ではありません。

保存せずにファイルを閉じたり、ページを再読み込みしたりすると、変更内容が失われる場合があります。

詳しくは、編集とプレビューを参照してください。

新しいページを公開する

Webページを作成するために新しいファイルを作ると、そのページはまだ公開されていない状態です。

たとえば、次のページファイルを作成したとします。

/public/about/+page.essepage

保存したファイルを公開するには、次の手順で操作します。

1. ファイルエクスプローラーで /public/about/+page.essepage を右クリックします。
2. 公開（Publish）を選択します。
3. 公開が完了すると、ページをプレビューで開いたり、公開ページへ移動したりできます。

このファイルを公開すると、/about パスでアクセスできるページが作成されます。

プロジェクトの基本サイトURLが次の場合：

https://espg.dev/my-website

公開ページのURLは次のようになります。

https://espg.dev/my-website/about

新しいページは公開した後にプレビューできます

プレビューは、一度以上公開された +page.essepage ファイルで使用できます。

新しいページを作るときは、最初からすべての内容を作り込むのではなく、基本的な内容を記述して保存してから公開するとよいでしょう。

<h1>About</h1>

<p>Welcome to the About page.</p>

ページを公開した後は、プレビューで結果を確認しながら編集を続けられます。

その後ファイルを保存しても、公開サイトはすぐには変更されません。準備ができたら変更を適用（Apply Changes）を使用します。

初回は公開、その後の更新には変更を適用を使用します。

ページを非表示にして作業する

新しいページをプレビューで開くには、最初に公開（Publish）する必要があります。

ページを公開すると、そのURLを通じて公開サイトからもアクセスできるようになります。新しく作成されたページのURLをほかの人が知る可能性は低いものの、完成前のページが訪問者に見られることを避けたい場合があります。

その場合は、ページを公開した直後にファイルを右クリックし、ページを非表示（Hide from Public）を選択してください。

ページを非表示にしても、開発環境では引き続き公開済みページとして扱われるため、プレビューを使用しながら作業できます。ただし、公開サイトではページが存在しないものとして扱われ、訪問者はアクセスできません。

非表示にしたページで作業する流れは次のとおりです。

1. 新しいページファイルを作成して保存します。
2. ファイルを公開（Publish）します。
3. 公開したファイルを右クリックします。
4. ページを非表示（Hide from Public）を選択します。
5. プレビューで確認しながらページを編集して保存します。
6. 作業が完了したら変更を適用（Apply Changes）を実行します。
7. ページを表示（Show to Public）を選択します。
8. 公開ページで最終結果を確認します。

ファイルを作成する → 保存する → 公開する → ページを非表示にする → 編集とプレビュー → 変更を適用する → ページを表示する

ページを非表示にしても、公開済みの状態自体が取り消されるわけではありません。公開サイトから訪問者がアクセスできないよう、一時的にページを隠す機能です。

ページを非表示にする機能は、公開の代わりにはなりません。最初にページを公開し、作業中は公開サイトからアクセスできないようにします。

公開済みページに変更を適用する

すでに公開されているページを編集した場合は、変更を適用（Apply Changes）を使用します。

プロジェクト作成時にテンプレートから生成されたホームページは、すでに公開されています。そのため、ホームページを編集した後は公開ではなく変更を適用を使用します。

変更を適用するには、次の手順で操作します。

1. ファイルを保存します。
2. 保存した結果をプレビューで確認します。
3. ファイルエクスプローラーで対象の +page.essepage ファイルを右クリックします。
4. 変更を適用（Apply Changes）を選択します。
5. 適用が完了したら、ページを開く（Open Page）を選択して公開ページを確認します。

たとえば、ホームページを編集した場合は、次のファイルに変更を適用します。

/public/+page.essepage

変更の適用は、選択したページだけに影響します。ほかの公開ページは更新されません。

1ページだけを変更した場合は、そのページで変更を適用を使用するのが最も簡単です。

複数のページに変更を適用する

レイアウトやコンポーネントは、複数のページで共通して使用できます。

たとえば、レイアウトには次のような要素を記述できます。

• サイトメニュー
• ヘッダー
• フッター
• 共通のページ構造

レイアウト内のメニューを変更すると、そのレイアウトを使用する複数のページに影響します。

このような共通コードの変更を複数の公開ページへ反映するには、すべて適用（Apply All）を使用すると便利です。

すべて適用を使用する前に、次の内容を確認してください。

1. 変更したファイルを保存します。
2. 影響を受けるページをプレビューで確認します。
3. 準備ができたらすべて適用（Apply All）を実行します。
4. 主な公開ページを開いて結果を確認します。

すべて適用を実行すると、公開済みのすべてのページが再適用されます。1ページだけを変更した場合は、そのページで変更を適用を使用する方が適しています。

複数のページをそれぞれ編集し、その変更をまとめて反映するときにもすべて適用（Apply All）を使用できます。

レイアウトやコンポーネントなど、複数のページで使用する共通コードを変更した場合は、すべて適用を使用してください。

どの操作を使用すればよいですか？

作業内容に応じて、使用する操作を選択します。

新しいページを作成しました

保存 → 公開 → プレビュー

新しいページは、最初に公開（Publish）しなければプレビューで開くことができません。

初めて公開した後の変更は、保存してプレビューで確認してから変更を適用を使用します。

新しいページを公開サイトに表示せずに作業したい場合

保存 → 公開 → ページを非表示 → プレビュー → 変更を適用 → ページを表示

プレビューを使用するには、最初にページを公開する必要があります。

ページが完成する前に訪問者へ表示されることを避けたい場合は、公開した直後にページを非表示（Hide from Public）を選択してください。

公開済みのページを編集しました

保存 → プレビュー → 変更を適用

テンプレートから作成されたホームページや、すでに公開済みのページを編集するときの流れです。

保存とプレビューだけでは公開サイトは変更されないため、作業が完了するまで変更を適用する必要はありません。

レイアウトやコンポーネントを編集しました

保存 → 関連ページをプレビュー → すべて適用

共通コードの影響を受ける複数の公開ページをまとめて更新するときに使用します。

適用後に公開ページを確認する

ページを公開したり変更を適用したりした後は、実際の公開ページで結果を確認してください。

ファイルエクスプローラーでは、公開済みのページファイルが緑色で表示されます。公開済みのページファイルを右クリックしてページを開く（Open Page）を選択すると、公開ページが新しいタブで開きます。

次の方法でも確認できます。

• プロジェクトダッシュボードのサイトURL（Site URL）を開く
• ブラウザーで公開ページのURLを直接開く
• 公開ページがすでに開いている場合は再読み込みする

変更を適用した直後は、キャッシュの更新に最大1分ほどかかる場合があります。

公開ページに以前の内容が表示されている場合は、しばらく待ってから再読み込みしてください。

基本的な作業の流れ

公開済みページを編集する基本的な流れは次のとおりです。

編集 → 保存 → プレビュー → 変更を適用 → 公開ページを確認

新しいページを作成する基本的な流れは次のとおりです。

基本的な内容を作成 → 保存 → 公開 → プレビュー → 編集と保存 → 変更を適用

新しいページを訪問者に表示せずに作業する場合は、公開した直後にページを非表示にします。

ファイルを作成 → 保存 → 公開 → ページを非表示 → 編集とプレビュー → 変更を適用 → ページを表示

レイアウトやコンポーネントなど、複数のページに影響するファイルを変更した場合は、プレビューで結果を確認してからすべて適用（Apply All）を使用します。

保存と公開の違いを理解すると、作業中の内容を訪問者に見せることなく、安全にWebサイトを更新できます。

よくある状況

ファイルを保存しても公開サイトが変わりません

これは正常な動作です。

保存した内容は開発環境にだけ反映されます。公開サイトを変更するには、公開、変更を適用、またはすべて適用を実行してください。

新しいページにプレビューメニューが表示されません

プレビューは、一度以上公開された +page.essepage ファイルで使用できます。

新しいページを保存してから公開（Publish）してください。

完成前のページが公開サイトに表示されることが心配な場合は、公開直後にページを非表示（Hide from Public）を選択してください。ページを非表示にしても、開発環境では引き続きプレビューを使用できます。

公開ではなく変更を適用が表示されます

そのページがすでに公開されているためです。

公開済みのページを編集した場合は、変更を適用（Apply Changes）を使用します。

変更を適用ではなく公開が表示されます

そのページがまだ一度も公開されていないためです。

新しいページを初めて公開するときは、公開（Publish）を使用します。

ページを非表示にしてもプレビューを使用できます

これは正常な動作です。

ページを非表示にすると、公開サイトで訪問者がアクセスできなくなります。ただし、開発環境では引き続き公開済みページとして扱われるため、プレビューと変更の適用を使用できます。

レイアウトを編集しても一部の公開ページが変わりません

レイアウトやコンポーネントなど、複数のページで使用されるファイルを変更した場合は、すべて適用（Apply All）を使用してください。

すべて適用が完了したら、主な公開ページをもう一度確認します。

適用しても公開ページに以前の内容が表示されます

キャッシュがまだ更新されていない可能性があります。

最大1分ほど待ってから、公開ページを再読み込みしてください。

リアルタイムプレビューに表示された変更を失いました

リアルタイムプレビューはファイルを自動的に保存しません。

編集後に Cmd + S または Ctrl + S を使用してファイルを保存してください。

次のステップ

保存・公開・適用の違いを理解したら、次のガイドへ進みましょう。

• プロジェクトのファイルとフォルダーを管理する方法：ファイルとフォルダーの管理
• エラーや実行メッセージを確認する方法：コンソールとデバッグ
• ファイルとフォルダーがページURLに対応する仕組み：ページとURL
• 複数のページで共通コードを使用する方法：レイアウトとコンポーネント