プラグイン設定

テキスト欄を 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 やサイト一覧の表示に利用できます。

  • 詳細モード無効(既定): 各サイトの idname のみを含む簡易な 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);

各メソッドの詳細なオプションは、それぞれのメソッドのドキュメントを参照してください。