GAS で PageSpeedInsights API を使って Lighthouse のスコアも取得する

[PageSpeedInsights](https://developers.google.com/speed/pagespeed/insights/) がアップデートされ、Lighthouse のスコアも取得できるようになりました。
API も v5 になり以前とは変わりました。
新しい API を使って、Google Apps Script でスコアを取得するツールを作成しました。

## 新しい API(v5)を簡単に実行するには

[API Explorer](https://developers.google.com/apis-explorer/#p/pagespeedonline/v5/)
があるので、ここでお試しできます。

[Pagespeedapi: runpagespeed](https://developers.google.com/speed/docs/insights/v5/reference/pagespeedapi/runpagespeed#response)
ここに、レスポンスの詳細やパラメータの詳細が載っています。

## 実装メモ

### APIkey の取得

このページから[Credentials page.](https://console.developers.google.com/apis/credentials?project=my-project-1543397395695&folder&organizationId) APIkey を取得して準備しておく

### 取得しているスコア

今回取得しているスコアは以下のものを取得しています。

- lighthouse score
  - accessibility
  - best-practices
  - performance
  - pwa
  - seo
- cruxMetrics
  - コンテンツの初回ペイント(First Contentful Paint)
  - 初回入力遅延(First Input Delay)
- lighthouseMetrics
  - コンテンツの初回ペイント (First Contentful Paint)
  - 速度インデックス (Speed Index)
  - インタラクティブになるまでの時間 (Time to Interactive)
  - 意味のあるコンテンツの初回ペイント (First Meaningful Paint)
  - CPU の初回アイドル (First CPU Idle)
  - 入力の推定待ち時間 (Estimated Input Latency)

### コード

コードの初回実行時は許可が必要になるので注意
このコードでは、シート名が`シート`のスプレッドシートに desktop と moblie の結果を両方出力しています。

```javascript
function myFunction() {
  var spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = spreadsheet.getSheetByName('シート');
  if (!sheet) return;

  //入力列の設定(行を挿入して設定)
  sheet.insertRowBefore(4);
  var dateCell = sheet.getRange(4, 1);
  dateCell.setValue(
    Utilities.formatDate(new Date(), 'Asia/Tokyo', 'yyyy/MM/dd HH:mm')
  );

  //デスクトップとモバイルの両方を計測
  var request = [setUpQuery(true), setUpQuery(false)];

  try {
    var response = [
      UrlFetchApp.fetch(request[0], { muteHttpExceptions: true }),
      UrlFetchApp.fetch(request[1], { muteHttpExceptions: true })
    ];
  } catch (err) {
    Logger.log(err);
    return err;
  }

  // jsonをパースする
  var parsedResult = [
    JSON.parse(response[0].getContentText()),
    JSON.parse(response[1].getContentText())
  ];

  var desktopResult = convertResult(parsedResult[0]);
  var mobileResult = convertResult(parsedResult[1]);

  //結果の貼り付け
  sheet
    .getRange(4, 2, desktopResult.length, desktopResult[0].length)
    .setValues(desktopResult);
  sheet
    .getRange(4, 15, mobileResult.length, mobileResult[0].length)
    .setValues(mobileResult);
}

//取得データの変換
function convertResult(content) {
  //２次元配列として設定
  var arr = [[]];
  //lighthouseScore
  arr[0].push(content.lighthouseResult.categories.accessibility.score);
  arr[0].push(content.lighthouseResult.categories['best-practices'].score);
  arr[0].push(content.lighthouseResult.categories.performance.score);
  arr[0].push(content.lighthouseResult.categories.pwa.score);
  arr[0].push(content.lighthouseResult.categories.seo.score);
  //cruxMetrics
  arr[0].push(
    content.loadingExperience.metrics.FIRST_CONTENTFUL_PAINT_MS.category
  );
  arr[0].push(content.loadingExperience.metrics.FIRST_INPUT_DELAY_MS.category);
  //lighthouseMetrics
  arr[0].push(
    content.lighthouseResult.audits['first-contentful-paint'].displayValue
  );
  arr[0].push(content.lighthouseResult.audits['speed-index'].displayValue);
  arr[0].push(content.lighthouseResult.audits['interactive'].displayValue);
  arr[0].push(
    content.lighthouseResult.audits['first-meaningful-paint'].displayValue
  );
  arr[0].push(content.lighthouseResult.audits['first-cpu-idle'].displayValue);
  arr[0].push(
    content.lighthouseResult.audits['estimated-input-latency'].displayValue
  );

  return arr;
}

//APIクエリーの作成
function setUpQuery(desktopFlg) {
  var api = 'https://www.googleapis.com/pagespeedonline/v5/runPagespeed';
  var parameters = {
    url: encodeURIComponent('計測したいURL'),
    key: '取得したAPIkey'
  };
  var category = [
    'accessibility',
    'best-practices',
    'performance',
    'pwa',
    'seo'
  ];

  var query = api + '?';
  for (key in parameters) {
    query += '&' + key + '=' + parameters[key];
  }

  category.forEach(function(tmp) {
    query += '&category=' + tmp;
  });

  if (desktopFlg) {
    query += '&strategy=desktop';
  } else {
    query += '&strategy=mobile';
  }

  return query;
}
```

## 参考リンク

- [Google 製スピード測定ツールの PageSpeed Insights が分析エンジンに Lighthouse を組み込む](https://www.suzukikenichi.com/blog/pagespeed-insights-integrated-with-lighthouse/)
- [Get Started with the PageSpeed Insights API](https://developers.google.com/speed/docs/insights/v5/get-started)