Lighthouseを自動化する 〜その１〜

Lighthouse大事

LighthouseはGoogleが出しているWebサイトのパフォーマンス測定ツール。
今後はMFIが進んでいくこともあり、Lighthouseの数値を日頃からチェックしておくことは大事。
Webサイトに改修を加えた結果、スコアが落ちてSEOの評価が下がってしまったら目も当てられない。

Lighthouseは面倒

Lighthouseの実行はChrome拡張機能やChromeのデベロッパーツールから実行することができる。
けど、毎回対象のページをブラウザで開いてツールを実行するのは結構面倒。
あと、スコアの共有も面倒。

なので今回は、以下の3つの処理をJavaScript上から自動で行う。

1. スプレッドシートから対象のURLを取得（今回）
2. Lighthouseのスコアを取得
3. Slackへの通知まで

スプレッドシートからURLを取得

スプレッドシートを準備

LighthouseにかけたいURLの一覧を用意する。

スプレッドシートにアクセスするための準備

1. Google API Consoleにアクセスし、Google Drive APIを有効にする。
2. IAMと管理からサービスアカウントを作る。
3. サービスアカウント作成時に秘密鍵の生成を聞かれるのでJSON形式でDLする。
4. 作成したサービスアカウントをスプレッドシートの共有者に追加する。

JavaScriptでデータ取得

const { promisify } = require('util');
const GoogleSpreadsheet = require('google-spreadsheet');

// サービスアカウント作成時にDLしたJSONファイル
const credentials = require('../config/client.json');

const mySheet = new GoogleSpreadsheet('<スプレッドシートのID>');

// URLが記載されているカラム
const COL_URL = 1;

exports.getReleasePath = async() => {
  const urls = [];

  // スプレッドシートからデータ取得
  await promisify(mySheet.useServiceAccountAuth)(credentials);
  const data = await promisify(mySheet.getInfo)();

  const option = {
    'min-row': 1,
    'max-row': 25,
    'return-empty': false,
  };

  // スプレッドシートデータの中からURL情報を抽出
  for(const worksheet of data.worksheets) {
    if(worksheet.title === '10/07') {
      const cells = await promisify(worksheet.getCells)(option);

      for(const cell of cells) {
        if(cell.col === COL_URL && cell.value) {
          urls.push(`${cell.value}`);
        }
      }
    }
  }

  return urls;
};

次は取得したURLを使ってLighthouseを実行する。