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

Lighthouse大事

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

Lighthouseは面倒

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

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

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

SlackへLighthouseスコアを通知

Slack Webhookを使えるようにする

このあたりとかを参考にWebhookのURLを取得する。

LighthouseスコアをSlackへ通知

exports.send = (params) => {
  const https = require('https');

  const channel = '<投稿したいチャンネル>';
  const text = params.message;
  const method = 'post';
  const username   = 'Lighthouse通知';

  // 絵文字か画像URLのどちらか
  const icon = 'https://raw.githubusercontent.com/GoogleChrome/lighthouse/master/assets/lh_logo_icon.png';

  const payload = {
    "channel": channel,
    "username": username,
    "text": text,
    "icon_url": icon,
  };

  const data = JSON.stringify(payload);

  const options = {
    hostname: 'hooks.slack.com',
    port: 443,
    path: '<webhookのURL>',
    method: method,
    headers: {
      'Content-Type': 'application/json',
      'Content-Length': Buffer.byteLength(data)
    }
  };

  const req = https.request(options, (res) => {
    console.log('status code : ' + res.statusCode);
    res.setEncoding('utf8');
    res.on('data', (d) => {
      console.log(d)
    });
  });

  req.on('error', (e) => {
    console.error(e)
  ;});

  req.write(data);
  req.end();
}

最終的にこんな感じでSlackに通知される