［ASP.NET］WebPartsコントロールでパーソナライズ・ページを構築するには？［2.0のみ、C#、VB］

.NET TIPS

［ASP.NET］WebPartsコントロールでパーソナライズ・ページを構築するには？［2.0のみ、C#、VB］

山田祥寛
2006/08/25

　Webページのレイアウトや表示方法を、エンドユーザーがブラウザ上からカスタマイズできるようにする機能の1つにWebパーツがある。例えば、「My Yahoo！」のようなサービスを想定してみると、イメージしやすいかもしれない。あらかじめ用意された「辞書」や「ニュース」「天気」「占い」といったコンテンツを、エンドユーザーが自分の使用頻度や好みに応じて選択表示し、かつ、ページ上の自由な位置に配置することができる。不要な情報は削除することもできるし、よく使う情報はより上位に配置することもできるから、ユーザーそれぞれのニーズに合致した機能性を提供できるというわけだ。

　従来、このような機能を実現するには、恐らく膨大な量の（そして複雑な）コーディングが必要になったはずだ。しかし、ASP.NET 2.0で新たに提供されたWebパーツ用コントロールであるWebPartsコントロールを利用することで、このようなパーソナライズ機能を簡単に実装できるようになる。

WebPartsコントロールを利用したページの例

WebPartsコントロールを利用することで、ブラウザ上でコンテンツをドラッグ＆ドロップしたり、不要なコンテンツを最小化／閉じたりすることができる。

　本稿ではWebPartsコントロールを利用して、レイアウトを自由に変更可能なページの作成方法を解説する。なお、本稿のサンプル・プログラムを利用するには、カレントユーザーを識別するために、あらかじめ「TIPS：［ASP.NET］セキュリティ・コントロールでログイン機能を作成するには？」で紹介した内容に従って、該当ページに対する認証設定を定義しておく必要がある。

1. ページ・レイアウトを設定する

　フォーム・デザイナ上には、以下の画面の要領でサーバ・コントロールを配置する。また、それぞれのコントロールに対しては、表の内容でプロパティ値を設定しておこう。DropDownListコントロールのItemsプロパティは、プロパティ・ウィンドウから起動可能な［ListItem コレクションエディタ］ダイアログから編集できる。

Webフォーム（C#：WebParts_cs.aspx／VB：WebParts_vb.aspx）のフォーム・レイアウト

フォーム・デザイナ上に、サーバ・コントロールを配置して、それぞれのプロパティを表のように設定する。

WebPartManagerコントロール（IDは「manager」）。

DropDownListコントロール（IDは「list」）。

WebPartZoneコントロール（IDは「zone1」／オートフォーマットに「プロフェッショナル」を設定）

WebPartZoneコントロール（IDは「zone2」／オートフォーマットに「プロフェッショナル」を設定）。

WebPartZoneコントロール（IDは「zone3」／オートフォーマットに「プロフェッショナル」を設定）。

Calendarコントロール（IDは「cal」）。

Imageコントロール（IDは「img1」）。

Imageコントロール（IDは「img2」）。

コントロール	プロパティ名	設定値
DropDownList	AutoPostBack	True
	Items	Browse/Design
Image（img1）	ImageUrl	http://www.wings.msn.to/ image/wings.jpg
Image（img2）	ImageUrl	http://www.atmarkit.co.jp/ fdotnet/vs2005db/index/vs2005db_l.jpg

　WebPartsコントロールを利用するうえで欠かせないのが、WebPartManagerコントロールだ。WebPartManagerコントロールは、その名のとおり、ページ内に配置されたWebPartsコントロール全体を制御するためのコントロールで、すべてのWebPartsコントロールの前に（つまり、ページの先頭に）配置しなければならない。

　そして、ページ内の個々のコンテンツ（＝Webパーツ）を配置するためのコンテナの役割を果たすのが、XxxxxZoneコントロール（＝ゾーン）だ。

