MTAppjQueryのmtappVarsを活用して画面毎に処理を加える

MTAppjQueryのmtappVarsとmtapp.conditionを利用することで画面ごとに特定の処理を加えることが出来ます。

今回は、よくあるケースとしてコンテンツデータの編集画面ごとにマルチフィールドの設定を変える方法を紹介します。

サイトの情報を定義する

まずはじめにサイト情報を格納するオブジェクトを定義します。

const getSiteData = {
  siteId: mtappVars.blog_id,
  siteName: mtappVars.site.name,
  siteScreen: mtappVars.screen_id,
}

このオブジェクトには、サイトIDやサイト名やスクリーンIDを定義します。
画面ごとにこのオブジェクトは変わります。

例えば親サイトのコンテンツデータにアクセスした際は、以下のようなオブジェクトのデータ構造になります。

const getSiteData = {
  siteId: "1",
  siteName: "サイト名"
  siteName: "edit-content-type-data"
}

この情報を取得しつつサイトごとに特定の条件を加えていきます。

mtapp.conditionでサイトを判定する

mtapp.conditionの第一引数には、サイトIDとscreen_idを指定します。
第2引数は、callbackを指定できます。

以下の例は、現在のsiteIdとコンテンツデータ編集画面を指定しています。

mtapp.condition(
  {
    blog_id: getSiteData.siteId,
    screen_id: 'edit-content-type-data',
  },
  () => {
    // ここに処理を記述する
    // callback
  }
)

このままだとすべてのサイトのコンテンツデータで実行されるため早期returnして分岐を先に加えておきます。

mtapp.condition(
  {
    blog_id: getSiteData.siteId,
    screen_id: 'edit-content-type-data',
  },
  () => {
    // ここに早期returnをして指定したサイト以外は処理を通さないようにします
    if (getSiteData.siteName !== 'サイト名') return;
  }
)

特定のサイトのコンテンツタイプを指定

callbackの中に、mtapp.conditionを実行して 'contentType.name' を利用することで、特定のコンテンツタイプのデータの編集画面で処理を加えることができます。

mtapp.condition(
  {
    blog_id: getSiteData.siteId,
    screen_id: 'edit-content-type-data',
  },
  () => {
    // ここに早期returnをして指定したサイト以外は処理を通さないようにします
    if (getSiteData.siteName !== 'サイト名') return;
    mtapp.condition(
      {
        'contentType.name': 'コンテンツタイプ名',
      },
      () => {
        // ここにマルチフィールドなど特定の条件下のみ実行するコードを加える
      }
    )
  }
)

特定の条件のマルチフィールドを作る

mtapp.conditionで分岐できれば、コンテンツタイプAとコンテンツタイプBで異なるマルチフィールドの定義を行うことができます。
以下のコードは、AとBの出し分けした例です。

使い回せるようにgeneralMultiFieldにmultiFieldの雛形を設定しておきます。

fieldBlocksには決まったフィールドブロックを定義してAとBどちらも利用できるように定義します。
contentType.name のコンテツフィールドをfilterをかけて該当フィールドを取得します。

generalMultiFieldでマルチフィールドを呼び出して、IDとフィールド名を適用してfieldBlocksを適用します。

追加後、次の引数にはfieldGroupを適用して完成です。

const getSiteData = {
  siteId: mtappVars.blog_id,
  siteName: mtappVars.site.name,
  siteScreen: mtappVars.screen_id,
}
const generalMultiField = (
  id,
  label,
  fieldBlocks,
  fieldGroups,
  showAddFieldButton = true,
  showViewRawDataButton = false,
  maxBlocks = 0,
  maxBlocksType = '',
  showSortButton = true,
  showInsertButton = true,
  showRemoveButton = true
  ) =>
  mtapp.multiField({
    version: 2,
    id,
    label,
    showAddFieldButton,
    showViewRawDataButton,
    fieldBlocks: fieldBlocks || {},
    fieldGroups: fieldGroups || [],
    maxBlocks,
    maxBlocksType,
    showSortButton,
    showInsertButton,
    showRemoveButton,
  });

// マルチフィールドブロックの雛形
const fieldBlocks = {
  typeText: (key, type, label, data = '', description = '') => ({
    [key]: { type, label, data, description },
  }),
}

mtapp.condition(
  {
    blog_id: getSiteData.siteId,
    screen_id: 'edit-content-type-data',
  },
  () => {
    // ここに早期returnをして指定したサイト以外は処理を通さないようにします
    if (getSiteData.siteName !== 'サイト名') return;
    mtapp.condition(
      {
        'contentType.name': 'コンテンツタイプA',
      },
      () => {
        // ページ本文で利用するフィールドを宣言
        const {
          typeText,
        } = fieldBlocks;
        (() => {
          // マルチフィールドを適用するコンテンツフィールド
          const fieldName = 'コンテンツフィールド名';
          // mtappVars.contentDataFieldsArrayで現在のフィールドの情報を配列で受け取れます。
          // この配列にfilterをかけて取得します。
          const [getMultiField] = mtappVars.contentDataFieldsArray.filter(
            (v) => v.name.includes(fieldName)
          );
          // [{ name: 'コンテンツフィールド名', id: 'コンテンツフィールドID' }] が返ってくる
          // フィールドIDをquerySelectorで取得する
          const targetField = window.document.querySelector(
            `[name="content-field-${getMultiField.id}"]`
          );
          if (targetField.value === '') {
            targetField.value = '';
          }
          generalMultiField(
            getMultiField.id,
            fieldName,
            {
              ...typeText('text', 'textarea', 'コンテンツタイプAのテキスト')
            },
            ['typeText']  // 同じコードの場合や数が多い場合は、fieldGroups変数などを定義して使いまわしておくと良い [...fieldGroups]
          )
        })
      }
    )
    // 同じサイト配下のコンテンツタイプBがある場合は、同じように後続コードに続く
  }
)

マルチフィールドは宣言的なコードになるため、数が多くなるとコードが長くなります。
使い回せるコードは変数に入れて使いまわし、特定のフィールドのみを別途定義するとコードを短く保てます。