MTAppjQuery - Movable Type 5 の管理画面をjQueryでカスタマイズしやすくするプラグイン

MTAppjQuery とは

MTAppjQuery とは、Movable Type 5 の管理画面を jQuery でカスタマイズしやすくするプラグインです。MT4 の管理画面に jQuery を適用させるプラグイン「jQuery for MT」の MT5 版といったイメージです。

Movable Type の管理画面は、alt-tmpl を利用すれば簡単にカスタマイズすることができますが、そのためには、管理画面のテンプレートを理解する必要があります。また、「項目名やレイアウトをちょっと変えたい」ときなどは、いちいち alt-tmpl でカスタマイズするのも面倒かもしれませんし、慣れも必要なので多少敷居が高いかもしれません。

しかし、Movable Type 5 から、管理画面には jQuery が使われるようになりました。jQuery を使ってのカスタマイズであれば、Movable Type のテンプレートを読む必要もなく、通常のサイトに jQuery を入れるのと同じスキルでカスタマイズすることができます。

そして、MTAppjQuery プラグインを利用すれば、同梱されている「user.js」に jQuery を書いていけば管理画面に反映されるようになっているので、さらに敷居が低くなると思います。

さらに、ラベルの変更などは、簡単な設定を書くだけで管理画面をカスタマイズできるような jQuery プラグインが MTAppjQuery.js 内にセットされています。

動作環境

Movable Type 5 で動作確認済み

ダウンロード

• tinybeans/mt-plugin-MTAppjQuery - GitHub

インストール

ダウンロードしたファイルを解凍し、「plugins」の中と「mt-static / plugins」の中の「_MTAppjQuery」フォルダを、それぞれ該当するMovable Typeのディレクトリにアップロードしてください。

「_MTAppjQuery」については、アップロード時に「user.css」「user.js」を上書きしないようにと頭にアンダースコアがついています。新規の場合はアップロード前にリネームしても構いませんし、アップロード時は、user ファイルを上書きしないように気をつけながらアップロードしてください。

サーバー上のファイルは、結果的に以下の構成になるようにしてください。

• plugins
  • MTAppjQuery
• mt-static
  • plugins
    • MTAppjQuery

システムメニューまたはブログメニューの「ツール > プラグイン」を開き、プラグイン一覧の中に「MTAppjQuery」が表示されていればインストール成功です。

最後に「mt-static / plugins」の中の「MTAppjQuery」に、css/_user.css と js/_user.js というファイルが入っています。このファイル名をそれぞれ「user.css」と「user.js」に変更してください（誤ってカスタマイズしたファイルを上書きしてしまわないように ver 0.09 から変更しました）。ver 0.10 で _MTAppjQuery フォルダにアンダースコアをつけることにしました。

プラグインの設定

プラグインの設定画面で各ファイルを無効にすることができますが、JavaScript ファイルに関しては、内容をしっかりと理解していない場合は JavaScript のエラーの原因になる可能性があるので、無効にしないことをお勧めします。

システムメニュー

user.cssの利用を停止する

すべてのブログの管理画面の user.css を停止します。
[デフォルト] チェックなし

MTAppjQuery.jsの利用を停止する

すべてのブログの管理画面の MTAppjQuery.js を停止します。
[デフォルト] チェックなし

user.jsの利用を停止する

すべてのブログの管理画面の user.js を停止します。
[デフォルト] チェックなし

jQueryプラグイン

他の jQuery プラグインを使う場合などに、ファイルを読み込むための script 要素などを書きます。
[デフォルト] 空欄

ブログメニュー

プラグインを有効にする

プラグインを有効にします。
[デフォルト] チェックあり

user.cssを有効にする

そのブログの管理画面では user.css を有効にします。
[デフォルト] チェックあり

MTAppjQuery.jsを有効にする

そのブログの管理画面では MTAppjQuery.js を有効にします。
[デフォルト] チェックあり

user.jsを有効にする

そのブログの管理画面では user.js を有効にします。
[デフォルト] チェックあり

jQueryプラグイン

他の jQuery プラグインを使う場合などに、ファイルを読み込むための script 要素などを書きます。
[デフォルト] 空欄

使い方

user.js にガシガシ書く

mt-static/plugins/MTAppjQuery/js ディレクトリの中に「user.js」という名前のファイルが入っています。そのファイルに jQuery を書いていけば、自動的に管理画面に反映されます。

