mtapp.multiField v2 で初期値をセットしたり始めからフィールドを表示させたりする方法

MTAppjQuery の mtapp.multiField v2 で初期値をセットしたり始めからフィールドを表示させたりする方法をご紹介します。

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

MTAppjQuerymtapp.multiField v2 で初期値をセットしたり始めからフィールドを表示させたりする方法をステップバイステップでご紹介します。

ステップ01:マルチフィールドを適用

まずは user.js に下記のように普通に mtapp.multiField を適用させます。

(function($){

  mtapp.multiField({
    version: 2, // 忘れないように!
    id: 26, // 適宜変更してください。
    label: '初期値有りテーブルサンプル',
    showViewRawDataButton: true, // 始めは true にします。
    fieldBlocks: {
      sampleTable: {
        type: 'table-vertical-fixed', label: '初期値有りテーブル', data: {}, fields: [
          'text', 'tinymce', 'image'
        ]
      }
    },
    fieldGroups: [
      ['sampleTable']
    ]
  })

})(jQuery);

ステップ02:フィールドを表示して値をコピー

次に「フィールドを追加」→「初期値有りテーブル」でフィールドブロックを表示し、「保存データを表示」をクリックします。そして、表示された JSON の値をコピーします。

Clean Shot 2021 12 23 16 32 22

ステップ03:初期表示フィールドをセット

ステップ01 のコードの上に初期表示フィールドをセットするためのコードを挿入します。ここでは sampleTableDefault という変数に、先ほどコピーした値を代入します。

代入する際に、id の値の文字列を mtapp.randomString() に、ts の値を (new Date()).getTime() に書き換えます。

(function($){

  // 初期値の値
  const sampleTableDefault = {"items":[{"data":{"text":"","tinymce":"","image":{"id":"","url":"","thumbnail":""}},"handle":"sampleTable","id":mtapp.randomString()}],"version":2,"ts":(new Date()).getTime()};

  mtapp.multiField({
    version: 2, // 忘れないように!
    id: 26, // 適宜変更してください。
    label: '初期値有りテーブルサンプル',
    showViewRawDataButton: true, // 始めは true にします。
    fieldBlocks: {
      sampleTable: {
        type: 'table-vertical-fixed', label: '初期値有りテーブル', data: {}, fields: [
          'text', 'tinymce', 'image'
        ]
      }
    },
    fieldGroups: [
      ['sampleTable']
    ]
  })

})(jQuery);

これで先ほどのマルチフィールドを適用した画面をリロードしても表が表示されているハズです。

Clean Shot 2021 12 23 16 34 38

ステップ04:初期値もセット

下記のように sampleTableDefault を代入するところで初期値を入れれば各フィールドに初期値をセットすることもできます。

(function($){

  // 初期値の値
  const sampleTableDefault = {
    "items":[
      {
        "data":{
          "text":"初期値です",
          "tinymce":"<p><strong>リッチ初期値です</strong></p>",
          "image":{
            "id":"66",
            "url":"/files/pakutasho-01.jpg",
            "thumbnail":"/mt/mt.cgi?__mode=thumbnail_image&width=80&ts=20211223123754&blog_id=5&id=66&height=120"
          }
        },
        "handle":"sampleTable",
        "id":"mtapp.randomString()"
      }
    ],
    "version":2,
    "ts":"(new Date()).getTime()"
  };

  // 新規作成の場合に初期値をテキストエリアに入れる(26部分はフィールドIDに変更してください)
  const $contentField26 = $('[name="content-field-26"]');
  if ($contentField26.val() === '') {
    $contentField26.val(Object.toJSON(sampleTableDefault));
  }

  mtapp.multiField({
    version: 2, // 忘れないように!
    id: 26, // 適宜変更してください。
    label: '初期値有りテーブルサンプル',
    showViewRawDataButton: true, // 始めは true にします。
    fieldBlocks: {
      sampleTable: {
        type: 'table-vertical-fixed', label: '初期値有りテーブル', data: {}, fields: [
          'text', 'tinymce', 'image'
        ]
      }
    },
    fieldGroups: [
      ['sampleTable']
    ]
  })

})(jQuery);
Clean Shot 2021 12 23 16 43 29

ステップ05:showViewRawDataButton に false をセット

最後に showViewRawDataButtonfalse をセットしておきましょう。

以上です。簡単ですので是非ご活用ください。

Published 2021-12-23
Updated 2021-12-23

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