かたつむりくんのWWW

お問い合わせ

MTAppjQuery v2 の mtapp.multiField に独自のフィールドを追加してみよう

MTAppjQuery v2 で追加された目玉機能の mtapp.multiField に、独自のフィールドを追加する方法をご紹介します。思ったより簡単にできると思いますのでぜひお試しください。

この記事は弊社 bit part 合同会社が提供している Movable Type プラグイン「MTAppjQuery」の利用を前提としております。MTAppjQuery って何？という方は弊社の「MTAppjQuery」の製品ページをご覧ください。

この機能は現在は非推奨となっています。

MTAppjQuery v2 で追加された目玉機能の mtapp.multiField に、独自のフィールドを追加する方法をご紹介します。思ったより簡単にできると思いますのでぜひお試しください。

Multi Field customize04 min

グローバルモジュール template_source_header を作成

はじめに、MTAppjQuery のプラグイン本体の中の tmpl/template_source_header.tmpl の内容をコピーします。

次に、 「システム > テンプレート > テンプレートの作成」 からグローバルテンプレートモジュールの作成画面を開き、コピーしたテンプレートを貼り付けます。そして template_source_header という名前で保存します。

この作業順序は非常に重要ですので注意してください。

試しに、今保存したテンプレートの1行目に任意の文字列を入れて保存してみてください。 下図のようにその文字列がページに表示されれば準備完了です。

Multi Field customize01 min

フィールドタイプの名前を決める

user.js で mtapp.multiField を適用するときに、今回追加するフィールドを表示させるための type 名とラベルを決めます。具体的には下記の部分になります。

mtapp.multiField({
    id: 87,
    label: 'マルチカラムテーブル',
    fieldGroups: [
        [
            { 'type' : '【この部分】', 'label' : '【この部分】' }
        ]
    ]
});

今回は2カラムのテーブルフィールドにしようと思うので、 2column-table と 2カラムテーブル とします。

user.js に適用する

さて、フィールドタイプを決めたので、 user.js でそのフィールドを含めて mtapp.multiField を実行してみます。コードは下記のようになります。

mtapp.multiField({
    id: 87,
    label: 'マルチカラムテーブル',
    showAddFieldButton: true,
    showViewRawDataButton: true,
    fieldGroups: [
        [
            { 'type' : '2column-table', 'label' : '2カラムテーブル' }
        ]
    ]
});

id の部分は mtapp.multiField を適用する テキスト（複数行） フィールドのIDに書き換えてください。

この状態でコンテンツデータの編集画面を表示すると下図のようになります。

Multi Field customize02 min

「2カラムテーブル」というボタンは追加されましたが、それをクリックしてもフィールドは追加されません。

どういう形でデータを保存するか決める

今回作ったフィールドのデータをどのように保存させたいかを決めます。今回は単純に下記のように cell01 から cell06 まで同じ階層で持たせようと思います。

mtapp.multiField({
    id: 87,
    label: 'マルチカラムテーブル',
    showAddFieldButton: true,
    showViewRawDataButton: true,
    fieldGroups: [
        [
            {
                "type" : "2column-table", "label" : "2カラムテーブル", "data" : {
                    "cell01": "",
                    "cell02": "",
                    "cell03": "",
                    "cell04": "",
                    "cell05": "",
                    "cell06": "",
                }
            }
        ]
    ]
});

これを user.js に反映させます。

フィールドを定義

次に、「2カラムテーブル」というボタンをクリックしたときに追加されるフィールドを定義します。

一番最初に作成した template_source_header という名前のグローバルモジュールをカスタマイズしてきます。

96行目辺りに <mt:Ignore>=== END 基本的なフィールド ===</mt:Ignore> というコメントがありますので、その下に、下記のコードを挿入します。

