はじめに
Webブラウザや日本語入力システムでは、「オートコンプリート機能」がサポートされています。これは、一度入力したテキストをブラウザ側で記憶し、同じテキストを入力する際にテキストの一部を入力するだけで、すべて自動で入力してくれる機能です。しかし、用途はあくまでも「同じテキストの入力」に限られています。
このオートコンプリート機能をカスタマイズして、いろいろなデータ入力に利用できると使いやすいUIを構築できるのではないでしょうか。
「ComponentOne Studio for ASP.NET Wijmo 2013J」に含まれるAutoComplete for ASP.NET WijmoのC1AutoCompleteコントロールは、カスタムオートコンプリート機能を持った検索ボックスをWebページに実装できるコントロールです。
コントロールには「ラベル」と「値」をセットし、検索ボックスに「ラベル」に一致するテキストを入力すると、ボックスに「値」を表示します。「ラベル」と「値」は自由に設定でき、データベースとの連結も可能ですから、データが大量であればリストボックスよりも使いやすい入力インターフェースになります。
そこで今回は、空港名と都道府県の読みから空港名をリストアップする検索ボックスを持ったWebアプリケーションを作成してみました。
対象読者
Visual Basic 2010/2012、またはVisual C# 2010/2012を使ってプログラムを作ったことがある人。
必要な環境
Visual Basic 2010/2012、Visual C# 2010/2012、Visual Studio 2010/2012でプログラムが作れる環境。
対応ブラウザについては、グレープシティ社Webサイトの「クロスブラウザ対応ページ」でご確認ください。
なお、本プログラムは次の環境で開発・動作確認を行っています。
- OS：Windows 7
- 開発Tool：Visual Studio 2010、.NET Framework 4
- ブラウザ：Microsoft Internet Explorer 10
サンプルプログラム実行時の注意事項
[1] Visual StudioでサンプルWebサイトを開く
Visual Studioをお持ちであれば、「ComponentOne Studio for ASP.NET Wijmo 2013J」トライアル版をインストールし、ソースコード圧縮ファイル「AutoComplete_ASP_vb_src.zip」または「AutoComplete_ASP_cs_src.zip」を解凍すると作成されるプロジェクトファイルを、Visual Studioで開き実行してください。
[2] Visual Studioを使わずにサンプルWebサイトを開く
Visual Studioを使わずに、サンプルWebサイトを直接IISなどのWebサーバで開く場合は、ソースコード圧縮ファイル「AutoComplete_ASP_vb_src.zip」または「AutoComplete_ASP_cs_src.zip」を解凍すると作成されるプロジェクトファイルを、フォルダ構成を変えずにWebサーバにインストール・登録してください。
以下は、Microsoft IISサーバにインストールする場合の手順です。
- プロジェクトファイルのフォルダを、そのままWebサーバーへ配置します（例：\Inetpub\wwwroot直下へ配置）。
- サーバーに配置したアプリケーションフォルダに対して、「アプリケーションへの変換」を実行します。
- 「アプリケーションの追加」ダイアログで、「アプリケーションプール」を「Classic .NET AppPool」に設定します。
- クライアントのWebブラウザで、Default.aspxファイルを開きます。（例：http://localhost/mysplit_vb/Default.aspx）
UAC（ユーザーアカウント制御）がサポートされているWindows Vista以降のOSで製品のサンプルをコンパイルしようとするとエラーが発生する場合があります。
これは、UACにより製品サンプルがインストールされているフォルダに書き込みができないため、コンパイル時にエラーが発生するという現象です。Visual Studioを管理者権限で実行するか、サンプルプロジェクト一式をアクセス権のあるフォルダに移動してからコンパイルを行うようにしてください。
また、Webブラウザでaspxファイルを実行する際にIISサーバでエラーになる場合は、Web.configファイルに以下の1行を追加してください。
<identity impersonate="false" />
コンポーネントのインストール
トライアル版は、グレープシティのWebページから申し込みできます。
トライアル申込フォームが表示されますので、必要情報を入力して申し込むとトライアル版のダウンロード手順を記載したE-Mailが送られてきます。その手順にそってダウンロードを行ってください。また、ダウンロードファイルは圧縮ファイルになっていますので、解凍してインストーラを起動します。
制限事項などの詳細については、インストーラに同梱されているリリースノートを参照ください。
コントロールと参照の追加
「ComponentOne Studio for ASP.NET Wijmo 2013J」をインストールしたら、プロジェクトにコントロールを追加します。
ツールボックスに専用のタブを作成し、使用するコンポーネントを追加します。
追加するコンポーネントは、アセンブリ名が「C1.Web.Wijmo.Controls.4」の「C1AutoComplete」コントロールです。
これらのコントロールを追加すると、プロジェクトに以下のランタイムライブラリへの参照が追加されます。
| ファイル | 内容 |
|---|---|
| C1.Web.Wijmo.Controls.4 | 本体アセンブリ |
また、プロジェクトに以下のランタイムライブラリが追加されます。
| ファイル | 内容 |
|---|---|
| C1.C1Report.4.dll | 本体アセンブリ |
| C1.Web.Wijmo.Controls.4.dll | 本体アセンブリ |
なお、.NET Framework 4が必要です。
C1AutoCompleteコントロールの概要
C1AutoCompleteコントロールは、Ajaxに対応しオートコンプリート検索ボックスを作成するコントロールです。検索ボックスは、テキストボックスでの入力に応じて、Ajaxで入力候補のリストを取得してリアルタイムで表示します。
オートコンプリート機能は、データ検索用の「ラベル」とその「値」「カテゴリ」にデータを設定すると、入力文字列をもとに「ラベル」を検索し、一致する「値」を検索ボックスに表示します。
例えば、次のようにWebページにC1AutoCompleteコントロールを配置し、「Label」および「Value」プロパティにデータを設定します。
アプリケーションを実行して、検索ボックスに「ラベル」に設定したテキストの一部を入力すると、入力テキストに一致した「ラベル」がリスト表示され、リスト項目を選択するとその「ラベル」に対応する「値」が検索ボックスに表示されます。
検索データは、このようにコントロールに直接設定することができ、またデータベース連結でデータベースから取り出すことも可能です。
C1AutoCompleteコントロールの主な特徴
C1AutoCompleteは、LoadOnDemand、DataBinding、AutoPostBack、AutoCompleteの位置決め、MaxCount、MinLength、および組み込みテーマなど、いくつかの独特な機能を備えています。
LoadOnDemand
AutoComplete for ASP.NET WijmoはAjaxに対応し、情報を動的にロードできます。子項目は、検索ボックスに入力するときにロードされます。
DataBinding
C1AutoCompleteコントロールでは、ラベル、値、およびカテゴリフィールドを、いろいろなデータベースのデータソースにバインドできます。
AutoPostBack
AutoPostBackプロパティにより、C1AutoCompleteコントロールの入力内容を他のコントロールで使用する際に、サーバーにポストバックできます。
位置決め
関連付けられた入力要素に対するコントロールの位置を設定できます。
MaxCount
C1AutoCompleteコントロールでは、コールバックの結果をリスト表示する際の最大項目数を制御できます。このプロパティを使用するには、データソースを指定し、LoadOnDemandプロパティを"true"に設定します。
MinLength
MinLengthプロパティを使って、ユーザーが入力する必要がある最小文字数を制御します。
テーマ
スマートタグを使って、プレミアムテーマからコントロールの外観を変更できます。オプションとして、jQuery UIからThemeRollerを使用してカスタマイズしたテーマを作成することも可能です。
CSSのサポート
CSS（Cascading Style Sheet）のスタイルを使用して、カスタムスキンの定義が可能です。CSSのサポートにより、検索ボックスを組織の基準に合致させることができます。
C1AutoCompleteデザイナフォーム
C1AutoCompleteコントロールには、専用デザイナ「C1AutoCompleteデザイナフォーム」が含まれています。
このデザイナフォームは、C1AutoCompleteコントロールのプロパティやC1AutoCompleteDataItem（オートコンプリート項目）のプロパティを編集するためのデザイナです。
C1AutoCompleteデザイナフォームは、プログラマがコントロールを視覚的に修正できる点では、プロパティウィンドウに似ています。しかしこのデザイナではC1AutoCompleteDataItemの選択、そのプロパティの設定、およびC1AutoCompleteコントロールの外観のプレビューまで、すべてをフォーム内で行うことができます。
C1AutoCompleteデザイナフォームを開くには、C1AutoCompleteコントロールのスマートタグをクリックし、［C1AutoCompleteタスク］メニューから［オートコンプリート項目の追加］をクリックします。
C1AutoCompleteコントロールの要素
C1AutoCompleteコントロールは、以下のような要素から構成されています。
入力要素（検索ボックス）
入力要素を使用して、ユーザーは検索する項目を入力したり、AutoComplete要素から選択した項目を表示したりできます。
AutoComplete要素
AutoComplete要素は、検索ボックスに入力したテキストに一致した「ラベル」を一覧表示する領域です。
C1AutoCompleteDataItems
C1AutoCompleteDataItemsは、「ラベル」に設定したデータの中で検索に一致した「ラベル」です。
Webページのデザイン
では、さっそくアプリケーションを作成していきましょう。
作成するアプリケーションは、C1AutoCompleteコントロールにSQL Serverのデータ「空港一覧_Data.mdf」を連結し、フィールド「読み」に対して検索を行い一致する「読み」を一覧表示します。「読み」には空港名と都道府県名をひらがなで入力してあり、フィールド「空港名」には対応する空港名が入力されています。
そして、C1AutoCompleteコントロールに空港名か都道府県名を入力すると、一致する「読み」をリスト表示します。
C1AutoCompleteコントロールは、すべてプロパティの設定で行いますので、コードを一切書きません。
ページのレイアウト
ページには、C1AutoCompleteコントロールを配置します。
「SqlDataSource」は、C1AutoCompleteコントロールにデータベースファイルを設定した時に作成されるオブジェクトです。
C1AutoCompleteコントロールの作成
最初に、WebページにC1AutoCompleteコントロールを配置し、SQL Serverのデータを連結します。
C1AutoCompleteコントロールにオートコンプリート用のデータを設定する方法は、2通りあります。
一つは、C1AutoCompleteコントロールのC1AutoCompleteデザイナフォームを使い、「子項目の追加」ボタンで「AutoCompleteItem」を追加し、「Label」と「Value」プロパティを1つずつ設定する方法です。
もう一つは、データベース連結機能を使ってデータベースファイルから「ラベル」と「値」を取得する方法です。今回は、データベースから「ラベル」と「値」を取得する方法を使用します。
アプリケーションの作成は、すべてプロパティの設定だけで出来上がります。コードは一切書きません。
（1）プロジェクトの「App_Data」フォルダに、データベースファイル「空港一覧_Data.mdf」を格納しておきます。
（2）ツールボックスからC1AutoCompleteコントロールをWebページにドラッグ＆ドロップします。
（3）スマートタグが開くので、タスクメニューから［データソースの選択］-［新しいデータソース］を選びます。
（4）「データソース構成ウィザード」が起動します。データソースに「SQLデータベース」を選び、続いて「SQL Serverデータベースファイル」と「App_Data」フォルダに入れた「空港一覧_Data.mdf」を選び、「テスト接続」をします。
（5）次のページに進み、接続文字列はデフォルトの「ConnectionString」のままで「次へ」ボタンをクリックし、SQLステートメントの作成ページではフィールド「読み」と「空港名」を取得するようにして「次へ」ボタンをクリックします。
（6）「クエリのテスト」ページで「クエリのテスト」ボタンをクリックし、2つのフィールドデータが取得できることを確認し、「完了」ボタンをクリックします。
（7）ウィザードを閉じたら、C1AutoCompleteコントロールのプロパティウィンドウで、次のプロパティにそれぞれデータベースのフィールド名を設定します。
| プロパティ | 設定値 |
|---|---|
| DataLabelField | 読み |
| DataValueField | 空港名 |
以上で設定は終わりです。たったこれだけで、C1AutoCompleteコントロールとデータベースファイルのデータバインドが完成しました。
では、実際にアプリケーションを実行し、オートコンプリート機能をテストしてみましょう。
検索ボックスに「かごしま」と入力した時点で、一致した読みがリスト表示されます。このうちの一つを選ぶと、検索ボックスに空港名が入力されます。
まとめ
このように、C1AutoCompleteコントロールを使った独自のオートコンプリート機能を実装するのはとても簡単です。
データの入れ替えをしないのであれば、C1AutoCompleteデザイナフォームでコントロールに直接「ラベル」と「値」を入力するだけで良いですし、データ量が多かったり修正する頻度が高いのであれば、データベースファイルから「ラベル」と「値」のデータを取り出すようにすればよいでしょう。
使い方次第で、いろいろなデータの入力を補助してくれる便利なコントロールです。
