アイテムのマークアップをカスタマイズする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」の欄が追加されます。
このキャプションも、アセットのマークアップの際に使うことができます。

assetylene.png

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>

MT Cloud Starter Kit
Movable Typeのプラグイン集「MT Cloud Starter Kit」をぜひご利用ください