BackstopJSをWordPressで使う方法 - ムロタプロダクト

こんにちは。ホームページ制作フリーランスの室田です。

ホームページのアップデート対応やCSS変更はどのように行っているでしょうか？

特に僕はWordPressを使ってホームページ制作があるので、頻繁にアップデート対応があります。

実際に仕事としてアップデート対応をする時には、作業前後でホームページの表示に変化がないかを確認することが重要です。

そこで使えるのがBackstopJSというツールです。

このツールを使えば、簡単に作業前後の差分を確認することができます。

しかし、調べてみると日本語の情報が少ない＆WordPressで使うための情報が少ないです（WEBアプリケーションとかは結構あるんですけどね）。

ということで、この記事ではBackstopJSを使って、WordPressサイトでも差分を確認する方法を解説します。

この記事の著者

WEB制作フリーランス

室田トモキ

Murota Tomoki

詳しいプロフィール

ブログ歴9年
ホームページ制作歴5年
最大月間30万PV更新
50個以上のホームページを作成

BackstopJSを使う前準備

BackstopJSを使うには事前の準備が必要です。

主な準備は以下の通り。

Node.js環境をPCに準備する
BackstopJSをインストールする

それぞれ簡単に解説します

Node.js環境をPCに準備する

PC上にNode.js環境がない人は、先にNode.jsをダウンロードする必要があります。

こちらのページからNode.jsをダウンロードしてください。

BackstopJSをインストールする

次にターミナルを開いて、以下のコードでBackstopJSをインストールします。

npm install -g backstopjs

これで下準備は完了です。

BackstopJSを使用する

では、BackstopJSを実際に使ってみましょう。

主な流れは以下の通り。

専用フォルダを作る
BackstopJSのデータを生成する
スクロールアニメーション対策をする
backstop.jsonファイルを変更する
比較前のデータを保存する
比較後のデータを保存する
比較する

専用フォルダを作る

まずは、差分データを保存するフォルダを作ります。

僕はいつもデスクトップに作成しています。

今回は「difference-test」というフォルダを作りました。

BackstopJSデータを生成する

ここからはターミナルでの作業になります。

ターミナルで、作成したフォルダに移動します。

今回の場合だと、以下のコードで移動できるかと思います。

cd desktop

cd difference-test

該当フォルダに移動したら、以下のコードをターミナルに入力します。

backstop init

これにより、以下の2つのデータが作成されます。

backstop_data（フォルダ）
backstop.json（ファイル）

スクロールアニメーション対策

最近はホームページにスクロールアニメーションを加えている人も多いのではないでしょうか？

BackstopJSは、通常の使い方では、スクロールアニメーションに対応していません。

スクロールアニメーションにも対応させる方法をご紹介します。

以下のonRedy.jsのコードを変更します。

backstop_dataフォルダ
- puppetフォルダ
  - onRedy.js

最初から書かれているコードを全て消し、代わりに以下のコードを入れます。

module.exports = async (page, scenario, vp) => {
    console.log("SCENARIO > " + scenario.label);
    await require("./clickAndHoverHelper")(page, scenario);

    // add more ready handlers here...

    // スクロールアニメーションを3秒かけて実行
    await page.evaluate(async () => {
        const scrollTop = document.body.scrollHeight;

        // 1秒かけてスクロールを実行
        await window.scrollTo({
            top: scrollTop,
            behavior: "smooth",
            duration: 1000, // ミリ秒単位で時間を指定 (1000ミリ秒 = 1秒)
        });

        // 3秒待つ
        await new Promise((resolve) => setTimeout(resolve, 3000));
    });
};

出典：https://snippet.m-g-n.me/2024/05/20/928

これにより、スクロールを全て完了した上で、画面をキャプチャすることができます。

backstop.jsonを変更する

backstop.jsonファイルを開きます。

まずは、必要なviewportsサイズを追加してください。

僕は今回は、以下のようにデスクトップ用のサイズを追加しました。

"viewports": [
    {
      "label": "phone",
      "width": 320,
      "height": 480
    },
    {
      "label": "tablet",
      "width": 1024,
      "height": 768
    },
    {
      "label": "desktop",
      "width": 1920,
      "height": 1080
    }
  ]

次にscenarios内のlabelとurlを変更します。

labelにはページを表す名前をつけておくと良いでしょう。

今回はトップページを保存するので、「murotaproduct-top」としました。

そして、urlに比較元のurlを入力します。

"scenarios": [
    {
      "label": "murotaproduct-top",
      "cookiePath": "backstop_data/engine_scripts/cookies.json",
      "url": "https://www.murotaproduct.com/",
      "referenceUrl": "",
      "readyEvent": "",
      "readySelector": "",
      "delay": 0,
      "hideSelectors": [],
      "removeSelectors": [],
      "hoverSelector": "",
      "clickSelector": "",
      "postInteractionWait": 0,
      "selectors": [],
      "selectorExpansion": true,
      "expect": 0,
      "misMatchThreshold" : 0.1,
      "requireSameDimensions": true
    }
  ]

画像が多いホームページなどは、読み込みに時間がかかるので、delayで適宜キャプチャを遅らせましょう。(ms単位で遅れます)

入力が終わったら、保存することを忘れずに。

比較元のデータを保存

次にターミナルに戻り、以下のコードを入力して、比較元のデータを保存します。

backstop reference

フォルダ内にbitmaps_refercenceというフォルダができます。

比較データを保存

最後に、実際に比較するデータを保存します。

再びbackstop.jsonファイルに戻り、scenariosのurlを比較するurlに変更します。

忘れずに保存をして、ターミナルに戻り以下のコードを実行してください。

backstop test

これで変更後のキャプチャが完了し、自動的に差分を表示するページがブラウザで表示されます。

まとめ：BackstopJS

以上、今回はBackstopJSをWordPressでも使う方法を解説しました。

WordPressにはAll-in-One WP Migrationなどの優れたバックアッププラグインも多いです。

バックアップをとりながらBackstopJSを使えば、簡単に差分のチェックができるかと思います。

アップデート対応をする時や、CSSの書き換えなどでは是非利用してみてください。