BLOG2017.10.19WEBサイトリニューアル時にhtaccessで「メンテナンス中」ページを表示する方法WEBサイトをリニューアル公開する際に、FTPソフトなどで旧データを削除して、新データをアップロード、もしくは上書きする方法は一般的だと思いますが、簡単な静的HTMLだけであれば大きな問題は無いと思いますが、システムが絡んでいたりする場合、公開する前に不具合が無いか本番サーバーでチェックしてから、公開したいという場合もあるのではないでしょうか。そんな時、チェックする間の数時間〜半日程度の間、WEBサイトを「メンテナンス中」と表記する方法が考えられます。今回はhtaccessを使って、簡単に特定のIPアドレスからのアクセス以外は、メンテナンス中ページを表記する方法をお伝えいたします。メンテナンス中ページを表示する仕組みメンテナンス中ページを表示する仕組みを簡単にご説明します。メンテナンス中のファイルを表示するためのhtaccessファイルと、メンテナンス中の表示の内容を記述したhtmlページをmente.htmlなどの名前で作成して、ドキュメントルートにこの2つのファイルを設置します。この方法は、分かりやすく言うとmente.html以外へのアクセスはすべてmente.htmlにリダイレクトさせるという方法ですが、正しくは「特定のIPアドレスからのアクセスを除く、mente.html以外のアクセス」は503エラーとなり、503エラー内容(エラードキュメント)をmente.htmlとして表示するという方法です。メンテナンス中ページをHTMLで作成まずはメンテナンス中ページをhtmlで作成します。mente.htmlなど適当なファイル名で作成します。1ファイルだけで完結するように、cssなどの装飾が必要な場合はhtml内にcssも記述しましょう。数時間だけのためのページですが、訪問者が不快に思わないようにシンプルかつ丁寧な説明が必要ではないかと思います。訪問したサイトがどこのサイトなのか、間違って訪問したわけではないですよと伝えるため、サイト名やサイトのロゴ(旧サイトのロゴと新サイトのロゴが変わる場合は、その説明を入れてもいいかもしれません。(ただし、画像の設置には注意が必要なので後ほど説明します)そして「現在WEBサイトのリニューアル工事中です、しばらくお待ち下さい。」などの最低限の文章を入れます。良い文章としてはリニューアルする理由なども添えると尚いいかもしれません。リニューアル作業がいつ終わるか目処がわかる場合は、いついつまでに終わる旨を記載するとベターだと思います。(もちろんサイトの特性上必要であれば、リニューアルの数日前からリニューアル日時を告知する必要があるでしょう。)以下参考までにサンプル文章を記載します。○○WEBサイトお客様により良い情報をご提供するために、現在WEBサイトのリニューアル中です。本日15時を目処にリニューアル予定です。ご不便をおかけしますが、しばらくお待ち下さい。メンテナンス中ページへ遷移させるhtaccessの記述htaccessの内容は以下です。[R=503,L]冒頭に説明したとおり、このhtaccessファイルとさきほど作ったmente.htmlドキュメントルートに設置して、それ以外はリニューアル予定のHTML等のファイルを適宜アップすれば完成です。先程少し触れましたが、メンテナンス中ページにロゴ画像など「画像」を使う場合は、注意が必要です。今回の方法は前述したとおり、mente.html以外のアクセスはエラーとなりリダイレクトされるのですが、それは画像ファイルも例外ではありません。scheme)」としてhtml内に記述しましょう。scheme)とは「外部データ無しにウェブページにデータを埋めこむためのURIスキーム」です。簡単に言うと外部画像ファイルを参照するのではなく、html内に埋め込んでしまうという事です。データURIスキームを使用すれば内部データとして画像を埋め込むことができるので1つのHTTPリクエストで済むという事です。変換」などで検索すると、Base64変換サービスサイトが出てくると思うので、そこで変換するのが簡単だと思います。hoge.jpg」とコマンドを実行すればOKです(hoge.jpgは任意のファイル名)。変換するととても長いですが「data:image/jpeg;base64,/9j/2wCEAAEBAQEBAQEBAQE...(中略)」というような文字列に変換されますので、これを通常どおりimgタグのsrcの値として入れれば画像を埋め込む事ができます。alt=””>まとめWEBサイトのリニューアル時は、できるだけトラブルの起こらないように準備が必要です。メンテナンス中画面を作る事で、少しはスムーズな移行の手助けとなるのではないでしょうか。メンテナンスこの記事は1年以上前の記事で内容が古くなっている場合があります。【CSS】今更ながら、フレックスボックスの使い方をまとめてみた。