MTAppjQuery P7

はじめに

MTAppjQuery P7 の概要・動作環境・インストール方法をまとめたセクションです。

MTAppjQuery P7 の概要・動作環境・インストール方法をまとめたセクションです。はじめて利用する場合は、上から順にお読みください。

MTAppjQuery P7 とは

MTAppjQuery P7 は、JavaScript・CSS・jQuery を使って PowerCMS 7 の管理画面を自由にカスタマイズするためのプラグインです。記事・ウェブページ編集画面のカスタムフィールドや UI を、あらかじめ用意された jQuery メソッド群で拡張できます。

MTAppjQuery v1 系を PowerCMS で利用した際の不具合等を調整した「MTAppjQuery P5」の後継で、PowerCMS 7 に対応したものです。マルチフィールドやスライドエディタなどの MTAppjQuery v2 系の機能は含みません（v1 系相当）。

カスタマイズは、管理画面に読み込まれる user.js（および user.css / jquery_ready.js）に各メソッドを記述して行います。個々のメソッドの詳細は「メソッドリファレンス」を、記述の共通ルールは各メソッドの「user.js での記述例」を参照してください。

このプラグインでできること

カスタムフィールドの入力補助（数値・文字数・税計算・日付・サジェスト・改行区切り・分割など）
フィールドの表示・UI 拡張（タブ・ツールチップ・ヒント・ラベル変更・並べ替え・インライン編集など）
独自フィールド／サイドバーウィジェットの生成、フィールドのウィジェット化
アセット・ファイルの選択とアップロード（アセット選択・ギャラリー・複数ファイルアップロード）
一覧からの選択・関連付け（Data API や任意の JSON を使った一覧選択・表示）
カテゴリ連携（選択に応じたフィールド表示切替・他タイプのカテゴリ選択・一括カテゴリ変更）
user.js / user.css / フリーエリアによる独自の JavaScript・CSS の注入
Data API 連携（ログイン中のユーザーでアクセストークンを自動発行）

機能ごとの詳細は、各メソッドのドキュメント（メソッドリファレンス）を参照してください。

動作環境

項目	内容
対応バージョン	PowerCMS 7
依存ライブラリ	管理画面に同梱の jQuery を利用（追加ライブラリのインストールは不要）
Data API	一部メソッド（`MTAppListing` / `MTAppShowListEntries` / `MTAppMultiFileUpload`、および `MTAppAssetFields` のサムネイル取得）は Data API を利用。プラグイン設定「DataAPI SDK を利用」を有効化してください（`get_thumbnail` を使う機能は Data API v2 以降が必要）
ライセンス	本製品は PowerCMS 7 用の有償プラグインです。購入・ライセンスの詳細は製品ページを参照してください

PowerCMS X には対応していません。

インストール

配布ファイル一式を入手し、以下の手順で設置します。以降 <MT_HOME> は PowerCMS を設置したディレクトリ（mt.cgi がある場所）を指します。

配布ファイルを展開すると、plugins/MTAppjQuery/（サーバーサイド）と mt-static/plugins/MTAppjQuery/（静的アセット）の2つのディレクトリが含まれます。
plugins/MTAppjQuery/ を <MT_HOME>/plugins/ へ配置します（<MT_HOME>/plugins/MTAppjQuery/ になります）。
mt-static/plugins/MTAppjQuery/ を <MT_HOME>/mt-static/plugins/ へ配置します（<MT_HOME>/mt-static/plugins/MTAppjQuery/ になります）。
管理画面のシステムメニュー「プラグイン」を開き、一覧に MTAppjQuery が表示され有効になっていることを確認します。

インストール直後は、プラグイン設定の「MTAppjQuery を有効化」と「user.js を利用」が既定で有効です。そのため次の場所に user.js を用意すれば、管理画面で自動的に読み込まれます。

<MT_HOME>/mt-static/plugins/MTAppjQuery/user-files/user.js

同じ user-files/ には user.css（管理画面用の CSS）と jquery_ready.js（$(function(){ ... }) 相当の初期化コード）も置けます。

バージョンアップ

新しいバージョンへ更新する場合は、plugins/MTAppjQuery/ と mt-static/plugins/MTAppjQuery/ を新しいファイルで上書きします。user-files/（user.js / user.css / jquery_ready.js）は利用者が編集するファイルのため、上書きで消えないよう必要に応じてバックアップしてください。

使い方の流れ

設置: 上記のインストールを行い、プラグインが有効になっていることを確認します。
設定: 必要に応じてプラグイン設定（user.js の利用可否、Data API SDK の利用、フリーエリアなど）を確認・変更します。詳しくは「プラグイン設定」を参照してください。
記述: user.js に、利用したいメソッドを画面ごとに記述します。mtappVars.screen_id で画面（記事編集画面なら edit-entry など）を判定してから呼び出すのが基本です。
確認: 対象の管理画面を開いて動作を確認します。user.js はキャッシュされることがあるため、変更が反映されないときはブラウザのスーパーリロード（強制再読み込み）を行ってください。

各メソッドのドキュメントには「使用例」と「user.js での記述例」を掲載しています。まずはそれらをコピーして、セレクタやオプションを自分のフィールドに合わせて調整するのがおすすめです。