SHOEISHA iD

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

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

ComponentZine(ComponentOne)

オートコンプリート機能を持つASP.NETアプリケーションの作成

C1AutoCompleteコントロールを使ったWebアプリケーションの作成

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

 「AutoComplete for ASP.NET Wijmo」のC1AutoCompleteコントロールを使って、空港名と都道府県の読みから空港名をリストアップする、オートコンプリート機能付き検索ボックスを持つWebアプリケーションを作成してみます。

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

はじめに

 Webブラウザや日本語入力システムでは、「オートコンプリート機能」がサポートされています。これは、一度入力したテキストをブラウザ側で記憶し、同じテキストを入力する際にテキストの一部を入力するだけで、すべて自動で入力してくれる機能です。しかし、用途はあくまでも「同じテキストの入力」に限られています。

 このオートコンプリート機能をカスタマイズして、いろいろなデータ入力に利用できると使いやすいUIを構築できるのではないでしょうか。

 「ComponentOne Studio for ASP.NET Wijmo 2013J」に含まれるAutoComplete for ASP.NET WijmoのC1AutoCompleteコントロールは、カスタムオートコンプリート機能を持った検索ボックスをWebページに実装できるコントロールです。

 コントロールには「ラベル」と「値」をセットし、検索ボックスに「ラベル」に一致するテキストを入力すると、ボックスに「値」を表示します。「ラベル」と「値」は自由に設定でき、データベースとの連結も可能ですから、データが大量であればリストボックスよりも使いやすい入力インターフェースになります。

 そこで今回は、空港名と都道府県の読みから空港名をリストアップする検索ボックスを持ったWebアプリケーションを作成してみました。

読みを入力すると候補がリスト表示される
読みを入力すると候補がリスト表示される
読みを選ぶと空港名が入力される
読みを選ぶと空港名が入力される
データはSQL Serverのデータベースをもとに検索される
データはSQL Serverのデータベースをもとに検索される

対象読者

 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サーバにインストールする場合の手順です。

  1. プロジェクトファイルのフォルダを、そのままWebサーバーへ配置します(例:\Inetpub\wwwroot直下へ配置)。
  2. サーバーに配置したアプリケーションフォルダに対して、「アプリケーションへの変換」を実行します。
  3. 「アプリケーションの追加」ダイアログで、「アプリケーションプール」を「Classic .NET AppPool」に設定します。
  4. クライアントの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」の「C1AutoComplete」コントロールを選択する
アセンブリ名が「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」プロパティにデータを設定します。

「Label」および「Value」プロパティに設定するデータ(ヘルプより抜粋)
「Label」および「Value」プロパティに設定するデータ(ヘルプより抜粋)

 アプリケーションを実行して、検索ボックスに「ラベル」に設定したテキストの一部を入力すると、入力テキストに一致した「ラベル」がリスト表示され、リスト項目を選択するとその「ラベル」に対応する「値」が検索ボックスに表示されます。

検索ボックスに「ja」と入力すると一致する「ラベル」がリスト表示される(オンラインデモより抜粋)
検索ボックスに「ja」と入力すると一致する「ラベル」がリスト表示される(オンラインデモより抜粋)

 検索データは、このようにコントロールに直接設定することができ、またデータベース連結でデータベースから取り出すことも可能です。

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デザイナフォーム(ヘルプより抜粋)

C1AutoCompleteコントロールの要素

 C1AutoCompleteコントロールは、以下のような要素から構成されています。

入力要素(検索ボックス)

 入力要素を使用して、ユーザーは検索する項目を入力したり、AutoComplete要素から選択した項目を表示したりできます。

AutoComplete要素

 AutoComplete要素は、検索ボックスに入力したテキストに一致した「ラベル」を一覧表示する領域です。

C1AutoCompleteDataItems

 C1AutoCompleteDataItemsは、「ラベル」に設定したデータの中で検索に一致した「ラベル」です。

C1AutoCompleteコントロールの要素(ヘルプより抜粋)
C1AutoCompleteコントロールの要素(ヘルプより抜粋)

Webページのデザイン

 では、さっそくアプリケーションを作成していきましょう。

 作成するアプリケーションは、C1AutoCompleteコントロールにSQL Serverのデータ「空港一覧_Data.mdf」を連結し、フィールド「読み」に対して検索を行い一致する「読み」を一覧表示します。「読み」には空港名と都道府県名をひらがなで入力してあり、フィールド「空港名」には対応する空港名が入力されています。

 そして、C1AutoCompleteコントロールに空港名か都道府県名を入力すると、一致する「読み」をリスト表示します。

 C1AutoCompleteコントロールは、すべてプロパティの設定で行いますので、コードを一切書きません。

