bit part Products

MTAppjQuery P7 v1.0.0 リリース

公開日：

PowerCMS 7 に対応した MTAppjQuery P7 の最初のリリースです。

PowerCMS 7 の管理画面を、現場に合わせて自由自在に

MTAppjQuery P7 は、JavaScript・CSS・jQuery を使って PowerCMS 7 の管理画面をカスタマイズするプラグインです。Perl でのプラグイン開発は必要ありません。管理画面に読み込まれる user.js に、あらかじめ用意された 39 のメソッドを数行書くだけで、記事・ウェブページの編集画面を運用に合わせて作り込めます。

MTAppjQuery v1 系をベースに、PowerCMS で利用した際に生じた不具合を調整し、PowerCMS が標準で備える機能と重複する部分は削ぎ落として最適化しました。

主な内容

39 のメソッドを用途別に提供

  • 入力補助・バリデーション — 数値チェック、文字数制限、税込／税抜の自動計算、日付入力、サジェスト など
  • フィールド表示・UI 拡張 — タブ、ツールチップ、ヒント、ラベル変更、並べ替え、インライン編集 など
  • フィールド・ウィジェットの生成 — 独自フィールド、サイドバーウィジェット、フィールドのウィジェット化
  • カテゴリ連携 — 選択に応じた表示切替、他タイプのカテゴリ選択、一括カテゴリ変更
  • アセット・ファイル — アセット選択、ギャラリー、複数ファイルのアップロード
  • 一覧・データ表示 — 一覧から選択して保存、タイトル一覧表示、JSON の表形式編集
  • その他 — TinyMCE 化、メッセージ／ダイアログ、Google マップ連携、デバッグ表示

ライセンスキー認証を追加

プラグイン設定（システム）にライセンスキーの入力欄と「認証」ボタンを追加しました。認証後「変更を保存」で保存されます。

Data API 連携の自動認証

プラグイン設定「DataAPI SDK を利用」を有効にすると、現在ログイン中の管理画面ユーザーでアクセストークンを自動発行します。MTAppListing / MTAppShowListEntries / MTAppMultiFileUpload などが再ログインなしで利用できます。

新しいオプション

  • MTAppListing に selectedView — 選択済みアイテムをフィールドの上にテーブル／リストで表示。Data API に依存せず、独自 JSON の URL でも動作します。
  • MTAppMultiFileUpload に dropArea — 外部ライブラリに依存しない HTML5 ドラッグ&ドロップ領域。

配信サイズの削減

管理画面が読み込む JavaScript を圧縮版（MTAppjQuery-min.js）に変更しました。約 273KB → 約 86KB。管理画面の全ページで読み込まれるため、体感の改善につながります。

変更内容

  • 管理画面のロード対象を MTAppjQuery.js から MTAppjQuery-min.js へ変更
  • プラグイン同梱アセット（MTAppjQuery.css / MTAppjQuery-min.js、フォールバックの user-files/user.js / user.css）にキャッシュバスタ（?v=）を付与。アップグレード後に旧版を掴む問題を防止
  • 全メソッドをモダン JavaScript にリファクタ（const / let、DOM 生成による HTML インジェクション対策）
  • MTAppInCats を MTAppCategorySwitch に統合
  • PowerCMS 本体と重複する 8 メソッドを削除（メソッド数 48 → 39）
  • ビルドを Dart Sass + esbuild に移行（npm run build）
  • プラグイン名を MTAppjQuery P7、制作者を bit part 合同会社 に変更

影響範囲

  • 対応バージョン: PowerCMS 7 専用です。PowerCMS 5・6・X には対応していません。
  • 削除されたメソッド: 上記 8 メソッドを user.js で呼び出している場合、該当行の削除が必要です。いずれも PowerCMS 本体の標準機能で代替できます。
  • MTAppInCats: MTAppCategorySwitch に統合されました。

ご利用にあたっての注意

  • MTAppGoogleMapFields を使うには、ページ側で Google Maps JavaScript API を自前の API キーで読み込んでおく必要があります（google.maps.importLibrary を提供する動的読み込みローダー）。本メソッドは Maps を自前では読み込みません。
  • マーカーに AdvancedMarkerElement を使うため、地図には Map ID が必要です。試作時は DEMO_MAP_ID を利用できますが、本番では Google Cloud で作成した固有の Map ID を mapId オプションに指定してください。

ドキュメント