　本稿のサンプル・プログラムでは、一般的なコンテンツを配置するためのWebPartZoneコントロールを使用しているが、このほかにも、1つの使用目的に特化したCatalogZone、EditorZoneなどのXxxxxZoneコントロールが用意されている（詳細は、「TIPS：［ASP.NET］WebPartsコントロールでページ内のコンテンツを編集／再配置するには？」で紹介している）。

　WebPartZoneコントロールには、平文のテキスト（通常のHTMLのコンテンツ）をはじめ、サーバ・コントロール、ユーザー・コントロール、カスタム・コントロールなど、ほとんどありとあらゆるコンテンツをその中に配置することができる。本稿では、まず標準的なサーバ・コントロールを配置してみたが、ユーザー・コントロールを利用する方法については、「TIPS：［ASP.NET］ユーザー・コントロールでパーソナライズ可能なWebパーツを作成するには？」にて紹介している。

2. プルダウン・メニュー変更時の挙動を定義する

　次に、プルダウン・メニューを変更したタイミングで、WebPartsコントロールの表示モードを切り替えるコードを記述しておこう。WebPartsコントロールでは、表示モードによってコントロールの表示／挙動が動的に変わる点に注目だ。

　例えば、Browse（参照）モードではページ上のコンテンツは表示のみ可能であるが、Design（デザイン）モードではコンテンツをゾーン間／内で移動することができるといった具合だ。

　WebPartsコントロールで対応可能な表示モードは以下のとおり。

表示モード	概要
BrowseDisplayMode	参照モード。コンテンツを参照するデフォルトの状態
DesignDisplayMode	デザイン・モード。Webパーツのドラッグ＆ドロップによる移動が可能
EditDisplayMode	編集モード。編集パーツを利用することでページの設定が可能
CatalogDisplayMode	カタログ・モード。カタログ・パーツを利用することでページへのパーツの追加／削除が可能
ConnectDisplayMode	接続モード。パーツ同士の接続設定が可能

WebPartsコントロールで利用可能な表示モード

　表示モードを切り替えるには、WebPartManager.DisplayModeプロパティに対して、適切なWebPartDisplayMode値を渡すだけでよい。

　本サンプルでは、ごくシンプルに参照／デザイン・モードにのみ対応するものとする。編集／カタログ／接続モードを利用するには、ページ上にそれぞれEditZone／CatalogZone／ConnectionsZoneコントロールを配置しておく必要がある。これらXxxxxZoneコントロールの利用方法については、先ほども示した「WebPartsコントロールでページ内のコンテンツを編集／再配置するには？」で後日紹介する予定だ。

　以下のコードは、表示モードを切り替えるための処理を実装したものである。

using System;

using System.Data;

using System.Configuration;

using System.Collections;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;



public partial class WebParts_WebParts_cs : System.Web.UI.Page

{

  protected void list_SelectedIndexChanged(object sender, EventArgs e)

  {

    // プルダウン・メニューの選択値に応じて

    // DisplayModeプロパティの値をセット

    switch (list.SelectedValue) {

      case "Browse" :

        manager.DisplayMode = WebPartManager.BrowseDisplayMode;

        break;

      case "Design" :

        manager.DisplayMode = WebPartManager.DesignDisplayMode;

        break;

    }

  }

}

Partial Class WebParts_vb

  Inherits System.Web.UI.Page



  Protected Sub list_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles list.SelectedIndexChanged

    ' プルダウン・メニューの選択値に応じて

    ' DisplayModeプロパティの値をセット

    Select Case list.SelectedValue

      Case "Browse"

        manager.DisplayMode = WebPartManager.BrowseDisplayMode

      Case "Design"

        manager.DisplayMode = WebPartManager.DesignDisplayMode

    End Select

  End Sub

End Class

表示モードを切り替えるための処理（上：WebParts_cs.aspx、下：WebParts_cs.aspx）

　以上を理解したら、実際にサンプル・プログラムを起動して、動作を確認してみよう。次の画面は、先ほどフォーム・デザインしたWebページWebParts_cs.aspx／WebParts_vb.aspxを実行したときの初期状態だ。

