PageSpeedInsightsのAPIでやりたかった事

私は日頃、SEOコンサルタントとしてサービスを提供することがあります。訳あってSEOコンサル会社は退職しましたが、Salesforce支援を行う会社で導入の支援を行いながら、クライアントの希望があればWebマーケティング支援も行い、一気通貫したサービスを提供しています。

Webマーケティング支援も兼務するので、過去の経験を活かしたSEOコンサルサービスを提供するのですが、前職で契約していたSEOの有料ツールがありません。というより、ツールの必要性に対する社内理解がまだ低いので、有料ツールの導入に障壁がある段階です。

そこで、PageSppedInsightsのAPIを利用した有料ツールの代替となるアプリ作成することで、費用をかけずSEOコンサルに関する業務負担を軽減したいと思って開発を試みました。

以下が、最終的なアプリ動作です。

PageSppedInsightsの開発アプリの最終的な動作

• スプレッドシートにPageSppedInsightsで表示速度計測を行うURLリストがある
• スプレッドシートのURLリストの取得はGoogle Apps Scriptで行う
• 取得したURLリストをGoogleAppsScriptでPageSppedInsightsのAPIを呼び込み、表示速度結果を取得する
• 取得できた表示速度結果は、スプレッドシートに記載する。

PageSpeedInsightsのAPIの使い方

PageSpeedInsightsAPIとは

PageSppedInsightsのAPIとは、Googleが提供する表示速度などのページパフォーマンスを計測する「PageSpeed Insights」の機能及び測定結果をプログラムから取得できるものです。
このAPIから、ウェブページの読み込み速度などのデータを自動的に取得することが可能です。PageSpeed InsightsはAPI経由でなくてもブラウザから結果を取得することもできますが、APIを通じて定期的な測定結果のモニタリングや対象URLに対して一気に測定することができます。

ブラウザから簡単にPageSpeedInsightsのAPIを試してみる

PageSpeedInsightsのAPIが、どんなデータを返してくるかは、ブラウザから簡単に試してみることができます。

以下に表示されているURLをコピペして、「https://www.yoursite.com/」の部分を計測したいページURLに変更してみてください。これによってPageSpeedInsightsのAPIから取得できる結果を確認することができます。

//以下URLの「https://www.yoursite.com/」の部分を計測したい任意のページURLに変えてブラウザで表示してみてください。
https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=https://www.yoursite.com/

測定結果は、以下画像のようなデータ構造で表示されます。

Safariのブラウザで実行した結果の一部

測定方法や測定カテゴリを指定するAPIの文字列クエリパラメータ

先ほどブラウザで試したURLにクエリパラメータを追加することで測定方法や測定カテゴリなどを指定することができます。主に使うクエリパラメータを紹介しておきます。

上記のパラメータを加味して、私が計測に使用したパラメータは以下のようになります。

//以下URLの「https://www.yoursite.com/」の部分を計測したい任意のページURLに変え「key=」以降を取得したapiキーに変えて、APIをリクエストしています。
https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=https://www.yoursite.com/&category=performance&strategy=mobile&locale=ja&key=xxxxxxxxx

PageSpeedInsightsのAPIで返されるJSONデータ構造

PageSpeedInsightsのAPIで返されるデータはJSONデータです。JSONデータは数百行で収まるものではなく、もっと大量のデータ行で返されます。さらに、表示速度測定を行ったページのリソースが多ければ、返されるデータ行は増えていきます。（ページ内の画像など、読み込んだデータに対しての測定結果を返してくるため）

JSONデータ構造は「PageSpeedツールの公式ガイド」に説明がありますが、全データに対して説明があるわけではありません。大まかなデータ構造を理解しつつ、取得したデータは自身で細かく確認していく必要があります。

CoreWebVitalの指標は「lighthouseResult」のセクションを参照する

CoreWebVitalの指標を取得したい場合は「LighthouseResult」のセクションを確認してください。セクションの一部は以下画像のようになっています。

