Movable Type の記事投稿画面の UI をカテゴリごとに変えるカスタマイズ ( jQuery 版)

Movable Type の記事投稿画面で、各入力フォームのラベルや位置などのインターフェースを、カテゴリごとに変えられるように管理画面をカスタマイズしてみました。

uichanger01.gif

カスタマイズといっても、管理画面のテンプレートはほとんどいじらずに、jQuery で書いた JavaScript テンプレートを読み込むだけです。もう少し正確に言えば、本体のテンプレートは一切いじらず、コピーをカスタマイズして、別のディレクトリに置くだけです。

カスタムフィールドのない MTOS や、マルチブログにするほどでもないけどちょっとインターフェースを変えたいんだよなーってときに役立つと思います。

実装する機能

ブログ記事の作成・編集画面に、あらかじめ設定したカテゴリごとにインターフェースを変えるボタンを追加します。

例えば、「スケジュール」カテゴリ専用のインターフェースを作る場合、編集画面に次のようなボタンが表示されます。

uichanger02.gif

これをクリックすると、ボタンが次のように変わり、各入力フォームのラベル名や位置が「スケジュール」カテゴリ専用のインターフェースに変わります。新規作成の場合は該当するカテゴリが自動的に選択されます。

uichanger03.gif

もう一度ボタンをクリックすると、ボタンがグレーになり、該当するカテゴリの選択も解除されます。

下のボタンをクリックしてみてください。少しイメージがつかめると思います。

uichanger02.gif

uichanger09.gif

uichanger10.gif

カスタマイズ方法

管理画面のカスタマイズについては以前の記事(Movable Type のブログ記事の出力ファイル名を変更する管理画面のカスタマイズ)でも書きましたが、『Movable Type プロフェッショナル・スタイル MT4.1対応』の Track B の「 5 ユーザー指向の管理画面をつくる」がとても参考になります。

カスタマイズするファイルの準備

今回カスタマイズするのは、ブログ記事やウェブページの編集画面用のテンプレートファイル「 edit_entry.tmpl 」です。このファイルは以下の場所にあります。

  • mt
    • tmpl
      • cms
        • edit_entry.tmpl

このファイルをローカルにコピーして同名で保存したファイルをカスタマイズします。

カスタマイズ内容

さて、このカスタマイズの内容を解説しようと思っていたのですが、結局ほぼすべてが jQuery の解説になってしまうのでここでは割愛します。その代わりと言ってはなんですが、カスタマイズしたファイルを置いておくので「使用方法」という形で解説します。

jQueryで作る Ajaxアプリケーション

なお、jQuery については、『jQueryで作る Ajaxアプリケーション』という書籍で勉強しています。初心者の僕でも非常に分かりやすいです。

最新版ダウンロード

チェンジログはこちら

ここにあるファイルは Movable Type 4.22 用です。それ以外の MT 4.x で使用する場合はページの最後の方の説明を参考にしてください。

使用方法(基本編)

インターフェースの設定

ダウンロードしたファイルを解凍します。解凍して出来たフォルダの中に次のファイルとフォルダが入っています。

  • edit_entry.tmpl
  • include
    • jQuery.tmpl
    • ui_changer_setup.tmpl
    • ui_changer.tmpl

これらのファイルの内、ui_changer.tmpl を UTF-8 で保存できるテキストエディタ等で開いて編集します。

まず、このファイルの 2 ~ 5 行目の、「スケジュール」と「3」の部分を変更します。

<mt:Ignore><!-- ▼ Must Edit ▼ --></mt:Ignore>
<mt:setvarblock name="change_cat">スケジュール</mt:setvarblock>
<mt:setvarblock name="change_cat_id">3</mt:setvarblock>
<mt:Ignore><!-- ▲ Must Edit ▲ --></mt:Ignore>

