MovableTypeで記事に挿入したFlickrやAmazonの画像タグをサムネイルサイズに変換して表示する方法

最近のブログやWEBメディアで、新着記事や人気記事の一覧を小さなアイキャッチ画像と共に表示しているのをよく見ます。画像があると、記事の内容が一目で把握できるのとともに、アイキャッチの名前の通り目を引きますのでクリック率の向上が期待できます。
で、新しいブログエンジンでは大体基本機能として取り込まれていて、Wordpressではthe post thumbnailあたりから、MovableTypeではMTAssetThumbnailLinkとかで表示できると思います。でも、これらはいずれも、投稿時に画像をアイテムとしてブログに登録しておかなければならず（標準の画像アップローダーを使う）ほとんどの画像をFlickrにアップロードして、タグをはりつけるスタイルのボクには合わない方法でした。
もちろん、いままで書いた1,000以上の記事を書き換えるつもりもないので、MovableTypeのテンプレートタグでうまく自動変換しながら表示できないか工夫してみました。記事中で使う画像のほとんどを締めるFlickrとAmazonはそれぞれサムネイルを持っているので、画像変換などは自分のサーバ上で行わなくても良い前提です。

Flickrのサイズパターンとルール

Flickrに画像をアップロードすると、自動で９パターン（執筆時点）のサイズバリエーションを自動で生成しているようです。また、それぞれサイズごとにファイル名の後ろパターンが決まっています。

Square 75 (75 x 75) xxxxxxxxxx_xxxxxxxxxx_s.jpg
Square 150 (150 x 150) xxxxxxxxxx_xxxxxxxxxx_q.jpg
Thumbnail (100 x 75) xxxxxxxxxx_xxxxxxxxxx_t.jpg
Small 240 (240 x 180) xxxxxxxxxx_xxxxxxxxxx_m.jpg
Small 320 (320 x 240) xxxxxxxxxx_xxxxxxxxxx_n.jpg
Medium 500 (500 x 375) xxxxxxxxxx_xxxxxxxxxx.jpg (標準。パラメータなし)
Medium 640 (640 x 480) xxxxxxxxxx_xxxxxxxxxx_z.jpg
Large 1024 (1024 x 768) xxxxxxxxxx_xxxxxxxxxx_l.jpg
Original (オリジナル) xxxxxxxxxx_xxxxxxxxxx_o.jpg

例えば、ボクがブログに常用している640px幅の Medium 640 から、一覧などで使えそうな75pxの正方形 Square 75 に変換するには、Flickr画像URLを見つけてきて…

xxxxxxxxxx_xxxxxxxxxx_z.jpg
↓
xxxxxxxxxx_xxxxxxxxxx_s.jpg

後ろの「z」を「s」に変えてやればサムネイルサイズの画像URLが取得できます。

Amazonのサイズパターンとルール

Amazonの商品画像は、URLを変更することで動的にサイズや影・回転など様々なカスタマイズが可能です。かなりたくさんのオプションがあるので、詳しい解説は下記ページを参照してください。
Amazon商品画像のカスタマイズ（理論編） – Shiz Labs
さて、サムネイルを使う場合には正方形の方が何かと使いやすいのですが、元の画像の縦横比に関係なく余白を足して正方形にするには「AA」オプションを使用します。
例えば、

http://images-jp.amazon.com/images/I/41uqyIOBZbL.jpg
横500 * 縦296

という元画像を正方形に変換したい場合は、

http://images-jp.amazon.com/images/I/41uqyIOBZbL._AA75_.jpg
横75 * 縦75

というように、AA（正方形）75（px）というオプションを追加することで変換が可能です。

MTEntryBodyの最初の画像URLからサムネイル画像URLを取得する書き方

さて、Flickr/AmazonのサムネイルURLのルールが分かったところで早速実装していきます。というか、先に完成品を見せたほうが早いのでコードを披露。
※解説のために、改行・インデントを入れていますが実際はMTタグ部分は改行・インデント抜いた方が失敗ないと思います。