なお、MT5.02 から $(function(){ // 処理 }); の書き方は使えなくなっているようですので、以下のような書きましょう。

jQuery(function($){
    // ここに処理を書く
    // この中では $ が使えます
});

ブログごと、ユーザーごとに処理を分ける場合

user.js を読み込む前に以下の変数が定義されています。この変数を利用して条件分岐すれば、ブログごと、ユーザーごとに処理を分けることが可能です。

// 数字は例です
var blogID = '2'; 
var authorID = '1';
var staticPath = '/cms/MT-5.02-ja/mt-static/';

blogID = ウェブサイト・ブログの場合はそれぞれのブログID、それ以外は0
authorID = 著者ID
staticPath = mt-staticディレクトリまでの絶対パス

ブログごとに有効・無効を変えたい場合は、単純にプラグインの管理画面で設定できます。

同梱の jQuery プラグインの使い方

$.MTAppCustomize() - ラベルの変更は自由自在

$.MTAppCustomize({
    basename:   'title/body/more/tags/keywords/excerpt/status/publishing/category/feedback/assets
                 or Customfield's basename',
    label:      '変更後のラベル',
    hint:       'マウスオーバーしたときに表示されるヒント',
    show_field: 1 フィールドを非表示にする場合は 0,
    custom:     0 カスタムフィールドの場合のみ 1,
    widget:     0 ウィジェットの場合のみ 1
});

詳細は、次のブログ記事をご覧ください。

• $.MTAppCustomize() の使い方 - MTAppjQuery で MT5 の管理画面をカスタマイズしよう

$.MTAppMultiCheckbox() - テキスト欄をマルチチェックボックスに

$.MTAppMultiCheckbox({
    basename: 'tags',
    label:    'Moveble Type,TypePad,MTOS,VOX',
    custom:   0,
    show:     1,
    insert:   'before'
});

詳細は、次のブログ記事をご覧ください。

• $.MTAppMultiCheckbox() の使い方 - MTAppjQuery でマルチチェックボックスも簡単に作成

$.MTAppFieldSort() - フィールドを自由に並べ替え

$.MTAppFieldSort({
    sort: 'title,text,tags,excerpt,keywords'またはカスタムフィールドのbasenameを並び順にカンマ区切りで書く
});

詳細は、次のブログ記事をご覧ください。

• $.MTAppFieldSort() の使い方 - MTAppjQuery でフィールドを簡単に並び替える

$.MTAppMsg() - メッセージの表示はお気軽に

$.MTAppPageTitle({
    msg:  'メッセージ',
    type: '' // info/success/error/
});

詳細は、次のブログ記事をご覧ください。

• $.MTAppMsg() の使い方 - MTAppjQuery で管理画面にメッセージを表示

$.MTAppSlideMenu() - ページの移動をスムーズに

user.js に次の１行を追加するだけで、Movable Type のメニューが一気に使いやすくなります（バージョン 0.04 より追加）。僕はかなりのお気に入りですよ！

$.MTAppSlideMenu();

現在のウェブサイトやブログは、マウスオーバーした状態のカラーで表示されます。

$.MTAppFullscreen() - フルスクリーンエディタでブログ記事を書きやすく

user.js に次の１行を追加すると、ブログ記事作成画面等のテキストエディタのタブに「FULL」というタブが追加されます。このタブをクリックすると、エディタがほぼフルスクリーンになります。これも僕はかなりのお気に入り。

$.MTAppFullscreen();

※ただし、リッチテキストには対応していません。

$.MTAppInCats() -カテゴリごとに UI を変える

$.MTAppInCats({
    categories: '1,2,3', // カテゴリIDを指定。複数の場合はカンマ区切り
    code      : function(){
        // ここに指定したカテゴリのみに適用させたいカスタマイズを書く
    }
});

新規ブログ記事作成の場合は、ここで指定したカテゴリを選択した場合に UI が変更されます。そのカテゴリに属する記事を編集する場合は、最初から指定した UI となります。

詳細は、次のブログ記事をご覧ください。

• $.MTAppInCats() の使い方 - MTAppjQuery でカテゴリごとにUIを変える

$.fn.MTAppInlineEdit() - 簡単に Inline Edit にする

MT5 から、自分で追加したフィールドの class 属性に「.mt-edit-field」を付けると、Inline Edit とという状態になります。これは、「編集」ボタンを押すとテキストフィールドが現れ、編集できるようになるやつで、ブログ記事のベースネーム欄の様な感じになります。

$.fn.MTAppInlineEdit() を利用すると、これとほぼ同様の動作を実現できます。

詳細は、次のブログ記事をご覧ください。

• $.fn.MTAppInlineEdit() - MTAppjQuery で簡単に Inline Edit にする

$.MTAppDebug() - 管理画面のカスタマイズの手助けを

$.MTAppDebug() は、管理画面をカスタマイズする作業そのものを手助けする機能です。次の１行を user.js に書くと、管理画面のカスタマイズが少し楽になる機能が利用できます。

$.MTAppDebug();

詳細は、次のブログ記事をご覧ください。

• $.MTAppDebug() の使い方 - 管理画面のカスタマイズの手助けを

MTの管理画面は重いと思わせないためのローディング画像

どうも僕の周りでは、「 Movable Type の管理画面って重いよね」いう意見をチラホラ聞きます。個人的には WordPress とかと比べてもそんなに変わらないと思うんですけどね（安いサーバーだし）。

その話は置いておいて、MTAppjQuery プラグインを使って管理画面をカスタマイズすると、画面が表示された後にラベルが変わったり、位置が移動したりして、ちょっと鬱陶しい可能性があります。

そのため、当プラグインをインストールすると、処理が終わるまでは MT 標準のローディング画像が表示されるようになっています。

個人的にはかなりイケてる気がするのですが、もしもこれを無効にしたい場合は、user.css 内のローディング画像に関する記述に、「display:none;」を設定してください。

#page_loding {
    display: none; /* これを追加 */
    position: absolute;
    top: 200px;
    left: 50%;
    margin-left: -33px;
}

ストラクチャーウィジェットでウェブサイトとブログの構造を視覚的に確認する

Movable Type 5 の管理画面のスタートページである「ユーザーダッシュボード」。このページのメインのウィジェットで、そのシステム内の「ウェブサイト」「ブログ」が確認できます。

しかし、「ウェブサイト」「ブログ」がタブで分かれているのはいいのですが、ウェブサイトとブログの関係は、イマイチ分かりにくいですよね。

MTAppjQuery をインストールすると、このウィジェットに「構造」というタブが追加され、下図のように、ウェブサイトとブログの関係を直感的に確認することが出来ます。

ライセンス

個人利用・商用利用を問わず、このプラグインを無償で自由に利用することができます。プラグインの著作権は作者が所有しています。

本プラグインはLGPLライセンスで配布されています。プラグインの著作権は作者が所有しています。

LGPLライセンスのご利用について

LGPLライセンスの定義に基づきご利用される場合は、非商用、商用問わず無償でご利用できます。

商用ラインセンスのご利用について

2010年11月1日現在、商用ライセンスはありません。

更新履歴

【2010-11-05】

ライセンスを明確にしました。

その他、内容に関する更新履歴は「Downloads - mtapp-jquery - Google Code」のコメントをご確認ください。

MTAppjQuery プラグインに関するブログ記事

• MTAppjQuery 0.25.1 リリース - バグフィックス
• MTAppjQuery 0.25 リリース - MTAppKeyboardShortcut を追加
• MTAppjQuery 0.23 リリース - セキュリティーアップデート＋MTAppDebugの変更
• MTAppjQuery 0.22 リリース - セキュリティーアップデート＋新機能追加など
• MTAppjQuery 0.21 リリース - セキュリティーアップデートほか
• @mersy さんがMTAppjQueryの新機能を中心にまとめてくれました
• MTAppjQuery 0.2 リリース - MT 5.1 対応版
• MTAppjQuery 0.15.1 リリース - IEのバグを1つつぶしました
• MTAppjQuery 0.15 リリース - バグフィックス
• MTAppjQuery 0.14 のバグフィックス用の差分ファイル
• $.MTAppFieldSort() 利用時のエラーの回避方法と MTAppjQuery 0.11 リリース
• $.MTAppDebug() の使い方 - 管理画面のカスタマイズの手助けを
• MTAppjQuery 0.10 リリース - スライドメニューの不具合を修正
• $.fn.MTAppInlineEdit() - MTAppjQuery で簡単に Inline Edit にする
• $.MTAppInCats() の使い方 - MTAppjQuery でカテゴリごとにUIを変える
• $.MTAppFullscreen() - MTAppjQuery でブログ記事も書きやすく
• MTAppjQuery 0.06 リリース - ストラクチャー・ウィジェットでウェブサイトとブログの構造を視覚的に確認
• $.MTAppSlideMenu() - MTAppjQuery でページの移動をスムーズに
• $.MTAppMsg() の使い方 - MTAppjQuery で管理画面にメッセージを表示
• $.MTAppFieldSort() の使い方 - MTAppjQuery でフィールドを簡単に並び替える
• $.MTAppMultiCheckbox() の使い方 - MTAppjQuery でマルチチェックボックスも簡単に作成
• $.MTAppCustomize() の使い方 - MTAppjQuery で MT5 の管理画面をカスタマイズしよう
• MTAppjQuery 0.01 リリース - Movable Type 5 の管理画面をjQueryでカスタマイズしやすくするプラグイン