bit part Products

MTAppjQuery P7 v1.1.0 リリース

公開日：

MTAppjQuery P7 v1.1.0 リリースノート

MTAppMultiCheckbox を本体に復活させました。 標準の「タグ」欄に適用して、表記ゆれの無い安定したタグ入力を実現できます。

タグ欄をチェックボックスにして、表記ゆれを防ぐ

タグは自由入力なので、同じ意味でも「お知らせ」「おしらせ」「オシラセ」と揺れがちです。揺れたタグはサイト側でまとめて拾えず、タグを使った一覧やアーカイブが崩れます。

MTAppMultiCheckbox を標準のタグ欄に適用すると、あらかじめ決めた語彙をクリックで入力できるようになり、この問題が起きなくなります。

$.MTAppMultiCheckbox({
    basename: 'tags',
    label: 'お知らせ,イベント,採用情報,プレスリリース',
    skin: 'tags'
});

user.js にこれだけ書けば、タグ欄がタグ風のボタン（ピル）に変わります。編集者は選ぶだけでよく、打ち間違いも変換ミスも起こりません。

v1.0.0 では「PowerCMS 7 標準の複数選択チェックボックスで代替できる」と判断して削除していましたが、標準のフィールド型は新規のカスタムフィールドとしてしか作れず、コアのタグ欄には後付けできません。実際にこの使い方をされているお客様がいらっしゃり、おすすめできる使い方でもあるため、本体に戻しました。

これでメソッド数は 39 から 40 になりました。

タグ欄で使うための作り込み

コアのタグ欄は、独自のカスタムフィールドとは扱いが異なります。今回の復活にあわせて、タグ欄で安全に使えるよう次の対応を入れています。

  • 区切り文字はユーザー設定に自動で追従します。 PowerCMS の「タグの区切り文字」がカンマでもスペースでも、そのまま正しく動作します。
  • 区切り文字を含むタグも壊れません。 「イベント 案内」のように空白を含む値は、PowerCMS 本体と同じ規約で引用符に包んで保存するため、スペース区切りの設定でも 2 つのタグに割れません。
  • すでに付いているタグを取りこぼしません。 選択肢に無いタグが保存されていた場合は、チェック済みの選択肢として並べます。他の画面で付けたタグが、チェック操作をした瞬間に消えることはありません。
  • label を省略すると、そのスペースの既存タグが選択肢になります。 ただしタグ数が多い環境では選択肢が大量に並ぶため、label を明示する使い方をおすすめします。

アクセシビリティと使い勝手の改善

タグ入力は編集者が毎日触る画面なので、あわせて次の点を改善しました。

  • キーボードだけで操作できるようになりました。 タグ風デザイン（skin: 'tags'）でチェックボックスを隠す方法を変更し、Tab での移動と Space での選択ができます。フォーカス位置も分かるようになっています。
  • 選択済みの表示を読みやすくしました。 選択済みのボタンの配色を、文字とのコントラスト比が WCAG AA（4.5:1）を満たす色に変更しています。
  • 選択上限の警告が編集の手を止めません。 従来のポップアップ（alert）をやめ、欄のすぐ下に表示するようにしました。スクリーンリーダーにも読み上げられます。
  • ボタンの大きさを広げました。 タッチ操作の目安（24px）を満たすサイズになっています。

更新方法

  1. 配布ファイルを展開し、plugins/MTAppjQuery/ と mt-static/plugins/MTAppjQuery/ を <MT_HOME> 配下の同じ場所へ上書きします。
  2. mt-static/plugins/MTAppjQuery/user-files/ には配布物にも同名の空ファイルが含まれます。ご自身の user.js / user.css / jquery_ready.js を上書きしないようご注意ください。
  3. 管理画面のシステムメニュー「プラグイン」で、MTAppjQuery P7 のバージョンが 1.1.0 になっていることを確認します。

設定項目の追加・変更はありません。v1.0.0 の user.js はそのまま動作します。

P5 から移行される方へ

MTAppMultiCheckbox は P5 と同じメソッド名・同じオプション名で動作します。P5 の user.js に書かれた呼び出しは、原則そのまま使えます。

ただし次の 2 点だけ P5 と異なります。

  • 選択肢に無い保存値を、add: true の指定に関わらず常にチェック済みの選択肢として追加します。
  • P5 の $(selector).multicheckbox()（内部の jQuery プラグイン）は提供していません。直接呼び出していた場合は $.MTAppMultiCheckbox() に置き換えてください。

詳しくはオンラインマニュアルの「P5 からのアップグレード」を参照してください。

ドキュメント