デベロッパー
デベロッパー

ASP.NETアプリケーションにカラーピッカーコントロールを追加する

2010年3月9日 / 10:00

はじめに

　これまで私が手がけてきたプロジェクトの中には、サイトの一部の要素をユーザーがカスタマイズできるものが多数あります。例えば、企業の社員を対象とした調査を行い、社員を最適な形で組み合わせたチームを編成する方法をアドバイスするというアプリケーションがありました。企業は一定数の調査シートを購入し、社員を調査用のサイトに誘導して、調査シートに記入させます。その事前準備として、調査シートの外観を変更したり、会社のロゴをアップロードしたり、背景色と前景色を選択したりといったカスタマイズを加えられるようになっていました。

　こうしたカスタマイズ性を備えた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のコントロールを追加します。

AJAX Control Toolkitの利用が初めての方へ

　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］をクリックします。

　エクステンダウィザードによって、ColorPicker Extenderコントロールがページに追加され、選択したTextBoxコントロールとエクステンダとの関連付けが、エクステンダのTargetControlIDプロパティにより行われます。次のマークアップの宣言は、ColorPicker Extenderを追加した後の、関係するマークアップの様子を示したものです。太字のマークアップの部分が、エクステンダウィザードによって追加された内容です。

<asp:TextBox ID="txtBGColor" runat="server"></asp:TextBox>

<cc1:ColorPickerExtender ID="txtBGColor_ColorPickerExtender" runat="server"
   Enabled="True" TargetControlID="txtBGColor">
</cc1:ColorPickerExtender>

　このコードが追加された状態で、ブラウザでこのページを開き、TextBoxをクリックすると、カラーパレットが表示されます。いずれかの色を選択すると、パレットは消え、選択色の16進値がテキストボックスに表示されます。こうしてTextBoxに格納された色は、ポストバック時にサーバに転送されます。サーバでデータベースに選択内容を保存することも可能です。

　この既定の動作でも、確かに目的は達成できますが、改良したい点もいくつかあります。1つは、TextBoxに16進数文字列が表示される点です。ユーザーの多くは、16進数文字列と選択色との関係がわからないと思うので、混乱を招くおそれが大いにあります。もう1つは、TextBoxが読み取り専用でないため、ユーザーが無意味な値を入力したり、ColorPicker Extenderで設定した16進数文字列をユーザーが変更したりといったこともできてしまう点です。この記事のダウンロードファイルでは、次のような改良を施すことで、操作性を高めています。

TextBoxの幅を35ピクセルに抑えることで、テキストボックスというより布地の色見本のような外観にしています。
ユーザーがパレットで色を選択すると、colorChangedというJavaScript関数が実行されます。この関数では、テキストボックスのフォーカスを外し、テキストボックスの前景色と背景色の両方を、選択色に設定します。これにより、ユーザーには文字列が見えなくなります（文字色と背景色が同じため）。

　この記事のデモは、メッセージの入力と、前景色および背景色の選択を行うユーザーインターフェースの例です。もちろんここでは、2つのColorPicker Extenderを使用しています。1つは前景色用、もう1つは背景色用です。TextBoxコントロールとColorPicker Extenderのマークアップは次のとおりです。

<p>
   Choose a background color:
   <asp:TextBox ID="txtBGColor" Width="35px" runat="server" onfocus="this.blur();"></asp:TextBox>
   
   <cc1:ColorPickerExtender ID="txtBGColor_ColorPickerExtender" runat="server"
      Enabled="True" TargetControlID="txtBGColor"
      OnClientColorSelectionChanged="colorChanged">
   </cc1:ColorPickerExtender>
</p>

<p>
   Choose a foreground color:
   <asp:TextBox ID="txtFGColor" Width="35px" runat="server" onfocus="this.blur();"></asp:TextBox>
   
   <cc1:ColorPickerExtender ID="txtFGColor_ColorPickerExtender" runat="server"
      Enabled="True" TargetControlID="txtFGColor"
      OnClientColorSelectionChanged="colorChanged">
   </cc1:ColorPickerExtender>
</p>

　どちらのColorPicker Extenderも、OnClientColorSelectionChangedは同じ値です。OnClientColorSelectionChangedプロパティを使用すると、色の選択時にクライアント側のJavaScript関数を実行できます。この関数の中で、当該のエクステンダに関連付けられたTextBoxコントロールを取得するには、get_element()関数を使用します。また、get_selectedColor()関数では、選択された色を取得できます。私はcolorChangedという関数を作成しました。TextBoxコントロールからフォーカスを外し、前景色と背景色を選択された色に設定する関数です。

<script type="text/javascript">
   function colorChanged(sender) {
      sender.get_element().blur();
      sender.get_element().style.color = '#' + sender.get_selectedColor();
      sender.get_element().style.backgroundColor = '#' + sender.get_selectedColor();
   }
</script>

　次のスクリーンショットは、このデモの動作の様子です。このユーザーは既に背景色を選択し、現在は前景色を選んでいる状態です。

　ユーザーが［Place Order］ボタンをクリックすると、ポストバックが行われ、TextBoxコントロールの16進値がサーバに転送されます。サーバでは、TextBoxコントロールのTextプロパティでこの値を読み取り、必要に応じて使用できます。

oboutの無償のASP.NET Color Pickerコントロールの使用方法

　ASP.NETで利用できるカラーピッカーコントロールは、ACTのColorPicker Extender以外にもたくさんあります。ここではその中から、oboutのASP.NET Color Pickerという無償のコントロールを紹介します。oboutは、多種多様なASP.NETサーバコントロールを商用製品としてリリースしていますが、Color Pickerコントロールは無償で利用でき、ACTのColorPicker Extenderよりも多機能なパレットを備えています。

