February 2015

Volume 30 Number 02

最新のアプリ - Windows ストア アプリと Windows Phone ストア アプリでの検索の実装

Rachel Appel | February 2015

Rachel Appel

検索はデジタル ライフに欠かせない機能です。毎日、多くの人々が Bing や Google のようなサイトを使って情報を検索しています。Web、アプリ、専用のデータ ストアなどを検索する人もたくさんいます。検索は間違いなく最もよく使われるデジタル機能なので、開発するアプリでは、ユーザーが簡単に検索を実行できるようにすることが推奨されます。

Windows での検索手法

PC にはタブレットやノートなどのさまざまな物理形状があるため、Windows OS では形状に合わせて検索 UI の動作を変えています。たとえば、Windows Phone 8.1 では、検索に Cortana が使用されます (Cortana の詳細については、「Cortana へようこそ」をご覧ください)。Cortana の有無に関わらず、アプリは Windows Phone ストア アプリ内からカスタム検索を実行できます。Windows Phone ベースのデバイスでは、スマートフォン自体の右下 ([Windows] (中央) ボタンと [戻る] (左) ボタンの隣) に検索専用のハードウェア ボタンが用意されています。

Windows 8 ではさまざまな方法で検索を起動できます。最も簡単なのは、Windows スタート画面でキー入力を始める方法です。これにより、デバイス内部とインターネット全域のグローバル検索が開始されます。タッチ対応デバイスで検索を起動する場合はスワイプ タッチ ジェスチャを使用します。画面の右上隅や右下隅にマウスを移動して、検索を開始することもできます。

ショートカット キーがお好きな方は、Windows キーを押しながら S キーを押して、[Windows 検索] チャームを表示します。フォーム ファクターが変わっても、アイコンを変更することは考えません。ユーザーは虫眼鏡アイコンを見れば、それが検索だとわかります。

旧バージョンとの互換性を確保するためには検索チャーム (検索コントラクト) を使用するのが適切ですが、マイクロソフトは SearchBox コントロールの使用を推奨しています。詳細については、「アプリへの検索の追加」を参照してください。SearchBox コントロールを使用する場合、アプリのキャンバスにコントロールを追加するか、アプリ バーにコントロールを表示します。アプリを操作する主な方法の 1 つとして検索を用意する場合は、このコントロールをアプリ UI に一貫して表示しておくようにします。

コントロールにすぐ気付く場所ならアプリのキャンバス上のどこでもよいのですが、通常、右上隅に表示します。ニュース、映画、スポーツ、学術論文、財務報告書などを扱うアプリには、人目を引く検索ボックスが必要になります。このようなアプリでは、何気なく参照することもありますが、通常、利用者は目的を持って検索し、その内容に直接移動することを考えます。

検索ボックスが画面上で場所を取りすぎることが、気になるかもしれません。その点はもっともです。1 つの方法として検索アイコンを表示しておくと、小さくても気づきやすい目印になります。表示している検索グリフをクリックまたはタップすると、SearchBox が表示され、検索文字列を入力して結果を閲覧できます。

SearchBox は、データのローカル検索にも、グローバル検索にも使用できます。グローバル検索とは、アプリ外部のデータにアクセスすることです。たとえば、リムーバブル デバイス、ネットワーク、インターネットなどに対して行われる検索です。デバイス内にある音楽や写真などのファイルを検索する場合は、プログラムのマニフェストにこの機能を設定するのを忘れないようにします。

SearchBox コントロールによる検索の実装

Windows ストア アプリと Windows Phone ストア アプリでは、XAML または HTML のいずれかを使用してアプリに検索ボックスを組み込みます。コントロールでも API 呼び出しでも、概念上は言語間で同じように機能しますが、当然構文は異なります。検索チャーム用に検索をコーディングする場合も、複雑さに関してはほぼ同じです。コードでは、同じ基本手順を実行する必要があります。また、言語に関わらず、同じ UX ガイドラインが適用されます。

図 1 に、XAML による SearchBox を例を示します。このコントロールは StackPanel などの任意のコンテナー コントロール内に配置できます。他のコントロールと同じように、ユーザーが検索を起動した場合に応答して実行するイベントを関連付ける必要があります。SearchBox コントロールを使用する場合、検索アイコンを設定する必要はありません。多くの場合、FocusOnKeyboardInput を True に設定します。そうすれば、ユーザーがキー入力を開始するだけで SearchBox にフォーカスを移動できます。その結果、検索しやすいエクスペリエンスが実現されます。

