GoogleのPagespeed APIでスクリーンショット

Googleではサイトの表示速度をサイト評価の基準の一つに活用すると公表しています。

速度チェックツールもWEBに公開しておりますが、Search Consoleにも速度チェック機能が備わり始めましたので、サイトの表示速度は重要な指標になりつつあるということのようです。

この一環として、サイト表示速度関連の情報を提供するAPI、Google PageSpeed Insights APIというAPIも新たに提供をスタートしていました。APIにURLを投げると、応答速度のスコアリングや表示時間といったデータを受け取ることができますが、このレスポンスデータの中に、base64でエンコードしたサイトのスクリーンショット画像もセットされておりました。

そこで、この記事ではGoogle PageSpeed Insights APIを使い、ディレクトリ登録サイトのスクリーンショットを取得する方法をご紹介したいと思います。APIを使うために必要なDeveloper Consoleのアカウント登録から、PHPでPageSpeed Insights APIを使う方法までサンプルコードを交えて説明しています。

この記事の目次

1 APIでスクリーンショット取得
2 Google PageSpeed Insights API
3 Pagespeed APIでスクショ取得完成
4 ランキング上位サイトに限って利用に
5 おわりに
- 5.1 シェア

APIでスクリーンショット取得

先日、こちらのブログ記事をたまたま発見しておりました。こちらのブログによると、Google APIの一つを使ってサイトのスクリーンショットの取得ができる！？とのことでした。そこで、こちらのブログで紹介されていた、Google PageSpeed Insights APIを使ってウェブサイトのスクリーンショット取得にチャレンジしてみました。

dtnディレクトリに登録されたサイトのスクリーンショットを取得して、殺風景なカテゴリページに表示をしたら多少は華やかになるかと考えておりましたが、安定して、しかも、簡単に利用できそうなAPIが見つからず、これまでずっとやらずじまいにおりました。

とはいえ、GoogleのAPIであればAPI安定度も全く問題なさそうです。

dtnディレクトリのカテゴリページイメージ — 今のdtnディレクトリのカテゴリ。昔変わらずシンプルな感じです。

Google PageSpeed Insights API

Google PageSpeed Insights APIは、サイト表示速度関連の情報を提供する目的として作られたものですが、速度の分析をする際、取得したサイトのデータをスクリーンショットとして保存し、それをbase64でエンコードまでして提供してくれているようです。

そんなデータをレスポンスに乗せて渡してくれるといった大盤振る舞いをしてくれているところは、流石Google様という感じです。

ただ、先ほどのブログ記事は2017年3月のVersion2のものだったので、今も同じようにスクリーンショットをレスポンスで渡してくれるかどうか心配でしたが、Google側で用意してあるPageSpeed Insights APIのドキュメント（今はVersion5）を見てみると、プロパティ：lighthouseResult.runtimeError.codeの説明として、NO_SCREENSHOTSなるパラメータが存在しているので、スクリーンショット関連の何かはまだありそうな感じです。

Google PageSpeed Insights APIのマニュアルにスクリーンショットの記載がある — APIレスポンスにそれらしいものが

ということで、早速API利用に向けた設定を進めていきます。

Google Developer Console

APIのチュートリアルを読んでみると、↓のような記載があったりして、お試し程度であればAPIキーも登録せずに利用できるようですが、とりあえずPHPでグルグル回すことも考えてAPIキーは用意してみました。

PageSpeed Insights API を試すだけであれば、API キーは不要です。自動化した方法で API を使用して、1 秒間に複数回クエリを作成する予定であれば、API キーが 1 つ必要です。

PageSpeed Insights APIを有効化してAPIキー取得

GoogleのAPIを使ったことがある方ならGoogle Developer Consoleのアカウントをお持ちとは思いますので、PageSpeed Insights APIを探して、ご利用中のプロジェクトで有効化してAPIキーを取得すれば問題ないようです。

PageSpeed Insights APIを有効化する — Developer ConsoleでPageSpeed Insights APIを有効化

アカウントが無かったり、プロジェクトを分けたいという場合は、新しいプロジェクトを作成して、同じようにPageSpeed Insights APIを有効化すればOKです。

Google APIのプロジェクトにPageSpeed Insights APIを追加する — APIが無事追加されました

