本日、Movable Type 7 用の MTAppjQuery v2.9.0 をリリースしました。
当バージョンでは、mtapp.multiField を Vue.js から Svelte に置き換えました。MTAppjQuery v2 で mtapp.multiField（マルチフィールド）をご利用の方が、MTAppjQuery v2.8.8 以前のバージョンから v2.9.0 へのアップグレードの際に注意・対応すべき点を以下にまとめました。mtapp.multiField を利用していない場合は影響はありません。
MTAppjQuery v2.8.8 以前のバージョンから v2.9.0 へのアップグレードの注意点
Vue.js の同梱終了と Svelte への移行
MTAppjQuery v2.8.8 までの mtapp.multiField v1 と mtapp.multiField v2 は Vue 2 をベースに構築されていました。
2023年12月31日に Vue 2 のサポートが終了（EOL）したことを受け、MTAppjQuery v2.9.0 では Vue.js を Svelte に置き換え、Vue.js 本体の同梱を終了しました。
この変更に伴い、mtapp.multiField v2 を利用していて、かつ オリジナルフィールド（独自の Vue コンポーネント）を利用している場合は、下記の 「v2.9.0用の対応」が必要となります。オリジナルフィールドを使っていない場合でも「v2.9.0 での mtapp.multiField v2 の変更点」をよくご確認ください。
なお、mtapp.multiField v1 のフィールドについては対応の必要はありませんので、お読みいただく必要はありません。
mtapp.multiField v1 と mtapp.multiField v2 の判別方法は下記の通りです。
multiFieldのバージョン確認方法
ご利用中の mtapp.multiField() が mtapp.multiField v1 、mtapp.multiField v2 のどちらに該当するかは、mtapp.multiField() の version オプションの値で判定できます。
versionオプションの設定なし →mtapp.multiField v1：対応不要version: 1が設定されている →mtapp.multiField v1：対応不要version: 2が設定されている →mtapp.multiField v2：対応が必要な可能性がありますので、下記のドキュメントを読み進めてください。
// version オプションの設定なし → mtapp.multiField v1 を利用しているフィールド → 対応不要
mtapp.multiField({
...以下省略（version オプションなし）
});
// version: 1 が設定されている → mtapp.multiField v1 を利用しているフィールド → 対応不要
mtapp.multiField({
version: 1,
...以下省略
});
// version: 2 が設定されている → mtapp.multiField v2 を利用しているフィールド
// → オリジナルフィールドを利用している場合 → 「v2.9.0用の対応」が必要
// → オリジナルフィールドを利用していない場合 → 「v2.9.0 での mtapp.multiField v2 の変更点」の確認が必要
mtapp.multiField({
version: 2,
...以下省略
});v2.9.0用の対応
mtapp.multiField v2 でオリジナルフィールド（独自の Vue コンポーネント）を利用していて、引き続きオリジナルフィールドを利用する場合、Vue 2 ベースの mtapp.multiField v2 を利用する必要があります。
そのためには、下記の作業が必要となります。
1. Vue.js をサーバーに設置
MTAppjQuery v2.9.0 から Vue.js が同梱されなくなりました。したがって、ご自身で取得した Vue 2 をサーバーにアップロードしてください。CDNを利用する場合は不要です。
2. プラグインの設定変更
システムのMTAppjQueryプラグインの設定の「利用データの設定」セクションの中の「Vue 2 版の mtapp.multiField」のドロップダウンリストから「有効」を選びます。
すると、Vue.js の URL を入力する欄が表示されるので、1. でアップロードした Vue.js のURLを入力して保存してください。CDN をご利用になる場合は URL の初期値が Vue 2 の CDN のURL になっていますので、そのまま保存してください。
3. user.js の mtapp.multiField() に useVueJs:true を追加
プラグインの設定を変更した後、該当する mtapp.multiField v2 フィールドの mtapp.multiField() のオプションに useVueJs: true を追加してください。
// Vue 2 版の mtapp.multiField v2 を利用する
mtapp.multiField({
version: 2,
useVueJs: true, // プラグイン設定を変更後、この行を追加します
...以下省略
});v2.9.0 での mtapp.multiField v2 の変更点
Svelte で作られた mtapp.multiField v2 では以下の点が変更されています。
mtapp.multiField v2 の利用状況によってはテンプレートの修正などの対応が必要になる場合がありますのでご確認ください。
マルチカラム内の縦向き固定テーブルのデータ構造の変更
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: 2,
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
}
一度データを開いて保存すると自動でデータのマイグレーションが行われます。「マルチカラム」の中で「縦向き固定テーブル」を利用している場合は、事前にテンプレートを調整してください。
コンテンツデータフィールド
createButtonLabel、selectButtonLabel オプションの値は保存されるデータには含まれなくなりました。
画像フィールド
画像フィールドでは、hasTextField: true を設定した場合に alt テキストを入力する欄が表示されましたが、alt テキストの入力欄のラベルを設定する textFieldLabel オプションの値の有無で alt テキスト入力欄の表示・非表示を切り替えるようになりました。
また、hasTextField、textFieldLabel、uploadDirectoryオプションの値は保存されるデータには含まれなくなりました。
数値フィールド
type: "number", のフィールドの JSON に保存される値が文字列から数値に変更されました。
フロントで型チェックしている場合はお気をつけください。
汎用フィールド
保存される値の中で、innerGroups オプションで指定した各グループの中のデータについて、保存されている値がフィールドハンドルをプロパティ名にした値として保存されていたのが、通常のフィールドと同様に data プロパティの値として保存されるようになりました。
言葉では分かりにくいので下図をご確認ください。