図 1 XAML と C# を使った候補表示を備えた SearchBox

<SearchBox x:Name="SearchBox" Height="35"
  HorizontalAlignment="Stretch" VerticalAlignment="Bottom"
  SuggestionsRequested="SearchBoxEventsSuggestionsRequested"  
  QuerySubmitted="SearchBoxEventsQuerySubmitted"
  FocusOnKeyboardInput="True"/>
public sealed partial class SearchBoxWithSuggestions :
  SDKTemplate.Common.LayoutAwarePage
{
  public SearchBoxWithSuggestions()
  {
    this.InitializeComponent();
  }
  private static readonly string[] suggestionList =
  {
    "ActionScript", "Ada", "Basic", "C", "C#", "C++", "Clipper",
      "Clojure", "COBOL", "ColdFusion", "Dart", "Delphi", "Erlang",
      "F#", "Haskell", "HTML", "Java", "JavaScript", "LISP",
      "Objective-C", "Pascal", "Perl", "PowerShell", "R", "Ruby",
      "Rust", "RPG", "SQL", "SmallTalk", "Small Basic", "Swift",
      "TypeScript", "Turbo C", "Visual Basic"
  };
  private void SearchBoxEventsSuggestionsRequested(
    object sender, SearchBoxSuggestionsRequestedEventArgs e)
  {
    string queryText = e.QueryText;
    if (!string.IsNullOrEmpty(queryText))
    {
      Windows.ApplicationModel.Search.
        SearchSuggestionCollection suggestionCollection =
        e.Request.SearchSuggestionCollection;
      int n = 0;
      foreach (string suggestion in suggestionList)
      {
        if (suggestion.StartsWith(queryText,
          StringComparison.CurrentCultureIgnoreCase))
        {
          Uri uri = new Uri("ms-appx:///Assets/laptop1.png");
          RandomAccessStreamReference imageSource =
            RandomAccessStreamReference.CreateFromUri(uri);
          suggestionCollection.AppendResultSuggestion(
            suggestion, "", n.ToString(), imageSource, suggestion);
        }
      }
    }
  }
  private void SearchBoxEventsQuerySubmitted(
    object sender, SearchBoxQuerySubmittedEventArgs e)
  {
    SearchListView.Items.Add(e.QueryText);
  }
}

XAML では、SearchBoxEventsSuggestionsRequested イベントと SearchBoxEventsQuerySubmitted イベントという 2 つの主要イベントの関連付けを行う必要があります。SearchBoxEventsSuggestionsRequested イベントは、リアルタイムにキーストロークをキャプチャするために、キーストロークごとに毎回発生します。SearchBoxEventsQuerySubmitted イベントは、名前からわかるように、ユーザーが検索アイコン上で Enter を入力するか、アイコンをクリックまたはタップするか、それ以外の方法で検索をトリガーしたときに発生します。実際の検索を実行するコードは、SearchBoxEventsQuerySubmitted イベントに追加します。図 1 では、この 2 つのイベントの処理を示しています。

C# では、最初に、候補として使用する検索文字列の一覧を提供する必要があります。図 1 では、suggestionList という文字列配列が候補の一覧で、さまざまなプログラミング言語の名称を含めています。図 1 のコードは、SearchSuggestionCollection を使った検索の実装例を示しています。SearchBoxEventsSuggestionsRequested イベントが発生すると、イベントの引数 "e" にはクエリを追加できる SearchSuggestionCollection が格納されます。図 1 では、suggestionCollection 変数の宣言と設定を同時に行ってます。

AppendQuerySuggestion メソッド、AppendQuerySuggestions メソッド、AppendSearchSuggestion メソッド、または AppendResultSuggestion メソッドを使って、SearchSuggestionCollection にクエリを追加できます。結果候補はクエリ候補と同じ一覧に表示されますが、結果候補の場合は、画像などの付加データを SearchBox に渡すことができます。

XAML にはスタイルや見栄えのよい外観を設定する Resource 表記がありますが、HTML の場合は CSS を使います。たとえば、図 2 の <div> 要素にはどのスタイルへの参照も含まれていないため、既定の Windows Library for JavaScript (WinJS) の .winsearchbox クラスが使用されます。このクラスは、WinJS ベースの CSS に属しています。