<ul>
<MTEntries lastn="10">
<!-- １）画像URLを抽出 -->
<MTSetVarBlock name="firstpic">
<mt:entrybody regex_replace='/[\S\s]*?src="(http:\/\/.+?\.jpg)"[\S\s]*/i',"$1">
</MTSetVarBlock>
<!-- ２）Flickr画像だったら75pxサムネイルに変換 -->
<mt:If name="firstpic" like="(http:\/\/farm\d*\.static\.?flickr.com\/\d+\/\d+_[a-zA-Z0-9]+(_[a-zA-Z0-9]*)?.jpg)">
<MTSetVarBlock name="regex0">/^(http:\/\/farm\d*\.static\.?flickr.com\/\d+\/\d+_[a-zA-Z0-9]+).*/</MTSetVarBlock>
<MTSetVarBlock name="regex1"><img src="$1_s.jpg" class="thumbnail75 thumbFlickr" alt="<$MTEntryTitle encode_html="1"$>" /></MTSetVarBlock>
<MTSetVarBlock name="thumbnail"><$MTGetVar name="firstpic" regex_replace="$regex0","$regex1"$></MTSetVarBlock>
<!-- ３）Amazon画像だったら75pxサムネイルに変換 -->
<mt:ElseIf name="firstpic" like="(http:\/\/.*amazon\.com\/.*\.jpg)">
<MTSetVarBlock name="regex0">/^(http:\/\/.*amazon\.com\/.*)(\._SL\d+_\.jpg).*/</MTSetVarBlock>
<MTSetVarBlock name="regex1"><img src="$1._AA75_.jpg" class="thumbnail75 thumbAmazon" alt="<$MTEntryTitle encode_html="1"$>" /></MTSetVarBlock>
<MTSetVarBlock name="thumbnail"><$MTGetVar name="firstpic" regex_replace="$regex0","$regex1"$></MTSetVarBlock>
<!-- ４）それ以外だったら固定のサムネイル画像に変換 -->
<mt:Else>
<MTSetVarBlock name="thumbnail"><img src="75px正方形の固定画像URL" alt="<$MTEntryTitle encode_html="1"$>" /></MTSetVarBlock>
</mt:If>
<!-- ５）変数に保存された画像タグを使ってHTML表示 -->
<li>
<a href="<$MTEntryPermalink$>"><MTGetVar name="thumbnail"></a>
<a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a>
</li>
</MTEntries>
</ul>

１）画像URLを抽出

mt:entrybodyからregex_replaceモディファイヤを使って、初めに出てくる画像タグのURLを抽出し、MTSetVarBlockを使ってfirstpicという変数に入れています。

２）Flickr画像だったら75pxサムネイルに変換

firstpic変数に入っているURLがFlickr画像URLのパターンに一致したら、75pxサムネイルの「_s.jpg」にURLを置換しています。後々CSSで調整しやすいように thumbnail75 というクラス名もついでに追加しておきました。150pxサムネイルにしたければ、「_q.jpg」に差し替えるだけですね。

３）Amazon画像だったら75pxサムネイルに変換

firstpic変数に入っているURLがAmazon画像URLのパターンに一致したら、75pxサムネイルの「_AA75_」にURLを置換しています。後々CSSで調整しやすいように thumbnail75 というクラス名もついでに追加しておきました。150pxサムネイルにしたければ、「_AA150_」に差し替えるだけですね。
こちら、Amazon Quick Affiliate (JP)で生成したタグを利用していますが、うまく画像URLとして認識されないケースがありましたらお知らせいただければと思います（正規表現の調整でいけるかと）。

４）それ以外だったら固定のサムネイル画像に変換

本文に画像自体がない、あるいはFlikrやAmazon以外の画像を使っている場合は固定のダミー画像をセットします。固定の画像が嫌な場合は、サムネイル作成APIを利用して、該当ページのスクリーンショットを表示するのも良いかもしれません。

５）変数に保存された画像タグを使ってHTML表示

さて、１〜４の手順によって、thumbnail変数の中にサムネイル画像タグがセットされているので、<MTGetVar name="thumbnail">を使って好きな場所に呼び出します。恐らく記事パーマリンクへの画像リンクにするケースが多いので、Aタグで囲う形になるでしょうか。
実際利用する場合には、以下の改行・インデントなしのタグをご利用下さい。
※「75px正方形の固定画像URL」に任意の画像URLを差し替えるのを忘れずに！
▼75pxサムネイルを作る場合のタグ

