Embed Size (px)
DESCRIPTION
2013.10.6のMTCafe Sapporoで使用したスライドです
Citation preview
Movable Type 6を使ったサイト構築
&MTAppjQueryでのカスタマイズ例
柳谷真志（@mersy）奥脇知宏（@tinybeans）
bit part 紹介
bit part 紹介
•柳谷真志（@mersy）、奥脇知宏（@tinybeans）
bit part 紹介
•柳谷真志（@mersy）、奥脇知宏（@tinybeans）
•2013年1月結成のユニット
bit part 紹介
•柳谷真志（@mersy）、奥脇知宏（@tinybeans）
•2013年1月結成のユニット
•8月「bit part 合同会社」設立
bit part 紹介 / mersy
•柳谷真志やなぎやまさし
• linker、アイペアーズ（株）
•木曜から札幌きてます！
bit part 紹介 / mersy
bit part 紹介 / tinybeans
•奥脇知宏おくわきともひろ
•かたつむりくんのWWW
•Movable Type 5.1 プロの現場の仕事術（毎日コミュニケーションズ）
bit part 紹介 / plugins
•flexibleSearch •MTAppjQuery
•MTML Completions
• compress modifieretc...
bit part 紹介 / plugins
•flexibleSearch •MTAppjQuery
•MTML Completions
• compress modifieretc...
ドキュメント販売中！！http://bitpart.thebase.in/
DEMOサイトの構成
DEMOサイトの構成 < デザインについて >
•Six Apart のごはんレシピhttp://makanai.sixapart.jp/
DEMOサイトの構成
DEMOサイトの構成 < デザインについて >
DEMOサイトの構成 < デザインについて >
•1ウェブサイト
•ウェブサイトで記事を管理
•カテゴリ、タグによる分類
DEMOサイトの構成< MTの概要 >
• index_top：トップページ
•search：検索ページ
•admin_js：MTAppjQuery用user.js
• load_js：追加読み込み
DEMOサイトの構成 < インデックステンプレート >
•archive_category：カテゴリページ
•archive_entry：個別記事ページ
DEMOサイトの構成 < アーカイブテンプレート >
• config
• mod_category_list
• mod_googletagmanager
• mod_header
• mod_header_top
• mod_html_head
• mod_script
• mod_search
• mod_tag_list
DEMOサイトの構成 < テンプレートモジュール >
•追加読み込み
•検索
DEMOサイトの構成 < DataAPI使ってる部分 >
•トップページのコードhttps://gist.github.com/mersy/2676be477cd4c3c4798f
DEMOサイトの構成 < DataAPI で追加読み込み >
•mod_scripthttps://gist.github.com/mersy/3857dd1419aa4941971e
DEMOサイトの構成 < DataAPI で追加読み込み >
• load.jshttps://gist.github.com/tinybeans/f50e2ca922678545cf5b
DEMOサイトの構成 < DataAPI で追加読み込み >
• load.js で Data APIオブジェクトを作成https://gist.github.com/mersy/3486116e0d5685c09328
DEMOサイトの構成 < DataAPI で追加読み込み >
•追加読み込み部分のコードhttps://gist.github.com/mersy/3af8f8c4aa7904e3f5c0
DEMOサイトの構成 < DataAPI で追加読み込み >
•getApiEntries (1, params, "");⇒api.listEntriesとその他の処理をまとめた関数
•api.listEntries(siteId, params, function(response) {});⇒Movable Type Data API SDK library で提供されている記事の一覧を取得する関数
DEMOサイトの構成 < DataAPI で追加読み込み >
•getApiEntries()https://gist.github.com/mersy/eb1188fc1477c1f5056d
DEMOサイトの構成 < DataAPI で追加読み込み >
•setHTMLhttps://gist.github.com/mersy/a23c54e04a241d658a37⇒JSONの1記事分の情報を渡してHTMLを作る
DEMOサイトの構成 < DataAPI で追加読み込み >
• jsonのサンプルhttps://gist.github.com/mersy/7779bf997efe3c614355
http://makanai.sixapart.jp/mt/mt-data-api.cgi/v1/sites/1/entries?limit=1
DEMOサイトの構成 < DataAPI で追加読み込み >
DEMOサイトの構成
< DataAPI で検索 >
DEMOサイトの構成 < DataAPI で検索 >
•検索結果URL例
•http://makanai.sixapart.jp/search.html?text=肉&category=肉系ごはん&tag=豚肉
•検索の制限事項
•キーワードのみ複数可、他は未対応
DEMOサイトの構成 < DataAPI で検索 >
DEMOサイトの構成 < DataAPI で検索 >
<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 resulthttps://gist.github.com/mersy/a4e28a662744dba1a1cd
DEMOサイトの構成 < DataAPI で検索 >
•getApiEntries (1, params, pageTitle.join(", "));部分で渡す
DEMOサイトの構成 < DataAPI で検索 >
•DataAPIを使う＝JSONが返ってくる
•これまでのMTMLの書き方とは発想を変える必要
•JavaScript大事
DEMOサイトの構成
MTAppjQueryを使った管理画面のカスタマイズ
•材料のカスタムフィールドで、MTAppLineBreakField
MTAppjQuery < MTAppLineBreakField >
MTAppjQuery < MTAppLineBreakField >
•カスタムフィールド
•システムオブジェクト：記事
•名前：材料
•種類：テキスト（複数行）
•basename：txtingredient
MTAppjQuery < MTAppLineBreakField >
if (mtappVars.screen_id === "edit-entry") { $("#customfield_txtingredient").MTAppLineBreakField();}
MTAppjQuery < MTAppLineBreakField >
<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 < MTAppLineBreakField >
•HTMLがそんなにおかしくならない
<p class="mb5">新タマネギ</p><p class="mb5">さつま揚げ</p><p class="mb5">塩</p>
MTAppjQuery < MTAppLineBreakField >
•テンプレートの最終編集者が違う場合にアラート
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 < MTAppDynamicSelect >
MTAppjQuery < MTAppDynamicSelect >
<mt:EntryPrimaryCategory><p class="listCategory<mt:If tag="CategoryColor"> <mt:CategoryColor></mt:If>"><a href="/<mt:CategoryBasename />/"><mt:CategoryLabel></a></p></mt:EntryPrimaryCategory>
MTAppjQuery < MTAppDynamicSelect >
•カスタムフィールド
•システムオブジェクト：カテゴリ
•名前：カテゴリカラー
•種類：テキスト
•basename：categorycolor
MTAppjQuery < MTAppDynamicSelect >
•表示上のラベルと実際のデータを別に持たせることができる
MTAppjQuery < MTAppDynamicSelect >
if (mtappVars.screen_id === "edit-category") { $("#customfield_categorycolor").MTAppDynamicSelect({ text: '0|選択してください,cat1|水色,cat2|黄緑,cat3|オレンジ,cat4|ピンク,cat5|紫,cat6|青,cat7|緑,cat8|紺', separateMode: true });}
MTAppjQuery < MTAppDynamicSelect >
•compress モディファイアでコードをスッキリ
MTAppjQuery < compress モディファイア >
•compress="1" => 空行が削除
•compress="2"=> 空行と空白が削除
•compress="3" => 空行、空白文字、改行が削除
MTAppjQuery < compress モディファイア >
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 < compress モディファイア >
•その他の機能はドキュメントで！
MTAppjQuery
制作秘話
•DataAPIの機能がたりなかったり、作業中に開発・実装されていたり
制作秘話
•DataAPIでAssetはつかえるけど、サムネイルのリンクはとれない！？→RC2では解決済み！！
制作秘話
•カテゴリの順番がよくわからない？メインカテゴリが最後！？⇒リリースまでには修正されるらしい。
制作秘話
MTEZ すげー！！
•MTEZはやい！Movable Typeは再構築が遅いとか言わせない！
制作秘話
•MTEZのプラグイン認識のタイミングがちょっと分からない？？
•→MTAppjQuery のuser.jsの反映が即時というわけでもなさそう。。。
•→無効にしたらすぐ認識した？
制作秘話
•お値段がね・・・・
詳しくは=> http://www.sixapart.jp/movabletype/ez/「【無料】WEBサイト引越しキャンペーン」をやってるみたいです。。。
制作秘話
本日のまとめ
•Beta 版で構築するってことはそういうこと
•Data API でやれることが広がる！
•でも Data API は JavaScript がががが。。。
•MTAppjQuery でちょっとだけ使いやすく
•MTEZすげー
One more thing
MT6の書籍がでます！！
本日のまとめ
•MovableType 6.0プロの現場の仕事術
•11月発売予定（原稿ガンバリマス！！）
•マイナビ刊
•Data API 解説
•DEMOサイトの詳細解説
ご静聴ありがとうございました。
Update bit part, everyday!!
MT::Lover::bitpart
