EC-CUBE4のメンテナンスモードの使い方とカスタマイズ方法

ishiki-jintaro システム・サーバー

公開日： 2024.11.27

EC-CUBE4には「メンテナンスモード」という便利な機能があります。

メンテナンスモードを適切に使えば、サイトのメンテンナンス中でもユーザー体験を損なうことのないサイト運営ができます。

本記事では、メンテナンスモードの基本的な使い方とより効果的な利用方法としてのカスタマイズ方法を解説します。

メンテナンスモードとは？

メンテナンスモードは、EC-CUBEのユーザー画面にメンテナンス画面を表示できる機能です。

EC-CUBE バージョン4.0.1からデフォルトの機能として追加されました。

（EC-CUBE 4.0.0以前のバージョンでは、メンテナンスモードの利用にはプラグイン導入やソースコード上でのカスタマイズが必要でした。）

参考：

4.0.0以前のバージョンでのメンテナンスモードの実現には、以下のプラグインなどがありました。

https://www.ec-cube.net/products/detail.php?product_id=1037

※動作は未確認です。最終更新日が古いため使用の際は動作確認を行ってください

メンテナンスモードの使い方と機能

管理画面で簡単に有効化

管理画面の「コンテンツ管理」 > 「メンテナンス管理」のページからボタン一つでメンテナンスモードを有効化できます。

「有効にする」を押すとサイト訪問者にはメンテナンス中である旨のページが表示されるようになります。

プラグイン・キャッシュ操作時の自動切り替え

プラグインのインストール・有効化・無効化・削除の操作とキャッシュ削除の操作時には、自動的にメンテナンスモードに切り替わり、システム側での作業完了時には、通常モードに戻る機能があります。

自動切り替えによって管理画面の操作によるシステム内部の作業とユーザーの操作がぶつかってシステムが壊れることを防いでいます。

運営者はプラグインのキャッシュ関連の操作を行うと一瞬メンテナンスモードの切り替わることは把握しておきましょう。

メンテナンスモードのアラート表示

メンテナンスモードが導入されたばかりの当初、メンテナンスモードを戻すのを忘れてメンテナンスが終了しているにも関わらず、ユーザーがサイトにアクセスできないままという事故が頻繁に起こっていたようです。

その対応として後のバージョンアップ時にメンテナンスモード中には管理画面上部に「メンテンナンスモード中」である旨のメッセージが表示されるようになっています。

メンテナンスモードの仕組み

EC-CUBE4のメンテナンスモードは、シンプルな仕組みに基づいています。

1. 「.maintenance」ファイルの生成

メンテナンスモードを有効化すると、サイトのルートディレクトリに「.maintenance」というファイルが生成されます。

このファイルが存在する間、サイトはメンテナンスモードとなります。

2. ソースコード上からのメンテナンスモードの解除方法

管理画面上でメンテナンスモードを有効化したのであれば、管理画面上からメンテナンスモードを無効化するべきですが、何らかのトラブルで上手くいかない場合、「.maintenance」と削除することで強制的にメンテナンスモードを無効化する事ができます。

緊急時には役に立つ事もあるかもしれないので覚えておきましょう。

メンテナンスモードページのカスタマイズ

デフォルトのメンテナンスモードページは汎用的ですが、サイトのイメージに合わせてカスタマイズすることもできます。

カスタマイズ手順

対象ファイルの確認

メンテナンスモードの有効化時に表示されるページは、ルートディレクトリに配置されている`maintenance.php`です。

このファイルを編集することで、デザインや内容を変更できます。

編集例

maintenance.php


<html lang="<?php echo $locale; ?>">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>メンテナンス中でーす！！！！！！！</title>
    <link rel="icon" href="<?php echo $baseUrl; ?>/html/template/<?php echo $templateCode; ?>/assets/img/common/favicon.ico">
    <link rel="stylesheet" href="<?php echo $baseUrl; ?>/html/template/<?php echo $templateCode; ?>/assets/css/style.css">
</head>
<body>
<div class="ec-layoutRole">
    <div class="ec-404Role">
        <div class="ec-off4Grid">
            <div class="ec-off4Grid__cell">
                <div style="font-size:100px;text-align:center;">
                    <div class="ec-404Role__icon ec-icon">
                        <img src="<?php echo $baseUrl; ?>/html/template/<?php echo $templateCode; ?>/assets/icon/exclamation-pale.svg" alt="">
                    </div>
                </div>
                <p class="ec-404Role__title ec-reportHeading">頑張って早く終わらせるから</p>
                <p class="ec-404Role__description ec-reportDescription">ちょっとまっててねー！</p>
            </div>
        </div>
    </div>
</div>
</body>
</html>

編集時の適用画面