MTCafe sapporo#4

2,150 views

Published on

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

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,150
On SlideShare
0
From Embeds
0
Number of Embeds
681
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

MTCafe sapporo#4

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

×