「スケジュール」部分にはユーザーインターフェース(以下「 UI 」)を変更する対象となるカテゴリ名を、「3」部分にはそのカテゴリ ID を入れます。カテゴリ ID は、各カテゴリ編集ページの URL の最後の「 id=3 」の部分の数字です。

uichanger04.gif

次に、26 行目の 「 // ▼ Edit ▼ 」から 82 行目の「 // ▲ Edit ▲ 」までの間を編集します。

// ▼ Edit ▼
    // タイトル
    title
//        .insertBefore()
//        .insertAfter()
        .find('label#title-label').text('タイトル');
    // 本文
    content
//        .insertBefore()
//        .insertAfter()
        .find('div#editor-inner div label:eq(0)').text('本文');
    // 続き
    content
//        .insertBefore()
//        .insertAfter()
        .find('div#editor-inner div label:eq(1)').text('続き');
    // タグ
    tags
//        .removeClass('hidden')/*  表示  */
//        .addClass('hidden')   /* 非表示 */
//        .insertBefore()
//        .insertAfter()
        .find('label#tags-label').text('タグ');
    // 概要
    excerpt
//        .removeClass('hidden')/*  表示  */
//        .addClass('hidden')   /* 非表示 */
//        .insertBefore()
//        .insertAfter()
        .find('label#excerpt-label').text('概要');
    // キーワード
    keywords
//        .removeClass('hidden')/*  表示  */
//        .addClass('hidden')   /* 非表示 */
//        .insertBefore()
//        .insertAfter()
        .find('label#keywords-label').text('キーワード');
    // 公開日
    authored_on
//        .removeClass('hidden')/*  表示  */
//        .addClass('hidden')   /* 非表示 */
//        .insertBefore()
//        .insertAfter()
        .find('label#authored_on-label').text('公開日');
});
// 公開日をメインコンテンツ(左カラム)に移す場合のスタイル設定
/* ← この行を削除
jQuery('div#authored_on-field').each(function(){
    jQuery(this).find('div.field-header')
        .css({'float':'none','width':'auto'});
    jQuery(this).find('div.field-content')
        .css('margin-left','0');
    jQuery(this).find('label#authored_on-label')
        .css('text-align','left');
});
この行を削除 → */
// ▲ Edit ▲

ラベルを変更する方法

それぞれのフォームの「 ~.text('タイトル'); 」の部分を変更します。デフォルトのラベル名が入っているので分かりやすいと思います。

(例) デフォルトのラベル名「タイトル」を「場所」に変更する場合

    // タイトル
    title
//        .insertBefore()
//        .insertAfter()
        .find('label#title-label').text('場所');

位置を変更する方法

それぞれのフォームの次のどちらかの(かっこ)内に値を入れて、行頭の「 // 」を削除します。

//        .insertBefore()
//        .insertAfter()

この 2 行の役割は次のとおりです。少しややこしいですが、慣れれば簡単です。

insertBefore(title)

title の前に挿入(移動)します。

insertAfter(title)

title の後に挿入(移動)します。

(かっこ)内に入れる値は、コメントアウトしてある各フォーム名の直下にある変数名です。「本文」と「続き」は、場所的には 2 つで 1 セットなので同じ変数名になっています。

    // タイトル
    title
//        .insertBefore()
//        .insertAfter()
        .find('label#title-label').text('タイトル');
    // 本文
    content
//        .insertBefore()
//        .insertAfter()
        .find('div#editor-inner div label:eq(0)').text('本文');

表示・非表示を設定する方法

「タグ」、「概要」、「キーワード」、「公開日」に関しては、強制的に表示・非表示を切り替えることができます。

次のどちらかの行頭の「 // 」を削除すればOKです。

//        .removeClass('hidden')/*  表示  */
//        .addClass('hidden')   /* 非表示 */

「公開日」フォームを左(メイン)カラムに移動する方法

ラベルを変更する可能性のあるフォームの中で、「公開日」だけが右カラムにあります。これを左カラムに移動する場合はスタイルを変更する必要があります。

