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

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

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

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

Google PageSpeed Insights API

先ほどのブログ記事によれば、このAPIはウェブの表示速度調査を目的として作られたもので、速度分析するにあたり、リンク先データを取得した際にスクリーンショットも取り、それをbase64でエンコードまでしてくれて、しかもレスポンスに乗せて渡してくれるといった作りになっているようです。流石はGoogleさん太っ腹な感じがするAPIです。

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

Google PageSpeed Insights 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キーだけ取得
サービスアカウントの作成

あとは適当な名前を付けて、次へ次へと進むと、キーの作成ボタンがでてくるので作成しておきます。秘密鍵を含むファイルは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エンコード文字列が長いのですぐに場所は分かると思います。

実際にjsonを確認した方が分かりやすいと思いますが、スクリーンショットのデータはこのあたりにありました。

$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を戻す、といった処理に結構時間がかかるというところでしょうか。

スクリーンショット取得APIなんて山ほどあるにも関わらず、そもそもの目的が違うAPIを使ってなんてアホなことやっているんだとGoogleさんから怒鳴られそうですが、スクリーンショット画像がとてもきれいに取れているので、そのあたりは気にせず使ってしまいましょう。

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

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で新着記事のお知らせもしています。宜しければフォローどうぞ。