MTAppjQuery で Movable Type 8 の記事編集画面のフィールドをグリッドデザイン（段組表示）にしたい

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

今回は、MTAppjQuery で Movable Type 8 の記事編集画面のフィールドをグリッドデザイン（段組表示）にする方法をご紹介します。下図の「郵便番号」「都道府県」「市区町村」「番地等」フィールドが適用後です。

フィールドの並べ替えとドラッグ&ドロップの無効化

見出しを挿入する前に、mtapp.sortDisabled() を使ってフィールドのドラッグ&ドロップによる並べ替え機能を無効化し、mtapp.fieldSort() を使って、フィールドを指定通りに並べます。

(function ($) {
    // 記事編集画面のみ動くようにする
    if (mtappVars.screen_id === 'edit-entry') {
        // ドラッグ&ドロップの並べ替えを無効化
        mtapp.sortDisabled();
        // フィールドの並べ替えと使わないフィールドを非表示
        mtapp.fieldSort({
            sort: 'title,text,excerpt,customfield_post_code,customfield_prefecture,customfield_city,customfield_street,customfield_stations',
            otherFieldHide: true
        });
    }
})(jQuery);

フィールドを段組みにする関数を作成

続いて下記のように指定した要素を段組みにする makeGrid 関数を作ります。

(function ($) {
    /**
     * 指定した要素をグリッドレイアウトにする
     * @param array fields - グリッドにする要素のセレクタと幅をオブジェクトの配列で指定
     * @param string fields[].selector - グリッドにする要素のセレクタ
     * @param number fields[].width - グリッドにする要素の幅
     */
    const makeGrid = (fields) => {
        const wrapper = document.createElement('div');
        wrapper.classList.add('row');
        fields.forEach((field, index) => {
            const element = document.querySelector(field.selector);
            element.classList.add(`col-${field.width}`);
            if (index === 0) {
                element.parentNode.insertBefore(wrapper, element);
            }
            wrapper.appendChild(element);
        });
    };

    // 記事編集画面のみ動くようにする
    if (mtappVars.screen_id === 'edit-entry') {
        // 省略
    }
})(jQuery);

この関数の引数には、段組にするフィールドのセレクタ（ selector プロパティ）と幅（ width プロパティ）を持つオブジェクトの配列を指定します。

selector プロパティで指定するセレクタは、input 要素などのセレクタではなく、それを囲む div.field のIDを指定します。

段組みに変更

最後に mtapp.fieldSort() を使ってフィールドを並べ替えた後で makeGrid 関数を実行して段組みに変更します。

(function ($) {
    const makeGrid = (fields) => {
        // 省略
    };

    // 記事編集画面のみ動くようにする
    if (mtappVars.screen_id === 'edit-entry') {
        // ドラッグ&ドロップの並べ替えを無効化
        mtapp.sortDisabled();
        // フィールドの並べ替えと使わないフィールドを非表示
        mtapp.fieldSort({
            sort: 'title,text,excerpt,customfield_post_code,customfield_prefecture,customfield_city,customfield_street,customfield_stations',
            otherFieldHide: true
        });

        // グリッドにするフィールドを指定
        const fields = [
            { selector: '#customfield_post_code-field', width: 6 },
            { selector: '#customfield_prefecture-field', width: 6 },
            { selector: '#customfield_city-field', width: 6 },
            { selector: '#customfield_street-field', width: 6 }
        ];
        // グリッドレイアウトに変更
        makeGrid(fields);
    }
})(jQuery);

完成したコード

まとめると下記のようなコードになりました。これを user.js に書けばOKです。

(function ($) {
    /**
     * 指定した要素をグリッドレイアウトにする
     * @param array fields - グリッドにする要素のセレクタと幅をオブジェクトの配列で指定
     * @param string fields[].selector - グリッドにする要素のセレクタ
     * @param number fields[].width - グリッドにする要素の幅
     */
    const makeGrid = (fields) => {
        const wrapper = document.createElement('div');
        wrapper.classList.add('row');
        fields.forEach((field, index) => {
            const element = document.querySelector(field.selector);
            element.classList.add(`col-${field.width}`);
            if (index === 0) {
                element.parentNode.insertBefore(wrapper, element);
            }
            wrapper.appendChild(element);
        });
    };

    // 記事編集画面のみ動くようにする
    if (mtappVars.screen_id === 'edit-entry') {
        // ドラッグ&ドロップの並べ替えを無効化
        mtapp.sortDisabled();
        // フィールドの並べ替えと使わないフィールドを非表示
        mtapp.fieldSort({
            sort: 'title,text,excerpt,customfield_post_code,customfield_prefecture,customfield_city,customfield_street,customfield_stations',
            otherFieldHide: true
        });

        // グリッドにするフィールドを指定
        const fields = [
            { selector: '#customfield_post_code-field', width: 6 },
            { selector: '#customfield_prefecture-field', width: 6 },
            { selector: '#customfield_city-field', width: 6 },
            { selector: '#customfield_street-field', width: 6 }
        ];
        // グリッドレイアウトに変更
        makeGrid(fields);
    }
})(jQuery);

フィールドの並べ替えとドラッグ&ドロップの無効化

フィールドを段組みにする関数を作成

段組みに変更

完成したコード

⚡️ 話題の一冊 ⚡️

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