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");

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

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

ここではGoogleCloudPlatformのAPIキーの取得方法も解説していきますよ！

前提：pythonのAPIに送信する大まかな基礎情報

多くの人は大丈夫かと思いますがpythonのAPIを操作するには大体下記が必要です。

• メソッド（GET,POST,PUT,DELETE）
• ヘッダー（データの種類、認証情報など）
• JSON形式で受信したいデータ情報

API操作に慣れていない人はこれを意識した状態で進むといいと思います。

GoogleスプレッドシートのAPIについて

GoogleCloudPlatformに登録してAPIを取得

GoogleスプレッドシートのAPIを利用するためには、GoogleCloudPlatformに登録が必要です。GoogleCloudPlatformのサービスにある「Google Sheets API」のAPIライブラリを有効にし、認証情報を取得できるサービスアカウントをAPIキーを取得します。

APIに必要な認証キーを取得するまでのステップ

1. GoogleCloudPlatformに登録
2. 新しいプロジェクトを作成
   1. プロジェクト名は自由に設定
   2. 場所もいったん自由に指定（よく分からない）
   3. 「作成」をクリックしてプロジェクト作成する
3. 作成したプロジェクトを表示する
4. プロジェクト画面を表示したら左上のメニューボタンから「APIとサービス」⇒「有効なAPIとサービス」を選択します
5. 「有効なAPIとサービス」の画面が表示されたら、画面上の方にある「APIとサービスの有効化」をクリックする
6. キーワード検索ボックスに「sheet」と検索して「GoogleSheetsAPI」を表示させる。
7. 表示させたら「GoogleSheetsAPI」をクリックして、「有効にする」をさらにクリックする
8. 今回は「GoogleDriveAPI」も使用したいので、手順④以降の工程を繰り返し、「GoogleDriveAPI」を有効にするまで行う。※スプレッドシートがドライブの中にあったりするときに必要なので、一応設定しておきましょう。
9. 「有効なAPIとサービス」のページから「認証情報」⇒「CREATE CREDENTIALS」⇒「サービスアカウント」をクリックする。
   1. サービスアカウントの「サービスアカウント名」「サービスアカウントID」は自由に設定してください。設定したら「作成して続行」をクリックします。
   2. 次は編集権限の設定を「ロール」の部分で設定します。「編集者」以上であれば問題ないかと思います。「ロール」を設定したら「続行」をクリックします。
   3. 「ユーザーにこのサービス アカウントへのアクセスを許可 (省略可)」は無視して「完了」をクリックして、サービスアカウントの作成を完了させましょう。
10. サービスアカウントの作成が完了したら「認証情報」のページが表示されますが、先ほど作成したサービスアカウントが作成されたことを確認して、サービスアカウントをクリックしてみましょう。
11. 該当のサービスアカウントが表示されたら「キー」⇒「鍵を追加」⇒「新しい鍵」をクリックします。
12. 表示されたデータ形式で「JSON」を選択して「作成」をクリックします。
13. API認証に必要なAPIキーが作成できました。jsonファイルで自分のパソコンにダウンロードされています。スプレッドシートの認証に必要な鍵ファイルなので、大事に保管しましょう。ちなみに、後でファイル名を読み込むときにファイル名が長すぎるので、ダウンロードしたJSONファイルのファイル名を「credentials.json」にしておきます。※この後に表示されるコードのファイル名にいきなり「credentials.json」が出てきてびっくりしないように認識をお願いします。

今回使用するスプレッドシートを用意してください

今回はGoogleスプレッドシートの操作を行うので、Googleスプレッドシートが必要です。一応、こんなスプレッドシートを用意しました。

同じデータで試したい場合は、「こちら」をクリックしてください。遷移したスプレッドシートは「閲覧」専用シートです。そのため、このスプレッドシートを「コピーを作成」することで、自身が編集権限を持ったスプレッドシートの操作ができます。

作成したスプレッドシートの共有権限にサービスアカウントのメールアドレスを追加する。

自分で編集可能なスプレッドシートを作成したら、次はスプレッドシートの設定によってサービスアカウントのメールアドレスに権限を付与します。

1. サービスアカウントのメールアドレスをコピーしておく
2. コピーしたサービスアカウントのメールアドレスに、スプレッドシートの権限を付与する
   1. スプレッドシート右上の「共有」からコピーしたサービスアカウントのメールアドレスを入力する
   2. メールアドレスを入力したら、「編集者」⇒「送信」をクリックします。

