Enviar búsqueda
Cargar
2つの「Layout」プラグインでMovable Typeをパワーアップ
•
1 recomendación
•
3,238 vistas
Hajime Fujimoto
Seguir
MTDDC Meetup TOKYO 2015のセッションのスライドです
Leer menos
Leer más
Tecnología
Denunciar
Compartir
Denunciar
Compartir
1 de 55
Descargar ahora
Descargar para leer sin conexión
Recomendados
ウェブサイト/ブログを組み合わせたサイトのテーマ化
ウェブサイト/ブログを組み合わせたサイトのテーマ化
Hajime Fujimoto
20151206 hamamatsu handson
20151206 hamamatsu handson
Six Apart
空のテンプレートから始めるWindows 8 ストアアプリ
空のテンプレートから始めるWindows 8 ストアアプリ
Akira Hatsune
WordPress初心者からの脱出! カスタムなんとかをちゃんと理解する
WordPress初心者からの脱出! カスタムなんとかをちゃんと理解する
Takashi Uemura
Firefox OSアプリ 「ModeView」
Firefox OSアプリ 「ModeView」
Hideki Akiba
Webteko 20090925
Webteko 20090925
だいすけ ふるかわ
マークアップエンジニアと情報アーキテクチャ
マークアップエンジニアと情報アーキテクチャ
力也 伊原
eZ Publish勉強会10月〜Wysiwygエディター〜
eZ Publish勉強会10月〜Wysiwygエディター〜
ericsagnes
Recomendados
ウェブサイト/ブログを組み合わせたサイトのテーマ化
ウェブサイト/ブログを組み合わせたサイトのテーマ化
Hajime Fujimoto
20151206 hamamatsu handson
20151206 hamamatsu handson
Six Apart
空のテンプレートから始めるWindows 8 ストアアプリ
空のテンプレートから始めるWindows 8 ストアアプリ
Akira Hatsune
WordPress初心者からの脱出! カスタムなんとかをちゃんと理解する
WordPress初心者からの脱出! カスタムなんとかをちゃんと理解する
Takashi Uemura
Firefox OSアプリ 「ModeView」
Firefox OSアプリ 「ModeView」
Hideki Akiba
Webteko 20090925
Webteko 20090925
だいすけ ふるかわ
マークアップエンジニアと情報アーキテクチャ
マークアップエンジニアと情報アーキテクチャ
力也 伊原
eZ Publish勉強会10月〜Wysiwygエディター〜
eZ Publish勉強会10月〜Wysiwygエディター〜
ericsagnes
なんでCSSすぐ死んでしまうん
なんでCSSすぐ死んでしまうん
Hayato Mizuno
JavaScriptテンプレートエンジンで活かすData API
JavaScriptテンプレートエンジンで活かすData API
Hajime Fujimoto
今必要なCSSアーキテクチャ
今必要なCSSアーキテクチャ
Mayu Kimura
20130225 pronet study
20130225 pronet study
Six Apart
20141206 handson
20141206 handson
Six Apart
[Japan M365 Dev UG] Teams Toolkit v4 を使ってみよう!
[Japan M365 Dev UG] Teams Toolkit v4 を使ってみよう!
Tomomi Imura
Ec cubeの基礎からcms連携まで
Ec cubeの基礎からcms連携まで
Makoto Nishimura
ASP.NET MVC 2 ~新機能の紹介~
ASP.NET MVC 2 ~新機能の紹介~
Yoshitaka Seo
20141101 handson
20141101 handson
Six Apart
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
Chihiro Tomita
ディレクター・ノンプログラマー目線のMovable Type
ディレクター・ノンプログラマー目線のMovable Type
Yasufumi Nishiyama
jQuery Mobileの基礎
jQuery Mobileの基礎
Takashi Okamoto
20141119 Movable Type HandsOn Seminar
20141119 Movable Type HandsOn Seminar
Six Apart
a-blog cmsの2015年版の基本テーマを 使ったカスタマイズのポイント
a-blog cmsの2015年版の基本テーマを 使ったカスタマイズのポイント
Kasumi Morita
What's Sketch.app
What's Sketch.app
littlebustersreply
Movable Type as a Playground
Movable Type as a Playground
Taku AMANO
SharePoint 2013 流リスト ビュー カスタマイズ
SharePoint 2013 流リスト ビュー カスタマイズ
Hirofumi Ota
Twitterbootstrapでモック開発
Twitterbootstrapでモック開発
Sosuke Kimura
Movable Type CPI Seminar 2010/11/15
Movable Type CPI Seminar 2010/11/15
Six Apart KK
Componentization with Gilgamesh
Componentization with Gilgamesh
Yusuke Goto
Movable Typeでロボットを動かす?AIスピーカーをしゃべらせる?Data APIでMovable TypeとIoTをFUSION
Movable Typeでロボットを動かす?AIスピーカーをしゃべらせる?Data APIでMovable TypeとIoTをFUSION
Hajime Fujimoto
コンテンツタイプの活用と拡張
コンテンツタイプの活用と拡張
Hajime Fujimoto
Más contenido relacionado
Similar a 2つの「Layout」プラグインでMovable Typeをパワーアップ
なんでCSSすぐ死んでしまうん
なんでCSSすぐ死んでしまうん
Hayato Mizuno
JavaScriptテンプレートエンジンで活かすData API
JavaScriptテンプレートエンジンで活かすData API
Hajime Fujimoto
今必要なCSSアーキテクチャ
今必要なCSSアーキテクチャ
Mayu Kimura
20130225 pronet study
20130225 pronet study
Six Apart
20141206 handson
20141206 handson
Six Apart
[Japan M365 Dev UG] Teams Toolkit v4 を使ってみよう!
[Japan M365 Dev UG] Teams Toolkit v4 を使ってみよう!
Tomomi Imura
Ec cubeの基礎からcms連携まで
Ec cubeの基礎からcms連携まで
Makoto Nishimura
ASP.NET MVC 2 ~新機能の紹介~
ASP.NET MVC 2 ~新機能の紹介~
Yoshitaka Seo
20141101 handson
20141101 handson
Six Apart
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
Chihiro Tomita
ディレクター・ノンプログラマー目線のMovable Type
ディレクター・ノンプログラマー目線のMovable Type
Yasufumi Nishiyama
jQuery Mobileの基礎
jQuery Mobileの基礎
Takashi Okamoto
20141119 Movable Type HandsOn Seminar
20141119 Movable Type HandsOn Seminar
Six Apart
a-blog cmsの2015年版の基本テーマを 使ったカスタマイズのポイント
a-blog cmsの2015年版の基本テーマを 使ったカスタマイズのポイント
Kasumi Morita
What's Sketch.app
What's Sketch.app
littlebustersreply
Movable Type as a Playground
Movable Type as a Playground
Taku AMANO
SharePoint 2013 流リスト ビュー カスタマイズ
SharePoint 2013 流リスト ビュー カスタマイズ
Hirofumi Ota
Twitterbootstrapでモック開発
Twitterbootstrapでモック開発
Sosuke Kimura
Movable Type CPI Seminar 2010/11/15
Movable Type CPI Seminar 2010/11/15
Six Apart KK
Componentization with Gilgamesh
Componentization with Gilgamesh
Yusuke Goto
Similar a 2つの「Layout」プラグインでMovable Typeをパワーアップ
(20)
なんでCSSすぐ死んでしまうん
なんでCSSすぐ死んでしまうん
JavaScriptテンプレートエンジンで活かすData API
JavaScriptテンプレートエンジンで活かすData API
今必要なCSSアーキテクチャ
今必要なCSSアーキテクチャ
20130225 pronet study
20130225 pronet study
20141206 handson
20141206 handson
[Japan M365 Dev UG] Teams Toolkit v4 を使ってみよう!
[Japan M365 Dev UG] Teams Toolkit v4 を使ってみよう!
Ec cubeの基礎からcms連携まで
Ec cubeの基礎からcms連携まで
ASP.NET MVC 2 ~新機能の紹介~
ASP.NET MVC 2 ~新機能の紹介~
20141101 handson
20141101 handson
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
ディレクター・ノンプログラマー目線のMovable Type
ディレクター・ノンプログラマー目線のMovable Type
jQuery Mobileの基礎
jQuery Mobileの基礎
20141119 Movable Type HandsOn Seminar
20141119 Movable Type HandsOn Seminar
a-blog cmsの2015年版の基本テーマを 使ったカスタマイズのポイント
a-blog cmsの2015年版の基本テーマを 使ったカスタマイズのポイント
What's Sketch.app
What's Sketch.app
Movable Type as a Playground
Movable Type as a Playground
SharePoint 2013 流リスト ビュー カスタマイズ
SharePoint 2013 流リスト ビュー カスタマイズ
Twitterbootstrapでモック開発
Twitterbootstrapでモック開発
Movable Type CPI Seminar 2010/11/15
Movable Type CPI Seminar 2010/11/15
Componentization with Gilgamesh
Componentization with Gilgamesh
Más de Hajime Fujimoto
Movable Typeでロボットを動かす?AIスピーカーをしゃべらせる?Data APIでMovable TypeとIoTをFUSION
Movable Typeでロボットを動かす?AIスピーカーをしゃべらせる?Data APIでMovable TypeとIoTをFUSION
Hajime Fujimoto
コンテンツタイプの活用と拡張
コンテンツタイプの活用と拡張
Hajime Fujimoto
PowerCMSとIoTの連携
PowerCMSとIoTの連携
Hajime Fujimoto
Connect with Data API
Connect with Data API
Hajime Fujimoto
Objecttreeプラグイン&ObjectRelationプラグインのご紹介
Objecttreeプラグイン&ObjectRelationプラグインのご紹介
Hajime Fujimoto
PHPやVBAでMovable Typeを操作しようData API Library for PHP/VBAのご紹介
PHPやVBAでMovable Typeを操作しようData API Library for PHP/VBAのご紹介
Hajime Fujimoto
Movable Typeの権限と承認フロー
Movable Typeの権限と承認フロー
Hajime Fujimoto
はじめよう!MovableType.net ハンズオン
はじめよう!MovableType.net ハンズオン
Hajime Fujimoto
JavaScriptテンプレートエンジンで活かすData API
JavaScriptテンプレートエンジンで活かすData API
Hajime Fujimoto
Data APIの背景と活用方法 MTCafe Nagoya Ver.
Data APIの背景と活用方法 MTCafe Nagoya Ver.
Hajime Fujimoto
Movable Type 6.0をできるだけ安く使う方法
Movable Type 6.0をできるだけ安く使う方法
Hajime Fujimoto
Movable Type 6の新機能 Data APIの活用法
Movable Type 6の新機能 Data APIの活用法
Hajime Fujimoto
Data APIの基本
Data APIの基本
Hajime Fujimoto
WordPress on Movable Type
WordPress on Movable Type
Hajime Fujimoto
Data APIの背景と活用方法
Data APIの背景と活用方法
Hajime Fujimoto
WordPress on Movable Type
WordPress on Movable Type
Hajime Fujimoto
Vagrantのすすめ
Vagrantのすすめ
Hajime Fujimoto
WordPress on Movable Type
WordPress on Movable Type
Hajime Fujimoto
WordPress on movable type(WordCamp Kobe 2013)
WordPress on movable type(WordCamp Kobe 2013)
Hajime Fujimoto
Wordpress on Movable Type~WPConnectorプラグインのご紹介~
Wordpress on Movable Type~WPConnectorプラグインのご紹介~
Hajime Fujimoto
Más de Hajime Fujimoto
(20)
Movable Typeでロボットを動かす?AIスピーカーをしゃべらせる?Data APIでMovable TypeとIoTをFUSION
Movable Typeでロボットを動かす?AIスピーカーをしゃべらせる?Data APIでMovable TypeとIoTをFUSION
コンテンツタイプの活用と拡張
コンテンツタイプの活用と拡張
PowerCMSとIoTの連携
PowerCMSとIoTの連携
Connect with Data API
Connect with Data API
Objecttreeプラグイン&ObjectRelationプラグインのご紹介
Objecttreeプラグイン&ObjectRelationプラグインのご紹介
PHPやVBAでMovable Typeを操作しようData API Library for PHP/VBAのご紹介
PHPやVBAでMovable Typeを操作しようData API Library for PHP/VBAのご紹介
Movable Typeの権限と承認フロー
Movable Typeの権限と承認フロー
はじめよう!MovableType.net ハンズオン
はじめよう!MovableType.net ハンズオン
JavaScriptテンプレートエンジンで活かすData API
JavaScriptテンプレートエンジンで活かすData API
Data APIの背景と活用方法 MTCafe Nagoya Ver.
Data APIの背景と活用方法 MTCafe Nagoya Ver.
Movable Type 6.0をできるだけ安く使う方法
Movable Type 6.0をできるだけ安く使う方法
Movable Type 6の新機能 Data APIの活用法
Movable Type 6の新機能 Data APIの活用法
Data APIの基本
Data APIの基本
WordPress on Movable Type
WordPress on Movable Type
Data APIの背景と活用方法
Data APIの背景と活用方法
WordPress on Movable Type
WordPress on Movable Type
Vagrantのすすめ
Vagrantのすすめ
WordPress on Movable Type
WordPress on Movable Type
WordPress on movable type(WordCamp Kobe 2013)
WordPress on movable type(WordCamp Kobe 2013)
Wordpress on Movable Type~WPConnectorプラグインのご紹介~
Wordpress on Movable Type~WPConnectorプラグインのご紹介~
Último
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Hiroshi Tomioka
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
CRI Japan, Inc.
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
Toru Tamaki
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
Toru Tamaki
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
atsushi061452
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NTT DATA Technology & Innovation
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
Hiroshi Tomioka
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
CRI Japan, Inc.
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
Último
(11)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
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
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
Descargar ahora