Smartyのテンプレートに{}が含まれたJavaScriptを書くときに気をつけること

お昼は月見バーガーを食べる気満々の「たしろだいすけ（[my_twitter]）」でございます。

テンプレートエンジン「Smarty」のテンプレートファイル（表示用ファイル）上に、{}が含まれたJavaScriptを記述する際に発生する問題とその解決方法を紹介します。

問題点

Smartyはテンプレートファイル上の波括弧{}で囲まれた部分をデフォルトでは処理すべき箇所と認識します。

例えば下記のGoogle AnalyticsのトラッキングコードをそのままSmartyのテンプレートファイルに記述してしまうと、{}の部分（7行目〜11行目）を処理すべき箇所と判断し、正しく表示されるべきページは真っ白なページになります。

<script type="text/javascript">

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-xxxxxxxx-1']);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

</script>

解決方法

解決方法ですが、{}を処理すべき箇所と判断させない為に、下記のように{literal}{/literal}で囲めばよいのです。

{literal}
<script type="text/javascript">

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-xxxxxxxx-1']);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

</script>
{/literal}

参考サイト

{literal} | Smarty