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

Preview:

DESCRIPTION

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

Citation preview

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

いつもご静聴ありがとうございます

プロフィール

「Movable Type 5プロフェッショナルガイド」はまだ売ってます

http://www.shinanobook.com/genre/book/662

カスタムフィールドの作成

作成画面

必須フィールド

•カスタムフィールドを使うオブジェクトを設定

•「記事」を選択すれば記事編集画面にカスタムフィールドを表示

•「画像」を選択すればアイテム(画像)編集画面にカスタムフィールドを表示

•後から変更不可

システムオブジェクト

•カスタムフィールドの名前•編集画面のカスタムフィールドに設定した内容を表示

•異なるカスタムフィールドに同じ名前をつけることも可

名前

•カスタムフィールドの説明•編集画面のカスタムフィールドに設定した内容を表示

説明

•カスタムフィールドの種類•「テキスト」を選択すれば編集画面にテキストフィールドを表示

•後から変更不可

種類

•種類から「ドロップダウン」「ラジオボタン」選択時にカンマ区切りで選択する値を設定

<select name="customfield_cfselect"><option value="東京">東京</option><option value="名古屋">名古屋</option><option value="大阪">大阪</option>

</select>

オプション(1/3)

「tokyo=東京,nagoya=名古屋,osaka=大阪」と入力すれば

表示値と保存値の設定が可能

参考:http://www.h-fj.com/blog/archives/2014/02/07-140756.php

<select name="customfield_cfselect"><option value="tokyo">東京</option><option value="nagoya">名古屋</option><option value="osaka">大阪</option>

</select>

オプション(2/3)

•「日付と時刻」選択時に表示•「日付と時刻」「日付」「時刻」のいずれかを選択

オプション(3/3)

•カスタムフィールドの入力を必須にする場合にチェック

チェックは外せない

必須を示すアスタリスク

•編集時、値を設定して保存しないとエラーになる

必須

強制表示

•カスタムフィールドを表示したときのデフォルト値となる内容を設定

既定値

•定義したカスタムフィールドを一意に決めるキー

•MT内で重複しないこと

•大文字/小文字は区別されない(データベース登録時にすべて小文字に正規化)

•後述のテンプレートでも使用

ベースネーム(1/2)

•定義したカスタムフィールドの値をテンプレート上で利用するためのタグ

•大文字/小文字は区別しない(DBには入力したままの

文字列で登録)•システムとウェブサイトまたはブログで重複できない→次スライド

テンプレートタグ(1/2)

ブログA

システム

ブログB

テンプレートタグ「ABC」

ウェブサイト

テンプレートタグ「ABC」

テンプレートタグ「ABC」

テンプレートタグ「ABC」

ベースネームが同一であればOK

NG

ベースネームが同一であればOK

NG

テンプレートタグ(2/2)

カテゴリ・フォルダのひもづけ

機能

記事編集画面で特定のカテゴリ・フォルダ選択時に特定のカスタムフィールドを表示

①-1 カスタムフィールド編集画面から設定

①-2 カテゴリ編集画面から設定

②カテゴリ選択でカスタムフィールドを表示

表示

その他

• ひもづけデータはカテゴリID(カンマ区切り)でデータ

ベースに保存

• 一つのカスタムフィールドにつき256文字までしか対応していません(MT6公式ドキュメント)→確認したところ、vclob(mediumtext)に保持しているので16,777,215バイトまで可能?

カスタムフィールドの設定レベル

• MT内のすべてのウェブサイト・ブログで使いたい場合はシ

ステムレベルで定義

• ウェブサイト・ブログ別に使いたい場合はウェブサイトまたはブログレベルで定義

カスタムフィールドの設定レベル

ブログA

システム

ブログB

カスタムフィールド「ABC」を作成

カスタムフィールド「YYY」を作成

カスタムフィールド「ZZZ」を作成

ブログAのカスタムフィールド

ABC YYY

ABC ZZZブログBのカスタムフィールド

ウェブサイト

カスタムフィールド「XXX」を作成

ウェブサイトのカスタムフィールド

ABC XXX

レベル別の使用可能範囲

データベース

テーブル名:mt_field

mt_fieldid obj_type name

100 entry テキスト

text cftext1

defaulttype basename

こんにちは EntryCFText1