登録されたPageSpeed Insights APIをクリックすると、「クレデンシャルを作りなさい」との警告がでています。

CREATE CREDENTIALSボタンから認証情報を作成することも可能 — CREATE CREDENTIALSボタンから認証情報を作成へ

このCREATE CREDENTIALSボタンからOAuthの認証情報作成画面に進みますが、今回はAPIキー取得だけできればOKですので、サービスアカウントの作成で済ませておきます。

らOAuthの認証情報作成をせず、サービスアカウントでAPIキーだけ取得 — サービスアカウントの作成

あとは適当な名前を付けて、次へ次へと進むと、キーの作成ボタンがでてくるのでAPIキーを作成します。秘密鍵を含むファイルはJSONでもP12でも選べますが、以前にINランキングを作るためにGoogle Analytics APIを利用した際はP12を使ってプログラムを書いていたので、このあたりを流用するため、今回もP12で保管しておきます。

PHPでクエリを生成

秘密鍵のファイルを入手したものの、PageSpeed Insights APIの場合、リクエストURLの末尾にパラメータで&key=yourAPIKeyを足すだけでいいので、認証ファイルを使うことなく実装できます。

ここまできたらあとはリクエストURLを組み立てて投げるだけです。

//API接続先
$APIurl = 'https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=';

//取得したAPIキー
$yourAPIKey = 'AAAAABBBBBCCCCCC';

//取得したいスクリーンショット先のURL
$TARGET_URL = 'https://www.yahoo.co.jp/'

//クエリを生成
$Requesturl = $APIurl.urlencode($TARGET_URL).'&key='.$yourAPIKey;

//レスポンス取得
$InsightJSON = file_get_contents($Requesturl);

//JSONデコード
$InsightObj = json_decode($InsightJSON, FALSE);

無事にレスポンスデータを取得

試しにヤフーのURLを付けて投げてみると、返ってきた$InsightObjの中に、$TARGET_URLで指定したヤフーのサイトスピードに関するデータがオブジェクトで山ほど入ってました！！

とりあえずOKそうです。

JSONの中身をチェック

早速、JSON用ヘッダを出力してあげて、データ構造をブラウザでチェックしてみます。

header("Content-Type: text/javascript; charset=utf-8");
echo $InsightObj;

見ると、長々しいbase64データが存在しました！

PageSpeed Insights APIのjsonレスポンスにimage情報が存在しました — data:image/jpeg;base64が入ってます

データを見ると、他にも色々使えそうなデータがたくさん入っていましたが、今回はスクリーンショットの画像データ以外に興味は無しなので、全部取り捨てをしてjsonからこのスクリーンショットのjpeg/base64だけを引っこ抜くとします。base64エンコード文字列が長いのですぐに場所は分かると思いますが、スクリーンショットのデータはこのあたりにありました。

$Obj -> lighthouseResult -> audits -> final-screenshot -> details -> data

間にハイフン付きの final-screenshot なんかがあるので、引っこ抜くとしたらこんな感じでしょうか。

  $CAPCHA = $InsightObj -> lighthouseResult -> audits -> {'final-screenshot'} -> details -> data;

取得したスクリーンショットデータはきれいにbase64エンコードがされているので、そっくりそのままDBに貯めておけばサイトのスクリーンショット画像として使えそうです。

echo '<img src="'.$CAPCHA.'">';

Pagespeed APIでスクショ取得完成

PageSpeed Insights APIを使って、無事きれいなスクリーンショットを手に入れることができました。

難点としては、元々は指定URLの表示速度を計りつつ、サイト分析をするためのAPIということもあって、指定したURLにデータを取りに行き→分析して→JSONを戻す、といった処理に10秒近い時間がかかるというところでしょうが、安定してスクリーンショット画像をきれいに取得できるので、細かいところは気にせず使っていきましょう。

おわりに

ランキングは多少華やかになりましたが、ランキングデータの一部をbotがクリックしているのか、OUTランキングを見るとディレクトリ型検索エンジンdtnの数値が飛びぬけて高くなっていたりしておりました。

このあたりはランキングプログラム側で何かしら対応しないとダメそうですが、それはまた次の機会にしようと思います。