その場合、次の 2 行目の「 /* ← この行を削除 」と最後の「 この行を削除 → */ 」を削除します。

// 公開日をメインコンテンツ(左カラム)に移す場合のスタイル設定
/* ← この行を削除
jQuery('div#authored_on-field').each(function(){
    jQuery(this).find('div.field-header')
        .css({'float':'none','width':'auto'});
    jQuery(this).find('div.field-content')
        .css('margin-left','0');
    jQuery(this).find('label#authored_on-label')
        .css('text-align','left');
});
この行を削除 → */

ファイルのアップロード

ここまでで設定したファイルを上書きし、解凍したをフォルダとファイルを丸ごと、Movable Type 本体がインストールしてあるディレクトリ内の alt-tmpl ディレクトリにアップロードすればOKです。

  • mt
    • alt-tmpl
      • edit_entry.tmpl
      • include
        • jQuery.tmpl
        • ui_changer_setup.tmpl
        • ui_changer.tmpl

使用を中止したいときは、ここでアップロードしたファイルを削除すればOKです。

使用方法(応用編)

2 つ以上のカテゴリを、個別のインターフェースで使用したい場合、上記の方法で ui_changer.tmpl ファイルを編集し、別名で保存します。ここでは ui_changer_2.tmpl として保存したとします。

次に、edit_entry.tmpl を編集します。

  • edit_entry.tmpl
  • include
    • jQuery.tmpl
    • ui_changer_setup.tmpl
    • ui_changer.tmpl
    • ui_changer_2.tmpl

edit_entry.tmpl の 983 ~ 986 行目に次の記述があります。

<mt:include name="include/jQuery.tmpl">
<mt:include name="include/ui_changer_setup.tmpl">
<mt:include name="include/ui_changer.tmpl">
<mt:include name="include/header.tmpl" id="header_include">

この 3 行目の下に、先ほど別名で保存したファイルをインクルードする 1 行を加えればOKです。

<mt:include name="include/jQuery.tmpl">
<mt:include name="include/ui_changer_setup.tmpl">
<mt:include name="include/ui_changer.tmpl">
<mt:include name="include/ui_changer_2.tmpl">
<mt:include name="include/header.tmpl" id="header_include">

サンプルとして、「スケジュール専用 UI 」と「試合結果専用 UI 」を作ってみました。

uichanger05.gif

uichanger06.gif

使い方は以上です。

補足

Movable Type 4.22 以外で使用する場合

ここに置いてあるファイルは Movable Type 4.22 用ですが、以下のようにすればそれ以外の MT 4 でも使えると思います。

まず、本体の edit_entry.tmpl をコピーして開きます(ページ中ほどのカスタマイズするファイルの準備参照)。

開いたファイルのだいたい 980 行付近に次の 1 行があると思います。

<mt:include name="include/header.tmpl" id="header_include">

この行の直前に、次の 3 行を挿入すればOKです。

<mt:include name="include/jQuery.tmpl">
<mt:include name="include/ui_changer_setup.tmpl">
<mt:include name="include/ui_changer.tmpl">

その他

  • ここでは、Google AJAX API を使って jQuery を読み込んでいます。(参考:inputlog - Google AJAX APIを使ってjQueryを読み込む
  • 他のライブラリと競合しないように、jQuery の「 $ 」は無効にしてあるので、jQuery オブジェクトを使う場合は「 jQuery 」とする必要があります。カスタマイズする際はご注意ください。

ダウンロード

チェンジログ

【2008-10-26】

カテゴリにチェックを入れる動きを少し修正しました。

UI チェンジャーをクリックすると、自動的に対象カテゴリにチェックが入り、もう一度クリックすると対象カテゴリのチェックが外れる動作を、新規投稿時も編集時も安定して行うようになりました。

※ご利用は自己責任でお願いします。

  • このエントリーをはてなブックマークに追加
Just a second...