Microsoft Ajax Library (Preview 6)と
Microsoft Ajax Minifier

10月15日(米国時間)、Microsoft本社のDeveloper Platform部門Corporate Vice Presidentを務めるScott Guthrie氏は、自身のブログ「ScottGu's Blog」においてASP.NETチームが最新のMicrosoft Ajax Library (Preview 6)をリリースしたとアナウンスした。

Microsoft Ajax LibraryはMicrosoft Source License for ASP.NET Pre-Release Componentsのもとで公開されている、JavaScriptベースのクライアントサイド・フレームワーク。クロスブラウザで動作し、.NET Frameworkライクな型を踏襲しつつ、Ajax開発のためのさまざまな便利機能が提供されている。

同ライブラリはASP.NET 2.0, 3.5, 4.0をふくむ、どのASP.NETバージョンでも使用でき、ASP.NET WebフォームおよびASP.NET MVCプロジェクトの両方で使用可能となっている。独立したJavaScriptライブラリなので、ASP.NET以外の環境下でももちろん利用可能だ。

今回のバージョンアップでおこなわれた修正点はおもに次のとおり。

  • より良くなったシンタックス: クライアントコントロールの作成に対して、コードシンタックスがシンプルになった
  • クライアントスクリプトローダの実装: あたらしいクライアントスクリプトローダでは、クライアントコントロールから要求されるJavaScriptファイルやライブラリをすべて動的にロードし、ただしい順序でスクリプトを実行できる
  • jQueryとの統合がより改善: すべてのMicrosoft Ajaxコントロールは自動的にjQueryプラグインとして公開されるように

成果物にふくまれるReadme.docによると、Preview 6のリリースでは次のWebブラウザによってテストがおこなわれているとのこと。

  • Microsoft Internet Explorer 6, 7, 8
  • Mozilla Firefox 3 および 3.5
  • Apple Safari 5
  • Opera 10
  • Chrome 3

今回のバージョンアップではこれら以外にも、非常におおくの新機能や改善点がふくまれているとのことだ。

またASP.NETは同時にMicrosoft AJAX Minifierツールをリリースしている。その名のとおり、JavaScriptファイルをミニファイしてくれるツールだ。.NET Framwork 3.5ベースで開発がおこなわれており、Windowsコマンドラインベースのアプリケーションなどで提供されている。

Microsoft Ajax Libraryで提供されている機能は非常に多岐にわたる。本稿では成果物にふくまれているサンプルをベースに、今回あたらしくなったシンタックスとクライアントスクリプトローダ、そしてミニファイツールの比較結果をピックアップして紹介していこう。

Hello, Microsoft Ajax Library! - あたらしくなった構文をチェック

ここでの動作環境は次のとおり。

  • OS: MacOS X 10.6.1
  • Webブラウザ: Safari 4.0.3

まずは成果物をデプロイし、サンプルを表示させてみよう。Webブラウザで/Preview6Samples/WebSite/0_LoadingFrameworkScripts/1_UsingFullFrameworkScripts.htmにアクセスする。

Safariで1_UsingFullFrameworkScripts.htmにアクセス

1_UsingFullFrameworkScripts.htm内の要素「スクリプト部分」と「テンプレート部分」と抜き出す。

1_UsingFullFrameworkScripts.htm スクリプト部分

    <script type="text/javascript">

        // Data
        var gallery = [
            { Name: "Morro Rock"          },
            { Name: "Seagull reflections" },
            { Name: "Pier"                },
            { Name: "Giraffe Zoom"        },
            { Name: "Oryx"                }
        ]

        // The onReady callback will be called when the DOMReady event has fired,
        // (and when any dynamically loaded scripts have loaded - see later examples).
        Sys.onReady(function() {

            // Create the DataView control and attach to imagesListView ul element
            Sys.create.dataView("#imagesListView",
                {data:gallery}
            );

            // Create the Watermark and attach to the images galleryTitle input element
            Sys.create.watermark(".galleryTitle",
                {
                    WatermarkText: "Add title here...",
                    WatermarkCssClass: "watermarked"
                }
            );
        });

   </script>

1_UsingFullFrameworkScripts.htm <body>内

    <input class="galleryTitle" type="text" />

    <!--Client Template used by attached DataView-->
    <ul id="imagesListView" class="sys-template">
        <li>{{ Name }}</li>
    </ul>

リストで表示されているデータは、gallery変数にJSONオブジェクトとして格納している。Sys.onReady()はDOMのロードが完了した時点でコールバック処理をおこなう。Sys.create.dataView()でDataViewコントロールを作成し、そのコントロールをid="imagesListView"をもつul要素にさきほど作成したJSONオブジェクトと一緒にアタッチ。同様にWatermarkコントロールを作成し、表示する文字列と使用するCSSクラス名を指定、class="galleryTitle"をもつinput要素にアタッチ。テンプレート部分の「{{ Name }}」はJSONオブジェクトのキーを示しており、実行時に置換される。

以前の構文と比較するとかなりシンプルなものとなり、このように「パッと見」でなにがおこなわれているか簡単にわかるようなスタイルで書けるようになった。