おっ、あのプラグインが動いた？

前置きぃ

最近はMT5をメインにして、テンプレート修正や、エントリー書きを行っています。

それで例のごとく、山のようにプラグインぶち込んで、遊んでいる訳ですよ。

前に触れた、デバッグモードにすると（古い書き方をしている）レガシープラグインに警告が表示されるけど、実際には問題なく動作します。それで最近は「Perlのお勉強」と「MTプラグインのお勉強」をやってるので、少しずつレガシープラグインを、新しい書き方に直したりしてみています。意外と書き方にも方言があるようで、たったそれだけでもいろんな事が解りました。

オリジナルも一つ作ってみました。与えられたURLをbit.lyで短縮して返すプラグインです。といっても中身はまんま「Geekなぺーじ : bit.lyのURL短縮機能を利用する」を使っていますが。すでに「ReTweet 0.3 バージョンアップMovable type用プラグイン - BSDあれこれ」というのがある訳ですが、CGIで毎回クリック時に作成されるのではなく、再構築時に短縮URLが書き出されるようにしたくて作りました。といっても追加のPerlモジュールインストールが必要なので、公開はいいやぁって気持ちでいます。まっ、こうやって色々いじると、実際のプラグインの中の動きが解ってきますね。

すでに書いたけど、MT5ベータ（現在5.0b2を使用中）でも、かなりのプラグインはそのまま動作します。

それで主に管理画面の変更が原因で動作しなくなってるプラグインを、ちょっとずつ書き換えて使えるようにしている訳だけど、「methods」を追加するようなプラグインで、インクルードされる「管理画面のヘッダーやフッター」の内容が変更されたために、必要なスクリプトが読み込まれて無かったりするエラーは、結構発生しています。

特にjQueryを使うようにした変更に関して、MT4.x用プラグインとの不整合が出ています。

jQuery.mtAddEdgeClass is not a function

ウィンドウ絡みっぽいこの関数は、jquery.mt.jsってのに含まれる関数な訳ですが、どうもMT5の管理画面では読み込む部分と呼び出される部分が別々で、jquery.mt.jsが読み込まれないのにjQuery.mtAddEdgeClassが呼び出されてエラーになってます。

ちゃんと動かないから動いちゃう

さて、だらだらと長い前置きしてた理由はここから。この発生しているエラーのせいで、動作しなかったプラグインが動作しちゃってます。

そう、このプラグイン。「Custom Headerでタイトル画像を変更 - WolaWola」なぜかまがりなりにも動作しちゃいます。プラグインを書き換えて上記のエラーを解消すると、今までと同様に動作しなくなるので、動いてるとは言い切れないんですけどね・・・

でもちょうど良いから、このプラグインの紹介しちゃいます。

テンプレートセットに機能を追加するCustomHeaderプラグイン

もう一度このプラグインについて説明を。

「Custom Header Plugin for Movable Type - majordojo」は、サイトのヘッダー部分を画像アイテムとして管理できるようにするプラグインです。

ちょっとでも新しいもの欲しかったら、GitHubに最新のものがあります。「byrnereese's mt-plugin-customheader at master - GitHub」

前にも書きましたが、インストールしただけでは動作しません。テンプレートセットに以下の記述を追加する必要があります。

custom_header:
  max_width: 780
  max_height: 125

追加する事で、「デザイン」メニューの下に「Custom Header」が表示されます。この「max_width」がヘッダーの横幅を、「max_height」が高さを指定しています（まぁ、当たり前だけど）。MT5でも「デザイン」メニューが存在するので、無改造で表示されます。ただしその「Custom Header」メニュー（「カスタム・ヘッダー」なのはいつものオレオレ日本語化です）を選択して表示した画面（「custom_header」というmethod）では、前述した理由で画面が最後まで表示されません。

こんな感じです。FireBugでも前述のエラーが表示されてます。でも動作するんですねぇ。

まずは画像をアップロードして切り出し

アップロード

「Custom Header」管理画面はこんな感じになっています。

最初はヘッダー画像が登録されていないので、「A custom header has not yet been uploaded.」と表示されます。ヘッダーの元になるファイルを選択して「Upload」ボタンを押すと、オリジナルの画像が「アーカイブパス/assets_c/年（4桁）/月（2桁）/」の下に保存され（なんでアーカイブなんだろうか？）、そのままヘッダー画像用の切り出しアクションへと切り替わります。

切り出し

このアップロードする画像は、縦横それぞれがconfig.yamlで設定したサイズ以上になっていないとならないようです。それ以下の場合には、エラーが表示されてアップロードが行われません。

アップロード後は、こんな感じでオーバーレイされるのですが、見た通り思いっきりずっこけて表示されます。

しかも全体が表示されてないです。それでも動作しちゃうのが不思議。

こんな感じでドラッグしガァーっと選択して、写真と重なっちゃってる「Crop」ボタン押すと、config.yamlで設定したサイズの画像が、新たにアイテムとして作成されます。もちろんドラッグ中に表示される範囲は、設定サイズの縦横比になってます。

アップロードが完了すると、この様に現在のヘッダー用に切り出された画像が表示されます。（リロードが必要だったけど・・・）画像下にあるテキストリンク「Recrop」は、アップロード済みオリジナル画像（アイテム）から、もう一度ヘッダー画像を切り出しし直す為のリンクです。「Reset to Default」は関連付けを取り消して、最初の何もアップロードされていない初期状態に戻る為のものです。「Recrop」は既存画像アイテムの上書きではなく、新規画像アイテムの追加になります。どちらの場合も、すでに登録されたアイテムはそのまま残りますので、手動での削除が必要になります。

ヘッダー画像のアイテム名は、アップロードしたオリジナル画像名の頭に「Cropped header for 」が付いたものになります。

もちろんサムネイル画像の場合と同様に、オリジナル画像との関連付けが行われます。

ヘッダー画像を使う

ヘッダー画像は「MTCustomHeaderAsset」というブロックタグを使って指定出来ます。このタグは「MTAsset」と同じような動きをします。id指定で特定のアイテムを指定する代わりに、ヘッダー画像として切り出した画像アイテムが選ばれます。このブロックタグ内では、アイテムに関するファンクションタグが使用可能です。

ヘッダー画像を表示するには次の様にIMGタグで指定するか、

<mt:CustomHeaderAsset>
   <img src="<mt:AssetURL>"
         width="<mt:AssetProperty property="image_width">"
         height="<mt:AssetProperty property="image_height">">
</mt:CustomHeaderAsset>

スタイルシート内で指定する様にすれば良いわけです。

<mt:if tag="CustomHeaderAsset">
#header {
    background-image: url('<mt:CustomHeaderAsset><mt:AssetURL></mt:CustomHeaderAsset>');
}
</mt:if>

また「MTCustomHeaderAsset」内で「MTAssetParent」を使う事で、アップロードしたオリジナル画像のコンテクストを作る事も出来ます。「MTHasCustomHeader」というコンディションタグでヘッダー画像が登録されているかの判断も可能です。

このプラグインを使う事で、ヘッダー画像の入れ替え作業の簡略化が可能になり、テンプレートデザインとしての制限（決められたサイズでのヘッダー画像を使う事）を、テンプレートセットに加える事が可能になります。
まともに動くようになったら、テンプレートセット作者（現在はテーマ作者か）にとって、すごく便利なプラグインになると思うのですけどね・・・