Mtcafe tokyo 2013_spring_okuwaki
•
6 likes•5,765 views
Movable Type の実践的な管理画面のカスタマイズ・検索カスタマイズ
More Related Content
What's hot
What's hot (20)
Similar to Mtcafe tokyo 2013_spring_okuwaki
Similar to Mtcafe tokyo 2013_spring_okuwaki (20)
Mtcafe tokyo 2013_spring_okuwaki
- 1. Movable Typeの実践的な 管理画面カスタマイズ 検索カスタマイズ bit part 奥脇知宏（@tinybeans）
- 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-files ディレクトリ にまとめた ↓ プラグインのバージョンアップが心なしか 楽になるはず… 注意
- 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. flexibleSearch.js とは •あらかじめ作成しておいた JSON ファイルを 検索することにより、柔軟で高速な Ajax 検索 を実現する jQuery プラグイン •ページ送りや検索項目の絞り込みなどにも対応 •ブラウザの「戻る」「進む」の動作にも対応 • http://www.tinybeans.net/blog/2010/12/22-230131.html
- 76. ファイルの読み込み <link rel="stylesheet" href="/flexibleSearch/flexibleSearch.css" type="text/css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ ajax/libs/jquery/1.8/jquery.min.js"></script> <script type="text/javascript" src="/flexibleSearch/ hashchange.js"></script> <script type="text/javascript" src="/flexibleSearch/ flexibleSearch.min.js"></script>
- 77. 検索用 JSON を作る •flexibleSearch.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{title}"><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だけ用意すれば flexibleSearch で検索ボッ クスと検索ボタンを書き出してくれる •すでにある検索ボックスを使ってもOK •今回は <div id= flexibleSearch-container ></div>
- 80. flexibleSearch.js を実行 <div id= flexibleSearch-container ></div> <script type="text/javascript"> (function($){ $("#flexibleSearch-container").flexibleSearch({ resultTargetId: "index-main", loadingImgPath: "/blog02/flexibleSearch/loading.gif", searchDataPath: "/blog02/search_data.js" }); })(jQuery); </script>
- 81. selectFields オプション refineFields オプション • selectFields : 検索するフィールドを限定する • refineFields : 複数のAND条件を組み合わせる • refineFields : { "key1":"key1の表示名", "key2":"key2の表示名", "key3":"key3の表示名" } => <option value= key1 > key1の表示名 </option>