やっとこさ自分が実装したかったブログカードがほぼ理想通りに作れるようになった話

Mediumとmbdb(モバデビ)のどっちに書こうかなぁと迷ったんですが、とりあえずこっちに。まぁ実際のところはモバデビで実装しているやつの話なので、本来ならそっちに書くべきかとは思ったものの、書いたら書いたで"知見の共有"とかでソース出してよとか言われそうな気がしないでもないんですよ。

ま、そんな前段はさておき、2年前くらいにブログ界隈でリンクをカード形式にして表示する、いわゆる「ブログカード」と呼ばれるものが流行り、今現在はだいぶ定着してきているものがあります。

そもそもどっからあのスタイルが来たのか、明確なことはわからんのですけど、このMediumでもURLをペーストするだけで、リンクがカード形式になって展開されますよね。こんなの。

日本国内に限って言えば、このカードスタイルのリンクを記事中に表示するというのは、はてなブログが最初なのではないかと思います。
そもそもははてなブログ同士でのみ使えるスタイルだったのが、oEmbed APIの提供、OGP対応といった感じで進み、ブログサービス、CMSの別を問わず使えるようになりました。

ただ、この手のものというのは、汎用的に使えるかわりに、細やかなカスタマイズというのができません。

僕の場合、できるだけ自分の作ったスタイルに沿う方向性でまとめたいというのもあって、同じような仕組みをOpengraph.phpをパースして出力するかたちでWordPressに実装しています。

下のブログカードはモバデビで展開されたものです。

記事タイトル、記事の概要、OGP画像、それにリンク先ページのドメインの4つを構成要素にしています。ドメインの頭にはちゃんとリンク先のfaviconも表示されるようにしたり、細かく作ってあります。

使い方も簡単で、WordPressのショートコードを使って記述するだけ。

OGP画像を直で呼び出すことの問題

まぁ、そんな独自のブログカードなのですが、いかんせん問題点としてしっかり認識しなければならないのが、OGP画像をリンク先のサーバーから直接呼び出すことになるという点。

Mediumはじめ、FacebookやTwitterといったソーシャルメディアでもOGPからカードタイプのリンクを生成するというスタイルですが、これらはすべて画像を自前の領域にキャッシュ化して呼び出しているため、リンク先サーバーには一番最初のアクセスくらいしか負荷がかからないようになっています。

ところが、さきほどのOpengraph.phpをパースする方法で、単純に実装してしまうと、自分のページにアクセスがあるたびにリンク先サーバーへトラフィックが行くため、アクセス数の多い記事になると、甚大な負荷を与えかねません。

それともう一点。
モバデビの場合、個人ブログメディアとしてはかなり早い段階でSSL化を実施していますが、こうしたSSL対応されたサイトで、非SSLサイトから画像を呼び出すと、混在コンテンツになり、セキュアな状態とは言えなくなります。

これら2つのポイントを鑑みて、モバデビでは敢えてOGP画像を取得せず、WordPress.comが提供するウェブページキャプチャーAPIを利用した画像を表示するようにしてきました。

とは言え、これだと理想の見栄えには程遠い。。
そのうちどうにかしないとなぁ･･･というのが、ここのところの課題になっていました。

別の画像API使えばいいんじゃん!

で、ふと気付きました。別のセキュアなURLが使えるAPIがあるじゃん! それ使えるじゃん! と。そう、WordPressではおなじみ(?)のPhoton APIです。

これを使えばPhotonで画像をキャッシュ化してくれるので、リンク先に負荷をほとんど掛けずにOGP画像を呼び出すことができます。

とは言え、単純にAPI使っても、Opengraph.phpでパースしたOGP画像のURLのままだと使えません。
ということで、さらに別にゴニョゴニョしてやって、見事に実装完了。先ほどの画像のような独自ブログカードが実装できました。

なお、OGP画像がないページもあるので、その場合は

if(empty($image)) {

という感じで分岐して、noimage画像を嵌めこむようにもしてあります。