bit part Products
MTAppjQuery P7

MTAppCategorySwitch

選択中のカテゴリに応じて記事編集画面のフィールドの表示／非表示を切り替える静的メソッド。カテゴリを選択した時点で即時に切り替わる。selector（CSS セレクタ）または basename（ベースネーム）で指定する。記事編集画面（edit-entry）専用。

選択中のカテゴリに応じて、記事編集画面のフィールドの表示／非表示を切り替える静的メソッドです。記事編集画面（edit-entry）でのみ動作します。カテゴリを選択／解除した時点で表示が即時に切り替わります（再読み込み不要）。

構文

$.MTAppCategorySwitch(options);

静的メソッド（$.MTAppCategorySwitch）です。

パラメータ

options {Object} — selector / basename / code のうち少なくとも 1 つを指定します（すべて null の場合は何もしません）。

プロパティ型既定値説明
selectorObjectnullカテゴリ別に表示する要素を CSS セレクタ で指定。キーは 'cat<カテゴリID>'（未選択時は 'init'）、値は表示する要素のセレクタをカンマ区切りで指定
basenameObjectnullカテゴリ別に表示する要素を フィールドのベースネーム で指定。キーは selector と同じ。値はベースネームをカンマ区切りで指定（カスタムフィールドは c: を前置）
codeObjectnullカテゴリが新たに選択された時に実行する関数のマップ。キーは selector と同じ（'cat<カテゴリID>' / 'init'）、値は関数（引数に選択されたカテゴリ ID 文字列が渡る）。selector／basename と併用も、code 単独でも使えます

キーと値の規則

  • キーは選択されたカテゴリ ID に cat を前置した文字列（例: カテゴリ ID 1 → 'cat1'）。カテゴリ未選択時の状態は 'init'。
  • basename の値は、title → #title-field、c:foo → #customfield_foo-field のように #<ベースネーム>-field へ展開されます。
  • 'init' の扱い:
    • 値を指定すると、未選択時にそのフィールドだけを表示します（例: init: 'title'）。
    • 値を空文字にすると、未選択時に対象フィールドをすべて表示します（例: init: ''）。
    • 'init' キー自体を省くと、未選択時は対象フィールドをすべて非表示にします。
  • code のコールバックは、直前の選択に無かったカテゴリが選択された時だけ発火します。選択済みのまま別のカテゴリを足しても、既に選択済みだったカテゴリのコールバックは再発火しません（カテゴリを解除した時も発火しません）。

戻り値

なし（undefined）。

使用例

// CSS セレクタで指定：カテゴリ 1 のとき本文、未選択時は概要だけ表示
$.MTAppCategorySwitch({
    selector: {
        cat1: '#title-field,#text-field',
        cat2: '#title-field,#keywords-field',
        init: '#title-field'
    }
});

// ベースネームで指定（カスタムフィールドは c: を前置）
$.MTAppCategorySwitch({
    basename: {
        cat1: 'title,c:campaign_detail',
        cat2: 'title,excerpt',
        init: 'title'
    }
});

// カテゴリ選択時に任意の処理を実行（表示制御と併用も、単独でも可）
$.MTAppCategorySwitch({
    code: {
        cat1: (id) => { console.log(`カテゴリ ${id} が選択されました`); },
        init: () => { console.log('カテゴリが未選択になりました'); }
    }
});

user.js での記述例

user.js（「デザイン → user.js を編集」）に書く場合は、mtappVars.screen_id で画面を判定して呼び出します。

(function ($) {
    if (typeof mtappVars !== 'object') return;
    if (mtappVars.screen_id === 'edit-entry') {
        $.MTAppCategorySwitch({
            selector: {
                cat1: '#title-field,#text-field',
                cat2: '#title-field,#keywords-field',
                init: '#title-field'
            }
        });
    }
})(jQuery);

補足

  • 記事編集画面（edit-entry）専用です。それ以外の画面では何もしません。
  • カテゴリ選択を即時に検知して切り替えます。MT 標準のカテゴリセレクタは、カテゴリを追加・削除するたびに選択済みリストを再描画し、隠しフィールド #category-ids（カンマ区切りの ID）を更新しますが、専用のイベントは発生しません。そこで本メソッドは #category-field 配下の再描画を MutationObserver で監視し、#category-ids の値が変わったときだけ切り替えを実行します（requestAnimationFrame で 1 度にまとめ、無駄な再計算を避けます）。
  • MTAppOtherTypeCategories でカテゴリ UI をラジオ／ドロップダウンに変換している場合は、その change も検知して切り替えます。
  • 対象フィールドには表示制御用のクラス（非表示時 hidden cfs-hidden、表示時 cfs-show）を付与します。<body> に MTAppCategorySwitch クラスが付きます。
  • 複数カテゴリを選択している場合は、選択中の各カテゴリに対応するフィールドをすべて表示します。
  • code オプションは、カテゴリ選択時に任意の処理を実行したいとき（表示の切り替えだけでなく、別フィールドの値を変える・通知を出す等）に使います。表示制御と同じ検知（MutationObserver）に乗るため、P7 でもカテゴリ選択時に即時発火します。

関連

  • MTAppOtherTypeCategories — カテゴリ選択 UI をラジオボタン／ドロップダウンに変更する。
  • MTAppGetCategoryName — カテゴリ ID からラベルやベースネームを取得する。