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

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

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

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

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秒近い時間がかかるというところでしょうが、安定してスクリーンショット画像をきれいに取得できるので、細かいところは気にせず使っていきましょう。

ランキング上位サイトに限って利用に

APIのレスポンス速度の課題もあるので、当初想定していたような、ディレクトリ登録サイトのスクリーンショットを全部取ってカテゴリを賑やかにする…というのは非現実的かと思いましたので、dtnディレクトリで登録サイト向けに用意しているランキングのうち、OUTランキング、サイト評価ランキングの上位３サイトに限り、スクリーンショットを取って表示してみることにしました。

出来上がったのが今のランキングページです。ランキング自体はリアルタイムで変動するので、スクリーンショット未取得のサイトが上位に上がった際は、一旦取得中画像を表示させておき、定時cronで取得するとしておきました。

dtn.jpのランキング上位３サイトだけにサムネイル画像を表示してみた
ランキングページが多少華やかになりました

おわりに

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

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

ABOUT dtn.jp

この運営ブログをみてdtn.jpの運営サイトに興味をお持ちになった方は下記のリンク集からサイトをご参照ください。PHP・SQL・JS・HTML・CSSや様々なAPIでゼロから立ち上げたサイトを複数運営しています。

dtn.jp関連サイト

  • ディレクトリ型検索エンジンdtn大手サイトは全てサービスを終了し、中小でも運営を継続するところがほとんどなくなってしまったディレクトリ型検索エンジンを2002年から細々運営しており、未だに細かい機能改修も行っております。申請されたサイトは実際に訪問して細かく確認をしているので登録までかなりお時間いただきます。
  • 猫ネコサーチエンジン猫・ペットサイト専用のディレクトリ型検索エンジンです。登録サイトはサイトのスクリーンショット付きでカテゴリに掲載しています。
  • 画像掲示板の泉画像やYouTubeやニコニコ動画が貼り付け可能な匿名画像掲示板です。27ジャンルに分かれた掲示板に、それぞれ100スレッドまで立てることが可能です。
  • ツイータンTwitter APIを使って10分おきに収集したTwitter（ツイッター）のトレンドワードや人気ハッシュタグデータを月別に集計してランキング形式で公開しています。
  • Keyword Tool++Yahoo APIや楽天サイトのデータを日次で収集したデータを元に、EC系キーワードをラインキング形式でご紹介しています。各ワードは検索ボリュームや関連語、24か月の検索ボリュームトレンドを確認も可能です。
  • 消費者金融の泉カードローン商品を取り扱う金融業者を一覧で比較可能としたサイトです。カテゴリ別、人気度別、限度額別、金利別に比較可能なサイトにしています。
  • TrendinGファッションモールに出店するブランドをアイテムヒット率でランキングとしたサイトです。まだβ版です。

各サイトの開発方法などについて

各サイトの開発方法や運用トラブルについては、当ブログで不定期にご紹介しています。Twitterで新着記事のお知らせもしています。宜しければフォロー下さい。