Mtcafe tokyo 2013_spring_okuwaki

5,451 views

Published on

Movable Type の実践的な管理画面のカスタマイズ・検索カスタマイズ

  • Be the first to comment

Mtcafe tokyo 2013_spring_okuwaki

  1. 1. Movable Typeの実践的な管理画面カスタマイズ検索カスタマイズbit part 奥脇知宏(@tinybeans)
  2. 2. アジェンダ•MTAppjQueryを使った管理画面のカスタマイズ•FlexibleSearch.jsを使った高速検索
  3. 3. 自己紹介•奥脇知宏おくわきともひろ•bit partmersy & tinybeans•かたつむりくんのWWW
  4. 4. 自己紹介•PowerCMS PartnerSOHO•ProNet SOHO•Movable Type 5.1プロの現場の仕事術(毎日コミュニケーションズ)
  5. 5. Movable Typeの管理画面のカスタマイズ
  6. 6. •alt-tmplディレクトリにカスタマイズしたテンプレートを入れると、そのテンプレートが優先的に適用されるMTの管理画面のテンプレート構造の理解が必要MTの管理画面のカスタマイズ方法(1)
  7. 7. •プラグインでカスタマイズ•3つのコールバック用フックポイント•template_source(ソースを書換え)•template_param(DOMのような操作)•template_output(出力されたHTMLの書換え)MTの管理画面のカスタマイズ方法(2)
  8. 8. 管理画面のカスタマイズに関する情報• 『Movable Type 5 プロフェッショナルガイド』荒木勇次郎(小粋空間)• MTの管理画面カスタマイズの基本- The blog of H.Fujimotohttp://www.h-fj.com/blog/archives/2009/11/09-103804.php• Movable Type管理画面の「壊れにくい」カスタマイズのために。 - Junnama Onlinehttp://junnama.alfasado.net/online/2008/06/mt_6.html
  9. 9. しかし、いずれもちょっと敷居が高い…そこで
  10. 10. MTAppjQuery
  11. 11. MTAppjQueryとは•読み方(えむてぃーあっぷじぇぃくえりー)•Movable Type 5 の管理画面を jQuery でカスタマイズするためのプラグイン•Perl、YAML が不要、alt-tmpl より手軽•日頃 MT のテンプレートやフロントエンドをやっているWebデザイナー・コーダーのためのプラグイン
  12. 12. インストールtinybeans/mt-plugin-MTAppjQuery · GitHubhttps://github.com/tinybeans/mt-plugin-MTAppjQuery
  13. 13. インストールサーバーにアップロードmt-static/plugins の中の「_MTAppjQuery」は、頭のアンダースコアを削除して「MTAppjQuery」にする
  14. 14. プラグインをアップデートする場合は編集したサーバー上のファイルを上書きしないようにしましょう!注意
  15. 15. 使い方
  16. 16. •サーバーにアップロードしたmt-static/plugins/MTAppjQuery/user-filesの中のファイルを編集してカスタマイズ使い方(1)
  17. 17. v1.0.0 から mt-static/plugins/MTAppjQuery 内のディレクトリ構造が変更になりました m(_ _)m↓編集予定の user.js 等を user-files ディレクトリにまとめた↓プラグインのバージョンアップが心なしか楽になるはず…注意
  18. 18. •インデックステンプレートで user.js、user.css を作成してカスタマイズ [v1.0.0 new]使い方(2)
  19. 19. DEMO 1user.js と user.css のインストール
  20. 20. •プラグインの設定で user.js の URL を指定する[v1.0.0 new]使い方(3)•任意のウェブサイトやブログを自由にグルーピングして共通のカスタマイズを適用できる
  21. 21. •その他プラグインの設定で管理画面の色々な場所にコードを埋め込める [v1.0.0 new]•埋め込まれる場所はソースコードで確認できる•もちろん JS や CSS に限らず HTML とかも可能•DEMO 2:ページの最上部にブックマーク(リンク集)的なものを入れる使い方(4)
  22. 22. 機能ダイジェストの前に大事なこと
  23. 23. •mtappVars管理画面のカスタマイズに必要な情報が入った変数•$.MTAppDebug()mtappVars の値をソースコードを見ずに確認できる•開発中は $.MTAppDebug() を適用しておくと便利mtappVars と $.MTAppDebug()
  24. 24. DEMO 3mtappVars と $.MTAppDebug()
  25. 25. 機能ダイジェスト
  26. 26. $.MTAppCustomize()•ブログ記事・ウェブページ編集画面をカスタマイズ•フィールドのラベルの変更•ポップアップヒントの設定•えんぴつアイコンのクリックでフィールドを表示・非表示•「表示オプション」に依存しない強制表示
  27. 27. $.MTAppCustomize()旧「概要」旧「キーワード」
  28. 28. $.MTAppMultiCheckbox()•テキスト入力フォームを複数選択チェックボックスに•ちょっとデザインを変えてみたり
  29. 29. $.MTAppFieldSort()•フィールドを並べ替える(カスタムフィールド対応)
  30. 30. DEMO 4$.MTAppCustomize()$.MTAppMultiCheckbox()$.MTAppFieldSort()この3つをまとめて実行してみます。
  31. 31. $.MTAppDialogMsg()•ダイアログ・メッセージを表示する
  32. 32. $(foo).MTAppInlineEdit()•保存された値があると「編集」ボタンが表示される
  33. 33. $(foo).MTAppTooltip()•フィールド全体ではなくピンポイントでヒントを表示させる
  34. 34. $.MTAppNoScrollRightSidebar()•右サイドバーウィジェットをスクロールに追随させる
  35. 35. $.MTAppInCats()•カテゴリによって画面を変えることができる。
  36. 36. DEMO 5ここまでカスタマイズを商品カテゴリ(ID:2)にだけ適用したい。
  37. 37. あまりドキュメント化されてない機能とv1.0.0 に追加された機能ダイジェスト
  38. 38. $.MTAppBatchEditCategory()•ブログ記事・ウェブページ一括編集画面で、カテゴリを一括編集する
  39. 39. $.MTAppSortableBatchEdit()•ブログ記事・ウェブページ一括編集画面で、ドラッグアンドドロップで並び替えて日付を自動変更する•日付を使ってブログ記事を並べ替える疑似的ソート機能•DEMO 6に行く前に
  40. 40. 特定のページだけにカスタマイズを適用させる方法•$.MTAppBatchEditCategory() や$.MTAppSortableBatchEdit()はブログ記事の一括編集画面だけで使えればいい•今までのバージョンはif (mtappVars.screen_id == batch-edit-entry&& mtappVars.scope_type == blog &&mtappVars.type == entry) { ... }こんな条件分岐を mtappVars を頼りに書いてた…
  41. 41. 「user.js を編集(追記)」メニュー[v1.0.0]•user.js の <mt:UserFileAppendText> 部分にそのページを限定するための if 文が挿入される
  42. 42. DEMO 6ブログ記事の一括編集画面で「user.js を編集(追記)」を押してみる
  43. 43. DEMO 7$.MTAppSortableBatchEdit() でトップページの並び順を変える
  44. 44. $.MTApp1clickRebuild()•テンプレート一覧での再構築を効率よく•$.MTAppDebug() と同様に開発中は有効にしておくと良い
  45. 45. DEMO 8$.MTApp1clickRebuild()
  46. 46. $(foo).MTAppRemoveVal()•入力した値を簡単に消す
  47. 47. $(foo).MTAppDateAssist()•今日、明日、明後日の年月日を一発入力
  48. 48. $(foo).MTAppSuggest()•タグ入力補完のような入力支援
  49. 49. $(foo).MTAppDynamicSelect()•値を増やせるドロップダウンリスト
  50. 50. DEMO 9$(foo).MTAppRemoveVal()$(foo).MTAppDateAssist()$(foo).MTAppSuggest()$(foo).MTAppDynamicSelect()
  51. 51. $(foo).MTAppFieldSplit()•1つのフィールドで複数の値をカンマ区切りで入力
  52. 52. $(foo).MTAppNbspGUI()•「1項目ごとに改行してください」をGUIで
  53. 53. $.MTAppTabs()•複数のフィールドをタブでまとめる
  54. 54. DEMO 10$(foo).MTAppFieldSplit()$(foo).MTAppNbspGUI()$.MTAppTabs()
  55. 55. $(foo).MTAppFancyListing()•iframeで指定したファイルを読み込む•jQueryプラグインの Fancybox が必要http://fancybox.net/•またあらかじめ読み込む一覧をインデックステンプレートで作成しておく必要がある
  56. 56. $(foo).MTAppFancyListing()
  57. 57. DEMO 11$(foo).MTAppFancyListing()で関連記事のIDをテキスト入力フォームに入れる
  58. 58. $.MTAppGetLabel()$.MTAppSetLabel()•ラベルを変更するためだけに $.MTAppCustomize()を使うのはちょっと面倒•ラベル名の変更は1箇所で書きたい
  59. 59. $.MTAppGetLabel()$.MTAppSetLabel()•$.MTAppSetLabel([["セレクタ", "旧テキスト", "新テキスト"],["セレクタ", "旧テキスト", "新テキスト"]]);•え?余計面倒じゃん…
  60. 60. $.MTAppGetLabel()$.MTAppSetLabel()ブラウザのJavaScirptコンソールにjQuery.MTAppGetLabel( label );と入力して実行すればOK!
  61. 61. DEMO 12$.MTAppGetLabel()$.MTAppSetLabel()
  62. 62. その他紹介しきれない機能ダイジェスト
  63. 63. jquery_ready.js•jquery.js の直後に読み込まれる•例えば、sort-enable クラスを除去したりするなど、デフォルトのライブラリを適用させないようにするのに便利
  64. 64. その他の機能•$.MTAppTabSpace()- テキストエリアでタブキーを押してもフィールドは移動せずに、半角スペースが入力される。•$(foo).MTAppNumChecker()- 全角数字を半角に変換、半角数字以外の文字を削除、最小値・最大値の設定など
  65. 65. その他の機能•$(foo).MTAppTaxAssist()- 税込み、税抜きを簡単に入力•$.MTAppKeyboardShortcut()- ブログ記事一覧画面でGmailのようなキーボードショートカットで前後に移動
  66. 66. その他の機能•$.MTAppMsg()- MTオリジナルの「保存しました」のようなメッセージを表示•$(foo).MTAppshowHint()- 要素にピンポイントでポップアップヒントを表示
  67. 67. その他の機能•$(foo).notClasses()- 複数のclassがない場合はtrue•$(foo).hasClasses()- 複数のclassがない場合はtrue•$(foo).insertAtCaret()- テキストエリアのカーソルの位置に文字列を入力
  68. 68. その他の機能•$(foo).insertListingColum()- 一覧画面の項目を増やす•$(foo).noScroll()- 要素をスクロールさせない•$.toInt()- 整数にする
  69. 69. その他の機能•$.zeroPad()- ゼロで埋める•$.digit(num, space)- 1桁数字を 01 にしたり 半角スペース1 にしたりする
  70. 70. その他の機能•$.fn.MTAppCheckCategoryCount()- 指定した数のカテゴリが選択されているかチェックする•$.MTAppDuplicate()- ブログ記事を複製する
  71. 71. MTAppjQuery v1.0.0•まもなくリリース•mersy と一緒にせっせとドキュメントを書いてます…
  72. 72. MTAppjQueryはここまで
  73. 73. 高速JavaScript検索flexibleSearch.js
  74. 74. flexibleSearch.js とは•あらかじめ作成しておいた JSON ファイルを検索することにより、柔軟で高速な Ajax 検索を実現する jQuery プラグイン•ページ送りや検索項目の絞り込みなどにも対応•ブラウザの「戻る」「進む」の動作にも対応• http://www.tinybeans.net/blog/2010/12/22-230131.html
  75. 75. ダウンロード•tinybeans/jq-plugin-flexibleSearch ·GitHubhttps://github.com/tinybeans/jq-plugin-flexibleSearch
  76. 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. 77. 検索用 JSON を作る•flexibleSearch.js で読み込む JSON をMovable Type で出力するhttp://www.tinybeans.net/blog/2010/12/22-230131.html
  78. 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. 79. 検索ボックスの設置•divだけ用意すれば flexibleSearch で検索ボックスと検索ボタンを書き出してくれる•すでにある検索ボックスを使ってもOK•今回は<div id= flexibleSearch-container ></div>
  80. 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. 81. selectFields オプションrefineFields オプション• selectFields : 検索するフィールドを限定する• refineFields : 複数のAND条件を組み合わせる• refineFields : {"key1":"key1の表示名","key2":"key2の表示名","key3":"key3の表示名"}=> <option value= key1 > key1の表示名 </option>
  82. 82. ご静聴ありがとうございました。Update me, everyday!!

×