09:25小技集MovableType最近のブログやWEBメディアで、新着記事や人気記事の一覧を小さなアイキャッチ画像と共に表示しているのをよく見ます。画像があると、記事の内容が一目で把握できるのとともに、アイキャッチの名前の通り目を引きますのでクリック率の向上が期待できます。thumbnailあたりから、MovableTypeではMTAssetThumbnailLinkとかで表示できると思います。これらはいずれも、投稿時に画像をアイテムとしてブログに登録しておかなければならず(標準の画像アップローダーを使う)ほとんどの画像をFlickrにアップロードして、タグをはりつけるスタイルのボクには合わない方法でした。いままで書いた1,000以上の記事を書き換えるつもりもないので、MovableTypeのテンプレートタグでうまく自動変換しながら表示できないか工夫してみました。記事中で使う画像のほとんどを締めるFlickrとAmazonはそれぞれサムネイルを持っているので、画像変換などは自分のサーバ上で行わなくても良い前提です。FlickrのサイズパターンとルールFlickrに画像をアップロードすると、自動で9パターン(執筆時点)のサイズバリエーションを自動で生成しているようです。それぞれサイズごとにファイル名の後ろパターンが決まっています。変換するには、Flickr画像URLを見つけてきて...xxxxxxxxxx_xxxxxxxxxx_z.jpg↓xxxxxxxxxx_xxxxxxxxxx_s.jpg後ろの「z」を「s」に変えてやればサムネイルサイズの画像URLが取得できます。AmazonのサイズパターンとルールAmazonの商品画像は、URLを変更することで動的にサイズや影・回転など様々なカスタマイズが可能です。たくさんのオプションがあるので、詳しい解説は下記ページを参照してください。Labsさて、サムネイルを使う場合には正方形の方が何かと使いやすいのですが、元の画像の縦横比に関係なく余白を足して正方形にするには「AA」オプションを使用します。縦75というように、AA(正方形)75(px)というオプションを追加することで変換が可能です。MTEntryBodyの最初の画像URLからサムネイル画像URLを取得する書き方さて、Flickr/AmazonのサムネイルURLのルールが分かったところで早速実装していきます。いうか、先に完成品を見せたほうが早いのでコードを披露。※解説のために、改行・インデントを入れていますが実際はMTタグ部分は改行・インデント抜いた方が失敗ないと思います。&lt;/MTEntries&gt;&lt;/ul&gt;1)画像URLを抽出mt:entrybodyからregex_replaceモディファイヤを使って、初めに出てくる画像タグのURLを抽出し、MTSetVarBlockを使ってfirstpicという変数に入れています。2)Flickr画像だったら75pxサムネイルに変換firstpic変数に入っているURLがFlickr画像URLのパターンに一致したら、75pxサムネイルの「_s.jpg」にURLを置換しています。いうクラス名もついでに追加しておきました。150pxサムネイルにしたければ、「_q.jpg」に差し替えるだけですね。3)Amazon画像だったら75pxサムネイルに変換firstpic変数に入っているURLがAmazon画像URLのパターンに一致したら、75pxサムネイルの「_AA75_」にURLを置換しています。いうクラス名もついでに追加しておきました。150pxサムネイルにしたければ、「_AA150_」に差し替えるだけですね。(JP)で生成したタグを利用していますが、うまく画像URLとして認識されないケースがありましたらお知らせいただければと思います(正規表現の調整でいけるかと)。本文に画像自体がない、あるいはFlikrやAmazon以外の画像を使っている場合は固定のダミー画像をセットします。固定の画像が嫌な場合は、サムネイル作成APIを利用して、該当ページのスクリーンショットを表示するのも良いかもしれません。name="thumbnail">を使って好きな場所に呼び出します。記事パーマリンクへの画像リンクにするケースが多いので、Aタグで囲う形になるでしょうか。実際利用する場合には、以下の改行・インデントなしのタグをご利用下さい。/&gt;&lt;/MTSetVarBlock&gt;&lt;/mt:If&gt;まとめMTの独自マークアップであるMTMLでも、変数を使ったり正規表現の一致・置換など複雑な表示分岐ができるようになったので、プラグインなどを使わなくても色んな事ができちゃいますね。Load」を一括適用する方法この辺の記事で紹介したtipsでも、regex_replaceモディファイヤを使って実装しています。MTを使っていて、画像はFlickrっていう、かなり限られた組み合わせの人向けの記事になっちゃいましたけど、画像URLのパターンを調整すれば他のWEBサービスにも対応できそうな気がします。何かアイディアあれば教えてくださいね。Scriptを使ってメール自動返信2014年版WordPressテーマ作成の第一歩。v3.5.5(YouTube仕様変更対応)1つ新しい記事:これまで公開してきたいくつかの個人サービスの状況報告と閉鎖予告プロフィールCreazy!(クリエイジー!)は、WEBエンジニアのヤガー(@yager)がWEBの最新動向やブログやWEBサイトですぐに使える技術情報などを更新しているブログです。(1)最新記事Ffmpegで複数動画を結合して一つの動画に出力*sの周期で買い替えているので、iPhone7はスルーしたヤガーです。現在メインスマホとしてはiPhone6sを利用していますが、サブ機として古いiPhone5sを利用しています。コンパクトなサイズが持ち歩きやすくサブ機にはピッタリで、MVNOの格安SIMでバックアップ回線を確保しつつ、SMARTalkで050番号を取得して事業用の待受専用電話としています。いえ、かなり使い古していることもありバッテリーが一日どころか半日も持たない状態で、なんとかしたいところ。v2.0.2公開(表示不具合対応)アジャイルメディア・ネットワーク株式会社さんの運営するレビューズからBenQの27型カラーマネージメントディスプレイ「SW2700PT」をモニター用にお借りすることができましたので使用感などをレポートしたいと思います。ワタクシ、ヤガーは趣味で写真を撮っており、プライベートでは風景がメインですが、お仕事でお店の写真を撮ったり、フードや商品の写真を撮ったりすることもあります。仕事のメインはWEBサイトの開発だったりするので、写真自体はサブ的な仕事となる事が多いのですが、プロカメラマンさんとお話する機会も多く、ゆくゆくカラーマネージメントディスプレイの導入も考えたいなと考えておりました。