2つの「Layout」プラグインでMovable Typeをパワーアップ

2つの「Layout」プラグインでMovable Typeをパワーアップ

2015/11/28

MTDDC Meetup TOKYO 2015

藤本壱

今日のアジェンダ

• 自己紹介

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

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

• まとめ

2

自己紹介

3

自己紹介その1

• 藤本壱（ふじもとはじめ）

• 兵庫県伊丹市出身

• 群馬県前橋市在住

東京

埼玉

山梨

神奈川

栃木

茨城

千葉

4

自己紹介その2

• 本職はPC系のフリーライター

• 2004年秋からMovable Typeユーザー

• さまざまなプラグインを開発

5

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

6

Movable Typeでのページレイアウトの問題

• HTML＋テンプレートタグ＋CSSでページをレイアウト

• レイアウト変更時にはHTMLやテンプレートタグの書き換えが必要

• HTMLやCSSが分かっている人でも作業には時間がかかる

• クライアント様の「自分で変更したい」というニーズに答えにくい

7

ドラッグアンドドロップでのレイアウトが流行

• concrete 5• a-blog cms• Etc.

8

ついカッとなって作りました(後悔はしていない)

LayoutBlockプラグイン9

LayoutBlockプラグインの概要

• ドラッグアンドドロップでページのレイアウトが可能

• 行とブロックでレイアウト

• ブロックにモジュールを配置

• モジュールはMTのテンプレートモジュール機能を流用

• モジュールごとの設定もレイアウト画面上で可能

10

LayoutBlockプラグインの基本的な仕組み

• CSSのグリッドシステムを応用

• Bootstrap• Foundation• Material Design系• オリジナルのグリッドシステム

• etc.

• レイアウトに合わせてグリッドのクラスを適切に出力

11

テンプレートの組み方の例

<!– レイアウト部分の先頭 --><!—行の先頭-->

<div class=“row”><!– ブロックの先頭 -->

<div class=“col-md-XXX”><!– コンテンツの先頭 -->

<!– コンテンツの中身 --><!– コンテンツの終了 -->…

</div><!– ブロックの終了 --></div>

<!– 行の終了 --><!– レイアウト部分の終了 -->

12


<mt:Layout name=“レイアウト名”><!—行の先頭-->





<!– 行の終了 --></mt:Layout>

13


<mt:Layout name=“レイアウト名”><mt:LayoutRows>





</mt:LayoutRows></mt:Layout>

14



<div class=“row”><mt:LayoutBlocks>



</div></mt:LayoutBlocks></div>


15




<div class=“col-md-<$mt:LayoutBlockColumnCount$>”><!– コンテンツの先頭 -->




16




<div class=“col-md-<$mt:LayoutBlockColumnCount$>”><mt:LayoutModules>

<!– コンテンツの中身 --></mt:LayoutModules>…



17





<$mt:IncludeLayoutModule$></mt:LayoutModules>…



18





<$mt:IncludeLayoutModule$></mt:LayoutModules><$mt:LayoutRecurse$>



19

モジュールの設定

• テンプレートタグでモジュールの設定画面を作成可能

• 例：出力する記事の件数の設定

<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

ライセンス等

• βテスト中http://www.h-fj.com/mtplugins/layoutblock.php

• 製品版のライセンス料

累積購入件数 1件あたりのライセンス料

1件目 10,000円2～10件目 5,000円11件目以降 3,000円

21

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

22

Movable Typeのカスタムフィールドの問題

• 1つのカスタムフィールドに保存できる値は1つだけ

• 複雑なデータ構造に対応しきれない

• 例

• カラーバリエーションがある商品

• 色ごとの写真を掲載したい

• 色ごとに型番がある

• 色が最も多い商品に合わせて写真と型番のカスタムフィールドを大量に作る必要が・・・

23

デモをご覧ください

24

やってられない・・・

25

FreeLayoutCustomFieldプラグインで解決

• 1つのカスタムフィールドに複数の値を保存

• 入力欄のレイアウトはHTMLとCSSで可能

• JavaScriptで細かな動作をカスタマイズ可能

26

各店舗（記事）の情報の構造

タイトル

記事

リード文

本文

おすすめメニュー

アクセス

名前／値段／コメント／写真



・・・・・

フリーレイアウト型

27


28

フリーレイアウト型カスタムフィールド

項目言語

フィールドの定義 YAML見た目 HTMLとCSS動作 JavaScript

• カスタムフィールドの設定画面で以下を入力

