ASP.NETアプリケーションにGoogle Suggest風の機能を追加する

はじめに

　本稿では、フリーのAutoSuggestBoxコントロールを使ってASP.NETアプリケーションに「Google Suggest」の機能を追加する方法を紹介します。こうした方法を説明する記事はインターネット上にたくさんありますが、多くは理屈ばかりで、すぐに使えるコードはあまり見当たりません。AutoSuggestBoxコントロールにはGoogle Suggestの機能がすべて詰め込まれているため、自動提示メニューを読み込むためのデータソースを指定するだけで、すぐに利用できます。

背景

　Google Suggestをご存知でしょうか。Google Suggestは、Ajax（Asynchronous JavaScript+XML）の効果を示すためにGoogleが開発したアプリケーションです。最初はそのすばらしさに驚きますが、すぐに印象は薄れ、ほとんどの開発者はその存在を忘れてしまいます。その「クールさ」を認める人々は数多くいますが、他のWebアプリケーションへの組み込み方法は知られていません。

　初めてこのコントロールを目にしたときは私も感心しました。ただ、すごいアイデアだとは思っても、どう使えばいいかわかりませんでした。そんな私が「Travelope」（詳細はこちら）という旅行アプリケーションの開発を始めたのは数ヶ月前のことです。航空運賃の検索フォームの作成にあたり、出発地と目的地を選択するためのシンプルなインターフェイスを検討していました。コンボボックスの利用を考えましたが、都市名が1,000近くあるため、フォームの読み込みに時間がかかってしまいます。別の方法として、テキストボックスのリンクを利用して都市名のルックアップウィンドウをポップアップさせることも考えましたが、この方法だとスペルを確認しようとするたびにリファレンスウィンドウを開く必要があります。結局、どちらの方法もいまひとつでした。何か良いアイデアはないかと他の旅行サイトを調べ始めたところ、多くのサイトで都市や空港の選択に「Google Suggest」風のコントロールが使われているのに気づいたのです。これなら「Travelope」にもぴったりだと思いました。ここからAutoSuggestBoxが生まれたというわけです。

AutoSuggestBoxとは

　AutoSuggestBoxは、C#で書かれたカスタムコントロールです。これを使えば、自作のWebアプリケーションに「Google Suggest」風の機能を容易に追加できます。AutoSuggestBoxはC#とVB.NETをサポートしており、Internet ExplorerとFirefoxで動作します。このコントロールは、Ajaxの利用によって、ページ全体を更新することなくデータを取得します。また、CSSを使ってWebページ上でこのコントロールの外観を調整することができます。

　デモはこちらからご覧いただけます。

Webアプリケーションへの追加

　まず、AutoSuggestBoxパッケージをこちらからダウンロードしてください。AutoSuggestBoxを利用するには、次の4つのファイルを自作アプリケーションに追加する必要があります。

　まずは「AutoSuggestBox.dll」への参照を追加します。次に、Webアプリケーションのルートの下に「asb-includes」というサブディレクトリを作ります。最後に、このサブディレクトリに残り3つのファイルをコピーします。

　詳細な手順についてはこちらを参照してください。

自動提示メニュー項目を読み込むためにデータの種類を指定する

　まず、ユーザーがAutoSuggestBoxに文字入力を始めたときに提示するメニュー項目のデータソースを用意する必要があります。このシステムでは、データソースを必要な数だけいくつでも使用できます。たとえば、「都市」と「空港」のそれぞれに別々のデータソースが使用することができます。

　データソースを追加するには、「GetAutoSuggestData.aspx」ファイルの変更が必要です。このクラスには、デフォルトで「都市」のデータソースが実装されています。LoadMenuItemsには、次のように、さまざまな種類のデータを読み込むためのswitch文が含まれています。

private ArrayList LoadMenuItems(string sDataType, string sKeyword) 
{
  ArrayList aMenuItems;

  switch(sDataType)
  {
    case "City":
      aMenuItems=LoadCities(sKeyword);
      break;
    default:
      throw new Exception("GetAutoSuggestData Type ’"
        + sDataType + "’ is not supported.");
  }
  return aMenuItems;
}

　LoadCitiesメソッドは、ユーザーが入力した文字に応じて、自動提示する都市名をデータソースから取得します。次に、ASBMenuItemsの配列を生成し、データベースからの取得結果をそこに格納します。

