これは 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 変数を使うと、そのありがたさを味わえます。

以上です。