MTAppjQuery と Data API proxy を組み合わせれば、管理画面と Data API に同時にログインしたような状態になり、管理画面で Data API を快適に使うことができます。
MTAppjQuery を使っていると「管理画面で Data API を使いたい」「しかもログイン認証が必要なエンドポイントを使いたい」という需要が多々あります。
そのような時は、M-Logic さんが公開している Data API proxy プラグインを一緒に使うことをおすすめします。
このプラグインを利用すると、Movable Type の管理画面にログインしていれば、そのログイン情報を利用して、Data API の認証が必要なエンドポイントを利用することができます。要するに、管理画面にログインしていれば Data API にも同時にログインしていることになるイメージです。
ここでは、MTAppjQuery と Data API proxy を組み合わせて利用する方法をご紹介します。
Data API proxy から ZIP ファイルをダウンロードし、展開します。
mt-plugin-dataapi-proxy-master
├── LICENSE
├── README.md
└── plugins
└── DataAPIProxy
展開したディレクトリの plugins
の中にある DataAPIProxy
をサーバー上の mt/plugins
ディレクトリにアップロードします。インストールはこれだけで、プラグインの設定も特にありません。
「システムのプラグイン設定」に「DataAPIProxy」プラグインが表示されればインストール成功です。
アップロードした DataAPIProxy
ディレクトリの中に dataapiproxy.cgi
というファイルがあります。
このファイルのパーミッションを 755
など mt.cgi
と同じパーミションに変更します。
次に、「システムのプラグイン設定」の中の MTAppjQuery の設定を開き、 DataAPI SDK を利用
を 有効
にし、 Data API バージョン
を v3
を選びます。
そして、 DataAPI Script URLを変更する
をクリックして、表示された入力欄に下記のように入力します。
「mt.cgi を除く管理画面のURL + plugins/DataAPIProxy/dataapiproxy.cgi」となるようにします。
https://ホスト名/mt/plugins/DataAPIProxy/dataapiproxy.cgi
「mt.cgi を除く管理画面のURL + dataapiproxy.cgi」となるようにします。
https://ホスト名/mt/dataapiproxy.cgi
設定を保存して準備完了です。
上記のとおり MTAppjQuery を設定すると、 mtappVars
というグローバル変数の DataAPI
プロパティに Data API オブジェクトがセットされます。簡単に言うと、user.js 内で下記のように利用できます。
mtappVars.DataAPI.listEntries( 引数 );
また、このオブジェクトを通して利用すると、認証が必要なエンドポイントも扱えます。
例えば、ブラウザの JapaScript コンソールで下記のコードを実行してみてください。
mtappVars.DataAPI.getUser('me', function (response) {
console.log(response);
});
このコードは、現在ログイン中のユーザーの情報を取得するコードですので、通常は Data API の認証
が必要です。しかし、冒頭でも紹介したとおり、Data API proxy プラグインを使うと管理画面にログインしていれば Data API にもログインしていることになるので、コンソールに自分のユーザー情報が表示されるはずです。
例えば、MTAppjQuery の機能の一つに、Data API を利用して複数のファイルをサクッとアップロードする MTAppMultiFileUpload
というメソッドがあります。
このメソッドは、通常は Data API の認証画面を一度通過する必要がありますが、Data API proxy を組み合わせて、 MTAppMultiFileUpload
の api
オプションに mtappVars.DataAPI
を設定すると、Data API の認証が不要になります。
(function($){
$('#customfield_entry_plain_text').MTAppMultiFileUpload({
api: mtappVars.DataAPI,
type: 'input',
multiple: true,
uploadPath: 'upload',
uploadImagesPath: 'upload/images',
uploadFilesPath: 'upload/files',
uploadButton: '<input type="button" value="select files" class="button">'
});
})(jQuery);
MTAppjQuery と Data API proxy を組み合わせて、さらに使いやすい管理画面にしましょう!
以上です。