サイトのキャプチャ画像を取得できるWebAPIを使ってみる

今回はサムネイル画像を取得します。

OGPの画像はでっかい

OGPから画像URLを取得できたものの、OGPで使用する画像サイズは「1200px × 630px 以上」が推奨です。（Facebookの場合。）

サムネイル画像として使うには大きすぎるので、スタイルシートなどでmax-widthを指定して、100pxくらいの大きさで表示させることになります。

max-height や max-width を指定しても小さくなるのは表示上だけなので、読み込む画像のデータサイズは変わらないため、スマートフォンとかで見ているときには通信量が気になります。

それに、この画像URLをそのままIMGタグで使うと、「画像直リンク」という状態になり、リンクカードを表示するたびに、リンク先サイトの画像ファイルへのアクセスが発生して、迷惑行為になってしまいます。

「取得→100×100へ縮小→保存→表示」する仕組みがあれば良いのかも知れませんが、いつまで保存するか等、管理するのが面倒そうです。

あれこれ考えると、結局サムネイル取得をしてくれるWeb APIを利用するのが良さそうです。

「HeartRails」で行っている画像作成サービス「HeartRails Capture」では、影つけなどの効果を付けたサムネイル画像が取得できます。

「http://capture.heartrails.com/100×100?URL」という書式で、リンク先のキャプチャ画像が取得できます。

&lt;img src="http://capture.heartrails.com/100x100?https%3A%2F%2Fpopozure.info%2F20150723%2F7753"&gt;

↓

パラメータを指定することで、影つけ、縁つけ、角まるめなんかもできます。

影つけ、角まるめ、サイズ150px×150px

&lt;img src="http://capture.heartrails.com/150x150/shadow/round?https%3A%2F%2Fpopozure.info%2F20150723%2F7753"&gt;

↓

影つけ、縁つけ、サイズ200px×200px

&lt;img src="http://capture.heartrails.com/200x200/shadow/border?https%3A%2F%2Fpopozure.info%2F20150723%2F7753"&gt;

↓

全部のせ（影つけ、縁つけ、角まるめ）、サイズ300px×200px

&lt;img src="http://capture.heartrails.com/300x200/cool?https%3A%2F%2Fpopozure.info%2F20150723%2F7753"&gt;

↓

プログラムの中ではこんな感じでしょうか。

$thumbnail_url = 'http://capture.heartrails.com/100x100?'.urlencode($url);
echo '&lt;img src="'.$thumbnail_url."&gt;"';

URLはそのまま書いても大丈夫なようですが、「urlencode($url)」としておくと良さそうです。

取得できていないページはこんな表示になります。（縁ありを指定した場合）
↓

非公開ながら「WordPress.com」のAPIがあります。

「http://s.wordpress.com/mshots/v1/URL?w=100」という感じで記述します。

「?w=100」の値を変更することで大きさが指定できます。（大きさによって「403 Forbidden」になってしまったりしました。）

&lt;img src="http://s.wordpress.com/mshots/v1/https%3A%2F%2Fpopozure.info%2F20150723%2F7753?w=100"&gt;

↓

日本語に対応していないので、あまり大きくするとタイトルや記事がちゃんと表示されていなくて残念な感じになります(^-^;

プログラムの中ではこんな感じに。

$thumbnail_url = 'http://s.wordpress.com/mshots/v1/'.urlencode($url).'?w=100';
echo '&lt;img src="'.$thumbnail_url."&gt;"';

非公式とはいえスクリーンショットキャプチャプラグイン「Browser Shots」（旧「BM_Shots」）でも使われているAPIなので、安心して使える気がします。

取得できていないページはこんな表示になります。
↓

日本語対応のサービスなので、大きくしたときもタイトルや記事が日本語で表示されています。

影つけ、縁つけ、角まるめがパラメータ指定するだけでできるので、簡単に見栄えの良いキャプチャ画像をつくれるのが良いです。

WordPress.comの「作成中」の画像がエラー起こしてるっぽく見えるのと、作成時間が若干長い気がするのも要因の一つです。

余裕ができたら「OGP取得→無かったらキャプチャ取得」みたいな仕組みを作りたいですが、キャッシュ管理面倒そう…。

次回はファビコンの取得です。