アイテムのマークアップをカスタマイズするAssetyleneプラグイン

SixApartのMTOS-DEVメーリングリストに、「『Assetylene』というプラグインを公開した」というメッセージが投稿されました。
AssetyleneプラグインはSixApartのBrad Choate氏が開発したもので、アイテム（画像等）を挿入したときのマークアップを、自分の好きなようにカスタマイズすることができるものです。

1.背景（の推測）

Movable Type 4以降から「アセット」の機能が追加され、画像等を扱いやすくなりました。
ただ、画像等のマークアップがMTのシステムにハードコーディングされていて、カスタマイズしにくくなっていました。

しかも、アセットのマークアップがformタグで囲まれます。
このformタグには意味がありますが、一見すると「何でformタグがつくの？」という印象を持った人が多いのではないかと思います。
また、「formタグは邪魔だから、毎回手動で削除している」という人もいるようです。

このような意見がSixApartに多く寄せられたことが、Assetyleneプラグインが開発された背景ではないかと思います。

2.Assetyleneプラグインのインストール

Assetyleneプラグインは、以下のページからダウンロードすることができます。

Plugin DirectoryのAssetyleneプラグインのページ

ダウンロードしたzipファイルを解凍すると、「plugins」というフォルダができます。
そのフォルダを、Movable Typeのインストール先ディレクトリにアップロードします。

ただ、プラグインの動作を試してみると、ドキュメントと実際の動作が異なる箇所が一部ありました。
「plugins」→「lib」→「Assetylene」→「CMS.pm」で、以下のリストの赤字の「(」と「)」を追加すると、ドキュメントの通りの動作になります。

・
・
・
($param->{a_onclick}) = $a_tag =~ /\bonclick="(.+?)"/s;
 
$param->{form_tag} = $form_tag;
($param->{form_style}) = $form_tag =~ /\bstyle="(.+?)"/s;
($param->{form_class}) = $form_tag =~ /\bclass="(.+?)"/s;
 
$param->{img_tag} = $img_tag;
($param->{img_height}) = $img_tag =~ /\bheight="(\d+)"/;
($param->{img_width}) = $img_tag =~ /\bwidth="(\d+)"/;
($param->{img_src}) = $img_tag =~ /\bsrc="(.+?)"/s;
($param->{img_style}) = $img_tag =~ /\bstyle="(.+?)"/s;
($param->{img_class}) = $img_tag =~ /\bclass="(.+?)"/s;
($param->{img_alt}) = $img_tag =~ /\balt="(.+?)"/s;
 
$insert_tmpl->param( $param );
・
・
・

3.アイテムにキャプションをつける

Assetyleneプラグインをインストールすると、アイテムをアップロードする画面に「Caption」の欄が追加されます。
このキャプションも、アセットのマークアップの際に使うことができます。

4.アセットのマークアップのテンプレートを作る

次に、ブログに「Asset Insertion」というテンプレートモジュールを新規作成します。
このテンプレートモジュールが、アイテムのマークアップのテンプレートになります。

テンプレートモジュールの中では、MTAsset系のタグを使うことができます。
また、以下の変数を使って、MT標準のマークアップの情報を得ることもできます。

変数名	内容
upload_html	マークアップ全体
enclose	マークアップがformタグで囲まれていれば1、そうでないなら0
include	「ブログ記事に画像を表示」のチェックがオンなら1、そうでないなら0
thumb	「サムネイルを利用」のチェックがオンなら1、そうでないなら0
align	「位置」のラジオボタンの値（none／left／center／right）
popup	「ポップアップウィンドウで元の大きさの画像にリンクします」のチェックがオンなら1、そうでないなら0
caption	「Caption」の欄に入力したテキスト
description	「説明」の欄に入力したテキスト
asset_id	アイテムのID
form_tag	マークアップのformタグ部分（ただし開始タグのみ）
form_class	マークアップのformタグのclass属性部分
form_style	マークアップのformタグのstyle属性部分
img_tag	マークアップのimgタグ部分
img_alt	マークアップのimgタグのalt属性部分
img_height	マークアップのimgタグのheight属性部分
img_width	マークアップのimgタグのwidth属性部分
img_src	マークアップのimgタグのsrc属性部分
img_style	マークアップのimgタグのstyle属性部分
img_class	マークアップのimgタグのclass属性部分
a_tag	マークアップのaタグ部分（ただし開始タグのみ）
a_href	マークアップのaタグのhref属性部分
a_onclick	マークアップのaタグのonclick属性部分

5.「Asset Insertion」テンプレートモジュールの例

例えば、アイテムを以下のようにマークアップしたいとします。

画像の場合は以下のようにマークアップします。
<form mt:asset-id="アイテムのID"><img src="URL" width="幅" height="高さ" alt="キャプション" title="キャプション" /><form>
画像以外の場合は、MT標準のマークアップを使います。

上記のようにするには、「Asset Insertion」テンプレートモジュールを以下のように組みます。

<mt:SetVarBlock name="item_type"><mt:AssetType></mt:SetVarBlock>
<mt:If name="item_type" eq="画像">
<form mt:asset-id="<mt:Var name="asset_id">"><img src="<mt:Var name="img_src">" width="<mt:Var name="img_width">" height="<mt:Var name="img_height">" alt="<mt:Var name="caption">" title="<mt:Var name="caption">" /></form>
<mt:Else>
<mt:var name="upload_html">
</mt:If>

お知らせ