PythonでGoogleスプレッドシートのAPIを叩く

スプレッドシートの操作でなるべく見ておきたいリファレンス

• Google Sheets APIのリファレンス
  • https://developers.google.com/sheets/api
• Pythonで使うgspreadライブラリ
  • https://docs.gspread.org/en/latest/

GoogleCloudPlatformで作成したサービスアカウントの認証に必要なjsonファイルをpythonファイルと同じディレクトリに格納する

先ほど作成したGoogleCloudPlatformのサービスアカウント認証用のjsonファイルをpythonファイルと同じディレクトリに格納します。※読み込みパスを自由に変更できる方は別の場所に入れても大丈夫です。

私は、jupyternotebookのローカル環境でPythonを実行します。

事前にインストール必要なpythonのライブラリ

今回のAPIリクエストのために、必要なインストールを行います。まだ以下のライブラリをインストールしていない人は、pythonの環境で以下を操作する必要があります。

// 必要なライブラリをインストール
pip install gspread
pip install google-auth

Pythonのコード

# gspreadをインポートします。
import gspread

gspeadをインポートしたら、認証に必要なライブラリなどを設定します。

# 認証に必要なライブラリをインポート 
from google.oauth2.service_account import Credentials 
# 今回使用するAPIの範囲を指定します。 
scopes = [
    'https://www.googleapis.com/auth/spreadsheets',
    'https://www.googleapis.com/auth/drive'
]

次に、サービスアカウントの認証ファイルを読み込みます。

# 認証に必要なサービスアカウントのファイルを読み込み
credentials = Credentials.from_service_account_file(
    'credentials.json',
    scopes=scopes
)
# 認証リクエスト
gc = gspread.authorize(credentials)

ここまでの認証情報の送信を実行してエラーがなければ、おそらく問題なくできているかと思います。

スプレッドシートのデータを取得する

認証を突破した次は、データを取得したいスプレッドシートを指定します。スプレッドシートにはIDが存在します。IDはスプレッドシートURLの「/d/」以降の「/」に囲まれた部分です。以下のURLでは赤文字の部分がスプレッドシートのIDとなります。

https://docs.google.com/spreadsheets/d/1dIxhhcl3qeUD_YB4_qyQFJdCobn5Z0IrSw1g9zidaG8/edit#gid=0

操作を行いたいスプレッドシートを指定するには、このIDを用います。コードではIDを用いて以下のように、スプレッドシートを指定します。

# スプレッドシートのIDを指定する
sht1 = gc.open_by_key('1dIxhhcl3qeUD_YB4_qyQFJdCobn5Z0IrSw1g9zidaG8')
# 対象スプレッドシートのシート名を指定する
worksheet = sht1.worksheet('名簿')

ここで対象のスプレッドシートのワークシートのデータが取得できた状態です。本当に取得できているかは、get_all_values()メソッドを使ってみてみましょう。

# データを見てみる
data = worksheet.get_all_values()
data

問題なければ、以下のデータが表示されます。

このデータをもとに、数字を変更してみましょう。

スプレッドシートのデータを変更してみる

では、塩見さんの年齢を29歳から30歳にしてみましょう。C2のセルの数値を30に変更しているのが以下の操作です。

# 29歳の年齢を30歳に更新する
worksheet.update('C2', '30')

この操作に問題がなければ、スプレッドシートを見てみると数値が更新されていることが分かります。一応、jupter notebookでデータを見てみます。

# 更新したデータを再度読み込んでみてみる
data = worksheet.get_all_values()
data

操作するとこんな表示になります。

新しいシートを作成する

新しいスプレッドシートのシートを作成するなら、以下で可能です。以下は「打率」という新しいシート名を作成しています。

# 新しいシート「打率」を作成する
sht1.add_worksheet(title="打率", rows=100, cols=20)

まとめ：ＡＰＩは素晴らしい

これで、Pythonのスクレイピングで取得した毎日のデータをスプレッドシートに記載できたり、色々クリエイティブな作業が出来ると思ったのではないでしょうか。作業の効率化に励みましょう。

前提：pythonのAPIに送信する大まかな基礎情報

多くの人は大丈夫かと思いますがpythonのAPIを操作するには大体下記が必要です。

• メソッド（GET,POST,PUT,DELETE）
• ヘッダー（データの種類、認証情報など）
• JSON形式で受信したいデータ情報

