MTCafe sapporo#4

Movable Type 6
を使ったサイト構築
&
MTAppjQueryでのカスタマイズ例
柳谷真志（@mersy）奥脇知宏（@tinybeans）

bit part 紹介
•柳谷真志（@mersy）、奥脇知宏（@tinybeans）

bit part 紹介
•2013年1月結成のユニット

bit part 紹介
•2013年1月結成のユニット
•8月「bit part 合同会社」設立

bit part 紹介 / mersy
•柳谷真志
やなぎやまさし
•linker、アイペアーズ（株）
•木曜から札幌きてます！

bit part 紹介 / tinybeans
•奥脇知宏
おくわきともひろ
•かたつむりくんのWWW
•Movable Type 5.1
プロの現場の仕事術
（毎日コミュニケーションズ）

bit part 紹介 / plugins
•ﬂexibleSearch
•MTAppjQuery
•MTML Completions
•compress modiﬁer
etc...

bit part 紹介 / plugins
•ﬂexibleSearch
•MTAppjQuery
•MTML Completions
•compress modiﬁer
etc...
ドキュメント販売中！！
http://bitpart.thebase.in/

DEMOサイトの構成
< デザインについて >

•Six Apart のごはんレシピ
http://makanai.sixapart.jp/

•1ウェブサイト
•ウェブサイトで記事を管理
•カテゴリ、タグによる分類
< MTの概要 >

•index_top：トップページ
•search：検索ページ
•admin_js：MTAppjQuery用user.js
•load_js：追加読み込み
< インデックステンプレート >

•archive_category：カテゴリページ
•archive_entry：個別記事ページ
< アーカイブテンプレート >

• conﬁg
• mod_category_list
• mod_googletagmanager
• mod_header
• mod_header_top
• mod_html_head
• mod_script
• mod_search
• mod_tag_list
< テンプレートモジュール >

•追加読み込み
•検索
< DataAPI使ってる部分 >

•トップページのコード
https://gist.github.com/mersy/
2676be477cd4c3c4798f
< DataAPI で追加読み込み >

•mod_script
3857dd1419aa4941971e

•load.js
https://gist.github.com/tinybeans/
f50e2ca922678545cf5b

•load.js で Data APIオブジェクトを作成
3486116e0d5685c09328

•追加読み込み部分のコード
3af8f8c4aa7904e3f5c0

•getApiEntries (1, params, "");
api.listEntriesとその他の処理をまとめた関数
•api.listEntries(siteId, params,
function(response) {});
Movable Type Data API SDK library で提供さ
れている記事の一覧を取得する関数

•getApiEntries()
eb1188fc1477c1f5056d

•setHTML
a23c54e04a241d658a37
JSONの1記事分の情報を渡してHTMLを作る

•jsonのサンプル
7779bf997efe3c614355
http://makanai.sixapart.jp/mt/mt-data-api.cgi/
v1/sites/1/entries?limit=1

< DataAPI で検索 >

•検索結果URL例
•http://makanai.sixapart.jp/search.html?text=
肉&category=肉系ごはん&tag=豚肉
•検索の制限事項
•キーワードのみ複数可、他は未対応

<mt:Include module="mod_html_head">
<body id="topPage" class="headerBg">
<mt:Include module="mod_googletagmanager">
<div class="wrapper">
<mt:Include module="mod_header">
<mt:Include module="mod_search">
<h3 id="pageTitle" class="h3_title">検索結果</h3>
<div id="entries" class="listWrapper">
<div id="resultMsg" class="detailDescription"></div>
<div id="loadingImg" class="loding" style="display:none;"><img
src="<mt:Var name="website_url">common/images/common/loding.gif" alt=""></div>
</div>
</div>
<input type="hidden" name="searchEnable" value="true">
<mt:Include module="mod_script" data_api="1" top="1">
</body>

•load.js search result
a4e28a662744dba1a1cd

•getApiEntries (1, params, pageTitle.join(", "));
部分で渡す

•DataAPIを使う＝JSONが返ってくる
•これまでのMTMLの書き方とは発想を変える必要
•JavaScript大事

MTAppjQueryを使った
管理画面のカスタマイズ

•材料のカスタムフィールドで、
MTAppLineBreakField
MTAppjQuery
< MTAppLineBreakField >

MTAppjQuery

•カスタムフィールド
•システムオブジェクト：記事
•名前：材料
•種類：テキスト（複数行）
•basename：txtingredient
MTAppjQuery

if (mtappVars.screen_id === "edit-entry") {
$("#customfield_txtingredient").MTAppLineBreakField();
}
MTAppjQuery

<mt:If tag="txtingredient">
<h4>材料</h4>
<mt:txtingredient split="n" setvar="ingredient">
<mt:SetVar name="ul_cond" value="close">
<mt:Loop name="ingredient">
<mt:If name="__value__" like="^・">
<mt:If name="ul_cond" eq="close">
<ul class="detailUL">
</mt:If>
<li> <mt:Var name="__value__" regex_replace="/^・/",""></li>
<mt:SetVar name="ul_cond" value="open">
<mt:Else>
<mt:If name="ul_cond" eq="open">
</ul>
</mt:If>
<p class="mb5"><mt:Var name="__value__"></p>
</mt:If>
</mt:Loop>
<mt:If name="ul_cond" eq="open">
</ul>
</mt:If>
</mt:If>
MTAppjQuery

