AssetThumbnailMagick プラグインでサムネイルあれこれ。

先週の土曜日に行ってきたんですよ、ええ。

• 第10回リクリセミナー「Webデザイントレンド 大阪版」は無事終了しました-Re:Creator's Kansai （リクリ）

今やイラレもフォトショもMacに入れてなくて自分で画像をあれこれすることもまったく無くなっちゃってるんですが(一応ベジェ扱えるんだぜこれでも)、Web制作/CMSの会社経営してるんだからデザインのお勉強だって必要ですよね。

で、冒頭あたりで、「円窓切り抜き(画像を丸く切り抜く)」ってのが取り上げられていたので、会場でコーディング始めちゃってアップしました。お前話し聞いてねーだろ(いや、ちゃんと聞いてましたよ、社内イントラにつぶやきながら)

• mt-plugin-asset-thumbnail-magick

※注意 : ダイナミックについては調整中、ノーテストです。

で、週末にあれこれ調整してたら何か楽しくなってきちゃって、こんな感じになりました。

<div style="padding:2em;text-align:center;letter-spacing:1em;line-height:2em;width:600px">
<mt:Setvar name="size" value="150">
<mt:Setvar name="round" value="20">
<MTAsset id="144">
<img src="<MTAssetThumbnailMagick square="1" type="circle" width="$size" force="1">" alt="丸(切り抜き)">
<img src="<MTAssetThumbnailMagick square="1" type="roundrectangle" round="$round" width="$size" opacity="0.3" composite="sp_icon" force="1">"  alt="スマホアイコン風(切り抜き+重ね)">
<img src="<MTAssetThumbnailMagick square="1" type="heart" width="$size" force="1">" alt="ハート">
<img src="<MTAssetThumbnailMagick square="1" type="roundrectangle" round="$round" width="$size" force="1">" alt="角丸(切り抜き)">
<img src="<MTAssetThumbnailMagick square="1" type="star" width="$size" force="1">" alt="星型(切り抜き)">
<img src="<MTAssetThumbnailMagick square="1" type="star" width="$size" opacity="0.8" composite="star" force="1">" alt="星形(立体)">
<img src="<MTAssetThumbnailMagick square="1" type="abc" width="$size" opacity="0.8" force="1">" alt="ABC(文字切り抜き)">
<img src="<MTAssetThumbnailMagick square="1" width="$size" opacity="0.8" composite="kirakira" force="1">" alt="きらきら(重ね)">
<img src="<MTAssetThumbnailMagick square="1" width="$size" opacity="0.8" composite="punpun" force="1">" alt="怒(重ね)">
<img src="<MTAssetThumbnailMagick square="1" width="$size" opacity="0.8" composite="namida" force="1">" alt="涙(重ね)">
<img src="<MTAssetThumbnailMagick square="1" type="shizuku" width="$size" force="1">" alt="しずく(切り抜き)">
</MTAsset>
</div>

アイテムのコンテキストの中で MTAssetThumbnailMagick タグが使えます。基本的にこいつの処理は(途中までは) MTAssetThumbnailURL と同じで、サムネイルを生成した後で、

• (モディファイアで指定があれば)画像を重ねる
• (モディファイアで指定があれば)マスクで切り抜く

という処理をします。typeモディファイアで指定できるのは circle(円形)、roundrectangle(角丸)の2つなのですが、プラグインのディレクトリ直下の masks 以下に heart.png のような形でマスク画像を置けば heart 指定でその画像でマスクします。角丸の場合は r(ピクセル)をroundモディファイアに渡します。

重ねることのできる画像は同じくプラグインのディレクトリ直下の composites ディレクトリ以下にpng画像を設置し、composite="namida"のように指定します(composites/namida.pngが重ねられる)。opacityモディファイアで、重ねるときの透明度を指定します。

ま、コーポレートサイトなんかで使うシーンは限られると思うし、今どきであればCSSだけでできてしまうんだけど、お手軽だし、古いブラウザもOKだし(透過PNGは駄目なブラウザがあったっけ(遠い目))、何より、何か楽しいのでブログのデザインで遊ぶ用途にいーんじゃないかな。

追記 : forceモディファイアは毎回強制的に再構築時にサムネイルを生成するものです。これがない場合、オリジナルのタイムスタンプをチェックして、更新されていた場合のみ再生成されます。