API操作に慣れていない人はこれを意識した状態で進むといいと思います。

ホットペッパーのAPIについて

ホットペッパー（リクルート）のAPIリファレンス

ホットペッパーのAPIリファレンスは下記URLから確認できます。

https://webservice.recruit.co.jp/doc/hotpepper/reference.html

APIの認証キーは「新規登録」が必要

ホットペッパーでAPIをたたくために必要な認証キー（APIキー）は、APIリファレンスで「新規登録」が必要です。また、APIキーはメールでしか確認できませんので、忘れないようにしましょう。（新規登録⇒APIリファレンス）

メソッド

メソッドはGETメソッドを用いる。

※APIリファレンスに書いてあります。

リクエストURL

APIを叩く時のリクエストURLは下記です。

※変わっているかもしれませんのでAPIリファレンスを確認しましょう。

http://webservice.recruit.co.jp/hotpepper/gourmet/v1/

リクエスト時に設定するパラメータ

リクエストURLやＡＰＩキーと共に、以下のパラメータを指定します。どんなパラメータがリクエストに必要なのかは、公式のAPIリファレンスで確認しましょう。

以下の情報は私が最低限必要な情報を抜粋しています。

• 必須
  • APIキー
• どれか最低1つ必要
  • id,name,name_kana,name_any,tel
  • special
  • special_or
  • large_service_area,service_area,large_area,middle_area,small_area
  • keyword
  • lat,lng,range
• 他のデータ
  • どんな値を指定できるかは、APIリファレンスで確認すること
• 指定した方が良いパラメータ
  • データ形式の初期値はxmlなので、json形式でデータが欲しいなら、formatは指定すること
  • データ取得件数を指定するならcount（初期値は10※最小1、最大100）

上記のパラメータに基づいて必要なデータを決めていきます。

今回ホットペッパーのAPIで取得するパラメータと認証

必要なパラメータは以下を指定します。

• パラメータ
  • 最低1つ必要なパラメータの中から、keywordを選択※「恵比寿駅」のキーワードでお店を探す
  • 取得件数を15件にするため、countを設定

パラメータを決めたら、リクエストＵＲＬやＡＰＩキーを用いてPythonでリクエストします。

PythonでホットペッパーのAPIを叩く

（その前に）必要なpythonのライブラリ

今回のAPIリクエストのために、requestsのライブラリを使用します。requestsをインストールしていない人は、pythonの環境で以下を操作する必要があります。

// requestsをインストールしていない人
pip install requests

インストールしたら、実際のpythonコードを記述します。

Pythonのコード

//先ほどインストールしたrequestsのライブラリを呼び出し
import requests

//リクエストURLを変数に指定する
URL = 'http://webservice.recruit.co.jp/hotpepper/gourmet/v1/'こ

//APIリファレンスで新規登録することで取得できるAPIキーを入力してください。
API_KEY = 'xxxxx'

body = {
    'key':API_KEY,
    'keyword':'恵比寿駅',
    'format':'json',
    'count':15
}

これらを指定したらリクエストをしてみましょう。

// APIに必要なURLや変数に格納したbodyをもとに、requestsライブラリでリクエスト
// リクエストしたデータをresponseの変数に格納
response = requests.get(URL,body)

そうしたら、JSONデータの中から、15件の店名を表示させましょう。

// 取得したデータからJSONデータを取得
datum = response.json()
// JSONデータの中からお店のデータを取得
stores = datum['results']['shop']
// お店のデータの中から、店名を抜き出して表示させる
for store_name in stores:
    name = store_name['name']
    print(name)

これらを実行すると、以下のような結果が表示されます。

まとめ：ＡＰＩは素晴らしい

APIを提供してくれるのはありがたいですね。ワンランク上のお店探しに必要な環境を提供してくれるホットペッパー（リクルート）さんに感謝です。

ここで学べる事：

• pythonのseleniumで取得した要素（画像やボタンなど）をクリックする方法

seleniumで取得した要素をクリックするためのPythonライブラリ

今回説明するのはseleniumのライブラリでfind_elementを使った要素取得の解説です。画像や要素をクリックするために必要なライブラリは、以下が前提です。

• seleniumはブラウザ操作を自動化するライブラリです。
• webdriverは、Chrome（）やFirefox（）といった操作するブラウザを選択します

seleniumでクリックを行うステップ

seleniumでクリックを行うためには以下の2ステップが必要です。