<MTSetVarBlock name="firstpic"><mt:entrybody regex_replace='/[\S\s]*?src="(http:\/\/.+?\.jpg)"[\S\s]*/i',"$1"></MTSetVarBlock><mt:If name="firstpic" like="(http:\/\/farm\d*\.static\.?flickr.com\/\d+\/\d+_[a-zA-Z0-9]+(_[a-zA-Z0-9]*)?.jpg)"><MTSetVarBlock name="regex0">/^(http:\/\/farm\d*\.static\.?flickr.com\/\d+\/\d+_[a-zA-Z0-9]+).*/</MTSetVarBlock><MTSetVarBlock name="regex1"><img src="$1_s.jpg" class="thumbnail75 thumbFlickr" alt="<$MTEntryTitle encode_html="1"$>" /></MTSetVarBlock><MTSetVarBlock name="thumbnail"><$MTGetVar name="firstpic" regex_replace="$regex0","$regex1"$></MTSetVarBlock><mt:ElseIf name="firstpic" like="(http:\/\/.*amazon\.com\/.*\.jpg)"><MTSetVarBlock name="regex0">/^(http:\/\/.*amazon\.com\/.*)(\._SL\d+_\.jpg).*/</MTSetVarBlock><MTSetVarBlock name="regex1"><img src="$1._AA75_.jpg" class="thumbnail75 thumbAmazon" alt="<$MTEntryTitle encode_html="1"$>" /></MTSetVarBlock><MTSetVarBlock name="thumbnail"><$MTGetVar name="firstpic" regex_replace="$regex0","$regex1"$></MTSetVarBlock><mt:Else><MTSetVarBlock name="thumbnail"><img src="75px正方形の固定画像URL" class="thumbnail75" alt="<$MTEntryTitle encode_html="1"$>" /></MTSetVarBlock></mt:If>

▼150pxサムネイルを作る場合のタグ

<MTSetVarBlock name="firstpic"><mt:entrybody regex_replace='/[\S\s]*?src="(http:\/\/.+?\.jpg)"[\S\s]*/i',"$1"></MTSetVarBlock><mt:If name="firstpic" like="(http:\/\/farm\d*\.static\.?flickr.com\/\d+\/\d+_[a-zA-Z0-9]+(_[a-zA-Z0-9]*)?.jpg)"><MTSetVarBlock name="regex0">/^(http:\/\/farm\d*\.static\.?flickr.com\/\d+\/\d+_[a-zA-Z0-9]+).*/</MTSetVarBlock><MTSetVarBlock name="regex1"><img src="$1_q.jpg" class="thumbnail150 thumbFlickr" alt="<$MTEntryTitle encode_html="1"$>" /></MTSetVarBlock><MTSetVarBlock name="thumbnail"><$MTGetVar name="firstpic" regex_replace="$regex0","$regex1"$></MTSetVarBlock><mt:ElseIf name="firstpic" like="(http:\/\/.*amazon\.com\/.*\.jpg)"><MTSetVarBlock name="regex0">/^(http:\/\/.*amazon\.com\/.*)(\._SL\d+_\.jpg).*/</MTSetVarBlock><MTSetVarBlock name="regex1"><img src="$1._AA150_.jpg" class="thumbnail150 thumbAmazon" alt="<$MTEntryTitle encode_html="1"$>" /></MTSetVarBlock><MTSetVarBlock name="thumbnail"><$MTGetVar name="firstpic" regex_replace="$regex0","$regex1"$></MTSetVarBlock><mt:Else><MTSetVarBlock name="thumbnail"><img src="150px正方形の固定画像URL" class="thumbnail150" alt="<$MTEntryTitle encode_html="1"$>" /></MTSetVarBlock></mt:If>

まとめ

MTの独自マークアップであるMTMLでも、変数を使ったり正規表現の一致・置換など複雑な表示分岐ができるようになったので、プラグインなどを使わなくても色んな事ができちゃいますね。

この辺の記事で紹介したtipsでも、regex_replaceモディファイヤを使って実装しています。
MTを使っていて、画像はFlickrっていう、かなり限られた組み合わせの人向けの記事になっちゃいましたけど、画像URLのパターンを調整すれば他のWEBサービスにも対応できそうな気がします。何かアイディアあれば教えてくださいね。