MTAppjQuery の user.js に HTML を書くときのちょっとしたコツ

これは MTAppjQuery Advent Calendar 2018 - Adventar の 5日目の記事です。

今回は、MTAppjQuery の user.js に HTML を書くときのちょっとしたコツをご紹介します。

HTML を書くときのコツ

user.js に HTML を書いて管理画面にボタンなど HTML 要素を新たに追加することはよくあります。

例えば昨日の MTAppjQuery で記事編集画面に特定のテンプレートを再構築するボタンを付けてみよう では、下記のようにしてボタンを追加しています。

 /*
 <mt:SetVarBlock name="rebuild_one">
 <a id="bp-update-time" href="#" class="btn btn-default mt-rebuild">
 <svg title="再構築" role="img" class="mt-icon"><use xlink:href="' + mtappVars.static_path + '/images/sprite.svg#ic_build"></use></svg> 時刻を更新
 </a>
 </mt:SetVarBlock>
 */
 $('.mt-rebuild').after('<mt:Var name="rebuild_one" compress="3" />');

実際に HTML を挿入している部分は、

$('.mt-rebuild').after('<mt:Var name="rebuild_one" compress="3" />');

この部分です。

HTML を事前に mt:SetVarBlock タグで rebuild_one という MT 変数の中にセットし、MTAppjQuery の機能の compress="3" モディファイアでインデントや空行を除去し、 '<mt:Var name="rebuild_one" compress="3" />' で JavaScript の文字列として出力しています。

場合によってはこの mt:Var にさらに encode_js="1" モディファイアをつけて JavaScript で扱える文字列にエスケープするのも良いです(今回は中で ' + mtappVars.static_path + ' と少し JavaScript が混じっているのでエスケープしていません)。

こうすることで、インデントを保って見やすいままの状態で HTML を書けます。 mt:SetVarBlock の前後でコメントアウト /* */ しているのは、エディタでシンタックスエラーが出てしまうのを防ぐためです。

ちなみに、普通の JavaScript なら下記のようになります。

$('.mt-rebuild').after('' +
 '<a id="bp-update-time" href="#" class="btn btn-default mt-rebuild">' +
 '<svg title="再構築" role="img" class="mt-icon"><use xlink:href="' + mtappVars.static_path + '/images/sprite.svg#ic_build"></use></svg> 時刻を更新' +
 '</a>'
);

これだけの量なら普通に書いても良いですが、もう少し HTML が複雑になってきたり、後々編集したりすることを考えると上記のように MT 変数を使うと、そのありがたさを味わえます。

以上です。

MTAppjQuery について

Movable Type の管理画面をフロントエンドの知識だけで簡単にカスタマイズすることができます。

クライアントの満足度を高めるためにぜひお使いください。

MTAppjQuery の詳細を見る

MTAppjQuery