• テンプレートタグでデータを出力

29

フィールドの定義(YAML)fields:name:type: textlabel: 名前

comment:type: textarealabel: コメント

price:type: textlabel: 値段

photo:type: imagelabel: 写真

options:multiple: 1sortable: 1

30

見た目(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

見た目(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

テンプレート

<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

WYSIWYGの問題

• Movable Typeでは記事をWYSIWYGエディタで作成

• 記事にさまざまな要素(文章／見出し／画像等)が混在

• 派手な装飾にされてしまうことも…• 記事からデータを抜き出すのが困難

• サイトリニューアル等の際にお手上げになりがち…

34

勘弁して･･･

35

ユニット機能で解決

• 「見出し」「文章」「画像」等のユニットを組み合わせるカスタムフィールド

• 複数のユニットを1つのカスタムフィールドに混在させることが可能

• ユニットもHTMLとCSSでデザイン可能

36


37

ユニットもフリーレイアウト型で定義

項目言語

フィールドの構造ユニットに入れるフィールド

YAML

見た目 HTMLとCSS動作 JavaScript

• カスタムフィールドの設定画面で以下を入力

• テンプレートタグでデータを出力

38

フィールドの定義(YAML)fields:

header:type: textlabel: 見出し

body:type: textarealabel: 文章

quote:type: textarealabel: 引用

image:type: imagelabel: 画像

gmap:type: googlemapslabel: 地図default: 1|35|135|15width: 600height: 400

39

ユニットの定義(YAML)units:names:- name: header1label: 中見出し

- name: header2label: 小見出し

- name: bodylabel: 文章

- name: body_image_leftlabel: 文章と左寄せ画像

- name: body_image_rightlabel: 文章と右寄せ画像

・・・

40

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

- name: header2_body_image_rightlabel: 小見出し＋文章と右寄せ画像units:- header2- body_image_right

41

見た目(HTML)<p class="unit_header1">{{header_label}}<br />{{header}}</p><p class="unit_header2">{{header_label}}<br />{{header}}</p><p class="unit_body">{{body_label}}<br />{{body}}</p><p class="unit_body">{{quote_label}}<br />{{quote}}</p>・・・

42

基本部分と拡張パック

• 基本部分(FreeLayoutCustomFieldプラグイン)• 基本的なフィールド

• 拡張パック(FLCFExtensionプラグイン)• 追加のフィールド

43

利用できるフィールド

FreeLayoutCustomFieldプラグイン

FLCFExtensionプラグイン

テキスト(1行)テキスト(複数行)チェックボックスラジオボタンドロップダウン日付・時刻アイテム系(画像等)

スピナー(数値入力)複数選択ドロップダウン色選択リッチテキストGoogleマップ(※)行数可変の表

※GoogleマップはGoogleMapsCustomFieldプラグインを併用

44


45

各種の機能

• JavaScriptによるフィールドの動作のカスタマイズ

• タブ／アコーディオンの利用

• 入力値のバリデーション／自動置換

46


47

ライセンス料(直販)

累積本数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

使えば使うほどお安く

0

2000

4000

6000

8000

10000

12000

14000

16000

0 5 10 15 20 25 30

1本あたりのライセンス料

累積本数

FreeLayoutCustomFieldプラグイン

FLCFExtensionプラグイン

49

MT Cloud Starter Kit• Movable Typeの11個のプラグインのパック

• FreeLayoutCustomField• MTAppjQuery• MailForm• ScheduledRebuild• Etc.

• サブスクリプション（月額料金）制

• http://starterkit.3rdfocus.jp/• 詳しくは懇親会LTで

50

http://starterkit.3rdfocus.jp/

ライセンス料(MT Cloud Starter Kit)ライセンス形態ライセンス料

Plugins(1MT) ¥3,500／月

Plugins(Unlimited) ¥9,000／月

Plugins&Server ¥28,000／月

51

Data APIとも組み合わせ可能

• データはJSON形式にまとめて保存

• JSONをデコードすれば各プログラム言語からアクセス可能

• JSONの値をカスタムフィールドにセットして保存することも可能

52

まとめ

53

まとめ

• LayoutBlockプラグインでドラッグアンドドロップでページレイアウト可能

• FreeLayoutCustomFieldプラグインで複雑な構造のデータを入力しやすくできる

• ユニット機能で脱WYSIWYGも可能

54

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

55

Technology

2つの「Layout」プラグインでMovable Typeをパワーアップ