図 2 HTML と JavaScript を使った候補表示を備えた SearchBox

<div id="searchBox" data-win-control="WinJS.UI.SearchBox"></div>
(function () {
"use strict";
var suggestionList = ["ActionScript", "Ada", "Basic", "C", "C#", "C++", "Clipper",
  "Clojure", "COBOL", "ColdFusion", "Dart", "Delphi", "Erlang", "F#", "Haskell",
  "HTML", "Java", "JavaScript", "LISP", "Objective-C", "Pascal", "Perl",
  "PowerShell", "R", "Ruby", "Rust", "RPG", "SQL", "SmallTalk",
  "Small Basic", "Swift", "TypeScript", "Turbo C", "Visual Basic"];
var page = WinJS.UI.Pages.define("/html/S1-SearchBoxWithSuggestions.html", {
    ready: function (element, options) {
      var searchBox = document.getElementById("searchBox");
      searchBox.addEventListener("suggestionsrequested",
        suggestionsRequestedHandler);
      searchBox.addEventListener("querysubmitted", querySubmittedHandler);
      searchBox.winControl.focusOnKeyboardInput = true;
    }
  });
function suggestionsRequestedHandler(eventObject) {
    var queryText = eventObject.detail.queryText,
      query = queryText.toLowerCase(),
      suggestionCollection = eventObject.detail.searchSuggestionCollection;
    if (queryText.length > 0) {
      for (var i = 0, len = suggestionList.length; i < len; i++) {
        if (suggestionList[i].substr(0, query.length).toLowerCase() === query) {
          suggestionCollection.appendQuerySuggestion(suggestionList[i]);
        }
      }
    }
  }
function querySubmittedHandler(eventObject) {
    var queryText = eventObject.detail.queryText;
    WinJS.log && WinJS.log(queryText, "sample", "status");
  }
})();

図 3 は、図 1 または 図 2 の実行結果を示しています。

クエリ候補と結果候補を表示する SearchBox
図 3 クエリ候補と結果候補を表示する SearchBox

図 3 の 2 つの SearchBox では、ユーザーの入力に応じてフィルター処理された候補が表示されているのがわかります。すばらしい機能です。さいわい、XAML を使用しても HTML を使用しても、SearchBox コントロールによってこの処理が自動的に実行されます。ただし、クエリ送信イベントでの実際の検索は、開発者自身が実行する必要があります。つまり、ファイルを読み取るか、データベースや Web サービスにアクセスするか、Web を検索するかは、開発者次第です。

SuggestionCollection に項目を追加するときは、AppendResultSuggestion メソッドの方が AppendQuerySuggestion メソッドよりも多くの情報を指定できます。図 4 のコードに示すように、一覧の項目に適用するテキスト、説明、画像、代替テキストを渡します。図 5 は、図 4 のコードで作成される実行時のスクリーンショットを示しています。

図 4 候補に画像を追加するコード

