JavaScriptでMovable Typeの管理画面をカスタマイズする

Movable Typeの管理画面をJavaScriptでカスタマイズする方法を試してみました。

設定方法

まず、Movable Typeを設置したディレクトリ内にある 「/tmpl/cms/layout/common/footer.tmpl」 をコピーします。
「/alt-tmpl/cms/layout/common/」 の階層でディレクトリを作成して、その中に先ほどコピーした「footer.tmpl」をペーストします。

alt-tmplディレクトリはカスタマイズしたテンプレートファイルを設置するディレクトリで、このディレクトリ内にファイルがある場合、元のtmplディレクトリの内容をオーバーライドして表示します。

これでカスタマイズ用のテンプレートが用意できたので、alt-tmpl配下に複製したfooter.tmpl内にJavaScriptのファイルを読み込む記述を追加します。

    <mt:if name="mt_debug"><mt:Include name="include/debug_hover.tmpl"></mt:if>
    <script src="/js/admin.js"></script>
  </body>
</html>

「/js/admin.js」を作成して、以下のように記述します。

console.log('admin test');

管理画面にログインして、各ページのconsoleに「admin test」が出力されていればOKです。
　

ページの判別

先ほどの設定で管理画面上でJavaScriptが使えるようになりましたが、実際に使う場合は特定のページ内のみJavaScriptを実行したいということも多いです。
そのため次は、記事・ウェブページ・コンテンツデータの一覧ページ・新規作成 / 編集ページを判別して、それぞれでconsoleを出力するようにしてみます。

admin.jsを以下のように変更します。

var param = location.search.substring(1).split('&');
var params = new Object;
var p;
for(var i = 0; i < param.length; i++) {
    p = param[i].split('=');
    params[p[0]] = p[1];
}
console.log(params);

// 記事一覧
if(params['_type'] === 'entry' && params['__mode'] === 'list') {
    console.log('記事一覧');
}

// 記事の新規作成・編集
if(params['_type'] === 'entry' && params['__mode'] === 'view') {
    console.log('記事の新規作成・編集');
}

// ウェブページ一覧
if(params['_type'] === 'page' && params['__mode'] === 'list') {
    console.log('ウェブページ一覧');
}

// ウェブページの新規作成・編集
if(params['_type'] === 'page' && params['__mode'] === 'view') {
    console.log('ウェブページの新規作成・編集');
}

// コンテンツデータ一覧
if(params['_type'] === 'content_data' && params['__mode'] === 'list') {
    console.log('コンテンツデータ一覧');
}

// コンテンツデータの新規作成・編集
if(params['_type'] === 'content_data' && params['__mode'] === 'view') {
    console.log('コンテンツデータの新規作成・編集');
}

ページの判別はURLに付与されるパラメータの「__mode」や「_type」の値を使うことでできます。
ただ、これだけだと他の子サイトやコンテンツデータが複数ある場合には判別されません。

例えば、特定の子サイト(blog_idが1)の記事の新規作成 / 編集ページのみJavaScriptを実行したい場合、以下のようになります。

// 記事の新規作成・編集
if(params['_type'] === 'entry' && params['__mode'] === 'view' && params['blog_id'] === '1') {
    console.log('blog_idが1の記事の新規作成・編集');
}

判別の条件にblog_idが1かどうかを追加しています。

特定の子サイト(blog_idが1)内の特定のコンテンツデータ(content_type_idが2)の新規作成 / 編集ページのみJavaScriptを実行したい場合、以下のようになります。

// コンテンツデータの新規作成・編集
if(params['_type'] === 'content_data' && params['__mode'] === 'view' && params['blog_id'] === '1' && params['content_type_id'] === '2') {
    console.log('blog_idが1でcontent_type_idが2のコンテンツデータの新規作成・編集');
}

判別の条件にblog_idが1かどうかとcontent_type_idが2かどうかを追加しています。

最後に実際の例として、blog_idが1の記事の新規作成 / 編集ページのタイトルに補足文を追加してみます。

// 記事の新規作成・編集
if(params['_type'] === 'entry' && params['__mode'] === 'view' && params['blog_id'] === '1') {
    var title = document.getElementById('title-field');
    title.insertAdjacentHTML('beforeend', '<p style="margin-top: 5px; color: gray; font-style: italic;">タイトルは必ず入力してください。</p>');
}

これで指定したページのタイトルのみ補足文を追加することができました。

注意点として、Movable Typeをアップグレードした際に元のテンプレートが変更される可能性があるので、アップグレードの際にテンプレートの変更がないかチェックする必要があります。