LighthouseResultのセクション内のパフォーマンススコアは「categories > performance >socre」にあります。

その他、CoreWebVitalの指標はLighthouseResultのセクション内の「audits」配下にあります。ここの指標はスコアではなく、具体的にかかった秒数を取得したいため、以下の表に基づいて指標を取得しています。

上記表から「First Contentful Paint」から「displayVaule」を参照する場合は、以下の画像のようにデータを参照していることになります。

PageSpeedInsightsのAPIのGoogleAppsScriptの実行関数サンプル

GoogleAppsScriptでPageSpeedInsightsのAPIを実行するサンプルの関数は以下のようになります。
私はスプレッドシートからURLを取得した上で関数を実行したいので、引数を取得する関数にしています。また、APIキーはGoogleCloudPlatformから取得したものをご指定ください。

//引数urlを送る別の関数でURLを取得して関数getPageSpeeInsightsDataに渡してください
//apiキーはGoogleCloudPlatformから取得したAPIキーを設定してください。
//returnで返された値をスプレッドシートに転記する関数などで使用してください。

function getPageSpeedInsightsData(url) {
  var apiKey = 'xxxxxxxxxxxxxxxx'; // 自分のAPIキーを設定してください
  var apiUrl = 'https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=' + encodeURIComponent(url) + '&category=performance&strategy=mobile&locale=ja&key=' + apiKey;
  
  var response = UrlFetchApp.fetch(apiUrl);
  var data = JSON.parse(response.getContentText());

  var performance = getNestedData(data, ['lighthouseResult', 'categories', 'performance', 'score']);
  var fcp = getNestedData(data, ['lighthouseResult', 'audits', 'first-contentful-paint', 'displayValue']);
  var fmp = getNestedData(data, ['lighthouseResult', 'audits', 'first-meaningful-paint', 'displayValue']);
  var lcp = getNestedData(data, ['lighthouseResult', 'audits', 'largest-contentful-paint', 'displayValue']);
  var speedIndex = getNestedData(data, ['lighthouseResult', 'audits', 'speed-index', 'displayValue']);
  var serverResponseTime = getNestedData(data, ['lighthouseResult', 'audits', 'server-response-time', 'numericValue']);
  var totalByteWeight = getNestedData(data, ['lighthouseResult', 'audits', 'total-byte-weight', 'score']);
  var domSizeScore = getNestedData(data, ['lighthouseResult', 'audits', 'dom-size', 'score']);

  return [performance, fcp, fmp, lcp, speedIndex, serverResponseTime, totalByteWeight, domSizeScore];
}

SEO向けの応用編：スクレイピングのデータを含めてPageSpeedInsightsのAPIを実行する

PageSpeedInsightsのAPIを活用してCoreWebVitalの指標取得に加えて、対象URLをスクレイピングしたデータを1行にまとめるとSEOの分析でさらに便利です。以下はスプレッドシートで、スクレイピングによる結果とPageSpeedInsightsのAPIの結果をまとめたイメージです。

色々なシーンでAPIを活用して、SEOのコンサルティング業務が効率化できそうで満足です。

今回やりたい事：Googleフォームの送信結果をSlackのチャンネルに自動送信

Googleフォームの入力結果をメールやスプレッドシートに貯めるだけでなく、フォーム解答時にSlackにも共有したい時はSlackのAPIを使うことで実現可能です。今回はGoogleフォームの回答結果をGoogle Apps Scriptを使ってSlackのチャンネルに自動送信する方法を共有します。

Googleフォームの送信結果をGASからslackのAPIでメッセージを送る手順

ここでは手順の流れを説明します。尚、今回は「Googleフォーム」と「Slackチャンネル」は既に作成されている状態として説明をしますので、作成されていない方は準備しておいてください。

Googleフォームの送信結果をGASからslackのAPIでメッセージを送る手順は、以下の流れが必要です。

