1. 2つの「Layout」プラグインで
Movable Typeをパワーアップ
2015/11/28
MTDDC Meetup TOKYO 2015
藤本 壱

2. 今日のアジェンダ
• 自己紹介
• LayoutBlockプラグインで楽々ページレイア
ウト
• FreeLayoutCustomFieldプラグインでカスタ
ムフィールドを超強化
• まとめ
2

3. 自己紹介
3

4. 自己紹介その1
• 藤本 壱（ふじもと はじめ）
• 兵庫県伊丹市出身
• 群馬県前橋市在住
東京
埼玉
山梨
神奈川
栃木
茨城
千葉
4

5. 自己紹介その2
• 本職はPC系のフリーライター
• 2004年秋からMovable Typeユーザー
• さまざまなプラグインを開発
5

6. LayoutBlockプラグインで
楽々ページレイアウト
6

7. Movable Typeでのページレイアウトの問題
• HTML＋テンプレートタグ＋CSSでページを
レイアウト
• レイアウト変更時にはHTMLやテンプレート
タグの書き換えが必要
• HTMLやCSSが分かっている人でも作業には時
間がかかる
• クライアント様の「自分で変更したい」という
ニーズに答えにくい
7

8. ドラッグアンドドロップでのレイアウトが流行
• concrete 5
• a-blog cms
• Etc.
8

9. ついカッとなって作りました(後悔はしていない)
LayoutBlockプラグイン
9

10. LayoutBlockプラグインの概要
• ドラッグアンドドロップでページのレイアウト
が可能
• 行とブロックでレイアウト
• ブロックにモジュールを配置
• モジュールはMTのテンプレートモジュール機
能を流用
• モジュールごとの設定もレイアウト画面上
で可能
10

11. LayoutBlockプラグインの基本的な仕組み
• CSSのグリッドシステムを応用
• Bootstrap
• Foundation
• Material Design系
• オリジナルのグリッドシステム
• etc.
• レイアウトに合わせてグリッドのクラスを適
切に出力
11

12. テンプレートの組み方の例
<!– レイアウト部分の先頭 -->
<!—行の先頭-->
<div class=“row”>
<!– ブロックの先頭 -->
<div class=“col-md-XXX”>
<!– コンテンツの先頭 -->
<!– コンテンツの中身 -->
<!– コンテンツの終了 -->
…
</div>
<!– ブロックの終了 -->
</div>
<!– 行の終了 -->
<!– レイアウト部分の終了 -->
12

13. テンプレートの組み方の例
<mt:Layout name=“レイアウト名”>
<!—行の先頭-->
<div class=“row”>
<!– ブロックの先頭 -->
<div class=“col-md-XXX”>
<!– コンテンツの先頭 -->
<!– コンテンツの中身 -->
<!– コンテンツの終了 -->
…
</div>
<!– ブロックの終了 -->
</div>
<!– 行の終了 -->
</mt:Layout>
13

14. テンプレートの組み方の例
<mt:Layout name=“レイアウト名”>
<mt:LayoutRows>
<div class=“row”>
<!– ブロックの先頭 -->
<div class=“col-md-XXX”>
<!– コンテンツの先頭 -->
<!– コンテンツの中身 -->
<!– コンテンツの終了 -->
…
</div>
<!– ブロックの終了 -->
</div>
</mt:LayoutRows>
</mt:Layout>
14

15. テンプレートの組み方の例
<mt:Layout name=“レイアウト名”>
<mt:LayoutRows>
<div class=“row”>
<mt:LayoutBlocks>
<div class=“col-md-XXX”>
<!– コンテンツの先頭 -->
<!– コンテンツの中身 -->
<!– コンテンツの終了 -->
…
</div>
</mt:LayoutBlocks>
</div>
</mt:LayoutRows>
</mt:Layout>
15

16. テンプレートの組み方の例
<mt:Layout name=“レイアウト名”>
<mt:LayoutRows>
<div class=“row”>
<mt:LayoutBlocks>
<div class=“col-md-<$mt:LayoutBlockColumnCount$>”>
<!– コンテンツの先頭 -->
<!– コンテンツの中身 -->
<!– コンテンツの終了 -->
…
</div>
</mt:LayoutBlocks>
</div>
</mt:LayoutRows>
</mt:Layout>
16

