はじめに
これまで私が手がけてきたプロジェクトの中には、サイトの一部の要素をユーザーがカスタマイズできるものが多数あります。例えば、企業の社員を対象とした調査を行い、社員を最適な形で組み合わせたチームを編成する方法をアドバイスするというアプリケーションがありました。企業は一定数の調査シートを購入し、社員を調査用のサイトに誘導して、調査シートに記入させます。その事前準備として、調査シートの外観を変更したり、会社のロゴをアップロードしたり、背景色と前景色を選択したりといったカスタマイズを加えられるようになっていました。
こうしたカスタマイズ性を備えたWebサイトでよく求められる要件の1つが、ユーザーが色を選択できるようにしたいというものです。一般にWebサイトで色を指定するときには、赤、緑、青のそれぞれの要素を16進数の文字列で指定します。例えば赤は「#FF0000」という文字列で表します。しかし、色を選択するときに16進数の文字列を入力してもらうという形では、ユーザーの混乱とイライラを招くのは必至です。できれば、ユーザーが「カラーピッカー」で色を選択できるようにするのが理想です。カラーピッカーとは、色パレットを表示して色を選択できるユーザーインターフェース要素のことです。
ASP.NETには、標準装備のカラーピッカーコントロールはありませんが、商用版から、無償版、オープンソースのものまで、さまざまなカラーピッカーコントロールを利用できます。この記事では、そのうちの2つを紹介します。最初に取り上げるのは、AJAX Control Toolkitの一部として提供されているオープンソースのColorPicker Extenderコントロールです。もう1つは、oboutがリリースしている無償のASP.NET Color Pickerコントロールです。では始めましょう。
ASP.NET AJAX Control ToolkitのColor Picker Extenderの使用方法
ASP.NET AJAX Control Toolkit（ACT）は、クライアント側およびAJAX関連の機能を提供するオープンソースのASP.NETサーバコントロールのコレクションです。ACTのコントロールの大半は、ページ上の既存のWebコントロールの機能を拡張する「エクステンダ」として機能します。例えば、TextBoxWatermark Extenderコントロールは、TextBoxコントロールを拡張し、ブラウザ上でテキストボックス内に透かし文字を表示します。
ColorPicker Extenderコントロールは、特定のTextBoxコントロールの機能を拡張するためのものです。このコントロールを使うと、JavaScriptやその他のマークアップがページに追加されます。そして、該当するテキストボックス内をユーザーがクリックすると、その下にカラーパレットが表示されるようになります。ユーザーはこのパレットで色を選択できます。色を選択するとパレットは消え、選択色を表す16進数文字列がテキストボックスに表示されます。実際の動作の様子は、ColorPicker Demonstrationページで確認できます。
実際のプロジェクトでのColorPicker Extenderの使い方も簡単です。まずは、この記事のデモをダウンロードするか（この中にはACTアセンブリAjaxControlToolkit.dllが含まれています）、CodePlexからASP.NET AJAX Control Toolkitをダウンロードします。なお、ColorPickerコントロールがACTに加わったのは2009年5月（リリース30512）からです。これより古いバージョンのACTを使用している場合は、新しいバージョンを入手するか、この記事のダウンロードファイルに含まれているACTアセンブリを使用してください。このアセンブリは、この記事の執筆時点での最新の安定版（リリース30930）です。アセンブリが準備できたら、Visual StudioのツールボックスにACTのコントロールを追加します。
ACTを使うのが初めてという方は、「これをダウンロード」「これを追加」といった指示に戸惑われるかもしれません。この記事では、ACTの入門となる部分の詳細な説明は割愛しますので、「Get Started with the AJAX Control Toolkit」のチュートリアルを一読されることをお勧めします。このチュートリアルでは、ACTのダウンロードから、Visual Studioのツールボックスへのコントロールの追加まで、ひととおり説明されています。
ASP.NETページでColorPicker Extenderを使用するには、まず対象のページ（またはそのマスターページ）にScriptManagerコントロールかToolboxScriptManagerコントロールを追加しておく必要があります。ScriptManagerコントロールは、ASP.NET AJAXフレームワークで使われる必須のJavaScriptファイルを追加するコントロールで、ACTのコントロールを使用するときには欠かせません。次に、TextBoxコントロールをページに追加します。続いて、ツールボックスにColorPicker Extenderを追加します。それには、TextBoxコントロールのスマートタグをクリックし、［エクステンダの追加］オプションを選択します。すると［エクステンダウィザード］（下図を参照）が表示されるので、ColorPicker Extenderを選択し、［OK］をクリックします。
