これは MTAppjQuery Advent Calendar 2018 - Adventar の 5日目の記事です。 今回は、MTAppjQuery の user.js に HTML を書くときのちょっとしたコツをご紹介します。
これは MTAppjQuery Advent Calendar 2018 - Adventar の 5日目の記事です。
今回は、MTAppjQuery の user.js に 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 変数を使うと、そのありがたさを味わえます。
以上です。