tag

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

テーブル名:mt_entry_meta

mt_entry

mt_entry_meta

id title text

100 test テストです

2 あいうえお

typeentry_id vchar_idx

field.cftext1

mt_entry_metaのフィールド名とカスタムフィールドの対応

フィールド名 フィールドの意味 カスタムフィールドの種類

vchar 文字列型 URLvchar_idx 文字列型 テキスト、ドロップダウン、ラジオボタン

vdatetime 日付型

vdatetime_idx 日付型 日付と時刻

vinteger 整数型

vinteger_idx 整数型 チェックボックス

vfloat 浮動少数点型

vfloat_idx 浮動少数点型

vblob バイナリー・ラージ・オブジェクト

vclob 文字ラージ・オブジェクト テキスト(複数行)、埋め込みオブジェクト、アイテム、ビデオ、オーディオ、画像

定義 CustomFields::App::CMS::load_customfield_types()

テーブル名:mt_category_meta

mt_category

mt_category_meta

id label

1 cat1

1 100

typecategory_id vclob

show_fields

カスタムフィールドのID

テンプレートタグ・モディファイア

基本

<$mt:EntryCFText1$>

カスタムフィールド用テンプレートタグ

記事カスタムフィールドの特定のデータを表示

<mt:Entries><mt:if tag="EntryCFText1">

<$mt:EntryCFText1$></mt:if>

</mt:Entries>

注:値が空または「0」のときはカスタムフィールドを表示しない

値が「0」の場合でもカスタムフィールドを表示したい

<mt:if tag="EntryCFText1" ne=""><p><$mt:EntryCFText1$></p>

</mt:if>

<mt:ifNonEmpty tag="EntryCFText1"><p><$mt:EntryCFText1$></p>

</mt:ifNonEmpty>

記事カスタムフィールドの入力データをすべて表示

<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>

カスタムフィールドの特定の画像を出力

<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()

カスタムフィールドのすべての画像を出力

<mt:Entries><mt:EntryCustomFields>

<mt:CustomFieldAsset><img src="<$mt:AssetURL$>" />

</mt:CustomFieldAsset></mt:EntryCustomFields>

</MTEntries>

記事の記事画像とカスタムフィールド画像の振り分け

<$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>

記事画像

カスタムフィールド画像

カスタムフィールドの値でソート

<mt:Entries sort_by="field:cftext1">:

</mt:Entries>

内部処理で「field.cftext1」に変換→ mt_entry_metaテーブルで使用

使えるのはブログ記事とウェブページのみ

ベースネームを設定

カスタムフィールドの値を数値としてソート

<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>

またはNumericCustomFieldsプラグインを導入

参考URL:http://www.prartweb.com/blog/2011/04/mt-customfield-sort.php

特定のカスタムフィールドの値で記事を抽出(1/2)

<mt:Entries field:cftext1="100">:

</mt:Entries>

使えるのはブログ記事とウェブページのみ

ベースネームを設定

「field:xxx=""」はひとつだけ(現状複数フィルタは未対応)

ブログAにブログBの「cfcheckbox="1"」の記事だけを表示

<mt:Entries include_blogs="3" field:cfcheckbox="1">:

</mt:Entries>

ブログBのID ブログBのフィルタ条件

ブログAのテンプレート

特定のカスタムフィールドの値で記事を抽出(2/2)

記事カスタムフィールドの入力フォームをすべて表示

<mt:Entries><mt:EntryCustomFields>

<$mt:CustomFieldHTML$></mt:EntryCustomFields>

</mt:Entries>

記事カスタムフィールドの特定の入力フォームを表示

<mt:Entries><mt:EntryCustomFields>

<mt:if tag="CustomFieldBasename" eq="cftext1"><$mt:CustomFieldHTML$>

</mt:if></mt:EntryCustomFields>

</mt:Entries>

HTML

カスタムフィールドのフォーム(例:テキスト)

<input type="text"id="customfield_cftext" name="customfield_cftext" value="" />

ベースネーム固定文字列

日付と時刻のフォーム

<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="" />

日付

時刻

日付と時刻

時刻を示す

Tips・関連プラグイン

カンマ区切りのカスタムフィールドデータを処理したい

<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>

Splithttp://www.koikikukan.com/archives/2009/01/20-015555.php