private void SearchBoxEventsSuggestionsRequested(object sender,
  SearchBoxSuggestionsRequestedEventArgs e)
{
  string queryText = e.QueryText;
  if (!string.IsNullOrEmpty(queryText))
  {
    Windows.ApplicationModel.
      Search.SearchSuggestionCollection suggestionCollection =
      e.Request.SearchSuggestionCollection;
    int n = 0;
    foreach (string suggestion in suggestionList)
    {
      if (suggestion.StartsWith(queryText,
        StringComparison.CurrentCultureIgnoreCase))
      {
        Uri uri = new Uri("ms-appx:///Assets/laptop.png");
        RandomAccessStreamReference imageSource =
          RandomAccessStreamReference.CreateFromUri(uri);
        suggestionCollection.AppendResultSuggestion(
          suggestion, "", n.ToString(), imageSource, suggestion);
      }
    }
  }

結果候補と画像が表示された SearchBox
図 5 結果候補と画像が表示された SearchBox

AppendResultSuggestions クラスに渡される画像の引数は、Windows.Storage.Streams 名前空間の IRandomAccessStreamReference 型です。JavaScript を使用している場合は、同じ CreateFromUri メソッドを使って URI を作成する必要があります。src 属性を使って HTML で画像を設定する通常の方法とは対照的です。

これで、機能する SearchBox と、テキストと画像付きの候補ができました。次は、検索結果の表示です。XAML と HTML のどちらでも、結果を表示して操作するための、定義済みの検索結果ページを追加できます。Visual Studio では、ページのテンプレートが用意されています。このテンプレートは、指定したデータ一覧をフィルター処理して、検索結果を表示するコードを備えています。このページはカスタマイズできるため、必要な方法で結果を表示できます。

Visual Studio の [新しいファイル] ダイアログ ボックスで SearchResultsPage を追加すると、検索結果を表示するためのリスト ビューを備えたページが作成されます。リスト ビューの使用の詳細については、2013 年 12 月のコラム「WinJS リスト ビュー コントロールについて知っておく必要があるすべての情報」 (msdn.microsoft.com/magazine/dn532209) をご覧ください。もちろん、検索結果ページの表示にテンプレートを使用することは必須ではありません。ユーザーが納得できてわかりやすい位置であれば、UI のどこに検索結果を組み込んでもかまいません。自分で組み込む場合は、まず UX のガイドラインを確認してください。

検索 UX のガイドライン

ユーザーは、検索しても何も見つからない場合や検索しにくい場合は、ストアでアプリを低く評価する傾向があります。試用版の検索がうまく機能しなければ、アプリの購入を控えることも考えられます。

検索は頻繁に使用される機能なので、有料版とトライアル版のどちらのアプリでも、時間をかけてきちんと作成するようにします。アプリに検索を実装して評価を高める方法について、以下にいくつか提案をまとめました。

  • 検索がアプリの中でよく使われる場合は、ユーザーがすぐに見つけて使える場所に検索を配置する。
  • クエリ候補と結果候補を使ってユーザーを支援する (ユーザーは候補表示を利用して、アプリ全体をすばやく移動しアクションを実行します)。
  • ユーザーがさっと見てわかりやすいように結果を表示する (情報が集約されていれば、開発者にもユーザーにも便利です。検索のポイントは、求める詳しい内容を選択できるようにユーザーに情報を提供することです)。
  • 物理キーボードだけでなく、タッチ キーボードでも検索ボックスを操作できるようにする。
  • アプリ内でテキストを検索するキーボード ショートカットとして、Ctrl+F をサポートする (Windows のみ)。

これらのポイントの多くは、事実上、外観を整えることです。Windows UX ガイドラインでは、どちらかと言えば、より重要な情報に絞り込んで表示しすぎる傾向があります。ユーザーが [戻る] ボタンで検索結果から前の場所に戻れるようにします。Windows ストア アプリでのナビゲーションについて知識を養うには、 2013 年 8 月のコラム「Windows ストア アプリでのナビゲーションの必須要素」(msdn.microsoft.com/magazine/dn342878) をご覧ください。

特にスマートフォンの場合は、検索候補を必ず提示するようにします。どのユーザーも検索クエリを入力したら、さらなる支援を受けたいと考えています。小型のデバイスでは、すばやくかつ正確に入力するのはかなり困難です。スマートフォンのユーザーは入力方法がかなり限定されます。語句全体を入力するとしたら、使いにくいアプリと思われ、不満を感じることになります。

検索についての結論

Windows ストア アプリと Windows Phone ストア アプリでは、快適な検索エクスペリエンスを簡単に実装できます。検索機能を追加すると、アプリを堅牢にできるだけでなく、ユーザーが頻繁に利用する重要な機能に容易にアクセスできるようになります。グローバル データとローカル データのどちらも検索できるようにすることを忘れないでください。

アプリに検索を実装するときは、ここにまとめたガイドラインとマイクロソフトが「検索のガイドライン」で説明している内容を確認して、従うようにします。


Rachel Appel は 20 年を超える IT 業界での経験を持つマイクロソフトの元社員で、コンサルティング、執筆活動、および指導を行っています。彼女は Visual Studio Live!、DevConnections、MIX など、業界トップ クラスのカンファレンスで講演しています。専門分野は、マイクロソフトの各種開発ツールやオープン Web を重視したテクノロジとビジネスを連携させるソリューションの開発です。彼女のことをもっと知りたい方は、彼女の Web サイト rachelappel.com (英語) をご覧ください。

この記事のレビューに協力してくれたマイクロソフト技術スタッフの Frank La Vigne に心より感謝いたします。