•HTMLがそんなにおかしくならない
<p class="mb5">新タマネギ</p>
<p class="mb5">さつま揚げ</p>
<p class="mb5">塩</p>
MTAppjQuery

•テンプレートの最終編集者が違う場合にアラート
MTAppjQuery
< MTAppDialogMsg >

MTAppjQuery
< MTAppDialogMsg >

•テンプレートの最終編集者が違う場合にアラート
→ローカルで編集しているテンプレートが最新では
ない＝先祖返りを防げる
MTAppjQuery
< MTAppDialogMsg >

if (mtappVars.screen_id.indexOf("edit-template") > -1) {
if (mtappVars.author_name !== mtappVars.modified_by) {
$.MTAppDialogMsg({
title: 'テンプレート編集の警告',
content: '<span style="color:red;font-
weight:bold;">★★★★★★★★★★★★★★★★★★★★<br><br>最終更新者
はあなたではありません！！
<br><br>★★★★★★★★★★★★★★★★★★★★</span>',
width: 'auto',
height: 'auto',
modal: true,
hideEffect: ''
});
}
}
MTAppjQuery
< MTAppDialogMsg >

•使いやすいプルダウンメニュー
MTAppjQuery
< MTAppDynamicSelect >

MTAppjQuery

<mt:EntryPrimaryCategory>
<p class="listCategory<mt:If tag="CategoryColor">
<mt:CategoryColor></mt:If>">
<a href="/<mt:CategoryBasename />/"><mt:CategoryLabel></a>
</p>
</mt:EntryPrimaryCategory>
MTAppjQuery

•カスタムフィールド
•システムオブジェクト：カテゴリ
•名前：カテゴリカラー
•種類：テキスト
•basename：categorycolor
MTAppjQuery

•表示上のラベルと実際のデータを
別に持たせることができる
MTAppjQuery

if (mtappVars.screen_id === "edit-category") {
$("#customfield_categorycolor").MTAppDynamicSelect({
text: '0|選択してください,cat1|水色,cat2|黄緑,cat3|オレン
ジ,cat4|ピンク,cat5|紫,cat6|青,cat7|緑,cat8|紺',
separateMode: true
});
}
MTAppjQuery

•compress モディファイアでコードをスッキリ
MTAppjQuery
< compress モディファイア >

•compress="1"
=> 空行が削除
•compress="2"
=> 空行と空白が削除
•compress="3"
=> 空行、空白文字、改行が削除
MTAppjQuery

MTML例
<mt:Unless compress="2">
<ul>
<li>foo1</li>
<li>foo2</li>
<li>foo3</li>
</ul>
</mt:Unless>
HTML
<ul>
<li>foo1</li>
<li>foo2</li>
<li>foo3</li>
</ul>
MTAppjQuery

•その他の機能は
ドキュメントで！
MTAppjQuery

•DataAPIの機能がたりなかったり、
作業中に開発・実装されていたり
制作秘話

•DataAPIでAssetはつかえるけど、サムネイルのリ
ンクはとれない！？
→RC2では解決済み！！
制作秘話

•カテゴリの順番がよくわからない？
メインカテゴリが最後！？
リリースまでには修正されるらしい。
制作秘話

•MTEZはやい！
Movable Typeは再構築が遅いとか言わせない！
制作秘話

•MTEZのプラグイン認識のタイミングがちょっ
と分からない？？
•→MTAppjQuery のuser.jsの反映が即時という
わけでもなさそう。。。
•→無効にしたらすぐ認識した？
制作秘話

•お値段がね・・・・
詳しくは
=> http://www.sixapart.jp/movabletype/ez/
「【無料】WEBサイト引越しキャンペーン」
をやってるみたいです。。。
制作秘話

本日のまとめ
•Beta 版で構築するってことはそういうこと
•Data API でやれることが広がる！
•でも Data API は JavaScript がががが。。。
•MTAppjQuery でちょっとだけ使いやすく
•MTEZすげー

MT6の書籍がでます！！

本日のまとめ
•MovableType 6.0プロの現場の仕事術
•11月発売予定（原稿ガンバリマス！！）
•マイナビ刊
•Data API 解説
•DEMOサイトの詳細解説

ご静聴ありがとう
ございました。
Update bit part, everyday!!
MT::Lover::bitpart

MTCafe sapporo#4

MTCafe sapporo#4

Recommended

More Related Content

What's hot

What's hot(16)

Viewers also liked

Viewers also liked(7)

Similar to MTCafe sapporo#4

Similar to MTCafe sapporo#4(20)

More from bitpart

More from bitpart(11)

MTCafe sapporo#4