　oboutのASP.NET Color Pickerコントロールを使用するには、まずobout Suiteをダウンロードします。この中には、oboutのASP.NETコントロールがすべて含まれています。ダウンロードした中には、Color Pickerコントロール専用のアセンブリ（obout_ColorPicker.dll）があります。このファイルをWebサイトのBinフォルダにコピーし、Color PickerコントロールをVisual Studioのツールボックスに追加します。

　obout Suiteのダウンロードファイルの中には多数のデモが含まれており、コンピュータ上で実際に動かしてみることができます。また、Color PickerのWebページにも、オンラインで試せるサンプルが10種類以上掲載されています。この記事でダウンロードできるデモは、ACTのColorPicker Extenderで実装したのと同様の機能を備えたものですが、次の点が異なります。

色見本の部分には、TextBoxコントロールではなくLabelコントロールを使用しました
選択した色の格納にTextBoxを使用しないことから、ポストバック時にクライアントからサーバに選択色を転送するために何らかの策が必要です。ここでは2つのHiddenFieldコントロールを使用しました

　このデモも、先ほどの例と同様に、前景色と背景色を選択するための2つのカラーピッカーを使用しています。

<asp:HiddenField runat="server" ID="fgColor" />
<asp:HiddenField runat="server" ID="bgColor" />
 
<p>
   Choose a background color:
   <asp:Label ID="lblBGColor" runat="server" Text=" " Width="35px" BorderColor="Black"
      BorderStyle="Solid" BorderWidth="1px">
   </asp:Label>
 
   <obout:ColorPicker ID="cpBGColor" runat="server" TargetId="lblBGColor"
      PickButton="False" TargetProperty="style.backgroundColor" OnClientPicked="onBGColorPicked">
   </obout:ColorPicker>
</p>
 
<p>
   Choose a foreground color:
   <asp:Label ID="lblFGColor" runat="server" Text=" " Width="35px" BorderColor="Black"
      BorderStyle="Solid" BorderWidth="1px">
   </asp:Label>
 
   <obout:ColorPicker ID="cpFGColor" runat="server" TargetId="lblFGColor"
      PickButton="False" TargetProperty="style.backgroundColor" OnClientPicked="onFGColorPicked">
   </obout:ColorPicker>
</p>

　oboutのColor Pickerコントロールでは、選択色を表示するコントロールを指定できます。この例では、前景色と背景色のそれぞれに対応するLabelコントロールを指定しています。また、選択色に設定するクライアント側プロパティも指定できます。この既定値はvalueですので、TextBoxコントロールとの組み合わせで使用した場合なら、ACTのColorPicker Extenderと同様に、TextBoxのテキストに選択色が設定されることになります。しかしこの例の場合は、Labelの背景色を選択色に設定する必要があるため、TargetPropertyをstyle.backgroundColorにします。

　上記のコードの冒頭には、HiddenFieldコントロールが2つあります。ポストバック時にユーザーの選択色をサーバに転送するために使用するコントロールです。両コントロールの値は、ユーザーが色を選択するたびに設定します。色の選択時にJavaScript関数を実行するには、Color PickerコントロールのOnClientPickedプロパティを使用します。この例では、onBGColorPickedとonFGColorPickedという2つのJavaScript関数を作成しました。それぞれ、選択色を適切なHiddenField値に設定する関数です。下記のコードにもあるように、選択色を表す16進数文字列は、sender.getColor()というJavaScriptコードで取得できます。

<script type="text/javascript">
   function onBGColorPicked(sender) {
      var hiddenField = document.getElementById('<%=bgColor.ClientID %>');
      hiddenField.value = sender.getColor();
   }
 
   function onFGColorPicked(sender) {
      var hiddenField = document.getElementById('<%=fgColor.ClientID %>');
      hiddenField.value = sender.getColor();
   }
</script>

　次のスクリーンショットは、oboutのColor Pickerコントロールの実際の使用例です。パレットでの色の選択肢がACTのColorPickerよりも多いのが分かります。また、oboutのColor Pickerコントロールでは、定義済みの色をパレットに表示したり、定義済みの色以外は選択できないように制限することも可能です。

　それでは、ハッピープログラミング！

参考資料

著者紹介

Scott Mitchell（Scott Mitchell）

http://www.4guysfromrolla.com/ScottMitchell.shtml

New Topics

現代人の8割が罹る「歯周病」、有効な予防法は？

NTT データ GSL、金融機関モバイル端末向け SAP Afaria ベースの MDM サービスを開始

日本セーフネット、オンデマンド暗号化サービス「Crypto Hypervisor」を限定リリース

広島県民は魅せ肌美人!? ジレットヴィーナスが「47都道府県魅せ肌★ファッショングランプリ」を開催

NTT コミュニケーションズ、月額980円の LTE 対応モバイル通信サービスを強化－通信速度が増速、nano SIM カードの提供、3G端末へ対応

イオン、アクティブシニア向け商品・サービスの大規模展示会を開始

新規契約者獲得の勢いが止まらない au -- 背景にはコンテンツサービスの成功が

過剰な広告競争は消費者の利益にならない -- KDDI 虚偽表示事件から学べるもの

Special Ad

“超高速無線 LAN 時代”の幕開け--新規格 11ac（Draft）に対応したバッファロー最新ルーターの潜在能力を試す
	バッファローは次世代無線 LAN 規格 IEEE802.11ac（Draft）通信速度最大 1,300Mbps 対応無線 LAN ルーター「WZR-1750DHP」を3月下旬に販売開始。今回、同機器を入手できたので、使用感や便利な機能についてレポートしたい。⇒詳細記事へ