“IIS 7 版 mod_info 的なもの” を jQuery Templatesで使う
先週、マイクロソフトが .NET jQuery Extensions として開発を進めてきた機能が公式な jQuery のプラグインとして公開されました。
これについて詳しい説明は、同僚の井上( 章 ) のブログで見ていただくとして、このプラグインの中に jQuery Template というものがあります。
これは JavaScript オブジェクトに、HTML ドキュメントの <script> タグ内であらかじめ HTML で定義しておいた UI ( テンプレート ) を適用して描画してくれるという、いわゆるクライアントレンダリングの機能です。
これについての詳しい説明も、同僚の井上( 章 ) のブログで見ていただくとして (オイ)、このブログでは、以前の記事で紹介した “IIS 7 版 mod_info 的なものをサービスとして使用するツール” から JSON でデータを取り出し、描画するサンプルを紹介します。
と、言っても、実際の HTML を記述すると長くなってしまうので、以下の SkyDrive からダウンロードしていただくことになるのですが。
じつは、 この記事で紹介している XSL を使用したページの描画は、InternetExplorer ではうまく行えませんでした。
しかし、今回の jQuery Templates を使用したページは、他のブラウザでも正しく描画されます。( いまさらなんですが汗 )
サンプルの配置について
今回のサンプル HTML は、この記事で紹介した IISResourceWatch が返す JSON と jQuery Template を使用して 1 つのファイルで 4 つの画面をまかないます。
また、使用しているスクリプトのライブラリも、マイクロソフトの CDN 上のものを使用しているので、追加のファイルも必要ありません。
前出の記事の内容をもとに IISResourceWatch ハンドラ (※) を IIS に設定し、その仮想ディレクトリ内にダウンロードした iisinfo.htm ファイルを配置すれば完了です。
(※) 今回のサンプルの検証中に、以前公開した MyResourceWatch が Web サイトの情報取得時に JSON が返さない不具合を発見したため修正し SkyDrive 上のファイルをアップデートしました。その際にネームスペースとアセンブリ名を MyResourceWatch から IISResourceWatch に変更しましたので、すみませんが適宜読み替えて作業ください。ちなみに、原因は if 文の簡単な書き間違いでした…Orz
今回のサンプルで行っているように、jQuery Template を使用すると、サーバーでホストされた JSON に対しクライアント側で直接 UI を割り付けることができます。
この組み合わせでアプリケーションをいくつか作成してみると気が付くのですが、アプリケーションの UI 生成はほとんどの場合、この組み合わせで充分で、わざわざサーバーサイドで UI を生成する必要がない場合がほとんどです。
つまりサーバーサイドではアプリケーションを純粋なサービスとして作成し、クライアント側では好きな UI を割り付けて使用することができるのです。とうぜん、UI を変更するためだけにアプリケーションのファイルを変更する必要はありません。
さらに、今回 jQuery Template とともに追加された機能のひとつである jQuery Datalinking を使用すると、JavaScript オブジェトと HTML のコントロールを連結することができますので、HTML で記述した UI と JavaScript オブジェクトの間の更新処理をいちいちコードで記述する必要もなくなります。
そして、更新された JavaScript オブジェクトを JSON としてサーバーにポスト し(※)、サーバ上のアプリケーション側では JSON をデシリアライズすればオブジェクトとして扱うことができます。
( ※ ) ここで、”ふつーに、form のポストでダメなのか?” という声もあるかと思うのですが、そうするとアプリケーションのロジックがブラウザ側の UI の構造に縛られてしまうのであまりウツクシクないと思います。
そうです。JSON と jQuery Template を組み合わせることで、ビジネス ロジック部分と UI 部分を完全に分離させることができるのです。
とくに ASP.NET MVC Framework には JSON メソッドというのが用意されており、MVC の Controller のオブジェクトを簡単に JSON としてレスポンスすることができますので、これらを積極的に組み合わせてアプリケーションを作成するのも面白いと思います。
ところで “MVC から View ( UI ) が無くなってしまったら、MVC とは言わないのでは?” と考える方もいると思うのですが、結局のところこの方法は View の部分を外出しにして静的なファイルで描画する、ということにすぎませんので、MVC の考え方になんら違いはありません。
ここらへんについてはデモを交えて Tech・Ed 2010 の公開セッションで話しておりますのでよろしければご覧ください。
T6-306 jQuery と ASP.NET AJAX Control Toolkit による AJAX アプリケーション開発
https://msdn.microsoft.com/ja-jp/events/ff973814.aspx
jQuery のような便利なライブラリの機能追加や、HTML5 の登場など、Web はますます面白くなってきそうですね。