2つの「Layout」プラグインでMovable Typeをパワーアップ
-
Upload
hajime-fujimoto -
Category
Technology
-
view
1.066 -
download
0
Transcript of 2つの「Layout」プラグインでMovable Typeをパワーアップ
Movable Typeでのページレイアウトの問題
• HTML+テンプレートタグ+CSSでページをレイアウト
• レイアウト変更時にはHTMLやテンプレートタグの書き換えが必要
• HTMLやCSSが分かっている人でも作業には時間がかかる
• クライアント様の「自分で変更したい」というニーズに答えにくい
7
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=“レイアウト名”><!—行の先頭-->
<div class=“row”><!– ブロックの先頭 -->
<div class=“col-md-XXX”><!– コンテンツの先頭 -->
<!– コンテンツの中身 --><!– コンテンツの終了 -->…
</div><!– ブロックの終了 --></div>
<!– 行の終了 --></mt:Layout>
13
テンプレートの組み方の例
<mt:Layout name=“レイアウト名”><mt:LayoutRows>
<div class=“row”><!– ブロックの先頭 -->
<div class=“col-md-XXX”><!– コンテンツの先頭 -->
<!– コンテンツの中身 --><!– コンテンツの終了 -->…
</div><!– ブロックの終了 --></div>
</mt:LayoutRows></mt:Layout>
14
テンプレートの組み方の例
<mt:Layout name=“レイアウト名”><mt:LayoutRows>
<div class=“row”><mt:LayoutBlocks>
<div class=“col-md-XXX”><!– コンテンツの先頭 -->
<!– コンテンツの中身 --><!– コンテンツの終了 -->…
</div></mt:LayoutBlocks></div>
</mt:LayoutRows></mt:Layout>
15
テンプレートの組み方の例
<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
テンプレートの組み方の例
<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
テンプレートの組み方の例
<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
テンプレートの組み方の例
<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
モジュールの設定
• テンプレートタグでモジュールの設定画面を作成可能
• 例:出力する記事の件数の設定
<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
Movable Typeのカスタムフィールドの問題
• 1つのカスタムフィールドに保存できる値は1つだけ
• 複雑なデータ構造に対応しきれない
• 例
• カラーバリエーションがある商品
• 色ごとの写真を掲載したい
• 色ごとに型番がある
• 色が最も多い商品に合わせて写真と型番のカスタムフィールドを大量に作る必要が・・・
23
FreeLayoutCustomFieldプラグインで解決
• 1つのカスタムフィールドに複数の値を保存
• 入力欄のレイアウトはHTMLとCSSで可能
• JavaScriptで細かな動作をカスタマイズ可能
26
各店舗(記事)の情報の構造
タイトル
記事
リード文
本文
おすすめメニュー
アクセス
名前/値段/コメント/写真
名前/値段/コメント/写真
名前/値段/コメント/写真
・・・・・
フリーレイアウト型
27
フリーレイアウト型カスタムフィールド
項目 言語
フィールドの定義 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
ユニット機能で解決
• 「見出し」「文章」「画像」等のユニットを組み合わせるカスタムフィールド
• 複数のユニットを1つのカスタムフィールドに混在させることが可能
• ユニットもHTMLとCSSでデザイン可能
36
ユニットもフリーレイアウト型で定義
項目 言語
フィールドの構造ユニットに入れるフィールド
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)<!-- {{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
利用できるフィールド
FreeLayoutCustomFieldプラグイン
FLCFExtensionプラグイン
テキスト(1行)テキスト(複数行)チェックボックスラジオボタンドロップダウン日付・時刻アイテム系(画像等)
スピナー(数値入力)複数選択ドロップダウン色選択リッチテキストGoogleマップ(※)行数可変の表
※GoogleマップはGoogleMapsCustomFieldプラグインを併用
44
ライセンス料(直販)
累積本数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
ライセンス料(MT Cloud Starter Kit)ライセンス形態 ライセンス料
Plugins(1MT) ¥3,500/月
Plugins(Unlimited) ¥9,000/月
Plugins&Server ¥28,000/月
51
Data APIとも組み合わせ可能
• データはJSON形式にまとめて保存
• JSONをデコードすれば各プログラム言語からアクセス可能
• JSONの値をカスタムフィールドにセットして保存することも可能
52
まとめ
• LayoutBlockプラグインでドラッグアンドドロップでページレイアウト可能
• FreeLayoutCustomFieldプラグインで複雑な構造のデータを入力しやすくできる
• ユニット機能で脱WYSIWYGも可能
54