Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

フロントエンドな人にこそ知ってほしいMTMLの話

1,962 views

Published on

2015年1月17日に札幌で開催された「CMSどうでしょう MT・WP対決列島 札幌編」でお話した内容です。
管理画面カスタマイズについてお話していますが、ご利用は計画的に。

Published in: Internet

フロントエンドな人にこそ知ってほしいMTMLの話

  1. 1. CMSどうでしょう MT・WP対決列島 札幌編 2015.01.17 at ACU フロントエンドな人にこそ知ってほしい MTMLの話
  2. 2. 自己紹介
  3. 3. 西山 泰史 にしやま やすふみ 株式会社ジャクスタポジション 札幌市在住のWebディレクター Movable Type でのサイト構築 2013年よりMT蝦夷を主宰 三度の飯より食べることが好き
  4. 4. ジャクスタと言えば
  5. 5. Webデザイナーのためのショッピングカート SKELETON CART http://skeleton.juxtaposition.jp/ Movable Typeの画像アップロード機能補助プラグイン ImageUploadUtility http://skeleton.juxtaposition.jp/image-upload-utility/
  6. 6. 西山と言えば
  7. 7. ラーメン!
  8. 8. 軌道修正
  9. 9. Let s Enjoy MTML 今日のミッション
  10. 10. 今日のアジェンダ ・MTMLの基本 ・管理画面のカスタマイズ ・MTAppjQuery ・ちょっとやってみよう
  11. 11. MTML?
  12. 12. Movable Type Markup Language Movable Typeで利用するテンプレート記述言語 HTMLを拡張し、MTタグとして利用できる。
  13. 13. <?php the_title(); ?> ↓ <mt:EntryTitle> ex. ブログ記事タイトル
  14. 14. 記事がある場合  <a href= 01.html >記事タイトル①</a><br />  <a href= 02.html >記事タイトル②</a><br />  <a href= 03.html >記事タイトル③</a><br />     ・     ・     ・ 記事がない場合  <p>記事がありません</p> ex. ブログ記事一覧
  15. 15. <?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?> <a href="<?php the_permalink(); ?> > <?php the_title(); ?></a><br /> <?php endwhile; ?> <?php else : ?> <p>記事がありません</p> <?php endif; ?> ex. ブログ記事一覧(WP)
  16. 16. <mt:Entries> <a href= <mt:EntryPermaLink> > <mt:EntryTitle></a><br /> <mt:Else> <p>記事がありません</p> </mt:Entries> ex. ブログ記事一覧(MT)
  17. 17. ※外部ファイルのリンク機能を使用すると、  Dreamweaverなど+FTPで操作することもできます
  18. 18. Movable Typeは テンプレートの編集など ほぼ全ての操作を 管理画面で行う
  19. 19. 管理画面のカスタマイズ
  20. 20. Movable Typeの管理画面も MTタグで作られているので 自由にカスタマイズ可能
  21. 21. tmplフォルダからalt-tmplフォルダに 管理画面用テンプレートをコピー → 階層構造を同じにすると、 管理画面表示時に上書きしてくれる ※alt-tmplを空にすると初期状態に戻る
  22. 22. ex. 記事タイトル入力部に見出しを入れる
  23. 23. ex. 記事タイトル入力部に見出しを入れる
  24. 24. ex. 記事タイトル入力部に見出しを入れる 編集するテンプレート  alt-tmpl/cms/dialog/edit_entry.tmpl 編集する内容(1182行目)  <p>▼記事のタイトルを入れてください<p>  <input type= text name= title …省略 />
  25. 25. MTAppjQuery
  26. 26. PerlやMTMLの知識が無くても jQueryでMTの管理画面をカスタマイズできる
  27. 27. ex. 入力フィールドの並び替え ↓これを
  28. 28. ex. 入力フィールドの並び替え ↓こうしたい(概要を追加したい)
  29. 29. ex. 入力フィールドの並び替え (function($){ if(mtappVars.screen_id == edit-entry ){ $.MTAppFieldSort({ sort: title,excerpt,text,keywords }); ↑この順番に並び替える } })(jQuery); あらかじめ用意されているuser.jsに以下を記載
  30. 30. ex. 入力フィールドの並び替え MTMLじゃなくjQueryだけでOK
  31. 31. ちょっとやってみよう
  32. 32. alt-tmplとMTAppjQueryで 超簡易版承認ワークフローを作る 手順 ① 一部のユーザーから「公開」する権限を奪う ② alt-tmplをで2種類のテンプレートを編集する ※あくまでもアイディアですのでご留意ください
  33. 33. ユーザーから「公開」する権限を奪う 通常は未公開/公開/日時指定を選択可能 MTAppjQueryで 公開承認者以外は未公開だけ選択可能に変更する
  34. 34. ユーザーから「公開」する権限を奪う (function($){ // AuthorID:4以外には公開を非表示、全員に日時指定を非表示 if(authorID == "4"){ $('#status').children('[value=4]').remove(); }else{ $('#status').children('[value=2]').remove(); $('#status').children('[value=4]').remove(); } })(jQuery); user.jsに以下を記載
  35. 35. ユーザーから「公開」する権限を奪う 通常は未公開/公開/日時指定を選択可能 MTAppjQueryで 公開承認者以外は 未公開だけ選択可能に 変更する
  36. 36. alt-tmplをでテンプレートを編集する ① edit_entry.tmpl(記事投稿画面)の編集 表示:パブリッシュしたページを表示 共有:MT上からメールを送信
  37. 37. alt-tmplをでテンプレートを編集する ① edit_entry.tmpl(記事投稿画面)の編集 メールアドレスを入力してメールを送信
  38. 38. alt-tmplをでテンプレートを編集する ① edit_entry.tmpl(記事投稿画面)の編集 ただし、記事の公開前は「共有」が表示されていない 表示されていないなら、表示させればいい
  39. 39. alt-tmplをでテンプレートを編集する ① edit_entry.tmpl(記事投稿画面)の編集 <mt:if name= status_publish >∼</mt:if> → 記事が公開されている時に、表示/共有ボタンを表示してる
  40. 40. alt-tmplをでテンプレートを編集する ① edit_entry.tmpl(記事投稿画面)の編集 記事が公開されている時に表示ボタンを 記事が保存されていれば常に共有ボタンを表示 ↓ <mt:if name= status_publish >∼</mt:if>の中から、 共有ボタンを外に出した
  41. 41. alt-tmplをでテンプレートを編集する ① edit_entry.tmpl(記事投稿画面)の編集 記事が保存されていれば常に共有ボタンを表示
  42. 42. alt-tmplをでテンプレートを編集する ② edit_notify.tmpl(通知の送信画面)の編集 いちいち承認申請のメールアドレスを入れるのは面倒 できるだけ考えずに終わらせたい
  43. 43. alt-tmplをでテンプレートを編集する ② edit_notify.tmpl(通知の送信画面)の編集 通知を送る人に応じた承認申請する相手のアドレスを 初期値として自動セットしておけばいい
  44. 44. alt-tmplをでテンプレートを編集する ② edit_notify.tmpl(通知の送信画面)の編集 <textarea>の中でログインユーザーのIDで条件分岐させ ユーザーIDに応じた内容を初期値として入れておく ex. <mt:if name= author_id eq= 1 > </mt:if> → ユーザーIDが「1」ならその中身を出力
  45. 45. alt-tmplをでテンプレートを編集する ② edit_notify.tmpl(通知の送信画面)の編集 あとはメッセージを入力して「送信」するだけでOK
  46. 46. alt-tmplをでテンプレートを編集する 実際に送信されるメール この文面も テンプレートで 編集可能
  47. 47. 超簡易版 承認ワークフローの完成!
  48. 48. 超簡易版 承認ワークフローの完成! ※除外項目(実用的じゃない理由) ・差戻し機能 ・リビジョン管理機能 ・承認依頼メール内に  下書き記事への直リンクを記載 など
  49. 49. まとめ
  50. 50. ・MTMLはHTMLの拡張なので  比較的学習コストが低い ・MTAppjQueryとalt-tmplなら  ノンプログラマーでも  管理画面を自由自在にカスタムできる  (考え方によってはプラグイン的な感じも) ・MTMLを間違っても画面が白くならない
  51. 51. ありがとうございました! 引き続き、破壊王高山のステージをお楽しみください MT蝦夷 主宰 株式会社ジャクスタポジション 代表取締役 西山 泰史 CMSどうでしょう MT・WP対決列島 札幌編 2015.01.17 at ACU

×