1. find_elementで要素を取得
2. 取得した要素に.click()でクリックを指定

それぞれ解説していきます。

また、要素や画像をクリックするサンプルコードは、「Googleの検索窓をGoogleの画像検索窓にする」ケースを紹介します。

具体的には、以下のGoogle検索窓が表示されている状態で、以下画面キャプチャの右上に表示されている「画像」をクリックすることが本記事の解説のゴールです。

対象の作業ページと対象のクリック要素が決まったらコードの紹介を以降で行っていきます。コードはすべて必要な認識を持ちましょう。

まずは必要なライブラリのインポートとChromeで対象ページを開く

まずはseleniumのインポートとChromeで作業の対象ページ（今回はgoogleのトップページで検索窓を表示）を開きます。以下の対象コードを実行します。

// webdriverでChromeを起動⇒そして該当URLをChromeで開く
from selenium import webdriver
driver = webdriver.Chrome()　//chrome起動
driver.get('https://www.google.co.jp/')//chromeでgoogleページを表示

ここまでを実行すると、以下画像のようにgoogleのトップページが表示されます。

この画面が表示されたら、クリックしたい要素にフォーカスします。クリックしたい要素を指定するには次で説明するfind_elementで要素を指定します。次の説明を見てましょう。

find_elementで要素を取得

クリックするためには、クリックする個所を特定する必要があります。クリックしたい箇所の特定はfind_elementを使います。
find_elementのメソッドの中で、今回はfind_element_by_xpathを使ってクリックしたい要素を指定します。現時点のクリックしたい箇所のxpathは以下のようにないます。

// elemの変数を用意して、elemの変数にクリックしたい「画像」のxpathの情報を格納している。
elem = driver.find_element_by_xpath('//*[@id="gb"]/div/div[1]/div/div[2]/a')

xpathの取得方法

デベロッパーモードはWindowsであればF12（Macは Command ＋ Option ＋ I キー）で開くことができます。デベロッパーモードを開いたらキャプチャの下にデベロッパーモードが表示されます。表示されたらデベロッパーモード左上のチェックボタンを押して、クリックしたい要素を押します。
クリックしたい要素を押したら、デベロッパーモードの画面に該当する要素が薄い青色でマスクされた箇所が出てきます。（画像の④）そうしたら右クリックを押して、「Copy」→「Copy XPath」をクリックします。

ここまでで、クリックしたい要素を指定できている状態です。
クリックした要素を指定できたら、最後にクリックを指定します。

取得した要素に.click()でクリックを指定

// 先ほど指定したクリックしたい要素を格納した変数elemにクリックを指示する
elem.click()

まとめ：seleniumで要素をクリックするコード

ここまでで紹介してきたコードをまとめて記載します。以下を実行することで要素をクリックすることが可能です。

// webdriverでChromeを起動⇒そして該当URLをChromeで開く
from selenium import webdriver
driver = webdriver.Chrome()　//chrome起動
driver.get('https://www.google.co.jp/')//chromeでgoogleページを表示

// elemの変数を用意して、elemの変数にクリックしたい「画像」のxpathの情報を格納している。
elem = driver.find_element_by_xpath('//*[@id="gb"]/div/div[1]/div/div[2]/a')

// 先ほど指定したクリックしたい要素を格納した変数elemにクリックを指示する
elem.click()

ここで学べる事：

• seleniumのfind_elementメソッドを使った要素取得方法

find_elementを使うためのPythonライブラリ

今回説明するのはseleniumのライブラリでfind_elementを使った要素取得の解説です。そのため、必要なライブラリがありますので、以下ライブラリを使うのが前提です。

• seleniumはブラウザ操作を自動化するライブラリです。
• webdriverは、Chrome（）やFirefox（）といった操作するブラウザを選択します

seleniumを使ったfind_elementの使い分けと種類

（事前知識）単数の要素取得か複数の要素取得かでfind_elementを使い分ける

find_elementで要素を取得する時に、単数の要素か複数の要素取得かどうかでfind_elementを使い分けます。以下の使い分けを行います。

seleniumでhtmlファイルのソースコードから、ある要素を取得するには様々なメソッドがあります。まず、以下のメソッドがあることを知りましょう。

find_elementのメソッドの種類

要素取得するfind_elementのメソッドには、要素の指定方法によってメソッドが異なります。主に使われるメソッドは以下のようなものがあります。メソッドと使い方を記載します。