1. Slackのアプリを作成してインストールする
2. Slackチャンネルにアプリをメンバーに加える
3. GoogleAppsScriptでGoogleフォームの結果をSlackチャンネルにメッセージを送る

それぞれの手順を以下で説明していきます。

Slackのアプリを作成してインストールする

Slack APIのヘルプページに遷移する

まずはGoogle検索で「Slack API」を検索してヘルプページに行きましょう。サイトを表示したら左メニューの「Messaging」のメニュー内の「Send or schedule a message」をクリックして表示します。

表示したヘルプページは、SlackAPIでメッセージを送信する手順が記載されていますので、時間がある人は見てみましょう。

Slackのアプリを作成する（1.Creating an app）

ヘルプページの「1.Creating an app」の「Go to Your Apps」をクリックしてSlackのアプリ作成ページに遷移します。遷移したページの「Create an App」をクリックしてアプリを作成します。

「From scratch」を選び、アプリの名前（App Name）入力とワークスペースを選択（Pick a WorkSpace to develop your app in）して「Create App」をクリックして作成します。

作成が完了すると、作成したアプリページに遷移します。

作成したアプリの権限を設定する（2.Requesting scopes）

作成したアプリのページに遷移したら、アプリの権限を設定します。アプリの権限では、アプリで「メッセージを送信する」ための権限を付与してあげます。

アプリのBasic information」ページでスクロールを行い「Permissions」をクリックして権限設定ページを行います。「Permissions」ページに遷移したら「Scopes」までスクロールを行い、「Bot Token Scopes」にある「Add an OAuth Scope」をクリックします。 「chat:write」と「channels:read」をアプリでできるように設定します。

権限設定を行ったらアプリページの「App Home」からスクロールして「Your App’s Presence in Slack」の「App Display Name」の横にある「Edit」をクリックして名前を設定します。

アプリをインストールする（3.Installing and authorizing the app）

アプリの権限設定を行ったら、インストールします。アプリページの「Basic Information」から「Install to Workspace」をクリックしてインストールを行います。クリックした後に表示された画面で、作成したアプリとインストール先のワークスペースに間違いがないことを確認して「許可する」をクリックします。成功していたら「Install your app」の右にチェックマークがあることを確認します。

インストールに問題がなければ、Slackワークスペースの「App」にインストールしたアプリが表示されます。（表示されない場合は、「＋」ボタンからアプリ名を検索してみましょう。

Slackチャンネルにアプリをメンバーに加える

連携するSlackのチャンネルを開きます。上部のチャンネル名をクリックしてチャンネルの設定画面を表示します。

設定画面のメニュー「インテグレーション」をクリックしたら、画面真ん中の「App」にある「アプリを追加する」をクリックします。クリックして表示される画面から、作成したSlackアプリを選択します。

これでSlack側の設定関連が終了しました。

Googleフォームの送信内容をGoogleAppsScriptからSlackのチャンネルに送信するコードを記述します。

GoogleAppsScriptでGoogleフォームの結果をSlackチャンネルにメッセージを送る

既にGoogleフォームは存在している前提ですので、Googleフォームが未作成の場合は作成しましょう。Gogleフォームの作成ができたら編集権限を持つGoogleアカウントでGoogleフォームを表示します。

Googleフォームと連動するGoogleAppsScriptのエディターを表示する

編集権限を持つGoogleアカウントでフォームを開いたら、縦の三点リーダのメニューから「スクリプトエディタ」をクリックします。この操作によって、Googleフォームと連動したGoogleAppsScriptの記述が可能になります。

Googleフォームと連動するGoogleAppsScriptのソースコード

スクリプトエディタを開いたら、以下のコードをコピペします。

