連載 ASP.NET 2.0が変えるWebアプリ開発の世界 第5回 ASP.NET 2.0の「Webパーツ」コントロール 山田 祥寛 2005/01/06 2008/09/19 更新

Page1 Page2

Back Issue

1 周辺技術が支えるASP.NET 2.0の進化 2 ASP.NET 2.0のマスター・ページとサイトマップ 3 ASP.NET 2.0のログイン管理とウィザード・ページ 4 データアクセス・コントロールとクリッカブル・マップ

※本稿はASP.NET 2.0ベータ版に基づく記事です。正式版では利用できないコントロール（例えばWebPartManagerコントロール）などがある場合がありますのでご了承ください。

　今回も前回に引き続き、ASP.NET 2.0の新しいサーバ・コントロールを紹介する。今回は、Webページのデザインを自在にカスタマイズできる「Webパーツ」に焦点を当ててみよう。

●ページ・レイアウトのカスタマイズを可能にするWebパーツ

　Webパーツとは、ひと言でいえば、Webページのレイアウトや表示方法を、利用者がブラウザ上からカスタマイズできるようにする機能のことだ。読者諸兄も「My Yahoo！」のような機能を使ったことがあれば、容易に想像できるだろう。あらかじめ用意された「辞書」や「ニュース」「天気」「占い」といったコンテンツを、ユーザーがページ上の自由な位置に配置することができる。不要な情報は削除することもできるし、よく使う情報はより上位に配置することもできるから、ユーザーそれぞれのニーズに合致した機能性を提供できる。

　このような機能をASP.NET 1.xで実現しようとしたら、恐らく膨大な量のコーディングが必要になるだろう。しかし、ASP.NET 2.0から用意されたWebパーツ・コントロールを利用することで、このようなパーソナライズ・サイトを簡単に構築できるようになる。

○Webパーツを利用した基本的なページ

　論より証拠。それでは実際に、Webパーツを利用して、ユーザーがカスタマイズ可能なページを作成してみよう。新規に作成したWebフォームwebparts.aspxに、以下のようにサーバ・コントロールを配置してみよう。

webparts.aspxのフォーム・デザイン

上記の画面では、WebPartZoneコントロールを3つ配置しているが、それらのコントロール内には、さらにImageコントロールとCatalogZoneコントロール、Calendarコントロールが含まれている。さらにCatalogZoneコントロールには、PageCatalogPartが含まれている。

WebPartManagerコントロール。 　 WebPartPageMenuコントロール。 　 WebPartZoneコントロール。横に3並べて配置している。 　 Imageコントロール。 　 CatalogZoneコントロール。 　 Calendarコントロール。 　 Imageコントロール。 　 PageCatalogPartコントロール。

　ここでは詳細には述べないが、Webパーツ・コントロールは、それぞれに多くのプロパティを公開しており、これらを利用することでスタイルや挙動を多岐に変更できる。本稿では、すべてのコントロールをデフォルトのままで配置している。

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

　そして、ページ内の個々のコンテンツを配置するためのコンテナとなるのが、XxxxxZoneコントロールだ。例えば、一般的なコンテンツを配置するには、WebPartZoneコントロールを使用する。WebPartZoneコントロール内には、平のテキスト（通常のHTMLのコンテンツ）を初めとして、サーバ・コントロール、ユーザー・コントロール、カスタム・コントロール、ASP.NET 2.0標準のWebパーツ・コントロールなど、ほとんどありとあらゆるコンテンツを配置することができる。

　CatalogZoneコントロールは、ページ上のWebパーツを追加／削除するためのユーザー・インターフェイスを提供する。CatalogZoneコントロールの中に配置可能なコントロールには、あらかじめ定義されたWebパーツ群を表示するためのDeclarativeCatalogPartコントロール、外部からのインポートされたWebパーツを配置するためのImportCatalogPartコントロールなどいくつかある。

　ここではCatalogZoneコントロール内に配置したPageCatalogPartコントロールを利用している。PageCatalogPartコントロールを利用することで、ページ上に配置されたWebパーツをリスト表示し、自由にページ上に配置できるようになる。

　また、WebPartPageMenuコントロールは、Webパーツ・コントロールを使って作ったページに対して、操作用のメニューを追加するためのものだ。挙動については、実際にサンプルを動かしながら確認してみることにしよう。

　次の画面は、先ほどフォーム・デザインしたWebページwebparts.aspxを実行したときの初期状態だ。

webparts.aspxの実行結果

それぞれのWebパーツには、［最小化］や［閉じる］といったテキスト・リンクがある。

　上の実行結果の画面を見ると、それぞれのWebパーツには、［最小化］や［閉じる］といったテキスト・リンクがある。その［最小化］や［閉じる］のテキスト・リンクをクリックすると、次の画面のようにWebパーツがで折りたたまれたり、削除されたり（閉じられたり）する。

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

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

　上の画面では、「無題［1］」パーツを最小化し、「無題［3］」パーツを削除した（閉じた）。

　それでは次に、削除した「無題［3］」パーツを「無題［1］」パーツの上方に配置し直してみよう。

　画面上のページ・メニュー（WebPartPageMenuコントロール）のコンボボックスから［Webパーツをこのページに追加］を選択し、その隣にある［変更］ボタンをクリックする。すると、下の画面のように（WebPartManagerコントロールが管理している）Webパーツ全体がレイアウト変更モードになり、ページ左下にはカタログ・ゾーン（PageCatalogPartコントロール）が表示されるはずだ。

　カタログ・ゾーンには、先ほどページから削除された「無題［3］」がリスト表示されているはずなので、チェック・ボックスにチェックを追加し、プルダウンメニューから［WebPartZone1］を選択したうえで［追加］ボタンをクリックする。

レイアウト変更モードでのWebパーツの追加

カタログ・ゾーンから現在のページで配置可能なWebパーツを選択し、自由に追加できる。この画面では、カタログ・ゾーンに、先ほどページから削除された「無題［3］」がリスト表示されているので、チェック・ボックスにチェックを追加し、プルダウンメニューから［WebPartZone1］を選択したうえで［追加］ボタンをクリックする（上の画面）。すると下の画面のように、削除した「無題［3］」パーツが「無題［1］」パーツの上方に配置される。

　レイアウト変更モードでは、配置したWebパーツの移動も可能だ。その移動方法を次のページで解説する。

INDEX
	ASP.NET 2.0が変えるWebアプリ開発の世界
	第5回 ASP.NET 2.0の「Webパーツ」コントロール
	1．Webパーツを利用した基本的なページ
	2．EditorZoneコントロールを利用したWebパーツの設定変更

　

「ASP.NET 2.0が変えるWebアプリ開発の世界」

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