17. テンプレートの組み方の例
<mt:Layout name=“レイアウト名”>
<mt:LayoutRows>
<div class=“row”>
<mt:LayoutBlocks>
<div class=“col-md-<$mt:LayoutBlockColumnCount$>”>
<mt:LayoutModules>
<!– コンテンツの中身 -->
</mt:LayoutModules>
…
</div>
</mt:LayoutBlocks>
</div>
</mt:LayoutRows>
</mt:Layout>
17

18. テンプレートの組み方の例
<mt:Layout name=“レイアウト名”>
<mt:LayoutRows>
<div class=“row”>
<mt:LayoutBlocks>
<div class=“col-md-<$mt:LayoutBlockColumnCount$>”>
<mt:LayoutModules>
<$mt:IncludeLayoutModule$>
</mt:LayoutModules>
…
</div>
</mt:LayoutBlocks>
</div>
</mt:LayoutRows>
</mt:Layout>
18

19. テンプレートの組み方の例
<mt:Layout name=“レイアウト名”>
<mt:LayoutRows>
<div class=“row”>
<mt:LayoutBlocks>
<div class=“col-md-<$mt:LayoutBlockColumnCount$>”>
<mt:LayoutModules>
<$mt:IncludeLayoutModule$>
</mt:LayoutModules>
<$mt:LayoutRecurse$>
</div>
</mt:LayoutBlocks>
</div>
</mt:LayoutRows>
</mt:Layout>
19

20. モジュールの設定
• テンプレートタグでモジュールの設定画面
を作成可能
• 例：出力する記事の件数の設定
<mtapp:setting id="lastn“
label="出力する件数“
label_class="top-label">
<input type="text" name="lastn" id="lastn“
value="<$mt:var name="lastn" encode_html="1"$>" />
</mtapp:setting>
20

21. ライセンス等
• βテスト中
http://www.h-fj.com/mtplugins/layoutblock.php
• 製品版のライセンス料
累積購入件数 1件あたりの
ライセンス料
1件目 10,000円
2～10件目 5,000円
11件目以降 3,000円
21

22. FreeLayoutCustomFieldプラグインで
カスタムフィールドを超強化
22

23. Movable Typeのカスタムフィールドの問題
• 1つのカスタムフィールドに保存できる値は1つ
だけ
• 複雑なデータ構造に対応しきれない
• 例
• カラーバリエーションがある商品
• 色ごとの写真を掲載したい
• 色ごとに型番がある
• 色が最も多い商品に合わせて写真と型番のカス
タムフィールドを大量に作る必要が・・・
23

24. デモをご覧ください
24

25. やってられない・・・
25

26. FreeLayoutCustomFieldプラグインで解決
• 1つのカスタムフィールドに複数の値を保存
• 入力欄のレイアウトはHTMLとCSSで可能
• JavaScriptで細かな動作をカスタマイズ可能
26

27. 各店舗（記事）の情報の構造
タイトル
記事
リード文
本文
おすすめ
メニュー
アクセス
名前／値段／コメント／写真
名前／値段／コメント／写真
名前／値段／コメント／写真
・・・・・
フリーレイアウト型
27

28. デモをご覧ください
28

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

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

31. 見た目(HTML)
<div class="recommend-menu">
<div class="image-left">
{{photo_label}}<br />{{photo}}
</div>
<div class="menu-comment">
<p>{{name_label}}<br />{{name}}</p>
<p>{{price_label}}<br />{{price}}</p>
<p>{{comment_label}}<br />{{comment}}</p>
</div>
</div>
31

32. 見た目(CSS)
<style type="text/css">
.recommend-menu:after {
content: "";
clear: both;
display: block;
}
.image-left {
float: left;
width: 300px;
}
.menu-comment {
margin-left: 310px;
}
.recommend-menu textarea {
width: 100%;
height: 5em;
}
</style>
32

33. テンプレート
<mt:EntryMenuBlock>
<p>
<mt:FLCFAsset field="photo">
<img src="<$mt:AssetURL$>">
</mt:FLCFAsset>
</p>
<h3><$mt:FLCFValue field="name"$></h3>
<p><$mt:FLCFValue field="price"$>円</p>
<$mt:FLCFValue field="comment"$>
</mt:EntryMenuBlock>
33

