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

下記のコンテンツは古くなっています。最新の情報は tinybeans/mt-plugin-MTAppjQuery をご覧ください。

MTAppjQuery とは

mtappjquery-top.png

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 で動作確認済み

ダウンロード

インストール

ダウンロードしたファイルを解凍し、「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
});

mtappcustomize01.png

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

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

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

MTAppMultiCheckbox-01.png

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

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

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

MTAppFieldSort-01.png

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

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

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

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

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

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

$.MTAppSlideMenu();

MTAppSlideMenu-01.png

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

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

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

$.MTAppFullscreen();

MTAppFullscreen-01.png

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

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

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

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

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

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

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

mtapp-inlineedit.png

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

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

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

MTAppDebug01.png

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

$.MTAppDebug();

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

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

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

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

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

mtapp-loading-01.png

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

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

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

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

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

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

structure_widget.png

ライセンス

更新履歴

【2010-11-05】
ライセンスを明確にしました。

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

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

  • このエントリーをはてなブックマークに追加