Uncategorized

ASP.NET AJAX 1.0 の世界 【第3回 パーソナライズの実装】

※ この内容は、こちら の記事にまとめました (2007/06 更新)

【環境】
ASP.NET AJAX 1.0 RC
ASP.NET AJAX December CTP (with ASP.NET AJAX Control Toolkit)

こんにちは。
今日は、パーソナライズの仕組みを実装してみましょう。

パーソナライズ機能とは、ASP.NET 2.0 で Web パーツの開発をされたご経験がある方などは既にご存知と思いますが、利用者向けに設定やプロパティ情報などを保存する仕組みのことです。
例えば、Web パーツを例に述べると、その人がどのようなパーツを表示/非表示にしているか、といった情報や、どの位置に表示している、といった情報を保存し、そのユーザが次回ログインした際に、前回終了した際と同じパーツの状態 (表示/非表示、レイアウト情報、など) で再開する仕組みです。またカスタムな属性(開発者が定義した独自の属性)についてもパーソナライズを実装することができます。

パーソナライズの内部的に動きについて簡単に述べると、パーソナライズの情報は、デフォルトの動作では、プロジェクトごとに SQL Server のデータベース (データファイル) が作成され、フォーム認証などでログインされたユーザごとにパーソナライズの情報をこのデータベースに保管します。ですから、どんな情報を保存しているか確認されたい方は、SQL Server Management Studio Express などを使うと、内部のデータ構造などもビジュアルに確認することができます。(無論、osql などのコンソールのツールで探っても構いませんが。)
よって、この仕組みからご理解できると思いますが、パーソナライズを実装するには、Visual Studio が標準で使用する SQL Server Express (machine.config などを編集して別のデータベースを使用するように指定している場合には、その該当のデータベース) が使用できるようになっている必要があり、これは ASP.NET AJAX でも同様です。(以下の実装をおこなう前の準備として、利用環境を確認しておいてください。)
また、パーソナライズの情報は、匿名ユーザで使用している場合でも、ブラウザのクッキー(Cookie) を使ってユーザの一意性を識別して、そのパーソナライズの情報を保存することができます。ASP.NET AJAX の場合、その特性から、不特定のユーザ向けに機能を実装する機会が多いかもしれません。そこで、ここでは、より実用的なシナリオにするため、このクッキーを使ったパーソナライズ実装を例に、ASP.NET AJAX コンポーネントのパーソナライズ機能の実装をしたいと思います。

まずは、パーソナライズ機能を使う準備として、December CTP に付属している、DragOverlay Extender と呼ばれる Extender を使ってみて、パーソナライズを使わないとどう動くのかというのを確認してみましょう。(前回も記述しましたが、この場合、Decenber CTP 用の Visual Studio のテンプレートを使用しないと動作しませんので注意してください。)

Extender とは、既存のテキストボックスや、ボタンなどの標準コントロールを AJAX 用に拡張する仕組み (フレームワーク) のことで、例によって (前回記載した通り) クライアントサイドの AJAX 用のコードは、ASP.NET のフレームワークの恩恵により、すべて内部で自動生成されます。
このため、Extender には、必ず、「何を拡張するか」を指定するため、Target Control というものを決めます。またこの性質上、Extender で指定する対象のコントロールは、一般に、「標準コントロール」(サーバ側で ASP.NET が制御するコントロール) である必要があります(HTML コントロールは使用しないでください)。
Extender は、テキストボックス用の Extender や、Control 全般を対象とした Extender などさまざまで、さらに強力なことに、開発者が独自の Extender のコンポーネントを構築することもできます。これについては、次回述べます。今日使う DragOverlay Extender は、Control すべてに使える Extender です。

  1. プロジェクトテンプレート ASP.NET AJAX CTP-Enabled Web Site から、新規に Web サイトを作成してください。
  2. Default.aspx のデザイン画面を表示し、標準コントロールから Panel を選択して貼り付け(ドラッグアンドドロップ)ます。デフォルトでは Panel は透明なため、BackColor などを変更し、何か文字列などを挿入しておくと良いでしょう。
  3. Default.aspx に、DragOrverlayExtender を選択して貼り付けます。
  4. DragOrverlayExtender のプロパティ画面を表示し、TargetControlID プロパティに「Panel1」(上記の Panel コントロールの ID) を設定します。

では、実行してみてください。
Panel1 をドラッグすると、クライアントサイドの AJAX のスクリプトによって、移動するパネルに変身しているのがお分かり頂けるかと思います。

ここで、ブラウザのリロードボタンを押してみましょう。すると、移動したパネルは元の位置に戻ってしまいますね。
では、これに、上述したパーソナライズの機能を実装し、位置情報が保存されるように変更してみましょう。

  1. プロジェクト (Web サイト) の構成ファイル (Web.config) を開き、<system.web> のエントリに以下の記述を追加してください。
    このように、anonymousIdentification の設定をおこなうことで、ログインしなくとも、ブラウザのクッキーを使用したパーソナライズがおこなわれます。(DragOrverlayExtender の位置情報のプロパティを panelLocation という名前にしており、後ほど DragOrverlayExtender 上でこの設定はおこないます。)

    <anonymousIdentification enabled="true"/><profile>  <properties><add name="panelLocation" allowAnonymous="true" type="String"/>  </properties></profile>
  2. さらに、Web.config のファイル中にコメントアウトされている ProfileService の箇所のコメントを外し、以下の通り属性を設定してください。

    <profileService enabled="true" readAccessProperties="panelLocation" writeAccessProperties="panelLocation" />
  3. Default.aspx のデザイン画面を表示し、ProfileService コントロールをドラッグアンドドロップし、AutoSave プロパティを true に設定してください。

    <asp:ProfileService ID="ProfileService1" runat="server" AutoSave="true"></asp:ProfileService>
  4. さらに、DragOverlayExtender コントロールのプロパティ画面を表示して、以下の値を設定してください。

    Enabled プロパティ: true
    ProfileServiceID プロパティ: ProfileServer1 (上記のID)
    ProfilePropertyプロパティ: panelLocation

    <asp:DragOverlayExtender ID="DragOverlayExtender1" runat="server" TargetControlID="Panel1" Enabled="True" ProfileProperty="panelLocation" ProfileServiceID="ProfileService1" />

では、実行してみましょう。今度は、リロードをおこなうと、その位置情報が保持されていることが確認できます。

Categories: Uncategorized

Tagged as:

7 replies»

Leave a Reply