34. WYSIWYGの問題
• Movable Typeでは記事をWYSIWYGエディタ
で作成
• 記事にさまざまな要素(文章／見出し／画
像等)が混在
• 派手な装飾にされてしまうことも…
• 記事からデータを抜き出すのが困難
• サイトリニューアル等の際にお手上げにな
りがち…
34

35. 勘弁して･･･
35

36. ユニット機能で解決
• 「見出し」「文章」「画像」等のユニットを組み
合わせるカスタムフィールド
• 複数のユニットを1つのカスタムフィールド
に混在させることが可能
• ユニットもHTMLとCSSでデザイン可能
36

37. デモをご覧ください
37

38. ユニットもフリーレイアウト型で定義
項目 言語
フィールドの構造
ユニットに入れるフィールド
YAML
見た目 HTMLとCSS
動作 JavaScript
• カスタムフィールドの設定画面で以下を入
力
• テンプレートタグでデータを出力
38

39. フィールドの定義(YAML)
fields:
header:
type: text
label: 見出し
body:
type: textarea
label: 文章
quote:
type: textarea
label: 引用
image:
type: image
label: 画像
gmap:
type: googlemaps
label: 地図
default: 1|35|135|15
width: 600
height: 400
39

40. ユニットの定義(YAML)
units:
names:
- name: header1
label: 中見出し
- name: header2
label: 小見出し
- name: body
label: 文章
- name: body_image_left
label: 文章と左寄せ画像
- name: body_image_right
label: 文章と右寄せ画像
・・・
40

41. ユニットグループの定義(YAML)
unit_groups:
groups:
- name: header2_body_image_left
label: 小見出し＋文章と左寄せ画像
units:
- header2
- body_image_left
- name: header2_body_image_right
label: 小見出し＋文章と右寄せ画像
units:
- header2
- body_image_right
41

42. 見た目(HTML)
<!-- {{unit:header1}} -->
<p class="unit_header1">{{header_label}}<br />{{header}}</p>
<!-- {{unit:header2}} -->
<p class="unit_header2">{{header_label}}<br />{{header}}</p>
<!-- {{unit:body}} -->
<p class="unit_body">{{body_label}}<br />{{body}}</p>
<!-- {{unit:quote}} -->
<p class="unit_body">{{quote_label}}<br />{{quote}}</p>
・・・
42

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

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

45. デモをご覧ください
45

46. 各種の機能
• JavaScriptによるフィールドの動作のカスタ
マイズ
• タブ／アコーディオンの利用
• 入力値のバリデーション／自動置換
46

47. デモをご覧ください
47

48. ライセンス料(直販)
累積本数
FreeLayoutCustomField
プラグイン
FLCFExtension
プラグイン
1本目 ¥15,000 ¥10,000
2～5本目 ¥10,000 ¥7,000
6～20本目 ¥5,000 ¥5,000
21本目以降 ¥3,000 ¥3,000
48

49. 使えば使うほどお安く
0
2000
4000
6000
8000
10000
12000
14000
16000
0 5 10 15 20 25 30
1本あたりのライセンス料
累積本数
FreeLayoutCustomFieldプラグイン
FLCFExtensionプラグイン
49

50. MT Cloud Starter Kit
• Movable Typeの11個のプラグインのパック
• FreeLayoutCustomField
• MTAppjQuery
• MailForm
• ScheduledRebuild
• Etc.
• サブスクリプション（月額料金）制
• http://starterkit.3rdfocus.jp/
• 詳しくは懇親会LTで
50

51. ライセンス料(MT Cloud Starter Kit)
ライセンス形態 ライセンス料
Plugins(1MT) ¥3,500／月
Plugins(Unlimited) ¥9,000／月
Plugins&Server ¥28,000／月
51

52. Data APIとも組み合わせ可能
• データはJSON形式にまとめて保存
• JSONをデコードすれば各プログラム言語か
らアクセス可能
• JSONの値をカスタムフィールドにセットして
保存することも可能
52

53. まとめ
53

54. まとめ
• LayoutBlockプラグインでドラッグアンドド
ロップでページレイアウト可能
• FreeLayoutCustomFieldプラグインで複雑な
構造のデータを入力しやすくできる
• ユニット機能で脱WYSIWYGも可能
54

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