Visual Studio 2008とASP.NET 3.5で広がったクライアントサイド開発

Visual Studio 2008徹底入門（4）

JavaScriptを使用したロール情報の利用

　ASP.NET 3.5ではMicrosoft AJAX LibraryとScriptManagerコントロールを利用して、ASP.NETロールサービスを呼び出して利用することができます。つまり、クライアントサイドでロールベースの制御が可能になりました。

　クライアントサイドでロールを参照できると、ロールによってコントロールの表示やデザインを変更、表示するデータの範囲を絞ることが可能になります（図8・図9）。

図8 Adminユーザーのページ

図9 Userユーザーのページ

　手順としては以下のようになります（前項で作成したWebサイトを利用しています）。

1. web.configにロールサービスの有効化設定をする
2. Webフォームを作成する
3. ロールサービスを呼び出すJavaScriptを記述する

web.configにロールサービスの有効化設定をする

　ロールサービスを利用するためにweb.configに有効化設定を記述します。

web.configの設定

<system.web.extensions>
    <scripting>
        <webServices>
            <authenticationService enabled="true"/>
            <roleService enabled="true"/>
        </webServices>
    </scripting>
</system.web.extensions>

　ロールサービスを利用するために、roleService要素のenabled属性をtrueに設定しています。

Webフォームを作成する

　今回はロールによる外観を変化させるために、認証後リダイレクトされるページ（Role/Default.aspx）Webフォーム上にいくつかのコントロールと、ロールサービスにアクセスするためにScriptManagerコントロールを配置します。

Role/Default.aspxの一部

<form id="form1" runat="server">
    <h1><div id="Role" ></div></h1>
    <asp:ScriptManager ID="ScriptManager1" runat="server">
        <Scripts>
            <asp:ScriptReference Path="Role.js" />
        </Scripts>
    </asp:ScriptManager>
    
    <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>
    <asp:HyperLink ID="HyperLink1" 
                   runat="server" NavigateUrl="~/LogIn.aspx">
                     Login状態保持のままLoginページへ</asp:HyperLink>
    <asp:Button ID="Button1" runat="server" 
                Text="Button" OnClientClick="return false;" />
    <div id="placeHolder">
        <button id="LogOutButton" 
                onclick="OnClick_LogOut();">LogOut</button>
    </div>
</form> 

　また、外観を変更するためのCSSも記述します。こちらも至ってシンプル。

Role.css

.Admin
{
    background-color: #0000FF;
    color: #FFFFFF;
    font-family: メイリオ;
    font-size: x-large;
}

.User
{
    background-color: #000000;
    color: #FFFFFF;
    font-family: メイリオ;
    font-size: x-large;
}

ロールサービスを呼び出すJavaScriptを記述する

　ロールサービスを呼び出すJavaScriptファイルの記述は以下のようになります。今回はAdminとRoleの2種類、そしてどちらかのロールにしか属していないことからシンプルなコードにしています。

Role/Role.js

/// <reference name="MicrosoftAjax.js"/>

var roleProxy;

        //  ページロード時に実行される処理
        function pageLoad(){
            
            roleProxy = Sys.Services.RoleService;
            roleProxy.load(LoadCompletedCallback);
        }

        //  読み込み処理完了時のコールバック関数
        function LoadCompletedCallback(roles)
        {
            //  roles[0]は認証済みのユーザーのロール
            //  それぞれにロールのテキストを表示
            var roleInfo = "Role: " + roles[0];
            $get("Button1").value = roleInfo;
            $get("Role").innerHTML = roles[0];

            //  Adminロール・Userロールによって表示を切り替え
            //  .classNameにてRoleのクラス名を設定し、CSSを反映            
            if (roles[0] == "Admin"){
                $get("Button1").className = "Admin";
                $get("Role").className = "Admin";
                $get("Calendar1").style.visibility = "visible";
                $get("HyperLink1").style.visibility = "hidden";
            }
            else if(roles[0] == "User")
            {
                $get("Button1").className = "User";    
                $get("Role").className = "User";
                $get("Calendar1").style.visibility = "hidden";
                $get("HyperLink1").style.visibility = "visible";
            }
        }

　以上の設定でJavaScriptを使用したロールサービスの利用は完成です。実際に実行すると、ユーザーのロールによって、「Role/Default.aspx」のページの表示が変わります（図8・図9）。

　Sys.Services.RoleService.loadメソッドでは、以下のような構文で記述することになっています。実際に設定した内容と照らし合わせて見てください。

loadメソッドの構文

Sys.Services. RoleService.load (
    処理成功時のコールバック関数。既定値はnull,
    例外発生時のコールバック関数。既定値はnull,
    ユーザー コンテキスト)

　Sys.Services. RoleServiceは他に以下メンバがあります。

Sys.Services. RoleServiceクラスのメンバ

メンバ	概要
DefaultWebServicePathフィールド	ロールサービスへのパスを指定
loadメソッド	認証ユーザーのロールを読み込む
defaultFailedCallbackプロパティ	例外発生時のコールバック関数の取得・設定
defaultLoadCompletedCallbackプロパティ	読み込み完了時のコールバック関数の取得・設定
defaultSucceededCallbackプロパティ	処理成功時のコールバック関数の取得・設定
defaultUserContextプロパティ	ユーザーコンテキストの取得・設定
IsUserinRoleプロパティ	認証ユーザーが指定されたロールかチェック
pathプロパティ	ロールサービスのパスを取得・設定
roles プロパティ	認証ユーザーのロールを取得
timeoutプロパティ	ロールサービスサービスのタイムアウトを取得・設定

まとめ

　今回はASP.NET 3.5周りの変更点をいくつかピックアップして紹介してきました。今回の記事でサーバーサイドからのアプローチ以外に、クライアントサイドからのアプリケーション作成の可能性も感じてもらえたかと思います。今まで、ASP.NET（サーバーサイド）のみでしか利用していなかった方も、少しクライアントサイド開発に目を向けていただけたら幸いです。

　次回は、VS2008を利用することで開発を行いやすくなったWPFです。お楽しみに。

参考資料

1. ScottGu's Blog
2. Chica's Blog
3. Visual Studio 2008 Professional Edition
4. MSDN ライブラリ