MTCafe sapporo#4
Upcoming SlideShare
Loading in...5
×
 

MTCafe sapporo#4

on

  • 1,575 views

2013.10.6のMTCafe Sapporoで使用したスライドです

2013.10.6のMTCafe Sapporoで使用したスライドです

Statistics

Views

Total Views
1,575
Views on SlideShare
943
Embed Views
632

Actions

Likes
0
Downloads
1
Comments
0

9 Embeds 632

http://webcake.no003.info 321
http://bit-part.net 260
http://www.bit-part.net 21
http://cloud.feedly.com 15
http://www.feedspot.com 8
http://cms.tinybeans.net 2
http://128.199.225.107 2
http://new.bit-part.net 2
http://embedresponsively.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

MTCafe sapporo#4 MTCafe sapporo#4 Presentation Transcript

  • 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 modifier etc...
  • bit part 紹介 / plugins •flexibleSearch •MTAppjQuery •MTML Completions •compress modifier etc... ドキュメント販売中!! 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_script https://gist.github.com/mersy/ 3857dd1419aa4941971e DEMOサイトの構成 < DataAPI で追加読み込み >
  • •load.js https://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 で追加読み込み >
  • •setHTML https://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 result https://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