こんにちは！個人でWebサイト制作サービス「Essepage」を開発しています。
皆さんはWebサイトを更新中に、編集途中の内容が公開されてヒヤッとした経験はありませんか？
私は最近、ある出来事をきっかけに、保存内容が即座に本番サイトへ反映されることの怖さを改めて痛感しました。
この記事では、その実体験からEssepageに実装した、ブログの「下書き」のように安全にサイトを更新できる新機能と、その応用方法についてご紹介します。
きっかけは友人の「うっかり保存」
先日、友人のためにEssepageで作ったWebサイトを本人が修正することになりました。「テキストを少し修正したい」とのことだったので、良い機会だと考え、Essepageのプロジェクトを共有しました。
しばらくして、友人の修正がどうなったか確認したところ、びっくりしました。
完成していない下書きの文章が、そのまま公開されていたのです。
慌てて本人に確認したところ、「Web上のエディタだと思わず、自分のPCのメモ帳ファイルのような感覚で、こまめに保存していた。修正途中だったから、まさか即公開されるとは考えもしなかった。」とのこと。
この一件で、ユーザーが意図しない公開を防ぐ仕組みの必要性を痛感しました。保存して直ちに反映されるのはスピーディかもしれませんが、それが裏目に出てしまう。この課題を解決するため、「開発環境」と「本番環境」を分離する考え方を導入することにしました。
ヒントはブログの「下書き」と「公開」
一般的なWeb開発では、開発環境で作業し、完成後に本番環境へ反映（デプロイ）するのが当たり前です。しかし、手軽さを重視するWebサービスにその概念を持ち込むのは、ユーザーにとって複雑すぎないか？と、正直、実装を後回しにしていました。まさか、こんなに早くこの問題で悩むことになるとは…。
そこで参考にしたのが、多くの人が慣れ親しんでいるブログの仕組みです。つまり、「下書き」と「公開」の概念です。
この考え方を取り入れ、Essepageに安全な更新フローを実装しました。
新規ページの公開フロー
新しくページを作って、初めて公開するまでの流れは以下の通りです。少し特殊に感じるかもしれませんが、一度やってみると納得できるフローだと思います。
ファイル生成 → 編集・保存 → 公開（ここでページが初めて作られる）
- ファイル生成: まずはファイルを作ります。ブログで新しい記事を作成するのと同じですね。
- 編集と保存: エディタでソースコードを編集し、保存します。この時点では、ページそのものがまだWeb上に存在していないため、プレビューは表示されません。まずはざっと内容を作り上げて保存します。
- 公開: ある程度、形になったら「ページ公開」メニューをクリックします。この操作で初めてページが生成され、本番環境に反映されます。
- URL発行とプレビュー開始: 公開と同時に専用URLが発行され、誰でもアクセスできるようになります。そして、このタイミングからプレビュー機能が有効になります。
（画像クリックでデモ動画を再生）
一度公開した後は、次の「ページ修正の流れ」に移ります。ここからはプレビューで表示を確認しながら、安全に修正作業を進めることができるようになります。
既存ページの修正フロー
一度公開したページを修正する際は、「公開」ではなく「適用」を使います。
[----- 繰り返し -----]
ファイル選択 → 修正 → 保存 → プレビュー → 適用
- ファイル選択: 修正したいファイルを開きます。
- 修正と保存: エディタでコードを修正し、保存します。プレビュー画面だけが更新されます。
- プレビュー: この段階では、公開中のページには一切変更はありません。自由に修正や試行錯誤ができます。
- 適用: 修正が完了したら、「ページを適用」メニューをクリックします。この操作で、変更内容が公開中のページに反映されます。
（画像クリックでデモ動画を再生）
+EssepageはCDNを利用してページ表示を高速化しているため、適用した修正が公開ページに反映されるまで、最大で2〜3分程度かかる場合があります。
実は「公開」と「適用」は同じ
気づいた方もいらっしゃると思いますが、実は「公開」と「適用」は、内部的には同じ処理、本番環境へのデータ反映を行っています。
ユーザー体験を考慮し、新規作成時は「公開」、既存ページの更新時は「適用」と、文脈に合わせてラベルを表示するようにしました。
技術的には、編集中のデータを保持する領域（下書き） と、公開用のデータを保持する領域（本番） を完全に分離しました。エディタは「下書き」データを参照し、公開サイトは「本番」データを参照することで、シンプルながらも安全な開発・本番環境を実現しています。
【応用編】環境ごとに値を切り替えるグローバル変数
この「下書き（開発環境）」と「公開（本番環境）」の仕組みのおかげで、さらなる応用が可能になりました。
本格的な開発では、開発環境と本番環境でAPIのエンドポイントや設定値を切り替えたいケースがよくあります。Essepageでは、それぞれの環境で使えるグローバル変数を設定できます。
例えば、利用するAPIのURLを環境ごとに分けたい場合です。
-
開発用URL:
https://dev-api.mysystem.com -
本番用URL:
https://api.mysystem.com
このようなケースでは、グローバル設定ファイル（/+globals.config.json）に、Essepage独自の構文 {{@dev: 開発環境の値 [@prod] 本番環境の値 :@}} を使って以下のように定義します。
{
"API_URL_BASE": "{{@dev: https://dev-api.mysystem.com [@prod] https://api.mysystem.com :@}}"
}
@devが開発環境（下書き）、@prodが本番環境（公開）に対応します。
そして、JavaScript側では次のように変数を呼び出します。
const fetchUrl = `{{@global_val: API_URL_BASE :@}}`;
try {
const response = await fetch(fetchUrl);
const json = await response.json();
console.log(json);
} catch (error) {
console.error(error);
}
これだけで、Essepageが環境を自動的に判別し、プレビュー（下書き）では開発用URL、公開サイトでは本番用URLが使われるようになります。APIキーやGoogle AnalyticsのトラッキングIDを切り替える際にも非常に便利です。
まとめ
友人とのエピソードをきっかけに実装した、「下書き」と「公開」の概念を借りた開発・本番環境機能についてご紹介しました。
この機能によって、Essepageは次のようなメリットを提供できるようになりました。
- 安心な編集体験: 「保存したら即本番」というプレッシャーから解放され、安心して作業に集中できます。
- 確実な公開作業: プレビューで納得がいくまで確認し、自信を持って本番サイトに反映できます。
- 高度な開発サポート: 環境ごとの変数を手動で書き換える手間や設定ミスを防ぎ、より効率的な開発を可能にします。
Essepageを使えば、Webサイト制作初心者の方からプロの開発者まで、より安全でストレスのないサイト更新が可能になります。
この記事が、同じようにサイト更新の安全性に課題を感じている個人開発者やWeb制作者の方々のヒントになれば幸いです。ぜひEssepageで、快適なWebサイト制作を体験してみてください！