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

CMSどうでしょう　MT・WP対決列島　札幌編 2015.01.17 at ACU

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

MTMLの話

自己紹介

西山　泰史にしやま　やすふみ

株式会社ジャクスタポジション札幌市在住のWebディレクター Movable Type でのサイト構築 2013年よりMT蝦夷を主宰三度の飯より食べることが好き

ジャクスタと言えば

Webデザイナーのためのショッピングカート

SKELETON CART http://skeleton.juxtaposition.jp/

Movable Typeの画像アップロード機能補助プラグイン

ImageUploadUtility http://skeleton.juxtaposition.jp/image-upload-utility/

http://skeleton.juxtaposition.jp/

http://skeleton.juxtaposition.jp/image-upload-utility/

西山と言えば

ラーメン！

軌道修正

Let’s Enjoy MTML

今日のミッション

今日のアジェンダ・MTMLの基本・管理画面のカスタマイズ・MTAppjQuery ・ちょっとやってみよう

MTML？

Movable Type Markup LanguageMovable Typeで利用するテンプレート記述言語 HTMLを拡張し、MTタグとして利用できる。

<?php the_title(); ?> ↓

<mt:EntryTitle>

ex. ブログ記事タイトル

記事がある場合

　<a href=“01.html”>記事タイトル①</a> 　<a href=“02.html”>記事タイトル②</a> 　<a href=“03.html”>記事タイトル③</a> 　　　　・　　　　・　　　　・

記事がない場合

　記事がありません

ex. ブログ記事一覧

<?php if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?> <a href="<?php the_permalink(); ?>”> <?php the_title(); ?></a> <?php endwhile; ?>

<?php else : ?>

記事がありません

<?php endif; ?>

ex. ブログ記事一覧（WP）

<mt:Entries>

<a href=“<mt:EntryPermaLink>”> <mt:EntryTitle></a> 

<mt:Else>

記事がありません

</mt:Entries>

ex. ブログ記事一覧（MT）

※外部ファイルのリンク機能を使用すると、　Dreamweaverなど＋FTPで操作することもできます

Movable Typeはテンプレートの編集など

ほぼ全ての操作を管理画面で行う

管理画面のカスタマイズ

Movable Typeの管理画面も MTタグで作られているので自由にカスタマイズ可能

tmplフォルダからalt-tmplフォルダに管理画面用テンプレートをコピー

→

階層構造を同じにすると、管理画面表示時に上書きしてくれる ※alt-tmplを空にすると初期状態に戻る

ex. 記事タイトル入力部に見出しを入れる



§ 編集するテンプレート　alt-tmpl/cms/dialog/edit_entry.tmpl

§ 編集する内容（1182行目）　▼記事のタイトルを入れてください 　<input type=“text” name=“title” …省略 />

MTAppjQuery

PerlやMTMLの知識が無くても jQueryでMTの管理画面をカスタマイズできる

ex. 入力フィールドの並び替え↓これを

ex. 入力フィールドの並び替え↓こうしたい（概要を追加したい）

ex. 入力フィールドの並び替え

(function($){ if(mtappVars.screen_id == ‘edit-entry’){ $.MTAppFieldSort({ sort: ‘title,excerpt,text,keywords’

}); ↑この順番に並び替える }

})(jQuery);

あらかじめ用意されているuser.jsに以下を記載

ex. 入力フィールドの並び替えMTMLじゃなくjQueryだけでOK

ちょっとやってみよう

alt-tmplとMTAppjQueryで超簡易版承認ワークフローを作る手順 ① 一部のユーザーから「公開」する権限を奪う ② alt-tmplをで2種類のテンプレートを編集する

※あくまでもアイディアですのでご留意ください

ユーザーから「公開」する権限を奪う通常は未公開/公開/日時指定を選択可能

MTAppjQueryで公開承認者以外は未公開だけ選択可能に変更する

ユーザーから「公開」する権限を奪う

(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に以下を記載

ユーザーから「公開」する権限を奪う通常は未公開/公開/日時指定を選択可能

MTAppjQueryで公開承認者以外は未公開だけ選択可能に変更する

alt-tmplをでテンプレートを編集する① edit_entry.tmpl（記事投稿画面）の編集

表示：パブリッシュしたページを表示共有：MT上からメールを送信


メールアドレスを入力してメールを送信


ただし、記事の公開前は「共有」が表示されていない

表示されていないなら、表示させればいい


<mt:if name=“status_publish”>～</mt:if> → 記事が公開されている時に、表示/共有ボタンを表示してる


記事が公開されている時に表示ボタンを記事が保存されていれば常に共有ボタンを表示 ↓ <mt:if name=“status_publish”>～</mt:if>の中から、共有ボタンを外に出した


記事が保存されていれば常に共有ボタンを表示

alt-tmplをでテンプレートを編集する② edit_notify.tmpl（通知の送信画面）の編集

いちいち承認申請のメールアドレスを入れるのは面倒できるだけ考えずに終わらせたい


通知を送る人に応じた承認申請する相手のアドレスを初期値として自動セットしておけばいい


<textarea>の中でログインユーザーのIDで条件分岐させユーザーIDに応じた内容を初期値として入れておく

ex. <mt:if name=“author_id” eq=“1”> ~ </mt:if> → ユーザーIDが「1」ならその中身を出力


あとはメッセージを入力して「送信」するだけでOK

alt-tmplをでテンプレートを編集する実際に送信されるメール

この文面もテンプレートで編集可能

超簡易版

承認ワークフローの完成！

超簡易版

承認ワークフローの完成！※除外項目（実用的じゃない理由）・差戻し機能・リビジョン管理機能・承認依頼メール内に　下書き記事への直リンクを記載　など

まとめ

・MTMLはHTMLの拡張なので　比較的学習コストが低い・MTAppjQueryとalt-tmplなら　ノンプログラマーでも　管理画面を自由自在にカスタムできる　（考え方によってはプラグイン的な感じも）・MTMLを間違っても画面が白くならない

ありがとうございました！引き続き、破壊王高山のステージをお楽しみください

MT蝦夷　主宰株式会社ジャクスタポジション代表取締役　西山　泰史

CMSどうでしょう　MT・WP対決列島　札幌編 2015.01.17 at ACU

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

Internet