エディターの基本操作

Essepageのコードエディターは、Webサイトのファイルを管理し、コードを記述するためのブラウザベースの作業環境です。

クイックスタートでは、トップページのファイルを開いてコードを編集し、保存、プレビュー、変更の適用を行いました。このガイドでは、エディターの画面構成と基本的な使い方を説明します。

エディターを開く

プロジェクトのダッシュボードでコードエディター（Code Editor）ボタンを選択すると、そのプロジェクトのエディターが開きます。

エディターでは次の作業を行えます。

プロジェクトのファイルとフォルダーを確認する
ページファイルを開いて編集する
新しいファイルやフォルダーを作成する
変更内容を保存する
作業中のページをプレビューする
ページの公開や変更の適用を行う
公開されたページを開く

すべての作業はブラウザ上で行われるため、別のコードエディターをインストールする必要はありません。

エディターの画面構成

エディターは主に5つの領域で構成されています。

上部メニュー：ファイル操作、画面構成、ページ操作、エディター設定に使用するメニューです。
ファイルエクスプローラー：プロジェクトのファイルやフォルダーを確認、管理します。
コード編集エリア：選択したファイルのコードを表示、編集します。
プレビュー画面：開発環境に保存されたページがどのように表示されるかを確認します。
コンソール画面：ブラウザコンソールを利用できないブラウザや端末で、デバッグなどの出力を確認します。

画面サイズや作業内容に合わせてプレビュー画面を開閉し、必要な領域に集中できます。

上部メニュー

エディターの上部には次のメニューが表示されます。

ファイル（File）：ファイルの作成や保存など、ファイルに関する操作を行います。
編集（Edit）：元に戻す、やり直し、検索など、コード編集に必要な機能を使用します。
表示（View）：エディターの画面や作業領域の表示を調整します。
ページ（Page）：ページのプレビュー、公開、変更の適用などを行います。
テーマ（Theme）：エディターの表示テーマを変更します。
ヘルプ（Help）：エディターの使い方や関連情報を確認します。

よく使用する機能は、上部メニューだけでなく、ファイルの右クリックメニューやキーボードショートカットからも実行できます。

ファイルエクスプローラーを使用する

画面左側のファイルエクスプローラー（File Explorer）には、現在のプロジェクトのファイルとフォルダーが表示されます。

フォルダーを選択すると開閉でき、ファイルを選択するとコード編集エリアに表示されます。

プロジェクトの構成は、選択したテンプレートや作成するサイトによって異なりますが、一般的に次のようなファイルが含まれます。

/publicフォルダーと +page.essepage などのページファイル
CSSとJavaScriptファイル
ads.txtやsitemap.xmlなどのその他のファイル
レイアウトとコンポーネント
プロジェクト設定ファイル

ファイルやフォルダーの場所は、Webサイトの構成やページURLに影響することがあります。ファイルを新しく作成したり移動したりする前に、ページとURLでファイル名とパスのルールを確認してください。

ファイルメニューを開く

ファイルまたはフォルダーを右クリックすると、その項目で使用できるメニューが表示されます。

ページファイルでは次の操作を行えます。

プレビュー（Preview）：開発環境に保存されたページをプレビューで開きます。
公開（Publish）：まだ公開されていない新しいページを公開します。
変更を適用（Apply Changes）：すでに公開されているページの変更内容を公開サイトに反映します。
ページを開く（Open Page）：公開されたページを新しいタブで開きます。

表示されるメニューは、ファイルの種類やページの公開状態によって異なります。

ファイルを開いて編集する

ファイルエクスプローラーでファイルを選択すると、コード編集エリアの新しいタブに開きます。

複数のファイルを開いたまま、タブを選択して切り替えられます。現在選択しているタブのファイルがコード編集エリアに表示されます。

コード編集エリアでは、ファイルの種類に応じてHTML、CSS、JavaScript、Markdownなどのコードを記述できます。

行番号と構文に応じた色分けが表示されるため、ページの構造と内容を簡単に見分けられます。

基本的なキーボードショートカット

次のショートカットを使用すると、よく使う操作をすばやく実行できます。

操作	macOS	WindowsまたはLinux
保存	`Cmd + S`	`Ctrl + S`
元に戻す	`Cmd + Z`	`Ctrl + Z`
やり直す	`Cmd + Shift + Z`	`Ctrl + Shift + Z`
ファイル内を検索	`Cmd + F`	`Ctrl + F`
次の一致箇所を選択	`Cmd + D`	`Ctrl + D`

ブラウザやOSによって、一部のショートカットの動作が異なる場合があります。

変更内容を保存する

コードを編集したら、ファイルを保存します。

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

保存したコードは開発環境に反映され、プレビューで結果を確認できます。

ファイルを保存しても、訪問者に表示される公開サイトは変更されません。

公開サイトに作業内容を反映するには、ページを公開するか、変更を適用を実行する必要があります。

作業中はこまめに変更内容を保存し、プレビューで結果を確認することをおすすめします。