function onFormSubmit(e){
  const formResponse = e.response;
  const itemResponses = formResponse.getItemResponses();

  let message = '新しいTシャツ購入がありました。\n===========\n'

  itemResponses.forEach(itemResponse=>{
    const question = itemResponse.getItem().getTitle()
    const answer = itemResponse.getResponse();
    message += `${question}:${answer}\n`;
  })
  message += "===========\n皆さんの迅速な対応にいつも感謝( ´ ▽ ` )"

  sendMessageToSlack(message)
  Logger.log(message);



}
function sendMessageToSlack(message) {
  const scriptProperties = PropertiesService.getScriptProperties();
  const accessToken = scriptProperties.getProperty('###Slackのアプリ作成時に発行されたアクセストークンを記述する###');
  const channelID = '###slackのChannelIDをここに記述する###';
  const endpoint = 'https://slack.com/api/chat.postMessage';

  const payload = {
    'channel':channelID,
    'text':message
  }

  const options = {
    'method':'post',
    'headers':{
      'Authorization':`Bearer ${accessToken}`,
      'Content-Type':'application/json'
    },
    'payload':JSON.stringify(payload)
  };

  const res = UrlFetchApp.fetch(endpoint,options);

}

channelIDの確認方法

• チャンネルの詳細を開きます。

• チャンネルの詳細情報が表示された画面下部の英数字が「チャンネル ID」

Slackアプリのアクセストークンの確認方法

• SlackAPIページから既に作成したSlackアプリを選択して、メニュー「Basic Information」をクリック
• 表示されたページをスクロールして「Verification Token」に記述されている英数字がアクセストークン

（一度だけ）ソースの保存を行い「実行」の権限「許可」を行う

ソースコードの記述が完了したら、ctrl+sで保存を行います。保存したら「実行」を押します。

「実行」後に、上記画面が表示されたら「権限を確認」をクリックします。

上記画面が表示されたら「詳細を表示」をクリック、そして「xxxxx（安全ではないページに移動）」を更にクリックします。

上記画面が表示されたら「許可」を行います。これで問題なくエラーが表示されなければ完了です。エラーがある場合はGoogleAppsScriptの画面にエラーが表示されます。

動作の確認

これで設定に問題がなければ、Googleフォームに回答した内容がSlackのチャンネルに投稿されるようになります。情報共有の業務効率化として試してみてください。今回のようにSlackだけでなく、Chatworkに共有することもできます。手作業で行なっている作業を自動化する事で業務効率化ができますので、ぜひトライしてみてください。

使うメソッドはchat.postMessage

まず、APIで使うメソッドはchat.postMessageであることを理解しましょう。chat.postMessageは、指定したチャンネルにメッセージを投稿することができるメソッドです。先に公式ドキュメントを見たい場合は以下をクリックしてください。

スレッドに変身するならchat.postMessageのメソッドに「thread_ts」のパラメータを追加する

chat.postMessageのメソッドはチャンネルを指定することでメッセージを投稿することができますが、該当メッセージのスレッドに投稿したい場合は、該当メッセージのタイムスタンプが必要です。そして、該当メッセージのタイムスタンプをパラメータに付与してAPIをたたくことでスレッドに変身することができます。

メッセージをスレッドに投稿するGASのコード例

以下にメッセージをスレッドに投稿するGASのコード例を紹介します。以下はコード例ですので、実装するときに自身で用意が必要な情報がありますので、補足も併せて確認してください。

function postThreadsMessage() {
  const accessToken = 'slackのアクセストークン';
  const channelId = "C00000000000"; //投稿したいチャンネルID
  const message ="スレッドに投稿するメッセージ"; 
  const ts = "1692864516.652039" // スレッドに投稿するメッセージのタイムスタンプ

  const endpoint = 'https://slack.com/api/chat.postMessage';
  const payload = {
    'channel': channelId,
    'text': message,
    'thread_ts':ts
  }
  const options = {
    'method': 'post',
    'headers': {
      'Authorization': `Bearer ${accessToken}`,
      'Content-Type': 'application/json'
    },
    'payload': JSON.stringify(payload)
  };

  UrlFetchApp.fetch(endpoint, options);
  
}