また、複数の要素取得時に使用するfind_elementsは「s」を「element」に追加したメソッドで記述します。複数の要素取得はリスト形式で要素を取得するので、メソッドの説明がほぼ変わらないため、メソッドの種類のみを記載します。

seleniumを使ったfind_elementの要素取得

では、実際にseleniumを使ったfind_elemntの要素取得を行いましょう。まずはこんなhtmlのソースコードがあったとします。それぞれの要素をfind_elementを使って要素取得していきます。

// このhtmlソースコードの情報を元にfind_elementで情報を取得する
<html>
<body>
<form id="loginForm" class="form-design">
<input name="username" type="text" />
<input name="password" type="password" />
<input name="submit" type="submit" value="login" />
</form>
</body>
<html>

まず、seleniumを使える状態にします。

// webdriverでChromeを起動⇒そして該当URLをChromeで開く
from selenium import webdriver
driver = webdriver.Chrome()　//chrome起動
driver.get('https://www.xxx取得したいURLを入れましょうxxx.com/')//chromeでページを表示

上記を実行することでwebdriverでChromeを起動し、該当URLをChromeで表示することができます。この表示したwebdriverに要素取得を行いましょう。先ほど紹介したhtmlコードの記述情報を元にfind_elementで要素を取得する方法を以下で紹介します。

find_element_by_nameで要素を取得する

find_element_by_nameは、タグ内のname属性に書かれた内容と条件マッチした要素を取得します。

//elemの変数にname属性が、usernameに一致した要素を格納する
elem = driver.find_element_by_name('username')

find_element_by_xpathで要素を取得する

xpathは、ツリー構造となるxml/html形式から、要素や属性を指定するための構文です。先ほど紹介したfind_element_by_nameとは、要素を指定する構文が異なります。

//htmlソース内の最初のフォームタグを要素取得
elem_form = driver.find_element_by_xpath("//form[1]")

ちなみに、上記の場合は最初のフォームタグを取得しますが、以下のようにid属性を条件に要素を取得することも可能です

//elem_formの変数に、id属性がloginFormにマッチする要素を取得
elem_form = driver.find_element_by_xpath("//form[@id='loginForm']")

find_element_by_tag_nameで要素を取得する

//elem_tagの変数にタグの名前がformのタグ要素を取得する
elem_tag = driver.find_element_by_tag_name("form")

find_element_by_class_nameで要素を取得する

//elem_classの変数にclass属性の値がform_designになっている要素を取得する
elem_class = driver.find_element_by_class_name("form-design")

find_element_by_css_selectorで要素を取得する

//elem_selectorの変数に,formタグのclass属性がform_designになっている要素を取得する
elem_selector = driver.find_element_by_css_selector("form.form-design")

兄弟要素をfind_element_by_css_selectorで取得する

find_elementで要素を取得する時に、要素を取得する条件で兄弟要素を取得したいと思う時が実務上発生することは想像ができます。その時のために、find_element_by_css_selectorで兄弟要素を指定します。以下のソースコードがあったとします。

//兄弟要素を取得する場合のhtmlソースコードのサンプル
<p class="author">
　xxxxさんは以下の本を出版しております。
</p>
<p class="book">
 <ul>
  <li>タイトル１：ーーー分析入門</li>
  <li>タイトル２：スクレイピング基礎編</li>
  <li>タイトル３：データ解析</li>
  <li>タイトル４：Pandasでデータ分析</li>
 </ul>
</p>
<p class="last">
来年も本を出版予定です。
</p>

上記のタグからclass属性のauthorから見た隣接する直後の兄弟要素は、bookが記述されたclass属性です。その場合、以下のように記述を行います。

// 隣接する直後の兄弟要素を指定する場合は、cssセレクターに「+」を追記して指定する
elem_bro = driver.find_element_by_css_selector("p.book + p")

上記の隣接する直後の兄弟要素だけでなく、すべての後ろの兄弟要素を取得する場合は「~（チルダ）」を使います。

// 隣接する直後の兄弟要素を指定する場合は、cssセレクターに「+」を追記して指定する
elem_bro_all = driver.find_element_by_css_selector("p.book ~ p")

まとめ

selenium自体は他のスクレイピングより、処理が遅いなんて言われますが、遅いことを除けば万能だと思います。seleniumのスクレイピングではfind_elementで要素が取得できることはファーストステップなので、しっかり押さえておきましょう。