Movable Type カスタムフィールドのまとめ

6,736 views

Published on

MTDDC Meetup TOKYO 2014での発表スライドです。

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,736
On SlideShare
0
From Embeds
0
Number of Embeds
362
Actions
Shares
0
Downloads
11
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Movable Type カスタムフィールドのまとめ

  1. 1. カスタムフィールドのまとめ
  2. 2. いつもご静聴ありがとうございます
  3. 3. プロフィール
  4. 4. 「Movable Type 5プロフェッショナルガイド」はまだ売ってます http://www.shinanobook.com/genre/book/662
  5. 5. カスタムフィールドの作成
  6. 6. 作成画面
  7. 7. 必須フィールド
  8. 8. •カスタムフィールドを使うオ ブジェクトを設定 •「記事」を選択すれば記事 編集画面にカスタムフィー ルドを表示 •「画像」を選択すればアイテ ム(画像)編集画面にカスタ ムフィールドを表示 •後から変更不可 システムオブジェクト
  9. 9. •カスタムフィールドの名前 •編集画面のカスタムフィー ルドに設定した内容を表示 •異なるカスタムフィールドに 同じ名前をつけることも可 名前
  10. 10. •カスタムフィールドの説明 •編集画面のカスタムフィー ルドに設定した内容を表示 説明
  11. 11. •カスタムフィールドの種類 •「テキスト」を選択すれば編 集画面にテキストフィールド を表示 •後から変更不可 種類
  12. 12. •種類から「ドロップダウン」「ラジ オボタン」選択時にカンマ区切 りで選択する値を設定 オプション(1/3) <select name="customfield_cfselect"> <option value="東京">東京</option> <option value="名古屋">名古屋</option> <option value="大阪">大阪</option> </select>
  13. 13. オプション(2/3) 「tokyo=東京,nagoya=名古屋,osaka=大阪」と入力すれば 表示値と保存値の設定が可能 <select name="customfield_cfselect"> <option value="tokyo">東京</option> <option value="nagoya">名古屋</option> <option value="osaka">大阪</option> </select> 参考:http://www.h-fj.com/blog/archives/2014/02/07-140756.php
  14. 14. •「日付と時刻」選択時に表示 •「日付と時刻」「日付」「時刻」 のいずれかを選択 オプション(3/3)
  15. 15. •カスタムフィールドの入力を 必須にする場合にチェック チェックは外せない 必須を示すアスタリスク •編集時、値を 設定して保 存しないとエ ラーになる 必須 強制表示
  16. 16. •カスタムフィールドを表示し たときのデフォルト値となる 内容を設定 既定値
  17. 17. •定義したカスタムフィールド を一意に決めるキー •MT内で重複しないこと •大文字/小文字は区別され ない(データベース登録時 にすべて小文字に正規化) •後述のテンプレートでも使 用 ベースネーム(1/2)
  18. 18. テンプレートタグ(1/2) •定義したカスタムフィールド の値をテンプレート上で利 用するためのタグ •大文字/小文字は区別しな い(DBには入力したままの 文字列で登録) •システムとウェブサイトまた はブログで重複できない →次スライド
  19. 19. システム ブログA ブログB テンプレートタグ(2/2) テンプレートタグ「ABC」 ウェブサイト テンプレートタグ「ABC」 テンプレートタグ「ABC」 テンプレートタグ「ABC」 ベースネームが同一であればOK NG ベースネームが同一であればOK NG
  20. 20. カテゴリ・フォルダのひもづけ
  21. 21. 機能 記事編集画面で特定のカテゴリ・フォルダ選択時に 特定のカスタムフィールドを表示
  22. 22. ①-1 カスタムフィールド編集画面から設定
  23. 23. ①-2 カテゴリ編集画面から設定
  24. 24. ②カテゴリ選択でカスタムフィールドを表示 表示
  25. 25. その他 • ひもづけデータはカテゴリID(カンマ区切り)でデータ ベースに保存 • 一つのカスタムフィールドにつき256文字までしか対応 していません(MT6公式ドキュメント) →確認したところ、vclob(mediumtext)に保持している ので16,777,215バイトまで可能?
  26. 26. カスタムフィールドの設定レベル
  27. 27. カスタムフィールドの設定レベル • MT内のすべてのウェブサイト・ブログで使いたい場合はシ ステムレベルで定義 • ウェブサイト・ブログ別に使いたい場合はウェブサイトまた はブログレベルで定義
  28. 28. システム ブログA ブログB カスタムフィールド「ABC」を作成 カスタムフィールド「YYY」を作成 カスタムフィールド「ZZZ」を作成 ブログAのカスタムフィールド ABC YYY ブログBのカスタムフィールド ABC ZZZ ウェブサイト カスタムフィールド「XXX」を作成 ウェブサイトのカスタムフィールド ABC XXX レベル別の使用可能範囲
  29. 29. データベース
  30. 30. テーブル名:mt_field mt_field id obj_type name 100 entry テキスト type default basename text cftext1 tag こんにちはEntryCFText1
  31. 31. mt_fieldのフィールド名と値 ・テキスト:text ・テキスト(複数行):textarea ・ラジオボタン:radio ・チェックボックスcheckbox ・ドロップダウン:select ・アイテム:file 入力フォームフィールド名 (ブログID) blog_id システムオブジェクトobj_type 名前name 説明description 種類type デフォルト値default オプションoptions 必須required ベースネームbasename タグtag ・記事:entry ・ウェブページ:page ・カテゴリ:category ・フォルダ:folder ・コメント:comment ・アイテム:file ・オーディオ:audio ・ビデオ:video ・画像:image ・テンプレート:template ・ブログ:blog ・ユーザー:author ・オーディオ:audio ・ビデオ:video ・画像:image ・URL:url ・日付と時刻:datetime ・埋め込みオブジェクト:embed ・日付と時刻:datetime/日付:date/時刻:time
  32. 32. テーブル名:mt_entry_meta mt_entry id title text 100 test テストです mt_entry_meta entry_id type vchar_idx 2 field.cftext1 あいうえお
  33. 33. mt_entry_metaのフィールド名とカスタムフィールドの対応 フィールド名フィールドの意味カスタムフィールドの種類 vchar 文字列型URL vchar_idx 文字列型テキスト、ドロップダウン、ラジオボタン vdatetime 日付型 vdatetime_idx 日付型日付と時刻 vinteger 整数型 vinteger_idx 整数型チェックボックス vfloat 浮動少数点型 vfloat_idx 浮動少数点型 vblob バイナリー・ラージ・オブジェクト vclob 文字ラージ・オブジェクトテキスト(複数行)、埋め込みオブジェクト、 アイテム、ビデオ、オーディオ、画像 定義CustomFields::App::CMS::load_customfield_types()
  34. 34. テーブル名:mt_category_meta mt_category id label 1 cat1 mt_category_meta category_id type vclob 1 show_fields 100 カスタムフィールドのID
  35. 35. テンプレートタグ・モディファイア
  36. 36. 基本 カスタムフィールド用 テンプレートタグ <$mt:EntryCFText1$>
  37. 37. 記事カスタムフィールドの特定のデータを表示 <mt:Entries> <mt:if tag="EntryCFText1"> <$mt:EntryCFText1$> </mt:if> </mt:Entries> 注:値が空または「0」のときはカスタムフィールドを表示しない
  38. 38. 値が「0」の場合でもカスタムフィールドを表示したい <mt:if tag="EntryCFText1" ne=""> <p><$mt:EntryCFText1$></p> </mt:if> <mt:ifNonEmpty tag="EntryCFText1"> <p><$mt:EntryCFText1$></p> </mt:ifNonEmpty>
  39. 39. 記事カスタムフィールドの入力データをすべて表示 <mt:Entries> <mt:EntryCustomFields> <mt:if name="__first__"><dl></mt:if> <dt><$mt:CustomFieldName$></dt> <dd><$mt:CustomFieldValue$></dd> <mt:if name="__first__"></dl></mt:if> </mt:EntryCustomFields> </mt:Entries>
  40. 40. カスタムフィールドの特定の画像を出力 <mt:Entries> <mt:if tag="EntryCFImage"> <mt:EntryCFImageAsset> <img src="<$mt:AssetURL$>" /> </mt:EntryCFImageAsset> </mt:if> </MTEntries> 画像のカスタムフィールド作成時に 「MTEntryCFImageAsset」というタグが自動生成され る(厳密にはinit_app) CustomFields::Util::install_field_tags()
  41. 41. カスタムフィールドのすべての画像を出力 <mt:Entries> <mt:EntryCustomFields> <mt:CustomFieldAsset> <img src="<$mt:AssetURL$>" /> </mt:CustomFieldAsset> </mt:EntryCustomFields> </MTEntries>
  42. 42. 記事の記事画像とカスタムフィールド画像の振り分け <$mt:SetVar name="undef(cf_asset_ids)"$> <mt:EntryImageAsset> <$mt:AssetID setvar="key"$> <$mt:SetVar name="cf_asset_ids{$key}" value="1"$> </mt:EntryImageAsset> <mt:EntryAssets> <$mt:AssetID setvar="key"$> <mt:if name="cf_asset_ids{$key}"> <$mt:AssetURL$> <mt:else> <$mt:AssetURL$> </mt:if> </mt:EntryAssets> カスタムフィールド画像 記事画像
  43. 43. カスタムフィールドの値でソート <mt:Entries sort_by="field:cftext1"> : </mt:Entries> ベースネームを設定 使えるのはブログ記事とウェブページのみ 内部処理で「field.cftext1」に変換→ mt_entry_metaテーブルで使用
  44. 44. カスタムフィールドの値を数値としてソート <mt:Entries> <mt:SetVarBlock name="title"><$mt:EntryTitle$></mt:SetVarBlock> <mt:SetVarBlock name="entries{$title}"><$mt:EntryCFText1$></mt:SetVarBlock> </mt:Entries> <mt:Loop name="entries" sort_by="value numeric"> <$mt:GetVar name="__key__"$> <$mt:GetVar name="__value__"$> </mt:Loop> 参考URL:http://www.prartweb.com/blog/2011/04/mt-customfield-sort.php またはNumericCustomFieldsプラグインを導入
  45. 45. 特定のカスタムフィールドの値で記事を抽出(1/2) <mt:Entries field:cftext1="100"> : </mt:Entries> ベースネームを設定 「field:xxx=""」はひとつだけ(現状複数フィルタは未対応) 使えるのはブログ記事とウェブページのみ
  46. 46. 特定のカスタムフィールドの値で記事を抽出(2/2) ブログAにブログBの「cfcheckbox="1"」の記事だけを表示 ブログAのテンプレート <mt:Entries include_blogs="3" field:cfcheckbox="1"> : </mt:Entries> ブログBのID ブログBのフィルタ条件
  47. 47. 記事カスタムフィールドの入力フォームをすべて表示 <mt:Entries> <mt:EntryCustomFields> <$mt:CustomFieldHTML$> </mt:EntryCustomFields> </mt:Entries>
  48. 48. 記事カスタムフィールドの特定の入力フォームを表示 <mt:Entries> <mt:EntryCustomFields> <mt:if tag="CustomFieldBasename" eq="cftext1"> <$mt:CustomFieldHTML$> </mt:if> </mt:EntryCustomFields> </mt:Entries>
  49. 49. HTML
  50. 50. カスタムフィールドのフォーム(例:テキスト) <input type="text" id="customfield_cftext" name="customfield_cftext" value="" /> 固定文字列ベースネーム
  51. 51. 日付と時刻のフォーム <input type="text" id="d_customfield_cfdate" name="d_customfield_cfdate" value="" /> <input type="hidden" id="t_customfield_cfdate" name="t_customfield_cfdate" value="" /> <input type="hidden" id="d_customfield_cftime" name="d_customfield_cftime" value="" /> <input type="text" value="" name="t_customfield_cftime" /> <input type="text" id="d_customfield_cfdatetime" name="d_customfield_cfdatetime" value="" /> <input type="text" name="t_customfield_cfdatetime" value="" /> 日付を示す 日付 時刻 日付と時刻 時刻を示す
  52. 52. Tips・関連プラグイン
  53. 53. カンマ区切りのカスタムフィールドデータを処理したい Split http://www.koikikukan.com/archives/2009/01/20-015555.php <mt:Entries> <$mt:EntryCFText1 split="," setvar="list"$> <mt:loop name="list"> <mt:SetVarBlock name="entries" key="$__value__"> <$mt:GetVar name="__value__"$>:<a href="<$mt:EntryPermalink$>"><$mt:EntryTitle$></a> </mt:SetVarBlock> </mt:loop> </mt:Entries> <mt:loop name="entries" sort_by="key"> <$mt:GetVar name="__value__"$> </mt:loop>
  54. 54. 管理画面のカスタムフィールドの順番を固定したい MTAppjQueryによるカスタマイズ http://communities.movabletype.jp/2014/02/post-897.html EntryPrefsFixer http://communities.movabletype.jp/plugins/2013/07/entryprefsfixer.html
  55. 55. 1つのカスタムフィールドで複数のデータを扱いたい MoreCustomFieldsなど http://communities.movabletype.jp/2013/10/post-846.html http://communities.movabletype.jp/2013/09/post-838.html
  56. 56. システムのカスタムフィールドでブログ別に表示を変えたい MTAppjQueryによるカスタマイズ http://communities.movabletype.jp/2013/09/post-837.html
  57. 57. カスタムフィールド(複数行)にTinyMCEを適用したい(1/2) TinyMCEField https://github.com/miyanaga/mt-tinymce-field
  58. 58. カスタムフィールド(複数行)にTinyMCEを適用したい(2/2) •プラグインインストール後の新規作成分のみ適用可 •ただしfield_typeを「textarea→richtext」に変更すればOK または MTAppjQueryによるカスタマイズ http://qiita.com/BUN/items/3b924cfcfc0c689553bf
  59. 59. カスタムフィールドの種類を追加するプラグイン MoreCustomFields https://github.com/danwolfgang/mt-plugin-more-custom-fields CustomFieldEx https://plugins.movabletype.jp/solmake/customfieldex.html NumericCustomFields http://www.h-fj.com/blog/archives/2009/02/21-145227.php GoogleMapsCustomField http://www.h-fj.com/blog/archives/2011/01/06-131537.php
  60. 60. MoreCustomFieldsの注意事項 例:画像挿入時にエラー mt-plugin-more-custom-fields-master/plugins/MoreCustomFields/static mt-static/support/plugins/morecustomfields ckeditor/ app.css app.js jquery-ui-1.8.19.custom.min.js コピー ckeditor/ app.css app.js jquery-ui-1.8.19.custom.min.js 新たに作成
  61. 61. カスタムフィールド検索プラグイン SearchEntries http://www.h-fj.com/blog/archives/2010/04/12-092730.php SearchEntryField https://github.com/alfasado/mt-plugin-search-entry-field CustomFieldSearch http://tec.toi-planning.net/mt/customfieldssearch/
  62. 62. カスタムフィールド情報のテンプレートタグを追加するプラグイン SupplementalCFTags http://www.h-fj.com/blog/archives/2014/02/21-133207.php
  63. 63. システム全体の設定を保存するカスタムフィールドを追加するプラグイン CustomConfig https://github.com/alfasado/mt-plugin-customconfig
  64. 64. カスタムフィールドの値でアーカイブパスを作成するプラグイン MappingBasedArchive https://plugins.movabletype.jp/taku_amano/mappingbasedarchive-1.html
  65. 65. 管理画面のパフォーマンス向上プラグイン FastField https://github.com/alfasado/mt-plugin-fastfield
  66. 66. 既存のテーブルにフィールドを追加するプラグイン AnotherCustomFields http://www.h-fj.com/blog/archives/2011/09/02-143708.php •再構築のパフォーマンス良 •システムレベルでの追加
  67. 67. 自作関連プラグイン
  68. 68. CommentCustomFieldプラグイン • コメント投稿フォームで画像のアップロードが可能 http://www.koikikukan.com/archives/2009/08/14-025555.php
  69. 69. EntryEditorプラグイン • 記事ページ上でデータ編集可能 • カスタムフィールドにも対応 http://www.koikikukan.com/movabletype/plugin/EntryEditor/
  70. 70. CustomFieldEditorプラグイン • カスタムフィールド一覧画面でカスタムフィールド作成・修正可能 http://www.koikikukan.com/movabletype/plugin/CustomFieldEditor/
  71. 71. CSVDataImExporterプラグイン • CSV形式で記事データ・カスタムフィールドデータを一気にインポート • データの修正もエクスポート→インポートでOK http://www.koikikukan.com/movabletype/plugin/CSVDataImExporter/
  72. 72. CFDefinitionDataImExporterプラグイン • CSV形式でカスタムフィールド定義を一気にインポート • カスタムフィールド定義の修正もエクスポート→インポートでOK http://www.koikikukan.com/movabletype/plugin/CFDefinitionDataImExporter/
  73. 73. おわり

×