MTAppjQueryPlusで管理画面のカスタムフィールドを任意に増減

Yuuです。

Movable Typeでは管理画面のカスタマイズが、個人的には微妙にハードルが高い感じがします。 そこで、MT CAFEのLTで紹介されていた下記のプラグインを利用して管理画面をカスタマイズしてみようと思います。

使用するプラグイン

  • MTAppjQuery
  • MTAppjQueryPlus
  • Splitプラグイン

上記のプラグインを利用し、管理画面のカスタムフィールドをユーザーが任意に増減できるようにしてみたいと思います。

はじめに

MTAppjQueryとは?

MTAppjQuery とは、Movable Type 5 の管理画面を jQuery でカスタマイズしやすくするプラグインです。

@tinybeansさん Download:MTAppjQuery - Movable Type 5 の管理画面をjQueryでカスタマイズしやすくするプラグイン

MTAppjQueryPlusとは?

MTAppjQuerPlusは、「MTAppjQueryプラグイン」を元に独自に拡張をしたjQueryプラグイン集です。 MovableTypeをCMSとして運用する際の使い勝手の向上を目的としています。

@riatwさん Download:riatw/mt-plugin-MTAppjQueryPlus

Split プラグインとは?

split モディファイアの値に区切り文字を設定すれば、区切り文字で split した配列変数を返却します。

MTAppjQueryPlusの$.MTAppTableConverterで使用。

小粋空間さん Download:Split プラグイン

検証環境

  • Movable Type 5.13

インストール

  1. MTAppjQueryプラグインをインストール
    • plugins 以下
    • mt-static/plugins 以下
  2. MTAppjQueryPlusプラグインをインストール
    • mt-static/plugins 以下
  3. Splitプラグインをインストール
    • plugins 以下

使用方法

今回の目的は増減可能なカスタムフィールドなので、 MTAppjQueryPlusの$.fn.MTAppTableConverterを使ってみようと思います。

MTAppjQueryPlusとjquery-uiを管理画面へ読み込む

  1. ウェブサイト→ブログ→ツール→プラグイン
  2. MTAppjQuery0.25.1→設定
  3. フリーエリアに下記を記述
1
<script src="/mt/mt-static/plugins/MTAppjQueryPlus/MTAppjQueryPlus.js" type="text/javascript"></script>

※リンクパスはMTをインストールしたフォルダに変更してください。

カスタムフィールドの作成

$.fn.MTAppTableConverterは 複数行のテキストエリアに対してのみ使用可能ということなので、 ブログ記事に対してカスタムフィールドを追加します。

ブログ記事画面で設定したカスタムフィールドを表示させます。

user.jsに処理を記述する

場所:/mt/mt-static/plugins/_MTAppjQuery/js/user.js

1
2
3
4
5
$("#customfield_xxx").MTAppTableConverter({
colcnt:2, //列数
type:'text/textarea',
thead:' 項目 内容 '
});

#customfield_xxxの、xxxはカスタムフィールドのベースネーム

上記をアップロードして反映すると、投稿記事画面のフィールドが下記のようになります。

これで項目を追加するボタンを押せば、フィールドが任意に追加できます。

入力されたフィールドの情報を出力する。

こちらは、READMEのサンプルを使用させてもらいました。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<table>
<mt:ignore>/* 対象とするフィールド名の指定 */</mt:ignore>
<mt:entryexcerpt split="\n" setvar="rowarray">
<mt:loop name="rowarray">
<tr>
<mt:var name="__counter__" setvar="rowcounter">
    <mt:var name="__value__" split="##" setvar="colarray">
    <mt:loop name="colarray">
    <mt:var name="__counter__" setvar="colcounter">
        <mt:ignore>** テーブルのセルの出力部分、条件に応じてclass等の指定 **</mt:ignore>
            <mt:if name="colcounter" eq="1">
            <th><mt:var name="__value__"></th>
            <mt:else>
            <td><mt:var name="__value__"></td>
            </mt:if>
        <mt:ignore>** テーブルのセルの出力部分、ここまで **</mt:ignore>
    </mt:loop>
</tr>
</mt:loop>
</table>

split="##"で入力された値を分割しています。

以上で実装完了です。 出力やり方を変えればいろいろな場面で応用できると思います。

他にも機能はあるので、しばらくはMTAppjQueryとMTAppjQueryPlusを楽しんでみようと思います。 実装にあたって、色々教えて頂いたriatwさん、有難うございました。

Comments