管理画面のカスタムフィールドの順番を固定したい

MTAppjQueryによるカスタマイズ

http://communities.movabletype.jp/2014/02/post-897.htmlEntryPrefsFixerhttp://communities.movabletype.jp/plugins/2013/07/entryprefsfixer.html

1つのカスタムフィールドで複数のデータを扱いたい

MoreCustomFieldsなどhttp://communities.movabletype.jp/2013/10/post-846.htmlhttp://communities.movabletype.jp/2013/09/post-838.html

システムのカスタムフィールドでブログ別に表示を変えたい

MTAppjQueryによるカスタマイズhttp://communities.movabletype.jp/2013/09/post-837.html

カスタムフィールド(複数行)にTinyMCEを適用したい(1/2)

TinyMCEFieldhttps://github.com/miyanaga/mt-tinymce-field

カスタムフィールド(複数行)にTinyMCEを適用したい(2/2)

•プラグインインストール後の新規作成分のみ適用可•ただしfield_typeを「textarea→richtext」に変更すればOK

または

MTAppjQueryによるカスタマイズhttp://qiita.com/BUN/items/3b924cfcfc0c689553bf

カスタムフィールドの種類を追加するプラグイン

MoreCustomFieldshttps://github.com/danwolfgang/mt-plugin-more-custom-fieldsCustomFieldExhttps://plugins.movabletype.jp/solmake/customfieldex.htmlNumericCustomFieldshttp://www.h-fj.com/blog/archives/2009/02/21-145227.phpGoogleMapsCustomFieldhttp://www.h-fj.com/blog/archives/2011/01/06-131537.php

MoreCustomFieldsの注意事項

mt-static/support/plugins/morecustomfields

mt-plugin-more-custom-fields-master/plugins/MoreCustomFields/staticckeditor/app.cssapp.jsjquery-ui-1.8.19.custom.min.js

ckeditor/app.cssapp.jsjquery-ui-1.8.19.custom.min.js

コピー

新たに作成

例:画像挿入時にエラー

カスタムフィールド検索プラグイン

SearchEntrieshttp://www.h-fj.com/blog/archives/2010/04/12-092730.phpSearchEntryFieldhttps://github.com/alfasado/mt-plugin-search-entry-fieldCustomFieldSearchhttp://tec.toi-planning.net/mt/customfieldssearch/

カスタムフィールド情報のテンプレートタグを追加するプラグイン

SupplementalCFTagshttp://www.h-fj.com/blog/archives/2014/02/21-133207.php

システム全体の設定を保存するカスタムフィールドを追加するプラグイン

CustomConfighttps://github.com/alfasado/mt-plugin-customconfig

カスタムフィールドの値でアーカイブパスを作成するプラグイン

MappingBasedArchivehttps://plugins.movabletype.jp/taku_amano/mappingbasedarchive-1.html

管理画面のパフォーマンス向上プラグイン

FastFieldhttps://github.com/alfasado/mt-plugin-fastfield

既存のテーブルにフィールドを追加するプラグイン

AnotherCustomFieldshttp://www.h-fj.com/blog/archives/2011/09/02-143708.php

•再構築のパフォーマンス良•システムレベルでの追加

自作関連プラグイン

CommentCustomFieldプラグイン

• コメント投稿フォームで画像のアップロードが可能

http://www.koikikukan.com/archives/2009/08/14-025555.php

EntryEditorプラグイン

• 記事ページ上でデータ編集可能

• カスタムフィールドにも対応

http://www.koikikukan.com/movabletype/plugin/EntryEditor/

CustomFieldEditorプラグイン

• カスタムフィールド一覧画面でカスタムフィールド作成・修正可能

http://www.koikikukan.com/movabletype/plugin/CustomFieldEditor/

CSVDataImExporterプラグイン

• CSV形式で記事データ・カスタムフィールドデータを一気にインポート

• データの修正もエクスポート→インポートでOK

http://www.koikikukan.com/movabletype/plugin/CSVDataImExporter/

CFDefinitionDataImExporterプラグイン

• CSV形式でカスタムフィールド定義を一気にインポート

• カスタムフィールド定義の修正もエクスポート→インポートでOK

http://www.koikikukan.com/movabletype/plugin/CFDefinitionDataImExporter/

おわり