使用するSQL Serverのデータ「空港一覧_Data.mdf」
使用するSQL Serverのデータ「空港一覧_Data.mdf」

ページのレイアウト

 ページには、C1AutoCompleteコントロールを配置します。

 「SqlDataSource」は、C1AutoCompleteコントロールにデータベースファイルを設定した時に作成されるオブジェクトです。

ページレイアウト
ページレイアウト

C1AutoCompleteコントロールの作成

 最初に、WebページにC1AutoCompleteコントロールを配置し、SQL Serverのデータを連結します。

 C1AutoCompleteコントロールにオートコンプリート用のデータを設定する方法は、2通りあります。

 一つは、C1AutoCompleteコントロールのC1AutoCompleteデザイナフォームを使い、「子項目の追加」ボタンで「AutoCompleteItem」を追加し、「Label」と「Value」プロパティを1つずつ設定する方法です。

C1AutoCompleteデザイナフォームを使い「ラベル」と「値」を設定する
C1AutoCompleteデザイナフォームを使い「ラベル」と「値」を設定する

 もう一つは、データベース連結機能を使ってデータベースファイルから「ラベル」と「値」を取得する方法です。今回は、データベースから「ラベル」と「値」を取得する方法を使用します。

 アプリケーションの作成は、すべてプロパティの設定だけで出来上がります。コードは一切書きません。

 (1)プロジェクトの「App_Data」フォルダに、データベースファイル「空港一覧_Data.mdf」を格納しておきます。

「App_Data」フォルダに、「空港一覧_Data.mdf」を格納しておく
「App_Data」フォルダに、「空港一覧_Data.mdf」を格納しておく

 (2)ツールボックスからC1AutoCompleteコントロールをWebページにドラッグ&ドロップします。

 (3)スマートタグが開くので、タスクメニューから[データソースの選択]-[新しいデータソース]を選びます。

[データソースの選択]-[新しいデータソース]を選ぶ
「データソースの選択-新しいデータソース」を選ぶ

 (4)「データソース構成ウィザード」が起動します。データソースに「SQLデータベース」を選び、続いて「SQL Serverデータベースファイル」と「App_Data」フォルダに入れた「空港一覧_Data.mdf」を選び、「テスト接続」をします。

データベースファイルを選びテスト接続をする
データベースファイルを選びテスト接続をする

 (5)次のページに進み、接続文字列はデフォルトの「ConnectionString」のままで「次へ」ボタンをクリックし、SQLステートメントの作成ページではフィールド「読み」と「空港名」を取得するようにして「次へ」ボタンをクリックします。

フィールド「読み」と「空港名」を取得する
フィールド「読み」と「空港名」を取得する

 (6)「クエリのテスト」ページで「クエリのテスト」ボタンをクリックし、2つのフィールドデータが取得できることを確認し、「完了」ボタンをクリックします。

「クエリのテスト」を実行し2つのフィールドデータが取得できることを確認する
「クエリのテスト」を実行し2つのフィールドデータが取得できることを確認する

 (7)ウィザードを閉じたら、C1AutoCompleteコントロールのプロパティウィンドウで、次のプロパティにそれぞれデータベースのフィールド名を設定します。

プロパティ 設定値
DataLabelField 読み
DataValueField 空港名

 以上で設定は終わりです。たったこれだけで、C1AutoCompleteコントロールとデータベースファイルのデータバインドが完成しました。

 では、実際にアプリケーションを実行し、オートコンプリート機能をテストしてみましょう。

 検索ボックスに「かごしま」と入力した時点で、一致した読みがリスト表示されます。このうちの一つを選ぶと、検索ボックスに空港名が入力されます。

検索ボックスに「かごしま」と入力した時点で、一致した読みがリスト表示され
検索ボックスに「かごしま」と入力した時点で、一致した読みがリスト表示され
1つを選ぶと、検索ボックスに空港名が入力される
1つを選ぶと、検索ボックスに空港名が入力される

まとめ

 このように、C1AutoCompleteコントロールを使った独自のオートコンプリート機能を実装するのはとても簡単です。

 データの入れ替えをしないのであれば、C1AutoCompleteデザイナフォームでコントロールに直接「ラベル」と「値」を入力するだけで良いですし、データ量が多かったり修正する頻度が高いのであれば、データベースファイルから「ラベル」と「値」のデータを取り出すようにすればよいでしょう。

 使い方次第で、いろいろなデータの入力を補助してくれる便利なコントロールです。

資料提供

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

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

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

この記事をシェア

  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/7230 2013/06/27 17:50

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング