狠狠撸

コンテンツタイプの活用と拡张
2018/6/9
MTDDC Meetup HOKKAIDO 2018
藤本壱

イケメン西畑さんのセッションとお间违えはないですか？

今日のアジェンダ
? コンテンツタイプの概要
? コンテンツタイプの活用事例
? コンテンツタイプの便利な机能
? FreeLayoutContentFieldプラグインのご紹介

自己绍介その1
? 藤本壱（ふじもとはじめ）
? 兵庫県伊丹市出身
? 群馬県前橋市在住
? 2017年都道府県知名度
ランキング第41位
(第1位は北海道) 東京
埼玉
山梨
神奈川
栃木
茨城
千葉
5

自己绍介その2
? ブログはもちろんMovable Type
(Ver.6.3.7ですごめんなさい)
6http://www.h-fj.com/blog/

コンテンツタイプの概要

コンテンツ
? 同じ性質を持つ情報の集まり
? Webやモバイルなどを通して公開?活用
? 例
? 記事(タイトル、日付、文章、カテゴリ、etc.)
? 商品(名前、説明、写真、単価、仕様、etc.)
? 物件(名前、住所、間取り、最寄り駅、設備、etc.)

コンテンツタイプ
? Movable Type 7の新機能
? コンテンツに応じた設計が可能
? 設計を検討することが必要
? 柔軟性が高い
? 各種の項目（コンテンツフィールド）を組み合わせ

コンテンツフィールド
? 1行テキスト
? 複数行テキスト
? 数値
? URL
? 日付と時刻
? 日付
? 時刻
? セレクト
? ラジオボタン
? チェックボックス
? 埋め込みテキスト
? コンテンツタイプ
? アセット
? オーディオ
? ビデオ
? 画像
? カテゴリ
? タグ
? リスト
? テーブル

デモをごらんください

記事＋カスタムフィールドとの違い
? コンテンツタイプではフィールドの組み合わせは自由
(記事に縛られない)
? 複数の分類方法（カテゴリ／タグ）を利用可能
? カテゴリセットを複数定義可能
? 例：物件を「最寄り駅」「間取り」の2種類のカテゴリセットで分
類
? コンテンツタイプ間の関連付けが可能
? 例：書籍と著者

コンテンツタイプの事例

このサイトはフィクションで
はありません。
実在の人物や団体などと大
いに関係があります。

デモサイトの要件
? 俺流訪問ログを日々残したい
? 訪問ログには飲食したもの(メニュー)の写真も載せた
い
? メニューは決まっているので一覧から選択して手軽に
入力したい

デモサイトの構造
? 2つのコンテンツタイプを組み合わせ
コンテンツタイプコンテンツフィールド
訪問ログ
タイトル(1行テキスト)
日付(日付)
本文(複数行テキスト）
メニュー(コンテンツタイプ)
メニュー
名前(1行テキスト)
写真(画像)

コンテンツタイプの便利な机能

テーマとの組み合わせ
? テーマとのエクスポート／インポート
? ありがちなコンテンツタイプの定義をテーマにエクスポートし
て他の案件で流用
? コンテンツタイプの定義をテーマからインポートしてすばやく
利用

プラグインによる拡張
? コンテンツフィールドの種類の追加が可能
? フィールド設定画面の定義
? テンプレートタグの動作の定義
? バリデーションの定義
? etc.

FreeLayoutContentFieldプラグインのご紹
介

コンテンツフィールドの機能は十分？
? フィールドの組み合わせを複数セット追加するような
機能はない
? 例：写真とキャプションの組み合わせを複数回追加

FreeLayoutContentFieldプラグインの概要
? 記事用の「FreeLayoutCustomFieldプラグイン」と同
様の仕組みをコンテンツフィールドでも利用可能
? 1つのコンテンツフィールドに多数のデータをまとめて
保存
? 同一パターンの繰り返し入力が可能
? カスタムフィールド製造業(死語?)の皆様に最適

各店舗の情報の構造
タイトル
店舗
本文
おすすめ
メニュー
地図
名前／値段／コメント／写真
?????
フリーレイアウト型

フリーレイアウト型コンテンツフィールド
項目言語
フィールドの定義 YAML
見た目 HTMLとCSS
動作 JavaScript
? コンテンツフィールドの設定画面で以下を入力
? テンプレートタグでデータを出力

フィールドの定義(YAML)
fields:
name:
type: text
label: 名前
comment:
type: textarea
label: コメント
price:
type: text
label: 値段
photo:
type: image
label: 写真
options:
multiple: 1
sortable: 1

見た目(HTML)
<div class="row">
<div class="col-md-4">
{{photo_label}}<br />{{photo}}
</div>
<div class="col-md-8">
<p>{{name_label}}<br />{{name}}</p>
<p>{{price_label}}<br />{{price}}</p>
<p>{{comment_label}}<br />{{comment}}</p>
</div>
</div>

見た目(CSS)
<style type="text/css">
.menu-comment {
width: 100%;
height: 10em;
}
</style>

テンプレート
<mt:ContentField content_field="おすすめメニュー">
<div class="col-md-4 col-sm-6">
<div>
<mt:FLCFAsset field="photo"><img src=/slideshow/ss-101799557/101799557/"<$mt:AssetThumbnailURL
width="1000" square="1"$>" width="90%" /></mt:FLCFAsset>
</div>
<h4><$mt:FLCFValue field="name"$></h4>
<p><$mt:FLCFValue field="price"$>円</p>
<p><$mt:FLCFValue field="comment"></p>
</div>
</mt:ContentField>

ユニット机能
? 異なるパターンの動的追加入力(ブロックエディタ的)
が可能
? デモをご覧ください

基本部分と拡張パック
? 基本部分(FreeLayoutContentFieldプラグイン)
? 基本的なフィールド
? 拡張パック(FLCFExtensionプラグイン)
? 追加のフィールド

利用できるフィールド
FreeLayoutCustomField
プラグイン
FLCFExtension
プラグイン
テキスト(1行)
テキスト(複数行)
チェックボックス
ラジオボタン
ドロップダウン
日付?時刻
アイテム系(画像等)
スピナー(数値入力)
複数選択ドロップダウン
色選択
リッチテキスト
Googleマップ(※)
行数可変の表
※GoogleマップはGoogleMapsCustomFieldプラグインを併用

ライセンス料(新規購入?直販)
累積本数
FreeLayoutContentField
プラグイン
FLCFExtension
プラグイン
1本目 19,800 12,800
2～5本目 12,800 9,800
6～20本目 7,800 7,800
21本目以降 4,800 4,800
※Movable Type 6用FreeLayoutCustomFieldプラグインユーザーの
方には優待販売もあり

まとめ
? コンテンツタイプでデータ設計がより柔軟に
? FreeLayoutContentFieldプラグインで一段とパワー
アップ

ご清聴ありがとうございました

狠狠撸

コンテンツタイプの活用と拡张

More Related Content

コンテンツタイプの活用と拡张