プラグイン設定
テキスト欄を PowerCMS/MT のアセット選択ダイアログで扱えるフィールドにし、選択アセットの情報(id/ファイル名/URL/サムネ)を JSON 保存する jQuery プラグイン。P7 最適化版。
MTAppjQuery は「システム」と「ブログ(スペース/ワークスペース)」の2つのスコープで設定できます。管理画面の ツール → プラグイン → MTAppjQuery → 設定 から変更します。
スコープの考え方
- システムスコープ(システムのプラグイン設定): サイト全体(すべてのブログ/スペース)に適用される設定。Data API やフリーエリア(共通)など一部の設定はシステム専用です。
- ブログスコープ(各スペースのプラグイン設定): そのスペースだけに適用される設定。
active/user.js/user.css/jquery_ready.js/ フリーエリア(個別)はスコープごとに個別指定できます。
ブログスコープの設定は、そのブログの管理画面にのみ適用されます(他のブログには影響しません)。システムスコープの設定は全ブログに適用されます。両方が設定されている項目では、そのブログの管理画面ではブログスコープの値が使われます。
共通設定(システム・ブログ両スコープ)
プラグインの有効化(active)
| 既定値 | 有効(1) |
| スコープ | システム/ブログ |
プラグイン全体のマスタースイッチです。無効にすると、その画面では MTAppjQuery のスクリプト・スタイル・mtappVars を含め一切注入されません(全機能が停止)。ブログスコープで無効にすると、そのブログの管理画面だけ機能を止められます。
user.js の設定(userjs / userjs_url)
| 既定値 | 有効(1)/ URL 空 |
| スコープ | システム/ブログ |
有効にすると user.js(管理画面カスタマイズ用の JavaScript)を管理画面に読み込みます。user.js は「デザイン → user.js を編集」から編集できます。URL を指定すると、既定の user.js の代わりに任意の URL のファイルを読み込みます。
user.css の設定(usercss / usercss_url)
| 既定値 | 有効(1)/ URL 空 |
| スコープ | システム/ブログ |
有効にすると user.css(管理画面カスタマイズ用の CSS)を読み込みます。URL を指定すると任意の URL のファイルを読み込みます。
jquery_ready.js の設定(jquery_ready / jquery_ready_url)
| 既定値 | 無効(空)/ URL 空 |
| スコープ | システム/ブログ |
有効にすると jquery_ready.js($(document).ready 相当で実行したい処理を書くファイル)を読み込みます。URL を指定すると任意の URL のファイルを読み込みます。
フリーエリア(個別)(fa_*)
| 既定値 | 空 |
| スコープ | システム/ブログ |
管理画面の各挿入ポイントに、任意の HTML/JavaScript/CSS のソースを追加できます。MT タグも使えます。挿入ポイントは以下の8種類です。
| 挿入する変数 | 位置 |
|---|---|
mtapp_top_head | <head> 内の先頭付近 |
html_head | <head> 内 |
js_include | <head> 内の JavaScript 読み込み位置 |
html_body | <body> の前半 |
form_header | フォームヘッダー |
jq_js_include | </body> 直前の JavaScript 読み込み位置 |
mtapp_html_foot | フッター付近 |
mtapp_end_body | </body> の直前 |
空欄のときは、その位置に確認用のコメント(例: <!-- html_head (MTAppjQuery) -->)が出力され、挿入ポイントが機能していることを確認できます。
システム専用設定
DataAPI SDK を利用(use_data_api_js / data_api_version / data_api_script_url)
| 既定値 | 無効(0)/ バージョン空/ URL 空 |
| スコープ | システム |
有効にすると Data API の JavaScript SDK(mt-data-api.js)を読み込み、mtappVars.DataAPI を利用可能にします。バージョンは get_thumbnail 等を使うため v2 以降を推奨します。SDK スクリプトの URL を上書きすることもできます。
有効時は、本プラグインが現在ログイン中のユーザーで Data API のアクセストークンを自動発行して mtappVars.DataAPI に渡すため、再ログインは不要です。MTAppAssetFields(サムネイル取得)・MTAppListing / MTAppShowListEntries(記事一覧取得)・MTAppMultiFileUpload(アップロード)などが利用します。
jquery_ready.js をすべてのブログに適用(jquery_ready_all)
| 既定値 | 無効(0) |
| スコープ | システム |
システム設定でこのチェックを入れて保存すると、そのときの jquery_ready / jquery_ready_url の設定をすべてのブログ/スペースへ一括で反映します(各ブログスコープの設定として保存されます)。保存時に確認ダイアログが表示されます。
サイト(Websites/Blogs)の JSON を利用(blogs_json / blogs_json_detail)
| 既定値 | 無効(0)/ 詳細モード無効(0) |
| スコープ | システム |
有効にすると、ログイン中のユーザーがアクセスできるサイト(ウェブサイト/ブログ)の一覧を、階層構造の JSON として mtappVars.can_access_blogs_json に提供します。user.js などから、サイト切り替え UI やサイト一覧の表示に利用できます。
- 詳細モード無効(既定): 各サイトの
idとnameのみを含む簡易な JSON。 - 詳細モード有効: 各サイトの全カラム値を含む詳細な JSON。
フリーエリア(共通)(common_*)
| 既定値 | 空 |
| スコープ | システム |
フリーエリア(個別)と同じ8つの挿入ポイントに、全ブログ共通で任意のソースを追加します。個別のフリーエリアと併用でき、共通分はすべての管理画面に、個別分はそのスコープの管理画面に挿入されます。
補足
- 設定の変更は、対象の管理画面を再読み込みすると反映されます。
activeを無効にすると、そのスコープでは MTAppjQuery のすべての機能(user.js/user.css/ フリーエリア / Data API / 各メソッド)が停止します。- フリーエリアや
user.jsには MT タグを記述できます(管理画面用テンプレートとして評価されます)。
user.js のサンプル
user.js(「デザイン → user.js を編集」)に書くコードのサンプルです。mtappVars.screen_id で画面を判定し、画面ごとに MTAppjQuery のメソッドを適用します。カスタムフィールドの basename はご自身のものに置き換えてください(要素 id は #customfield_<basename> です)。配布物にも user-files/user.js.sample として同梱しています。
(function ($) {
'use strict';
// mtappVars が無い場合(プラグイン無効時など)は何もしない
if (typeof mtappVars !== 'object') {
return;
}
/* 記事・ウェブページの編集画面 */
if (mtappVars.screen_id === 'edit-entry' || mtappVars.screen_id === 'edit-page') {
// 画面上部にメッセージを表示する
$.MTAppMsg({ msg: 'MTAppjQuery でカスタマイズ中の編集画面です。', type: 'info' });
// 「price」フィールドに税込み計算ボタンを付ける(税率 10%・切り捨て)
$('#customfield_price').MTAppTaxAssist({ rate: 0.10, rounding: 'floor' });
// 「stock」フィールドを数値チェック(全角→半角変換・範囲 0〜9999)
$('#customfield_stock').MTAppNumChecker({ min: 0, max: 9999 });
// 「summary」フィールドに最大文字数(40文字)と残数カウンターを表示
$('#customfield_summary').MTAppMaxLength({ maxLength: 40, viewCount: true });
// 「event_date」フィールドに日付入力補助ボタンを付ける
$('#customfield_event_date').MTAppDateAssist({ gengo: false });
// 「note」フィールドにマウスオーバーでツールチップを表示
$('#customfield_note').MTAppTooltip({ text: '社内メモ用の欄です。公開されません。' });
// すべての入力欄に値をクリアする「×」ボタンを付ける
$.MTAppRemoveVal();
// カテゴリに応じて表示するフィールドを切り替える
// (カテゴリ id が 1 のとき price/stock を、2 のとき event_date を表示)
$.MTAppCategorySwitch({
basename: {
'cat1': 'title,price,stock',
'cat2': 'title,event_date',
'init': 'title'
}
});
}
/* 記事の一覧画面 */
if (mtappVars.screen_id === 'list-entry') {
// 一覧画面向けのカスタマイズをここに書きます。
}
})(jQuery);各メソッドの詳細なオプションは、それぞれのメソッドのドキュメントを参照してください。