Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Mtcafe tokyo 2013_spring_okuwaki

5,614 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!!

×