ASP.NET MVC、jQuery template、恋の予感

皆さんは jQuery template というプラグインをご存知でしょうか？名前の通り jQuery 関連のプラグインなんですが、これが非常に優れものでして最近興奮しっぱなしです。

何をするプラグインかというと、名前に template とあるように JavaScript で書かれたテンプレートエンジンなんですよ。テンプレートエンジンと言っても ASPX や Razor のように高機能なものではありませんが、それだけでも革命的なプラグインだと思っています。

何はともあれ使ってみることにしましょう。今回は Twitter からユーザーのツイートを読み込んで表示するという非常に単純なプログラムを作ります。

Page not found | jQuery API Documentation

まずは jQuery template を読み込む必要が当然あります。公式ページからダウンロードできますが、Microsoft Ajax CDN でも配布されているので、こっちを使うことをお勧めします。当然ですが jQuery 自体の読み込みも必要になりますよ。

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js "></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>

これで jQuery template を使う準備が出来ました。先ほどの公式ページのドキュメントを見ていただければわかるように、メソッドは 6 つしかなく非常にシンプルなプラグインになっています。

とりあえずツイートを表示するためのテンプレートを作成するわけですが、テンプレートの作り方には 2 種類あって、それぞれテンプレートのコンパイル時に引数として渡すか、type="text/x-jquery-tmpl" を指定した script タグの中に書き込むかになります。今回はしっかりと分離しておきたいので script タグを使います。

<script id="tweet-template" type="text/x-jquery-tmpl">
    <li><img src="${user.profile_image_url}" /><a href="http://twitter.com/${user.screen_name}">${user.screen_name}</a><p>${text}</p></li>
</script>

これでテンプレートは完成しましたが、${...} という見慣れない指定がありますね。これが jQuery template が認識するテンプレートタグの一つで、実行時には ${...} 内の文字列が評価されて出力されます。HTML エスケープを行ってくれるので、ASPX で言うところの <%: %> タグに相当します。<%: %> タグ相当のテンプレートタグがあるなら <%= %> に相当する {{...}} テンプレートタグもあります。このタグを使うと HTML エスケープを行いませんので、タグを有効に出来るわけですね。

他にも条件分岐を行う {{if}}, {{else}} タグ、ループ処理を行う {{each}} タグ、別のテンプレートを評価して埋め込む {{tmpl}} タグなどがあります。引数は少し指定が特殊なものがあるので、ドキュメントを見てくださいね。

後は Twitter からツイートを取得して jQuery template に渡す処理です。jQuery オブジェクトに tmpl メソッドが追加されているので、表示したいオブジェクトを渡して呼び出して、何処かの親要素に追加すれば完成です。

// tmpl メソッドはテンプレートのコンパイルを行っている
$("#tweet-template").tmpl(tweets).appendTo("#target");

新しく要素を作成するのに DOM 操作を行う必要がないというのは非常に魅力的です。テンプレートの分離はやはり大切ですね。

Twitter から JSONP でデータを取得する部分は省略しましたが、以下に完成したコード全てを用意したのでそちらで確認してください。このサンプルでは私のツイート 20 件を取得して表示します。

<html>
<head>
    <title>jQuery template + Twitter</title>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js "></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
    <script type="text/javascript">
    $(function() {
        $.getJSON("http://api.twitter.com/1/statuses/user_timeline.json?screen_name=shibayan&callback=?", function(tweets) {
            $("#tweet-template").tmpl(tweets).appendTo("#target");
        });
    });
    </script>
</head>

<body>

<ul id="target"></ul>

<script id="tweet-template" type="text/x-jquery-tmpl">
    <li><img src="${user.profile_image_url}" /><a href="http://twitter.com/${user.screen_name}">${user.screen_name}</a><p>${text}</p></li>
</script>

</body>
</html>

これを実行すると以下のようになります。

こんなに短いコードですがしっかり動いています！テンプレートという形で HTML タグを切り出せたので、デザインの変更にも非常に強いです。デザイナさんとの分業も可能になりそうですね。

そして ASP.NET MVC との連携ですが、Json メソッドを使うことで簡単に JSON 出力を行うことが出来るのですが、JSONP には残念ながらそのままでは対応していません。しかし大丈夫、Stack Overflow には JsonpResult の実装がありました。

json - ASP.net MVC returning JSONP - Stack Overflow

クエリパラメータとして callback を渡してあげると JSONP として返してくれます。非常に便利ですね！

ASP.NET MVC は JSON 形式にもしっかりと対応しているので、Ajax を使用すれば取得した JSON データを使って jQuery template で表示など簡単に出来ます。これは夢が広がりますね！

しばやん雑記

ASP.NET Core とメイドさんが大好きなフリーランスのプログラマーのブログ

ASP.NET MVC、jQuery template、恋の予感