SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

japan.internet.com翻訳記事

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

カラーピッカーコントロール「ColorPicker Extender」「ASP.NET Color Picker」を紹介

  • X ポスト
  • このエントリーをはてなブックマークに追加

 Webサイトでよく求められる要件の1つが、ユーザー自身が色を選択する機能です。ASP.NETには、商用版から無償版、オープンソースのものまで、色々なカラーピッカーコントロールを利用できます。この記事では、AJAX Control Toolkitの一部であるオープンソースのColorPicker Extenderと、oboutがリリースしている無償のASP.NET Color Pickerを紹介します。

  • X ポスト
  • このエントリーをはてなブックマークに追加

はじめに

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

 こうしたカスタマイズ性を備えた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]をクリックします。

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
japan.internet.com翻訳記事連載記事一覧

もっと読む

この記事の著者

japan.internet.com(ジャパンインターネットコム)

japan.internet.com は、1999年9月にオープンした、日本初のネットビジネス専門ニュースサイト。月間2億以上のページビューを誇る米国 Jupitermedia Corporation (Nasdaq: JUPM) のニュースサイト internet.comEarthWeb.com からの最新記事を日本語に翻訳して掲載するとともに、日本独自のネットビジネス関連記事やレポートを配信。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

Scott Mitchell(Scott Mitchell)

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

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/4825 2010/02/16 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング