user.js、user.css のインストールディレクトリの変更

MTAppjQuery v2 までは、デフォルトの user.js と user.css が mt-static/plugins/MTAppjQuery/user-files/ ディレクトリの中にありましたが、MTAppjQuery v3 ではこの二つのファイルを mt-static/support/MTAppjQuery/ ディレクトリに移動しました。

したがって、 mt-static/plugins/MTAppjQuery/user-files/ ディレクトリの中の user.js と user.css をカスタマイズしてご利用の場合は、それらのファイルを mt-static/support/MTAppjQuery/ 配下に移動してください。

【移動前】

• mt-static/plugins/MTAppjQuery/user-files/user.js
• mt-static/plugins/MTAppjQuery/user-files/user.css

【移動後】

• mt-static/support/MTAppjQuery/user.js
• mt-static/support/MTAppjQuery/user.css

defer 属性の追加

MTAppjQuery v3 から MTAppjQuery 等の読み込みタグに defer 属性が追加されました。そのため、自由テキスト欄を利用して script タグで user.js やその他の JavaScript ファイルを読み込んでいる場合は、下記のように script タグに defer 属性を付けてください。

<script defer type="text/javascript" src="/PATH_TO/filename.js"></script>

インラインの JavaScript で処理を書いている場合は下記のように DOMContentLoaded にイベントをセットする形で定義してください。

<script>
    window.addEventListener('DOMContentLoaded', function(){
      // 処理
    });
</script>

また、上記のインラインの処理の中で jQuery を使う場合は下記のようにしてください。

<script>
    window.addEventListener('DOMContentLoaded', function(){
        (function($) {
            // 処理
        })(jQuery);
    });
</script>

mtapp.multiField() v2 から v3 へのアップグレードの際の注意事項

初めに、現在お使いのマルチフィールドがどのバージョンに該当するかわからない場合は、

• mtapp.multiField() の設定の中に fieldBlocks というオプションがあるのもは version: 2
• mtapp.multiField() の設定の中に fieldBlocks というオプションがなく fieldGroups オプションにフィールドの設定が入っているものは version: 1

とお考えください。

Vue.js から Svelte へ

マルチフィールドの v1 および v2 は Vue ベースで作られていましたが、v3 は Svelte で作られています。したがって、Vue でオリジナルフィールドを作成して運用している場合は v2 （ version: 2 ）のままご利用ください。

version オプションが未指定の場合の解釈の変更

マルチフィールド v2 までの場合は version オプションが未指定の場合は version: 1 と解釈されていました。

マルチフィールド v3 では、version オプションが未指定の場合は version: 3 と解釈されます。引き続き version: 1 を利用したい場合は明示的に version: 1 オプションを設定してください。

マルチカラム内の縦向き固定テーブルのデータ構造の変更

type: 'multi-column' の中に「縦向き固定テーブル」（ type: 'table-vertical-fixed' ）がある場合、下記のように、その縦向き固定テーブル内の各フィールドのデータがマルチカラムのデータ直下に保存されるバグがありました。

// マルチフィールドを適用するコード
(function ($) {
    mtapp.multiField({
        version: 2,
        id: 348,
        label: 'マルチカラム',
        fieldBlocks: {
            tableVerticalFixed: {
                type: 'table-vertical-fixed',
                label: '縦向き固定テーブル',
                data: {},
                fields: ['text', 'select', 'image']
            },
            multiColumn: {
                type: 'multi-column',
                label: 'マルチカラム',
                data: {},
                columns: [{ col: 12, class: '', label: '', description: '', fields: ['h2', 'tableVerticalFixed'] }]
            }
        },
        fieldGroups: [['multiColumn']]
    });
})(jQuery);

// 保存されるデータ
{
  "items": [
    {
      "data": {
        "h2": "見出し",
        "text": "縦向き固定テーブル内１行テキスト",
        "select": "apple",
        "image": {
          "id": "669",
          "url": "/mt7/mtappjquery-qa/tinybeans.png",
          "thumbnail": "/mt7/mtappjquery-qa/assets_c/2023/05/tinybeans-thumb-120xauto-669.png?ts=20230530185852",
          "alt": "縦向き固定テーブル画像alt"
        }
      },
      "handle": "multiColumn",
      "id": "yGLCxkSJ"
    }
  ],
  "version": 2,
  "ts": 1699842128098
}

これをマルチカラムの data の中の縦向き固定テーブルのフィールドハンドル以下に収めるように変更しました。

// マルチフィールドを適用するコード
(function ($) {
    mtapp.multiField({
        version: 3, // 3に変更
        id: 48,
        label: 'マルチカラム',
        fieldBlocks: {
            tableVerticalFixed: {
                type: 'table-vertical-fixed',
                label: '縦向き固定テーブル',
                data: {},
                fields: ['text', 'select', 'image']
            },
            multiColumn: {
                type: 'multi-column',
                label: 'マルチカラム',
                data: {},
                columns: [{ col: 12, class: '', label: '', description: '', fields: ['h2', 'tableVerticalFixed'] }]
            }
        },
        fieldGroups: [['multiColumn']]
    });
})(jQuery);


// 保存されるデータ
{
  "items": [
    {
      "data": {
        "h2": "見出し",
        "tableVerticalFixed": {
          "text": "縦向き固定テーブル内１行テキスト",
          "select": "apple",
          "image": {
            "id": "669",
            "url": "/mt7/mtappjquery-qa/tinybeans.png",
            "thumbnail": "/mt7/mtappjquery-qa/assets_c/2023/05/tinybeans-thumb-120xauto-669.png?ts=20230530185852",
            "alt": "縦向き固定テーブル画像alt"
          }
        }
      },
      "handle": "multiColumn",
      "id": "yGLCxkSJ",
      "expanded": true
    }
  ],
  "version": 2,
  "ts": 1699842128098
}

一度データを開いて保存すると自動でデータのマイグレーションが行われます。「マルチカラム」の中で「縦向き固定テーブル」を利用している場合は、事前にテンプレートを調整してください。

選択肢が１つの場合のチェックボックスのデータ型の変更（2024年7月17日追記）

version: 2 の場合は、

選択肢が一つだけの場合は date: 'apple' という配列で指定します。初期値が不要な時は date: ''としてください。

version: 3 の場合は、

選択肢が一つだけの場合は date: true または date: false と設定してください。

と、データ型が変更になります。

コンテンツデータフィールドの response データ（2024年2月19日追記）

マルチフィールド v2 では、コンテンツデータフィールドで保存されるデータの中に「 response 」というプロパティがあり、そこにコンテンツデータフィールドで選択したものを管理画面で表示する際に使ったData APIのレスポンスが入っていました。

しかし、このデータはコンテンツデータフィールドを含むマルチフィールドのページを保存した時点でのデータとなり、選択したコンテンツデータが更新されたとしても、この response 内のデータは更新されません。

したがって、v3 では response プロパティは削除されました。

旧バージョンのメソッドの廃止（2023年11月20日追記）

MTAppjQuery v2 までは MTAppjQuery プラグインのシステム設定の「利用データの設定」において「旧バージョンのメソッド」を有効にすると、 MTAppJSONTable や MTAppListing といった MTAppjQuery v1 系のメソッドが利用できましたが、この設定は MTAppjQuery v3.0.1 で削除されました。 

MTAppJSONTable と MTAppListing の2つのメソッドについては MTAppjQuery.js 本体に統合されましたのでそのままお使いいただけます。それ以外の旧バージョンのメソッドをご利用の場合は、MTAppjQuery v3 ユーザーマニュアルの「MTAppjQuery v2 から v3 へのアップグレード」のセクションをご確認ください。

その他の変更等

• コンテンツデータフィールドのオブジェクト mtappVars.contentDataFields の値が参照する要素が jQuery オブジェクトからHTMLElementオブジェクトに変更されました。
• コンテンツデータフィールドのIDと名前の配列 mtappVars.contentDataFieldsArray の id プロパティの値が文字列から数値になりました。
• mtappVars.content_type.fields が正しく取得できていなかったのを修正
• mtapp.templateListCustomize() が削除されました。