2つの「Layout」プラグインでMovable Typeをパワーアップ
•
1 like•3,236 views
MTDDC Meetup TOKYO 2015のセッションのスライドです
Recommended
More Related Content
Similar to 2つの「Layout」プラグインでMovable Typeをパワーアップ
Similar to 2つの「Layout」プラグインでMovable Typeをパワーアップ (20)
More from Hajime Fujimoto
More from Hajime Fujimoto (20)
Recently uploaded
Recently uploaded (9)
2つの「Layout」プラグインでMovable Typeをパワーアップ
- 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
- 7. Movable Typeでのページレイアウトの問題 • HTML＋テンプレートタグ＋CSSでページを レイアウト • レイアウト変更時にはHTMLやテンプレート タグの書き換えが必要 • HTMLやCSSが分かっている人でも作業には時 間がかかる • クライアント様の「自分で変更したい」という ニーズに答えにくい 7
- 8. ドラッグアンドドロップでのレイアウトが流行 • concrete 5 • a-blog cms • Etc. 8
- 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
- 23. Movable Typeのカスタムフィールドの問題 • 1つのカスタムフィールドに保存できる値は1つ だけ • 複雑なデータ構造に対応しきれない • 例 • カラーバリエーションがある商品 • 色ごとの写真を掲載したい • 色ごとに型番がある • 色が最も多い商品に合わせて写真と型番のカス タムフィールドを大量に作る必要が・・・ 23
- 24. デモをご覧ください 24
- 25. やってられない・・・ 25
- 26. FreeLayoutCustomFieldプラグインで解決 • 1つのカスタムフィールドに複数の値を保存 • 入力欄のレイアウトはHTMLとCSSで可能 • JavaScriptで細かな動作をカスタマイズ可能 26
- 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
- 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