プレビューを使用する

プレビューは、開発環境に保存されたページがWebブラウザでどのように表示されるかを確認する画面です。

プレビューには2つの表示モードがあります。

プレビューエリア表示モード：エディター右側のプレビューエリアに表示します。
ブラウザタブ表示モード：ブラウザの新しいタブに表示します。

通常、エディターを開くとプレビューエリアにプレビューが表示されます。プレビューエリアの新しいウィンドウでプレビューを開くアイコンを選択すると、新しいタブでもプレビューを開けます。

2つのモードは同時に使用できます。たとえば、プレビューエリアでモバイル向けの画面を確認しながら、タブのプレビューでPC向けの画面を確認できます。

ページファイルを保存すると、開いているプレビュー画面も更新されます。

プレビューが開いていない場合は、次の手順で開きます。

エディター上部メニューの右側にあるプレビューエリアのアイコンを選択します。
ファイルエクスプローラーで確認するページファイルを探します。
ファイルを右クリックします。
プレビュー（Preview）を選択します。

プレビューできるのは、公開された +page.essepage ファイルだけです。CSS、JavaScript、レイアウト、コンポーネントなど、ページを構成する補助ファイルを個別に公開する必要はありません。

プレビューには開発環境の内容が表示されます。訪問者が見る公開ページとは内容が異なる場合があります。

公開サイトに反映する

作業内容を公開サイトに反映する場合には、次の2つがあります。

新しいページ用のファイルを作成した場合、そのページはまだ公開されていません。公開を使用して公開サイトに反映します。

すでに公開されているページを編集した場合は、変更を適用を使用して公開サイトに反映します。

新しいページをプレビューするには、最初にページを公開します。その後、編集しながらプレビューで結果を確認し、準備ができたら変更を適用して公開サイトを更新できます。

公開と変更を適用は、内部的には同じ公開処理を行います。ページが以前に公開されているかどうかによって、表示される操作が変わります。

新しいページを公開する

新しく作成したページには、まだ訪問者がアクセスできません。

ファイルエクスプローラーでページファイルを右クリックし、公開（Publish）を選択すると、そのページが初めて公開されます。

公開されたページを更新する

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

ファイルエクスプローラーでページファイルを右クリックし、変更を適用を選択すると、保存した変更内容が公開ページに反映されます。

公開済みのページを編集して保存すると、そのファイルに紫色のインジケーターが表示されます。これにより、変更の適用が必要なファイルをひと目で確認できます。

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

ファイルを保存するたびに、すぐに変更を適用する必要はありません。プレビューを確認しながら複数のページを編集し、すべての作業が終わってからまとめて適用できます。

特に、複数のページで使用されるレイアウトやコンポーネントを編集した場合は、そのファイルを使用するすべてのページに変更を適用する必要があります。

共通の変更内容を複数の公開ページにまとめて反映するには、すべて適用（Apply All）を使用します。

公開されたページを確認する

ページを公開したり変更を適用したりした後は、公開ページに正しく反映されたか確認してください。

ファイルエクスプローラーでページファイルを右クリックし、ページを開く（Open Page）を選択すると、公開ページが新しいタブで開きます。

プロジェクトのダッシュボードからサイトURL（Site URL）を開いて確認することもできます。

アドレスを覚えている場合は、ブラウザのアドレスバーに直接入力してもかまいません。

変更を適用した後、キャッシュが更新されるまで最大1分程度かかる場合があります。以前の内容が表示される場合は、少し待ってからページを再読み込みしてください。

基本的な作業の流れ

エディターでページを編集する基本的な流れは次のとおりです。

ファイルエクスプローラーで編集するページを探します。
ファイルを開いてコードを編集します。
ファイルを保存します。
プレビューで結果を確認します。
新しいページは公開し、既存ページの変更内容は適用します。
公開されたページを開いて最終結果を確認します。

ファイルを開く → コードを編集 → 保存 → プレビュー → 公開または変更を適用 → 公開ページを確認

変更内容が表示されない場合

作業内容が公開ページに表示されない場合は、次の項目を確認してください。

ファイルを保存したか確認します。
編集したページがプレビューで開かれているか確認します。
ファイルパスを確認し、正しいファイルを編集したか確認します。
HTML、CSS、JavaScriptにエラーがないか確認します。
公開ページを見ている場合は、変更を適用したか確認します。
変更を適用した直後の場合は、少し待ってからページを再読み込みします。

変更内容がプレビューには表示されているのに公開ページには反映されていない場合、ファイルを保存しただけで変更を適用していない可能性があります。

次のステップ

エディターの基本操作を理解したら、次のドキュメントに進んでください。

新しいページを作成する：ページを追加する
ファイルとURLの関係を確認する：ページとURL
実際のWebサイトを手順に沿って作成する：ランディングページを作成する
複数のページで共通コードを使用する：レイアウトとコンポーネント
公開と変更の適用について詳しく学ぶ：公開とサイト管理

言語

目次

Title