Mtcafe tokyo 2013_spring_okuwaki
?
6 likes?5,770 views
Movable Type の実践的な管理画面のカスタマイズ?検索カスタマイズ
![?インデックステンプレートで user.js、user.css を
作成してカスタマイズ [v1.0.0 new]
使い方(2)](https://image.slidesharecdn.com/mtcafetokyo2013springokuwaki-130421204351-phpapp02/85/Mtcafe-tokyo-2013_spring_okuwaki-18-320.jpg)
![?プラグインの設定で user.js の URL を指定する
[v1.0.0 new]
使い方(3)
?任意のウェブサイトやブログを自由にグルーピングし
て共通のカスタマイズを適用できる](https://image.slidesharecdn.com/mtcafetokyo2013springokuwaki-130421204351-phpapp02/85/Mtcafe-tokyo-2013_spring_okuwaki-20-320.jpg)
![?その他プラグインの設定で管理画面の色々な場所に
コードを埋め込める [v1.0.0 new]
?埋め込まれる場所はソースコードで確認できる
?もちろん JS や CSS に限らず HTML とかも可能
?DEMO 2：ページの最上部にブックマーク（リンク
集）的なものを入れる
使い方(4)](https://image.slidesharecdn.com/mtcafetokyo2013springokuwaki-130421204351-phpapp02/85/Mtcafe-tokyo-2013_spring_okuwaki-21-320.jpg)
![「user.js を編集（追記）」メニュー
[v1.0.0]
?user.js の <mt:UserFileAppendText> 部分にその
ページを限定するための if 文が挿入される](https://image.slidesharecdn.com/mtcafetokyo2013springokuwaki-130421204351-phpapp02/85/Mtcafe-tokyo-2013_spring_okuwaki-41-320.jpg)
![$.MTAppGetLabel()
$.MTAppSetLabel()
?$.MTAppSetLabel([
["セレクタ", "旧テキスト", "新テキスト"],
["セレクタ", "旧テキスト", "新テキスト"]
]);
?え？余計面倒じゃん…](https://image.slidesharecdn.com/mtcafetokyo2013springokuwaki-130421204351-phpapp02/85/Mtcafe-tokyo-2013_spring_okuwaki-59-320.jpg)
![検索用 JSON を作る
{"item":[
<mt:entries lastn="0">
<mt:setvarBlock name="item"><mt:entryTitle></mt:setvarBlock>
<mt:setvarBlock name="item{url}"><mt:entryPermalink></mt:setvarBlock>
<mt:setvarBlock name="item{tag}">,<mt:entryTags glue=","><mt:tagName></mt:entryTags>,</
mt:setvarBlock>
<mt:setvarBlock name="item{keyword}">,<mt:entryKeywords>,</mt:setvarBlock>
<mt:setvarBlock name="item{body}"><mt:entryBody remove_html="1" regex_replace="/n?t/g",""></
mt:setvarBlock>
<mt:setvarBlock name="item{more}"><mt:entryMore remove_html="1" regex_replace="/n?t/g",""></
mt:setvarBlock>
<mt:var name="item" to_json="1"><mt:unless __last__>,</mt:unless __last__>
</mt:entries>
]}](https://image.slidesharecdn.com/mtcafetokyo2013springokuwaki-130421204351-phpapp02/85/Mtcafe-tokyo-2013_spring_okuwaki-78-320.jpg)
Mtcafe tokyo 2013_spring_okuwaki
- 1. Movable Typeの実践的な 管理画面カスタマイズ 検索カスタマイズ bit part 奥脇知宏（蔼迟颈苍测产别补苍蝉）
- 3. 自己紹介 ?奥脇知宏 おくわきともひろ ?bit part mersy & tinybeans ?かたつむりくんのWWW
- 4. 自己紹介 ?PowerCMS Partner SOHO ?ProNet SOHO ?Movable Type 5.1 プロの現場の仕事術 （毎日コミュニケーションズ）
- 6. ?alt-tmplディレクトリにカスタマイズしたテンプレート を入れると、そのテンプレートが優先的に適用される MTの管理画面のテンプレート構造の理解が必要 MTの管理画面のカスタマイズ方法(1)
- 8. 管理画面のカスタマイズに関する情報 ? 『Movable Type 5 プロフェッショナルガイド』 荒木勇次郎（小粋空間） ? MTの管理画面カスタマイズの基本 - The blog of H.Fujimoto http://www.h-fj.com/blog/archives/2009/11/09-103804.php ? Movable Type管理画面の「壊れにくい」カスタマ イズのために。 - Junnama Online http://junnama.alfasado.net/online/2008/06/mt_6.html
- 10. MTAppjQuery
- 11. MTAppjQueryとは ?読み方（えむてぃーあっぷじぇぃくえりー） ?Movable Type 5 の管理画面を jQuery でカスタマ イズするためのプラグイン ?Perl、YAML が不要、alt-tmpl より手軽 ?日頃 MT のテンプレートやフロントエンドをやって いるWebデザイナー?コーダーのためのプラグイン
- 12. インストール tinybeans/mt-plugin-MTAppjQuery · GitHub https://github.com/tinybeans/mt-plugin-MTAppjQuery
- 15. 使い方
- 17. v1.0.0 から mt-static/plugins/MTAppjQuery 内の ディレクトリ構造が変更になりました m(_ _)m ↓ 編集予定の user.js 等を user-?les ディレクトリ にまとめた ↓ プラグインのバージョンアップが心なしか 楽になるはず… 注意
- 18. ?インデックステンプレートで user.js、user.css を 作成してカスタマイズ [v1.0.0 new] 使い方(2)
- 19. DEMO 1 user.js と user.css のインストール
- 20. ?プラグインの設定で user.js の URL を指定する [v1.0.0 new] 使い方(3) ?任意のウェブサイトやブログを自由にグルーピングし て共通のカスタマイズを適用できる
- 21. ?その他プラグインの設定で管理画面の色々な場所に コードを埋め込める [v1.0.0 new] ?埋め込まれる場所はソースコードで確認できる ?もちろん JS や CSS に限らず HTML とかも可能 ?DEMO 2：ページの最上部にブックマーク（リンク 集）的なものを入れる 使い方(4)
- 23. ?mtappVars 管理画面のカスタマイズに必要な情報が入った変数 ?$.MTAppDebug() mtappVars の値をソースコードを見ずに確認できる ?開発中は $.MTAppDebug() を適用しておくと便利 mtappVars と $.MTAppDebug()
- 24. DEMO 3 mtappVars と $.MTAppDebug()
- 25. 机能ダイジェスト
- 40. 特定のページだけにカスタマイズを 適用させる方法 ?$.MTAppBatchEditCategory() や $.MTAppSortableBatchEdit()はブログ記事の一括 編集画面だけで使えればいい ?今までのバージョンは if (mtappVars.screen_id == 'batch-edit-entry' && mtappVars.scope_type == 'blog' && mtappVars.type == 'entry') { ... } こんな条件分岐を mtappVars を頼りに書いてた…
- 41. 「user.js を編集（追記）」メニュー [v1.0.0] ?user.js の <mt:UserFileAppendText> 部分にその ページを限定するための if 文が挿入される
- 58. $.MTAppGetLabel() $.MTAppSetLabel() ?ラベルを変更するためだけに $.MTAppCustomize() を使うのはちょっと面倒 ?ラベル名の変更は１箇所で書きたい
- 59. $.MTAppGetLabel() $.MTAppSetLabel() ?$.MTAppSetLabel([ ["セレクタ", "旧テキスト", "新テキスト"], ["セレクタ", "旧テキスト", "新テキスト"] ]); ?え？余計面倒じゃん…
- 63. jquery_ready.js ?jquery.js の直後に読み込まれる ?例えば、sort-enable クラスを除去したりする など、デフォルトのライブラリを適用させない ようにするのに便利
- 67. その他の機能 ?$(foo).notClasses() - 複数のclassがない場合はtrue ?$(foo).hasClasses() - 複数のclassがない場合はtrue ?$(foo).insertAtCaret() - テキストエリアのカーソルの位置に文字列を 入力
- 68. その他の機能 ?$(foo).insertListingColum() - 一覧画面の項目を増やす ?$(foo).noScroll() - 要素をスクロールさせない ?$.toInt() - 整数にする
- 69. その他の機能 ?$.zeroPad() - ゼロで埋める ?$.digit(num, space) - 1桁数字を 01 にしたり 半角スペース1 にし たりする
- 70. その他の機能 ?$.fn.MTAppCheckCategoryCount() - 指定した数のカテゴリが選択されているか チェックする ?$.MTAppDuplicate() - ブログ記事を複製する
- 74. ?exibleSearch.js とは ?あらかじめ作成しておいた JSON ファイルを 検索することにより、柔軟で高速な Ajax 検索 を実現する jQuery プラグイン ?ページ送りや検索項目の絞り込みなどにも対応 ?ブラウザの「戻る」「進む」の動作にも対応 ? http://www.tinybeans.net/blog/2010/12/22-230131.html
- 76. ファイルの読み込み <link rel="stylesheet" href="/?exibleSearch/?exibleSearch.css" type="text/css" /> <script type="text/javascript" src=/slideshow/mtcafe-tokyo-2013springokuwaki/19471953/"http:/ajax.googleapis.com/ ajax/libs/jquery/1.8/jquery.min.js"></script> <script type="text/javascript" src="/?exibleSearch/ hashchange.js"></script> <script type="text/javascript" src="/?exibleSearch/ ?exibleSearch.min.js"></script>
- 77. 検索用 JSON を作る ??exibleSearch.js で読み込む JSON を Movable Type で出力する http://www.tinybeans.net/blog/2010/12/22-230131.html
- 78. 検索用 JSON を作る {"item":[ <mt:entries lastn="0"> <mt:setvarBlock name="item"><mt:entryTitle></mt:setvarBlock> <mt:setvarBlock name="item{url}"><mt:entryPermalink></mt:setvarBlock> <mt:setvarBlock name="item{tag}">,<mt:entryTags glue=","><mt:tagName></mt:entryTags>,</ mt:setvarBlock> <mt:setvarBlock name="item{keyword}">,<mt:entryKeywords>,</mt:setvarBlock> <mt:setvarBlock name="item{body}"><mt:entryBody remove_html="1" regex_replace="/n?t/g",""></ mt:setvarBlock> <mt:setvarBlock name="item{more}"><mt:entryMore remove_html="1" regex_replace="/n?t/g",""></ mt:setvarBlock> <mt:var name="item" to_json="1"><mt:unless __last__>,</mt:unless __last__> </mt:entries> ]}
- 79. 検索ボックスの設置 ?divだけ用意すれば ?exibleSearch で検索ボッ クスと検索ボタンを書き出してくれる ?すでにある検索ボックスを使ってもOK ?今回は <div id= ?exibleSearch-container ></div>
- 80. ?exibleSearch.js を実行 <div id= ?exibleSearch-container ></div> <script type="text/javascript"> (function($){ $("#?exibleSearch-container").?exibleSearch({ resultTargetId: "index-main", loadingImgPath: "/blog02/?exibleSearch/loading.gif", searchDataPath: "/blog02/search_data.js" }); })(jQuery); </script>
- 81. selectFields オプション re?neFields オプション ? selectFields : 検索するフィールドを限定する ? re?neFields : 複数のAND条件を組み合わせる ? re?neFields : { "key1":"key1の表示名", "key2":"key2の表示名", "key3":"key3の表示名" } => <option value= key1 > key1の表示名 </option>