private ArrayList LoadCities(string sKeyword)
{
  ArrayList aOut=new ArrayList();

  string sConnString="Provider=Microsoft.Jet.OLEDB.4.0;" +
    "Data Source=c:databasesAutoSuggestBox_Demo.mdb;" +
    "User Id=admin;Password=;";
  OleDbConnection oCn=new OleDbConnection(sConnString);

  string sSql="SELECT TOP 10 tblCity.Name as CityName, " +
    "tblCity.Code as CityCode, " +
    "tblCountry.Name as CountryName, " +
    "tblState.Name as StateName " + 
    "FROM (tblCity INNER JOIN tblCountry " +
    "ON tblCity.CountryID=tblCountry.ID) " +
    "  LEFT OUTER JOIN tblState ON tblCity.StateID=tblState.ID " + 
    "WHERE (tblCity.Name LIKE ’" +
    sKeyword.Replace("’", "’’") + "%’) " +
    "ORDER BY tblCity.Name";

  OleDbCommand oCmd = new OleDbCommand(sSql, oCn);
  oCn.Open();

  OleDbDataReader oReader = oCmd.ExecuteReader();

  string sCity;
  string sCityCode;
  string sState;
  string sCountry;

  string sLabel;

  ASBMenuItem oMenuItem;

  while (oReader.Read())
  {
    //Build label using City, Country & State
    sCity     =oReader.GetString(0);
    sCityCode =oReader.GetString(1);
    sCountry  =oReader.GetString(2);

    if (oReader.GetValue(3)==System.DBNull.Value)
      sState="";
    else
      sState=oReader.GetString(3);


    sLabel=sCity;

    //Append either state or country
    if (sState != "")
      sLabel+=", " + sState;
    else
      sLabel+=", " + sCountry;

    oMenuItem=new ASBMenuItem();
    oMenuItem.Label=sLabel;
    oMenuItem.Value=sCityCode;

    aOut.Add(oMenuItem);
  } 

  oReader.Close();
  oCn.Close();

  return aOut;
}

　後から別のデータソースを追加することになっても、LoadMenuItems関数のcase文を増やすだけで済みます。

AutoSuggestBoxコントロールをWebフォームに挿入する

1. Webフォームを新規に作成するか、既存のフォームを開きます。
2. aspxページの一番上に次の行を追加します。

<%@ Register TagPrefix="Custom" Namespace="ASB"
             Assembly="AutoSuggestBox" %> 

3. 提示ボックスを表示したい場所に次の形式で行を追加します。

<Custom:AutoSuggestBox id="Control ID" runat="server"
    DataType="サポートするデータの種類"
    CssClass="テキストボックスのスタイル"
    MaxLength="テキストボックスの最大文字数"
    Columns="表示する文字数"
/>

たとえば、次のようになります。

<Custom:AutoSuggestBox id="asbCity" runat="server"
    DataType="City"
    CssClass="FormCtrlStyle"
    MaxLength="100"
    Columns="30"
/>

4. DataType属性の値が「GetAutoSuggestData.aspx.cs」になっていることを確認します。詳細は前のセクションをご覧ください。
5. WebアプリケーションをWebサーバーのルート（たとえば、http://localhost/WebApp）で実行しない場合は、次のようにAutoSuggestBoxタグにもう1つ属性を追加します。

<Custom:AutoSuggestBox id="asbCity" runat="server"
    DataType="City"
    CssClass="FormCtrlStyle"
    MaxLength="100"
    Columns="30"
    ResourcesDir="/WebApp/AutoSuggestBox"
/>

動作のしくみ

　このコントロールにユーザーが文字の入力を始めると、JavaScriptによってOnKeyUp、OnKeyDown、OnKeyPressの各イベントが処理されます。また、Ajaxによって、サーバ側との通信が行われ、クリックごとに提示エントリの一覧が取得されます。

　つまり、イベントの流れは次のようになります。

1. AutoSuggestBoxコントロールにフォーカスが存在する状態で、ユーザーがキーを押します。
2. JavaScriptによって、ユーザーが［Up］、［Down］、［Enter］、またはその他のキーを押したかどうかが確認されます。
3. 提示メニューが表示されていて、ユーザーが［Up］または［Down］キーを押した場合は、適切なメニュー項目が選択状態になります。
4. ユーザーが［Enter］キーを押すと、提示メニューが非表示になり、現在の選択項目が提示ボックスに表示されます。
5. ユーザーが英数字を入力すると、JavaScriptによってサーバの「GetAutoSuggestData.aspx」ページにXmlHttpRequestが送信されます。
6. 「GetAutoSuggestData.aspx」ページはテキストボックスの現在値と取得すべきデータの種類を受けとります。通常は、提示する値をデータベースから取得するためのクエリが生成されます。クエリ結果を用いて提示メニュー用のHTMLが作成され、「GetAutoSuggestData.aspx」ページに返されます。
7. このWebページが更新後の提示メニューを取得し、古いメニューに代わって新しいメニューを表示します。

まとめ

　本稿では、フリーのAutoSuggestBoxコントロールを利用してWebアプリケーションに「Google Suggest」の機能を簡単に追加する方法を紹介しました。ぜひ自分のアプリケーションでも使ってみてください。

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

関連情報

• AutoSuggestBoxのサイト -- AutoSuggestBoxに関する説明、デモ、ダウンロードファイルがあります。
• Google Suggest -- このAutoSuggestBox機能の原点となったサイトです。
• Travelope -- AutoSuggestBoxを実装した旅行検索エンジンです。