WebParts_cs.aspx／WebParts_vb.aspxの実行結果

それぞれのWebパーツには、［最小化］や［閉じる］といったメニューが用意されている。

　実行結果を見ると、それぞれのWebパーツには、［最小化］や［閉じる］といったメニューが用意されていることが確認できるはずだ。

　ポップアップ・メニューから［最小化］／［閉じる］を選択すると、次の画面のようにWebパーツが折りたたまれたり、閉じられたりすることが確認できる（ただし、本項で実装した機能では一度閉じたパーツを再表示することはできないので、注意すること）。

ユーザー操作によるWebパーツ表示のカスタマイズ

「無題［1］」パーツの［最小化］と、「無題［2］」パーツの［閉じる］をクリックしたところ。「無題［2］」パーツは画面から削除された。［最小化］ボタンで折りたたまれたWebパーツは、［元に戻す］ボタンで元の大きさに戻すことができる。

　次に、ページ上部のプルダウン・メニューから表示モードをデザイン・モードに切り替えてみよう。すると、下の画面のようにページ全体が切り替わるはずだ。

　この状態では、Webパーツのタイトルバーに相当する部分をクリックし、移動したい位置にドラッグ＆ドロップすることで、Webパーツを適当なゾーンに移動することができる。

「無題［3］」パーツをzone2へドラッグ＆ドロップ

デザインモードでのWebパーツの移動

Webパーツをマウスでドラッグ＆ドロップするだけで、ページ上のWebパーツを簡単に移動してレイアウトを変更できる。

　レイアウトの変更を終えたら、再びプルダウン・メニューから［Browse］を選択することで、通常（参照）モードに戻る。この状態で、ブラウザを再起動してみよう。先ほど、カスタマイズしたページの状態がそのまま維持されていることが確認できるはずだ。

利用可能バージョン：.NET Framework 2.0のみ
カテゴリ：Webフォーム　処理対象：WebPartsパーツ
使用キーワード：WebPartsコントロール
関連TIPS：［ASP.NET］セキュリティ・コントロールでログイン機能を作成するには？
関連TIPS：［ASP.NET］WebPartsコントロールでページ内のコンテンツを編集／再配置するには？
関連TIPS：［ASP.NET］ユーザー・コントロールでパーソナライズ可能なWebパーツを作成するには？

この記事と関連性の高い別の.NET TIPS

		［ASP.NET］WebPartsコントロールでページ内のコンテンツを編集／再配置するには？
		［ASP.NET］ユーザー・コントロールでパーソナライズ可能なWebパーツを作成するには？
		［ASP.NET］DeclarativeCatalogPartコントロールでコンテンツ・カタログを定義するには？
		［ASP.NET］Webパーツでログイン・ユーザーごとに表示可能なパーツを判定するには？
		［ASP.NET］ImportCatalogPartコントロールでパーツ情報をページにインポートするには？

このリストは、（株）デジタルアドバンテージが開発した
自動関連記事探索システム Jigsaw（ジグソー）により自動抽出したものです。

generated by

「.NET TIPS」

Insider.NET フォーラム新着記事

第2回　簡潔なコーディングのために （2017/7/26）
　ラムダ式で記述できるメンバの増加、throw式、out変数、タプルなど、C# 7には以前よりもコードを簡潔に記述できるような機能が導入されている
第1回　Visual Studio Codeデバッグの基礎知識 （2017/7/21）
　Node.jsプログラムをデバッグしながら、Visual Studio Codeに統合されているデバッグ機能の基本の「キ」をマスターしよう
第1回　明瞭なコーディングのために （2017/7/19）
　C# 7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。これらは分かりやすいコードを記述するのに使える
Presentation Translator （2017/7/18）
　Presentation TranslatorはPowerPoint用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

注目のテーマ

Insider.NET 記事ランキング

本日月間

＠IT