slackのAPIにおけるタイムスタンプを使うケース

slackのAPIでタイムスタンプを使うケースは以下のようなものがあります。

• 投稿されたメッセージを削除する
• ピン止めの追加（or 削除）
• リアクションの追加（or 削除）

他にどんな使い方があるかは、SlackAPIのドキュメントを確認してください。

値は以下のように渡すことになるでしょう。

const payload = {
    "channel": channelId,
    "ts": timestamp
  };

SlackAPIのタイムスタンプの取得方法

SlackAPIで使うタイムスタンプの取得方法は非常に簡単です。投稿されたメッセージのURLにあります。投稿されたメッセージのURLは、メッセージの「リンクをコピー」から取得することができます。

「リンクをコピー」した場合のURLは以下のように表示されます。

上記画像にチャンネルIDの記載も注釈がありますが、timestampを値として渡すときにチャンネルIDもセットで必要になることが多いので、チャンネルIDもURLに記載があることを覚えておきましょう。

また、timestampを値で渡すときは、パスにある「p」を取り、数字末尾から6文字目にドット「.」を入れる必要がありますので注意が必要です。

作成したGoogleマップの完成画像イメージ

完成イメージはこんな感じです。地図上にあるピンのマーカーは、「スカイツリー」「ビールの泡の形をしたビルがあるアサヒグループの本社ビル」「墨田区役所」「（浅草寺入り口の）風雷神門」「浅草寺」の5つあります。そして、めぐるエリアが分かる青い境界線を付けています。なんとなく、このあたりを散策すれば観光に便利かなという地図が作成できるようになっています。

Maps Serviceの公式ドキュメント

しっかり公式ドキュメントを見て理解してから作成したい方は公式ドキュメントを理解するのをお勧めします。私がみた公式ドキュメントは以下です。

Maps Service|Apps Script | Google for Developer

GoogleAppsScriptのコード

まずはnewStaticMap()のクラスを使ってインスタンス化を行います。マップのサイズ(setSize)、中心地(setCenter)、縮尺（setZoom）を指定します。マーカーはsetMakerStyleでサイズや色を指定して、マーカーを指定する場所を指定します。

// クラスを作成する。墨田区役所を中心に600x600のマップサイズを指定
  const map = Maps.newStaticMap()
      .setSize(600, 600)
      .setCenter('墨田区役所')
      .setZoom(15)

  // 赤いマーカーを5つの場所に指定する
  map.setMarkerStyle(Maps.StaticMap.MarkerSize.MID, Maps.StaticMap.Color.RED, 'T');
  map.addMarker('墨田区役所');
  map.addMarker('アサヒグループ本社ビル');
  map.addMarker('浅草寺 風雷神門');
  map.addMarker('東京スカイツリー');
  map.addMarker('浅草寺');

  // 散策するおおよその範囲を境界線で指定する
  const corners = [
    '〒131-0045 東京都墨田区押上１丁目１−２',
    '〒130-0001 東京都墨田区吾妻橋１丁目２３−１',
    '〒111-0032 東京都台東区浅草２丁目３−１',
    '35.711026, 139.796349' //風雷神門の住所がわからなかったので、経度と緯度を直接指定
  ];
  map.setPathStyle(4, Maps.StaticMap.Color.BLACK, Maps.StaticMap.Color.BLUE);
  map.beginPath();
  for (var i = 0; i < corners.length; i++) {
    map.addAddress(corners[i]);
  }

境界線を指定する角をcornersに格納している中で、風雷神門の詳細な住所がぱっと見わからなかったので、近くの経度と緯度を指定しています。

最後に、設定が完了したGoogleマップをGoogleドライブ直下に保存します。問題なければ、map.pngというファイル名で保存できているはずです。

// Googleドライブ直下にマップ画像を作成する
  DriveApp.createFile(Utilities.newBlob(map.getMapImage(), 'image/png', 'map.png'))