<mt:Ignore>=== 2カラムテーブル ===</mt:Ignore>
<template v-else-if="item.type === '2column-table'">
    <div class="row" v-bind:id="item.id">
        <div class="col-md-6">
            <table class="table mt-table">
                <thead>
                <tr>
                    <th>table1-1</th>
                    <th>table1-2</th>
                    <th>table1-3</th>
                </tr>
                </thead>
                <tbody>
                <th><input class="form-control" type="text"></th>
                <th>
                    <select class="form-control">
                        <option value="1">1</option>
                        <option value="2">2</option>
                    </select>
                </th>
                <th>
                    <select class="form-control">
                        <option value="1">1</option>
                        <option value="2">2</option>
                    </select>
                </th>
                </tbody>
            </table>
        </div>
        <div class="col-md-6">
            <table class="table mt-table">
                <thead>
                <tr>
                    <th>table1-1</th>
                    <th>table1-2</th>
                    <th>table1-3</th>
                </tr>
                </thead>
                <tbody>
                <th><input class="form-control" type="text"></th>
                <th>
                    <select class="form-control">
                        <option value=""> - </option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                    </select>
                </th>
                <th>
                    <select class="form-control">
                        <option value=""> - </option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                    </select>
                </th>
                </tbody>
            </table>
        </div>
    </div>
</template>
<mt:Ignore>=== END 2カラムテーブル ===</mt:Ignore>

これで 2カラムテーブル ボタンを押せば下図のようにフィールドが追加されます。まだ順番を並べ替えるボタンなどは動きません。

Multi Field customize03 min

データを保存できるようにする

次に、データ保存できるようにします。今回追加する予定の input:text と select に、下記のように v-model="item.data.cell01" のような形で v-model 属性をセットしていきます。この "item.data.cell01" は先程決めたデータの持たせ方に依存します。

<mt:Ignore>=== 2カラムテーブル ===</mt:Ignore>
<template v-else-if="item.type === '2column-table'">
    <div class="row" v-bind:id="item.id">
        <div class="col-md-6">
            <table class="table mt-table">
                <thead>
                <tr>
                    <th>table1-1</th>
                    <th>table1-2</th>
                    <th>table1-3</th>
                </tr>
                </thead>
                <tbody>
                <th><input class="form-control" type="text" v-model="item.data.cell01"></th>
                <th>
                    <select class="form-control" v-model="item.data.cell02">
                        <option value=""></option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                    </select>
                </th>
                <th>
                    <select class="form-control" v-model="item.data.cell03">
                        <option value=""></option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                    </select>
                </th>
                </tbody>
            </table>
        </div>
        <div class="col-md-6">
            <table class="table mt-table">
                <thead>
                <tr>
                    <th>table1-1</th>
                    <th>table1-2</th>
                    <th>table1-3</th>
                </tr>
                </thead>
                <tbody>
                <th><input class="form-control" type="text" v-model="item.data.cell04"></th>
                <th>
                    <select class="form-control" v-model="item.data.cell05">
                        <option value=""></option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                    </select>
                </th>
                <th>
                    <select class="form-control" v-model="item.data.cell06">
                        <option value=""></option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                    </select>
                </th>
                </tbody>
            </table>
        </div>
    </div>
</template>
<mt:Ignore>=== END 2カラムテーブル ===</mt:Ignore>

これでデータが保存できるようになります。

Multi Field customize04 min

注意点

注意点 1

追加したテンプレートの前後を、

<template v-else-if="item.type === '2column-table'">
</template>

で囲むのを忘れずに。

注意点 2

追加したフィールドの一番外枠の要素（上記の例では div.row ）に v-bind:id="item.id" をつける。

<div class="row" v-bind:id="item.id">

注意点 3

汎用性を持たせようとすると大変になるので、今回の例のように案件用に HTML やデータの形を決めて固定した方が簡単です。

まとめ

この程度のオリジナルフィールドであれば、 Vue.js の知識がなくても上記のお作法に沿って作れば意外と簡単に拡張できるのが分かっていただけたら嬉しいです。ぜひお試しください。

より複雑なフィールドが必要な場合は bit part に問い合わせください。

以上です。

Published 2019-02-27
Updated 2024-09-05

「MTAppjQuery」カテゴリの記事一覧

「MTAppjQuery」カテゴリ記事一覧 Home