インストール方法

ご購入時に取得した ZIP ファイルを展開すると下記のようなディレクトリ構造になっています。

MTAppjQuery
├── mt-static
│   ├── plugins
│   |   └── MTAppjQuery
│   └── support
│       └── MTAppjQuery
└── plugins
    ├── DataAPIProxy
    └── MTAppjQuery

MTAppjQuery v3 以降、デフォルトの user.js と user.css のアップロード先が、mt-static/plugins/MTAppjQuery/user-files ディレクトリから support/MTAppjQuery ディレクトリ内へと変更になりました。

また、v3.6.0 以降、PlainTextField プラグインと ScheduleField プラグインはオプションプラグインとなり、同梱されなくなりました。これらのプラグインは MTAppjQuery と同様に「製品ダウンロード」ページの「MTAppjQuery v3」のセクションでダウンロード可能です。

これらのディレクトリを下記のようにアップロードしてください。

plugins ディレクトリ内の全てのディレクトリを Movable Type の plugins ディレクトリにアップロード
mt-static/plugins ディレクトリ内の MTAppjQuery ディレクトリを Movable Type の mt-static/plugins ディレクトリにアップロード
【この作業はアップデート時は不要】mt-static/support ディレクトリ内の MTAppjQuery ディレクトリを Movable Type の mt-static/support ディレクトリにアップロード（環境変数SupportDirectoryURLを設定している場合はその support ディレクトリにアップロード）

DataAPIProxy プラグインの設定と Data API の有効化

dataapiproxy.cgi のパーミッションの変更

アップロードした DataAPIProxy ディレクトリの中に dataapiproxy.cgi というファイルがあります。

このファイルのパーミッションを 755 など mt.cgi と同じパーミションに変更します。

Data API を簡単に利用できるようにする

「システムのプラグイン設定」の中の MTAppjQuery の設定を開き、 管理画面での DataAPI の利用 を 有効 にし、 Data API バージョン を選択してください。

Movable Type を PSGI で運用している場合

Movable Type クラウドなど Movable Type を PSGI で運用している場合は、管理画面での DataAPI の利用 欄のテキストエリア内の baseUrl に続く部分を「mt.cgi を除く管理画面のURL + dataapiproxy.cgi」となるようにして、設定を保存します（下記コード中の URL は環境によって異なります）。

<script type="text/javascript" src="/cms/mt8/mt-static/data-api/v6/js/mt-data-api.min.js"></script>
<script>
  mtappVars.DataAPI = new MT.DataAPI({
    baseUrl:  'https://ホスト名/mt/dataapiproxy.cgi',
    clientId: 'mtappjqueryda'
  });
</script>

Data API の設定

以下の「Webサービス」の設定で Data API を有効にしてください。

「システム > 設定 > Webサービス」のData API を利用しない。にチェックをはずす。
サイトごとの「設定 > Webサービス」のData API の利用を許可する。にチェックを入れる。

サイトごとの設定については、すべてのサイトで Data API をオンにする必要はありませんが、いくつかのメソッドやメソッドのオプションによっては内部で Data API を利用しているものがありますので、開発中にメソッドが思うように動かなかったり、開発者ツールのコンソールに 403 エラーなどがでている場合は、そのサイトの Data API の設定を見直してください。

user.js と user.css の利用方法

MTAppjQuery では user.js と user.css というファイルを利用して管理画面をカスタマイズしていきます。

user.js と user.css の管理方法は下記の通りです。

インデックステンプレートで管理する
独自でファイルをサーバーに置いてMTAppjQuery の設定でそれらを読み込むようにする
/mt-static/support/MTAppjQuery/user-files/ の中にあるものをカスタマイズする

インデックステンプレートで管理

MTAppjQuery をインストールすると、テンプレート一覧画面の右側に「MTAppjQuery アクション」ウィジェットが表示されます。

その中の「user.jsとuser.cssをインストール」をクリックすると、インデックステンプレートに user.js と user.css がインストールされ、それらのファイルがそのサイトの管理画面で自動的に読み込まれるようになります。

独自のファイルをサーバーに置いて管理

独自のファイルをサーバーに置き、各サイトの MTAppjQuery の設定で user.js と user.css の URL を独自ファイルを参照するように変更して管理画面に読み込ませることが可能です。

support/MTAppjQuery 内で管理

上記の「インデックステンプレートで管理」の方法で user.js と user.css を作成しない場合は、デフォルトで /support/MTAppjQuery/ の中に入っている user.js と user.css が管理画面に読み込まれます。したがって、それらのファイルを直接編集して管理画面をカスタマイズすることが可能です。

この方法で管理する場合は、プラグインのアップデート時に /support/MTAppjQuery/ を上書きしないようご注意ください（アップデート時はこのディレクトリをアップロードする必要はありません）。

user.js で jQuery を使うには

Movable Type の管理画面では jQuery のショートカットとして $ を使うことができません。そのため、以下のようにして user.js のスクリプト全体をラップすることで、$ が使えるようになります。

// この外では jQuery の $ は使えません。すべて jQuery と書く必要があります。
(function($){

    // この中では jQuery の $ が使えます。

})(jQuery);
// この外では jQuery の $ は使えません。すべて jQuery と書く必要があります。

また、(function($){ })(jQuery); の中は閉ざされたスコープになるので、その中で const や let で変数を宣言すれば、その変数はその中でのみ有効となります。

(function($){ })(jQuery); は user.js 内にいくつでも書くことができます。

(function($){
    // do something A
})(jQuery);

(function($){
    // do something B
})(jQuery);

なお、「$.MTAppSortableBatchEdit()」などのように旧バージョンのメソッドで、メソッド本体を user.js の先頭に貼り付けて使うようになっているものは、そのメソッドを貼り付ける位置は (function($){ })(jQuery); の中でも外でも構いません（ jQuery.MTApp〜 となっているため）。

インストール後にうまく動かないときは

インストール後にうまく動かないときは以下の項目もご参照ください。

エラー・トラブルシューティング