MTの管理画面カスタマイズの基本

昨日twitterを見ていたところ、以下のようなやりとりがありました。

MovableTypeの最大の欠点は、投稿画面を仕様に併せるのが簡単ではないこと。理想は実際の画面の読み上げ通りにフォームが並んでいること。入力方法などの説明が平文かツールチップですぐ読めること。

管理画面に注意書きを入れたいなーと思うことはありますね。「投稿する前にカテゴリのチェックを確認してください」とか。

確かに「簡単」とは言い切れないですが、Movable Typeでも管理画面をカスタマイズすることができます。
そこで、Movable Typeでの管理画面カスタマイズの基本を紹介します。

1.管理画面もテンプレートで出力されている

Movable Typeの管理画面は、すべてテンプレートに沿って出力されています。
MTのディレクトリの中に「tmpl」というディレクトリがあり、その中に管理画面のテンプレートがあります。
管理画面のテンプレートは、ブログのテンプレートと同様に、HTMLとMTタグで構成されています。

例えば、ブログ記事の作成／編集のページは、「tmpl」→「cms」ディレクトリにある「edit_entry.tmpl」テンプレートに沿って出力されます。

2.管理画面をカスタマイズする2つの方法

管理画面をカスタマイズする方法は、大きく分けて、以下の2通りがあります。

2-1.プラグインによるカスタマイズ

1つ目の方法は、管理画面をカスタマイズするためのプラグインを作ることです。
「Transformer」という仕組みが用意されていて、DOM（Document Object Model）のような手法で、管理画面を操作することができます。

この方法のメリットは、Movable Type本体がマイナーバージョンアップしても、プラグインの修正が少なくて済む（修正なしで動くことも多い）という点です。
一方、プラグインを作れる人でないとカスタマイズを行うことができないというデメリットがあります。

2-2.alt-tmplディレクトリを使ったカスタマイズ

もう1つの方法は、管理画面のテンプレートをコピーし、そのコピーを書き換えるという手法です。

コピーしたテンプレートを、Movable Typeのディレクトリの中の「alt-tmpl」というディレクトリに入れると、コピーの方が有効になります。
コピーを書き換えれば、その通りに管理画面が表示されるようになります。
例えば、ブログ記事の作成／編集のページを書き換えるなら、「tmpl」→「cms」ディレクトリの「edit_entry.tmpl」ファイルをコピーし、「alt-tmpl」→「cms」ディレクトリにコピーして、コピーした後のファイルを書き換えます。

alt-tmplディレクトリを使う方法では、プラグインを作る必要がないので、プログラミングができないデザイナーの方でも、管理画面をカスタマイズすることができます。
一方、Movable Typeがバージョンアップすると、管理画面のテンプレートも変わることがありますので、バージョンアップたびに管理画面のテンプレートをチェックしてカスタマイズしなおす必要が出てしまうのがデメリットです。

3.管理画面書き換えの例

管理画面の書き換えの例として、ブログ記事の作成／編集ページで、保存ボタンの上に、「投稿する前にカテゴリのチェックを確認してください」と表示する例を紹介します。
MTのバージョンは4.261とします。

まず、MTのディレクトリの中の「tmpl」→「cms」ディレクトリにある「edit_entry.tmpl」を、ダウンロードします。
そして、そのファイルをテキストエディタで開きます。

保存などのボタンに対応する部分は、edit_entry.tmplファイルの53～81行目です。
この部分の先頭に、以下の赤字の行を追加して保存します。
保存する際には、ファイルの文字コードをMTの文字コードの設定に合わせます（通常はUTF-8）。

・
・
・
<mt:setvartemplate name="action_buttons">
    <div>※投稿する前にカテゴリのチェックを確認してください。</div>
    <button
        mt:mode="save_entry"
・
・
・

次に、MTのディレクトリの中の「alt-tmpl」ディレクトリの中に、「cms」ディレクトリを作ります。
そして、上の手順で保存したedit_entry.tmplファイルを、今作った「alt-tmpl」→「cms」ディレクトリにアップロードします。

これ以後は、ブログ記事の作成／編集の画面で、保存ボタンの上にメッセージが表示されるようになります。

お知らせ