Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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が分かっている人でも作業には時
間がかか...
ドラッグアンドドロップでのレイアウトが流行
• concrete 5
• a-blog cms
• Etc.
8
ついカッとなって作りました(後悔はしていない)
LayoutBlockプラグイン
9
LayoutBlockプラグインの概要
• ドラッグアンドドロップでページのレイアウト
が可能
• 行とブロックでレイアウト
• ブロックにモジュールを配置
• モジュールはMTのテンプレートモジュール機
能を流用
• モジュールごとの設定もレ...
LayoutBlockプラグインの基本的な仕組み
• CSSのグリッドシステムを応用
• Bootstrap
• Foundation
• Material Design系
• オリジナルのグリッドシステム
• etc.
• レイアウトに合わせ...
テンプレートの組み方の例
<!– レイアウト部分の先頭 -->
<!—行の先頭-->
<div class=“row”>
<!– ブロックの先頭 -->
<div class=“col-md-XXX”>
<!– コンテンツの先頭 -->
<!–...
テンプレートの組み方の例
<mt:Layout name=“レイアウト名”>
<!—行の先頭-->
<div class=“row”>
<!– ブロックの先頭 -->
<div class=“col-md-XXX”>
<!– コンテンツの先頭 ...
テンプレートの組み方の例
<mt:Layout name=“レイアウト名”>
<mt:LayoutRows>
<div class=“row”>
<!– ブロックの先頭 -->
<div class=“col-md-XXX”>
<!– コンテン...
テンプレートの組み方の例
<mt:Layout name=“レイアウト名”>
<mt:LayoutRows>
<div class=“row”>
<mt:LayoutBlocks>
<div class=“col-md-XXX”>
<!– コン...
テンプレートの組み方の例
<mt:Layout name=“レイアウト名”>
<mt:LayoutRows>
<div class=“row”>
<mt:LayoutBlocks>
<div class=“col-md-<$mt:LayoutB...
テンプレートの組み方の例
<mt:Layout name=“レイアウト名”>
<mt:LayoutRows>
<div class=“row”>
<mt:LayoutBlocks>
<div class=“col-md-<$mt:LayoutB...
テンプレートの組み方の例
<mt:Layout name=“レイアウト名”>
<mt:LayoutRows>
<div class=“row”>
<mt:LayoutBlocks>
<div class=“col-md-<$mt:LayoutB...
テンプレートの組み方の例
<mt:Layout name=“レイアウト名”>
<mt:LayoutRows>
<div class=“row”>
<mt:LayoutBlocks>
<div class=“col-md-<$mt:LayoutB...
モジュールの設定
• テンプレートタグでモジュールの設定画面
を作成可能
• 例:出力する記事の件数の設定
<mtapp:setting id="lastn“
label="出力する件数“
label_class="top-label">
<i...
ライセンス等
• βテスト中
http://www.h-fj.com/mtplugins/layoutblock.php
• 製品版のライセンス料
累積購入件数 1件あたりの
ライセンス料
1件目 10,000円
2~10件目 5,000円
1...
FreeLayoutCustomFieldプラグインで
カスタムフィールドを超強化
22
Movable Typeのカスタムフィールドの問題
• 1つのカスタムフィールドに保存できる値は1つ
だけ
• 複雑なデータ構造に対応しきれない
• 例
• カラーバリエーションがある商品
• 色ごとの写真を掲載したい
• 色ごとに型番がある
...
デモをご覧ください
24
やってられない・・・
25
FreeLayoutCustomFieldプラグインで解決
• 1つのカスタムフィールドに複数の値を保存
• 入力欄のレイアウトはHTMLとCSSで可能
• JavaScriptで細かな動作をカスタマイズ可能
26
各店舗(記事)の情報の構造
タイトル
記事
リード文
本文
おすすめ
メニュー
アクセス
名前/値段/コメント/写真
名前/値段/コメント/写真
名前/値段/コメント/写真
・・・・・
フリーレイアウト型
27
デモをご覧ください
28
フリーレイアウト型カスタムフィールド
項目 言語
フィールドの定義 YAML
見た目 HTMLとCSS
動作 JavaScript
• カスタムフィールドの設定画面で以下を入
力
• テンプレートタグでデータを出力
29
フィールドの定義(YAML)
fields:
name:
type: text
label: 名前
comment:
type: textarea
label: コメント
price:
type: text
label: 値段
photo:
t...
見た目(HTML)
<div class="recommend-menu">
<div class="image-left">
{{photo_label}}<br />{{photo}}
</div>
<div class="menu-com...
見た目(CSS)
<style type="text/css">
.recommend-menu:after {
content: "";
clear: both;
display: block;
}
.image-left {
float: ...
テンプレート
<mt:EntryMenuBlock>
<p>
<mt:FLCFAsset field="photo">
<img src="<$mt:AssetURL$>">
</mt:FLCFAsset>
</p>
<h3><$mt:FLCF...
WYSIWYGの問題
• Movable Typeでは記事をWYSIWYGエディタ
で作成
• 記事にさまざまな要素(文章/見出し/画
像等)が混在
• 派手な装飾にされてしまうことも…
• 記事からデータを抜き出すのが困難
• サイトリニュー...
勘弁して・・・
35
ユニット機能で解決
• 「見出し」「文章」「画像」等のユニットを組み
合わせるカスタムフィールド
• 複数のユニットを1つのカスタムフィールド
に混在させることが可能
• ユニットもHTMLとCSSでデザイン可能
36
デモをご覧ください
37
ユニットもフリーレイアウト型で定義
項目 言語
フィールドの構造
ユニットに入れるフィールド
YAML
見た目 HTMLとCSS
動作 JavaScript
• カスタムフィールドの設定画面で以下を入
力
• テンプレートタグでデータを出力
38
フィールドの定義(YAML)
fields:
header:
type: text
label: 見出し
body:
type: textarea
label: 文章
quote:
type: textarea
label: 引用
image:...
ユニットの定義(YAML)
units:
names:
- name: header1
label: 中見出し
- name: header2
label: 小見出し
- name: body
label: 文章
- name: body_im...
ユニットグループの定義(YAML)
unit_groups:
groups:
- name: header2_body_image_left
label: 小見出し+文章と左寄せ画像
units:
- header2
- body_image_...
見た目(HTML)
<!-- {{unit:header1}} -->
<p class="unit_header1">{{header_label}}<br />{{header}}</p>
<!-- {{unit:header2}} -->...
基本部分と拡張パック
• 基本部分(FreeLayoutCustomFieldプラグイ
ン)
• 基本的なフィールド
• 拡張パック(FLCFExtensionプラグイン)
• 追加のフィールド
43
利用できるフィールド
FreeLayoutCustomField
プラグイン
FLCFExtension
プラグイン
テキスト(1行)
テキスト(複数行)
チェックボックス
ラジオボタン
ドロップダウン
日付・時刻
アイテム系(画像等)
スピナ...
デモをご覧ください
45
各種の機能
• JavaScriptによるフィールドの動作のカスタ
マイズ
• タブ/アコーディオンの利用
• 入力値のバリデーション/自動置換
46
デモをご覧ください
47
ライセンス料(直販)
累積本数
FreeLayoutCustomField
プラグイン
FLCFExtension
プラグイン
1本目 ¥15,000 ¥10,000
2~5本目 ¥10,000 ¥7,000
6~20本目 ¥5,000 ¥5,...
使えば使うほどお安く
0
2000
4000
6000
8000
10000
12000
14000
16000
0 5 10 15 20 25 30
1本あたりのライセンス料
累積本数
FreeLayoutCustomFieldプラグイン
F...
MT Cloud Starter Kit
• Movable Typeの11個のプラグインのパック
• FreeLayoutCustomField
• MTAppjQuery
• MailForm
• ScheduledRebuild
• Et...
ライセンス料(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
Upcoming SlideShare
Loading in …5
×

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

2,056 views

Published on

MTDDC Meetup TOKYO 2015のセッションのスライドです

Published in: Technology
  • Be the first to comment

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

  1. 1. 2つの「Layout」プラグインで Movable Typeをパワーアップ 2015/11/28 MTDDC Meetup TOKYO 2015 藤本 壱
  2. 2. 今日のアジェンダ • 自己紹介 • LayoutBlockプラグインで楽々ページレイア ウト • FreeLayoutCustomFieldプラグインでカスタ ムフィールドを超強化 • まとめ 2
  3. 3. 自己紹介 3
  4. 4. 自己紹介その1 • 藤本 壱(ふじもと はじめ) • 兵庫県伊丹市出身 • 群馬県前橋市在住 東京 埼玉 山梨 神奈川 栃木 茨城 千葉 4
  5. 5. 自己紹介その2 • 本職はPC系のフリーライター • 2004年秋からMovable Typeユーザー • さまざまなプラグインを開発 5
  6. 6. LayoutBlockプラグインで 楽々ページレイアウト 6
  7. 7. Movable Typeでのページレイアウトの問題 • HTML+テンプレートタグ+CSSでページを レイアウト • レイアウト変更時にはHTMLやテンプレート タグの書き換えが必要 • HTMLやCSSが分かっている人でも作業には時 間がかかる • クライアント様の「自分で変更したい」という ニーズに答えにくい 7
  8. 8. ドラッグアンドドロップでのレイアウトが流行 • concrete 5 • a-blog cms • Etc. 8
  9. 9. ついカッとなって作りました(後悔はしていない) LayoutBlockプラグイン 9
  10. 10. LayoutBlockプラグインの概要 • ドラッグアンドドロップでページのレイアウト が可能 • 行とブロックでレイアウト • ブロックにモジュールを配置 • モジュールはMTのテンプレートモジュール機 能を流用 • モジュールごとの設定もレイアウト画面上 で可能 10
  11. 11. LayoutBlockプラグインの基本的な仕組み • CSSのグリッドシステムを応用 • Bootstrap • Foundation • Material Design系 • オリジナルのグリッドシステム • etc. • レイアウトに合わせてグリッドのクラスを適 切に出力 11
  12. 12. テンプレートの組み方の例 <!– レイアウト部分の先頭 --> <!—行の先頭--> <div class=“row”> <!– ブロックの先頭 --> <div class=“col-md-XXX”> <!– コンテンツの先頭 --> <!– コンテンツの中身 --> <!– コンテンツの終了 --> … </div> <!– ブロックの終了 --> </div> <!– 行の終了 --> <!– レイアウト部分の終了 --> 12
  13. 13. テンプレートの組み方の例 <mt:Layout name=“レイアウト名”> <!—行の先頭--> <div class=“row”> <!– ブロックの先頭 --> <div class=“col-md-XXX”> <!– コンテンツの先頭 --> <!– コンテンツの中身 --> <!– コンテンツの終了 --> … </div> <!– ブロックの終了 --> </div> <!– 行の終了 --> </mt:Layout> 13
  14. 14. テンプレートの組み方の例 <mt:Layout name=“レイアウト名”> <mt:LayoutRows> <div class=“row”> <!– ブロックの先頭 --> <div class=“col-md-XXX”> <!– コンテンツの先頭 --> <!– コンテンツの中身 --> <!– コンテンツの終了 --> … </div> <!– ブロックの終了 --> </div> </mt:LayoutRows> </mt:Layout> 14
  15. 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. 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. 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. 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. 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. 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. 21. ライセンス等 • βテスト中 http://www.h-fj.com/mtplugins/layoutblock.php • 製品版のライセンス料 累積購入件数 1件あたりの ライセンス料 1件目 10,000円 2~10件目 5,000円 11件目以降 3,000円 21
  22. 22. FreeLayoutCustomFieldプラグインで カスタムフィールドを超強化 22
  23. 23. Movable Typeのカスタムフィールドの問題 • 1つのカスタムフィールドに保存できる値は1つ だけ • 複雑なデータ構造に対応しきれない • 例 • カラーバリエーションがある商品 • 色ごとの写真を掲載したい • 色ごとに型番がある • 色が最も多い商品に合わせて写真と型番のカス タムフィールドを大量に作る必要が・・・ 23
  24. 24. デモをご覧ください 24
  25. 25. やってられない・・・ 25
  26. 26. FreeLayoutCustomFieldプラグインで解決 • 1つのカスタムフィールドに複数の値を保存 • 入力欄のレイアウトはHTMLとCSSで可能 • JavaScriptで細かな動作をカスタマイズ可能 26
  27. 27. 各店舗(記事)の情報の構造 タイトル 記事 リード文 本文 おすすめ メニュー アクセス 名前/値段/コメント/写真 名前/値段/コメント/写真 名前/値段/コメント/写真 ・・・・・ フリーレイアウト型 27
  28. 28. デモをご覧ください 28
  29. 29. フリーレイアウト型カスタムフィールド 項目 言語 フィールドの定義 YAML 見た目 HTMLとCSS 動作 JavaScript • カスタムフィールドの設定画面で以下を入 力 • テンプレートタグでデータを出力 29
  30. 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. 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. 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. 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. 34. WYSIWYGの問題 • Movable Typeでは記事をWYSIWYGエディタ で作成 • 記事にさまざまな要素(文章/見出し/画 像等)が混在 • 派手な装飾にされてしまうことも… • 記事からデータを抜き出すのが困難 • サイトリニューアル等の際にお手上げにな りがち… 34
  35. 35. 勘弁して・・・ 35
  36. 36. ユニット機能で解決 • 「見出し」「文章」「画像」等のユニットを組み 合わせるカスタムフィールド • 複数のユニットを1つのカスタムフィールド に混在させることが可能 • ユニットもHTMLとCSSでデザイン可能 36
  37. 37. デモをご覧ください 37
  38. 38. ユニットもフリーレイアウト型で定義 項目 言語 フィールドの構造 ユニットに入れるフィールド YAML 見た目 HTMLとCSS 動作 JavaScript • カスタムフィールドの設定画面で以下を入 力 • テンプレートタグでデータを出力 38
  39. 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. 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. 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. 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. 43. 基本部分と拡張パック • 基本部分(FreeLayoutCustomFieldプラグイ ン) • 基本的なフィールド • 拡張パック(FLCFExtensionプラグイン) • 追加のフィールド 43
  44. 44. 利用できるフィールド FreeLayoutCustomField プラグイン FLCFExtension プラグイン テキスト(1行) テキスト(複数行) チェックボックス ラジオボタン ドロップダウン 日付・時刻 アイテム系(画像等) スピナー(数値入力) 複数選択ドロップダウン 色選択 リッチテキスト Googleマップ(※) 行数可変の表 ※GoogleマップはGoogleMapsCustomFieldプラグインを併用 44
  45. 45. デモをご覧ください 45
  46. 46. 各種の機能 • JavaScriptによるフィールドの動作のカスタ マイズ • タブ/アコーディオンの利用 • 入力値のバリデーション/自動置換 46
  47. 47. デモをご覧ください 47
  48. 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. 49. 使えば使うほどお安く 0 2000 4000 6000 8000 10000 12000 14000 16000 0 5 10 15 20 25 30 1本あたりのライセンス料 累積本数 FreeLayoutCustomFieldプラグイン FLCFExtensionプラグイン 49
  50. 50. MT Cloud Starter Kit • Movable Typeの11個のプラグインのパック • FreeLayoutCustomField • MTAppjQuery • MailForm • ScheduledRebuild • Etc. • サブスクリプション(月額料金)制 • http://starterkit.3rdfocus.jp/ • 詳しくは懇親会LTで 50
  51. 51. ライセンス料(MT Cloud Starter Kit) ライセンス形態 ライセンス料 Plugins(1MT) ¥3,500/月 Plugins(Unlimited) ¥9,000/月 Plugins&Server ¥28,000/月 51
  52. 52. Data APIとも組み合わせ可能 • データはJSON形式にまとめて保存 • JSONをデコードすれば各プログラム言語か らアクセス可能 • JSONの値をカスタムフィールドにセットして 保存することも可能 52
  53. 53. まとめ 53
  54. 54. まとめ • LayoutBlockプラグインでドラッグアンドド ロップでページレイアウト可能 • FreeLayoutCustomFieldプラグインで複雑な 構造のデータを入力しやすくできる • ユニット機能で脱WYSIWYGも可能 54
  55. 55. ご清聴ありがとうございました 55

×