Movable Typeの管理画面カスタマイズで、プラグイン経由でフッターのJavaScriptにコードを追加しようとするときに、jq_js_includeにappendするとダイアログ表示にもコードが追加されることがあります。
MTの管理画面でjQueryを追加してカスタマイズするとき、footer.tmplファイルにある、<mt:var name="jq_js_include">にappendする(append=1として変数に追加する)という方法を以前このブログ内において公開していたのですが、これをおこなったときにダイアログを表示(テンプレートの初期化とか、エントリ編集画面のファイル・画像アップロードのときとか)したときにも追加されることがあるのを確認できました(MTOS 5.02)。
追加したコードの書き方によっては必要もない箇所でカスタマイズしたコードの読み込みがおこなわれることもあるのでないかとおもい、その対処を考えてみました。
なお、これが再現されるのはTransformerプラグインでsetvarblockを使いappend=1というオプションを利用したなどの場合で、直接当該テンプレートのコピーをalt-templeでカスタマイズした場合には問題ないものとおもわれます。
(1)footer.tmplの代替テンプレートを作り、カスタマイズ用の変数をセットする
先述の現象は、/MTシステムフォルダ/tmpl/cms/dialog/footer.tmpl で<mt:var name="jq_js_include">が記述されていることによります。
つまるところダイアログのテンプレートを除外すればいいわけなんですが、ここは条件式なしで変数をセットしておいてそこに追加させるという方法で対処してみます。
- /MTシステムフォルダ/tmpl/cms/include/footer.tmplファイルをコピーしてalt-tmplフォルダ以下に/cms/include/footer.tmplをおきます
- (コピー先の)footer.tmplをエディタで開いて、このリスト下に示すコードを追加します
- 編集後はサーヴァにローカルと同じ構成でアップロードします
- footer.tmplに追加するコード。
追加の場所は
</body>の上に。ここでは変数名をjq_custom_includeとした。<script type="text/javascript"> jQuery(function($){ <mt:var name="jq_custom_include"> }); </script> <!-- 追加コードここまで --> </body> </html>
勿論、上記コードのscript内およびjQuery(function...内に直接になんらかの処理のコードを書くということもできます(このエントリではプラグイン等でappendを利用することを想定したつもりですが)。scriptタグ自体を追加側(setvarblock内)のコードに委ねるというのであれば変数の呼び出し(mt:var name=)だけ置けばよいことになるでしょう。
ちなみに追加させるほうのコードについては、jQuery()といった書き方を$()で書くことができるという寸法であります。
jQueryのコードの追加
あとは、setvarblockで任意のコードをappendです。
<mt:setvarblock name="jq_custom_include" append="1">
/* append code
$("#foo").css("background", "#ffffff");
*/
</mt:setvarblock>
(2)スクリプトがダイアログのとき動作しないようにする
コードを書くにあたって、ダイアログと当該テンプレートで共通しないidかclassを参照するようにするのがコツなのですが、カスタマイズのスクリプトがダイアログのときは動かないようにコードで分岐しておく、ということも考えられます。
これには、dialog.tmplでルート要素にdialogというIDがつけられていることを利用します(ヴァージョンアップ等でなくなる可能性はあるかもです)。
以下は、jQuery('#dialog')でIDをgetして分岐するコードです。*else{以降は適当な(動作に影響をおよぼさない)コードを。
<mt:setvarblock name="jq_js_include" append="1">
var gt_html_id = jQuery('#dialog');
if(gt_html_id==""){return;}
else {
// Do Something
jQuery('#bootstrapper').removeAttr('class');
}
</mt:setvarblock>
この例では、ID bootstrapperのclassがダイアログのiframeでリムーヴされずに残っているはずです。(Firebug等のツールで確認します)
追記(2010.07.22)プラグインでの追加方法の対策で微妙ですが公開しておきます。
(3)プラグインで対策してみる
例えば、include/header.tmpl でrelated_contentという変数がセットされており、/dialog/header.tmplではセットされていないことからこれを置換する形で。。
my $old = qq(<mt:setvarblock name="related_content">); my $new = <<EOT; # # ここにappend予定のsetvarblock ! # <mt:setvarblock name="related_content"> EOT $$tmpl_ref =~ s/$old/$new/;
あとこまかな事など
cms/dialog/header.tmplにおいて、<mt:var name="html_head">、<mt:var name="js_include">の記述があるので、appendする場合についても同じ状況になることがあるかも知れません。
以上の内容は自分が試した環境に基づいています。早い話、MT編集画面のカスタマイズをしていなければこれらの問題はまずおこらないということです。確認にはFirefox + Firebug でダイアログ表示のiframeを別のウィンドウで表示させたうえでページのHTMLをチェックしました。
個人的には、何かの操作ボタンを追加するとかいったカスタマイズについて、或る操作の時だけ必要というようなものはブックマークレットでもいいのではないかと考えています。
おもいつくままで整理できずにまとめたので、ちょっと何いってるのか分からないかんじで申し訳ありません。