また、本コードでGASを操作するにあたっては、権限の付与が必要です。GASエディターのメニュー「プロジェクトの設定」から「「appsscript.json」マニフェスト ファイルをエディタで表示する」にチェックボックスを入れたうえで、必要な権限のスコープを定義する必要があります。チェックボックスを入れたら、エディターに「appsscript.json」ができていると思いますので、以下を追加しましょう。

"oauthScopes": [
"https://www.googleapis.com/auth/documents",
"https://www.googleapis.com/auth/drive"
]

もっといろいろ発展的に使えるGASのMaps Service

Maps Serviceのサービスを使って、ある地図上の2点間の距離を求めたりするなど活用方法が色々あります。GASはGoogle系サービスと相性が良いので、GASで作った2点間の距離を計算する関数をスプレッドシートのカスタム関数として使うことが出来たり、活用方法がたくさんありそうです。

GASで名刺情報を入れる

まずはGASに入力したい「氏名やローマ字、会社名、QRコード（URL）」情報を設定します。氏名やローマ字、会社名は入力したい内容を入れればOKですが、QRコードを生成するURLはエンコードが必要です。QRコードに設定したいURLのエンコードは「URLエンコード・デコード」でやりましょう。

const slide = SlidesApp.getActivePresentation().getSlides()[0];
  // 漢字の氏名
  const shape = slide.insertTextBox("田中太郎",24,36,240,50);
  const shapeText = shape.getText().getTextStyle();
  shapeText.setFontSize(38).setBold(true);
  // ローマ字
  const huriganaShape = slide.insertTextBox("TANAKA TARO",24,84,120,25);
  const huriganashapeText = huriganaShape.getText().getTextStyle();
  huriganashapeText.setFontSize(14).setBold(true);
  // 会社名
  const companyShape = slide.insertTextBox("株式会社xxxxxx",24,112,120,25);
  const companyshapeText = companyShape.getText().getTextStyle();
  companyshapeText.setFontSize(14).setBold(true);

  // QRコード
  let qrurl = 'https://chart.googleapis.com/chart?chs=100x100&cht=qr&chl=https%3A%2F%2Fwww.xxx.co.jp%2F';
  let option = {
      method: "get",
      muteHttpExceptions: true
    };
  let qrblob = UrlFetchApp.fetch(qrurl, option).getBlob();
  const qrShape = slide.insertImage(qrblob,600,24,100,100);

この時点でGoogleスライドには以下のスライドが生成されます。

GASのプログラミングの記述は、Googleスライドのメニューバーから「拡張機能→AppsScript」を開いた上で行うのが前提です。

作ったスライドを画像で保存する

作ったスライドをGoogleドライブに保存しましょう。Googleドライブの保存先は任意のフォルダで問題ありませんが、GoogleドライブのフォルダIDを指定するようにしましょう。

// スライドを画像で保存する
  const presentation_id = SlidesApp.getActivePresentation().getId();
  const page_id = SlidesApp.getActivePresentation().getSlides()[0].getObjectId()
  // URLを使ってスライドを画像に変換する
  const url = "https://docs.google.com/presentation/d/" + presentation_id + "/export/" + "jpeg" + "?id=" + presentation_id + "&pageid=" +page_id;
  const options = {
    method: "get",
    headers: {"Authorization": "Bearer " + ScriptApp.getOAuthToken()},
    muteHttpExceptions: true
  };
  const res = UrlFetchApp.fetch(url, options);
  const folder = DriveApp.getFolderById("xxxxxxxxxxxxx")
  const prs = SlidesApp.openById(presentation_id);
  folder.createFile(res.getBlob()).setName(prs.getName() + ".jpg");

もっと作成を効率化したい場合

このプログラミングを発展させて作業を効率化したいと考えられるケースは、所属事業部の人数分の背景スライドを一気に作成するケースではないでしょうか。例えば、スプレッドシートに人数分の氏名などの情報がリストに記載されていれば、まとめて作ることができますね。