検索結果項目テンプレートの追加

[アーティクル]
04/30/2014

このトピックでは、ユーザーが Visual Studio に付属の検索結果項目テンプレートを使ってアプリ内の情報を検索できるようにする方法を紹介します。検索用の項目テンプレートにより、WinJS.UI.SearchBox コントロールで開始された検索の検索結果ページをアプリで表示することができます。項目テンプレートについて詳しくは、「JavaScript 項目テンプレート」をご覧ください。ほとんどのアプリで、Microsoft Visual Studio 2013 に含まれている項目テンプレートを使ってアプリ開発を簡略化できます。

検索結果テンプレートは、Windows ストアアプリにお勧めのナビゲーションモデルが実装されたページコントロールです。このナビゲーションモデルは、ハブ、グリッド、スプリット、ナビゲーションの各プロジェクトテンプレートに実装されています。詳しくは、「ナビゲーションモデル」をご覧ください。

重要ナビゲーションプロジェクトテンプレートまたは空のプロジェクトテンプレートと組み合わせて検索結果項目テンプレートを使うには、さらにプロジェクトファイルを追加する必要があります。以下の一覧をご覧ください。

詳しい情報と検索を実装するその他の方法については、「クイックスタート: 検索の追加」をご覧ください。

このトピックでは、ハブ、グリッド、スプリットの各テンプレートに検索結果項目テンプレートを追加する方法について説明します。さまざまなプロジェクトテンプレートに項目テンプレートを追加する際には、次の点にご注意ください。

空のテンプレートについては、navigator.js ファイルをプロジェクトに追加します (このファイルは、グリッドテンプレートなどの他のプロジェクトテンプレートから流用できます)。さらに、default.html 内でコンテンツをホストするためのコードを追加する必要があります。詳しくは、「ナビゲーションモデル」をご覧ください。
ナビゲーションテンプレートと空のテンプレートについては、プロジェクトに data.js を追加するか (グリッドテンプレートなどの他のプロジェクトテンプレートから流用できます)、データにアクセスするための独自のメソッドを実装します。
ナビゲーションテンプレートと空のテンプレートについては、検索コントロールとそのイベントハンドラーをテンプレートのホームページに追加する必要があります。ナビゲーションテンプレートのホームページは、home.html です。空のテンプレートについては、独自のホームページを作成するか、default.html を使う必要があります。

検索結果項目テンプレートを追加する

次の手順では、検索結果項目テンプレートをプロジェクトテンプレートに追加する方法を示します。

Hh923025.wedge(ja-jp,WIN.10).gif 検索結果項目テンプレートを追加するには

Visual Studio で新しいプロジェクトを作成します。この例では、ハブテンプレート、グリッドテンプレート、または分割テンプレートを使います。
ソリューションエクスプローラーの pages プロジェクトフォルダーに、search という名前の新しいフォルダーを追加します。
search フォルダーのショートカットメニューを開き、[追加]、[新しい項目] の順にクリックします。
[新しい項目の追加] ダイアログボックスの中央のウィンドウで、[検索結果ページ] を選びます。この例では、[名前] ボックスに表示される既定の名前、searchResults.html を使います。
[追加] をクリックします。

Visual Studio で、新しい search フォルダーのプロジェクトに searchResults.html、searchResults.css、searchResults.js が追加されます。
searchResults.js を開き、検索ページの URI が正しいことを確かめます。
```
var searchPageURI = "/pages/search/searchResults.html";
```
search フォルダーに検索ファイルを配置しない場合は、URI を更新する必要があります。
searchResults.html を開き、searchResults.css の参照が正しいことを確かめます。
```
<link href="/pages/search/searchResults.css" rel="stylesheet" />
```

検索コントロールを追加する (ハブテンプレート)

ユーザーがアプリ内でデータを検索できるようにするには、WinJS.UI.SearchBox コントロールを使います。これらの手順は、プロジェクトテンプレートごとに異なります。これらの手順は、ハブテンプレートに適用されます。グリッドテンプレートまたは分割テンプレートを使う場合には、次の「検索コントロールを追加する (グリッドテンプレートおよび分割テンプレート)」をご覧ください。

Hh923025.wedge(ja-jp,WIN.10).gif 検索コントロールをページに追加するには

アプリのホームページ (hub.html) で、最初の HubSection コントロールの DIV 要素に SearchBox コントロールを追加します。
```
<div class="hero" data-win-control="WinJS.UI.HubSection">
    <div class="searchBox" data-win-control="WinJS.UI.SearchBox">
    </div>
</div>
```
ホームページの CSS ファイル (hub.css) で、SearchBox コントロールの表示プロパティを指定します。最初のハブセクションに適用されるルールの後に、次の CSS コードを含めることができます。
```
.hubpage .hub .hero .win-hub-section-header {
    display: none;
}

.hubpage .hub .hero .searchBox {
    margin-left: 400px;
    margin-top: 200px;
}
```
ホームページの JavaScript ファイル (hub.js) に、onquerysubmitted イベントに対応するイベントリスナーを作成します。ハンドラーによって、SearchBox コントロールからのクエリが取得されます。

ready 関数でリスナーを作成します。この関数のコードコメントでは、初期化コードを追加する必要があることが示されています。
```
// TODO: Initialize the hub sections here.
var elem = document.querySelector(".searchBox");
elem.addEventListener("querysubmitted", this.searchHandler.bind(this));
```
hub.js に、検索結果ページに移動するためのイベントハンドラーを追加します。ready 関数と同じスコープ内にイベントハンドラーを追加します。

重要これがページに定義する最後の関数である場合は、コードからコンマを削除してください。
```
searchHandler: function (args) {
    WinJS.Navigation.navigate('/pages/search/searchResults.html', args.detail);
},
```
ヒント 前に示したコードでは、イベント引数の detail プロパティにクエリの情報 (クエリテキストなど) が含まれています。
ハブテンプレートの作業を進めるには、次のセクションを省略して、「検索によって返された項目へのナビゲーションを実装する」をご覧ください。

検索コントロールを追加する (グリッドテンプレートおよび分割テンプレート)

ユーザーがアプリ内でデータを検索できるようにするには、WinJS.UI.SearchBox コントロールを使います。これらの手順は、プロジェクトテンプレートごとに異なります。これらの手順は、グリッドテンプレートと分割テンプレートに適用されます。

Hh923025.wedge(ja-jp,WIN.10).gif 検索コントロールをページに追加するには

アプリのホームページ (グリッドテンプレートの groupedItems.html、分割テンプレートの items.html) で、SearchBox コントロールを追加します。

このコントロールは、ListView コントロールの SECTION 要素の後、ページフラグメントの DIV 要素の中に置いてください (クラス名として fragment groupeditemspage または fragment itemspage を使います)。ここに示されたコードはグリッドテンプレートに対応するものです。

<section aria-label="Main content" role="main">
    <div class="groupeditemslist win-selectionstylefilled" aria-label="List of groups" data-win-control="WinJS.UI.ListView" data-win-options="{
            layout: {type: WinJS.UI.GridLayout, groupHeaderPosition: 'top'},
            selectionMode: 'none',
            currentItem: {type: WinJS.UI.ObjectType.item, index: 0, hasFocus: true},
            groupDataSource: Data.groups.dataSource,
            groupHeaderTemplate: select('.headertemplate'),
            itemDataSource: Data.items.dataSource,
            itemTemplate: select('.itemtemplate'),
            ongroupheaderinvoked: select('.pagecontrol').winControl.groupHeaderInvoked,
            oniteminvoked: select('.pagecontrol').winControl.itemInvoked
        }">
    </div>
<div class="searchBox" data-win-control="WinJS.UI.SearchBox" >
</div>

ホームページの CSS ファイル (groupedItems.css または items.css) で、SearchBox コントロールの表示プロパティを指定します。CSS ファイルの先頭に次の CSS を追加します (テストの後、margin-left の値を調整して、検索コントロールがアプリのタイトルの右側に表示されるようにしてください)。

ヒント スプリットテンプレートの CSS コードについては、.groupeditemspage ではなく .itemspage ルールを使います。
```
.groupeditemspage .searchBox {
    margin-left: 600px;
    margin-top: 70px;
}
```
ホームページの JavaScript ファイル (groupedItems.js または items.js) に、onquerysubmitted イベントに対応するイベントリスナーを作成します。ハンドラーによって、SearchBox コントロールからのクエリが取得されます。

ready 関数にイベントリスナーを作成します。
```
var elem = document.querySelector(".searchBox");
elem.addEventListener("querysubmitted", this._searchHandler.bind(this));
```
groupedItems.js または items.js に、検索結果ページに移動するためのイベントハンドラーを追加します。ready 関数と同じスコープ内にイベントハンドラーを追加します。

重要これがページに定義する最後の関数である場合は、コードからコンマを削除してください。
```
_searchHandler: function (args) {
    WinJS.Navigation.navigate('/pages/search/searchResults.html', args.detail);
},
```
前に示したコードでは、イベント引数の detail プロパティにクエリの情報 (クエリテキストなど) が含まれています。

検索によって返された項目へのナビゲーションを実装する

このセクションでは、ナビゲーションをサポートするように検索結果項目テンプレートを変更します。検索結果項目テンプレートのコードでは、検索結果自体が処理されます。既定の動作は変更できます。たとえば、アプリのデータの種類に応じて _searchData 関数を変更する必要があるとします。既定では、データモデル内のタイトルとサブタイトルがクエリ文字列と比較されます。この例では、検索条件は変更しません。

注意 _searchData 関数は data.js から提供されたデータを探します。ナビゲーションテンプレートまたは空のテンプレートを使う場合、data.js をプロジェクトに追加するか、利用するデータを検索するメソッドを用意して _searchData をカスタマイズする必要があります。data.js のデータモデルについて詳しくは、「プロジェクトテンプレートへのデータの追加」をご覧ください。

この例では、検索クエリで返され、検索結果ページに表示される項目へのナビゲーションを可能にするコードを実装します。

Hh923025.wedge(ja-jp,WIN.10).gif 項目へのナビゲーションを追加するには

searchResults.js を開き、_itemInvoked 関数に、適切なページに移動するためのコードを追加します。このコードは、検索結果ページから検索結果に関連付けられた項目ページへのナビゲーションをサポートします。

注意ここに示された URI はハブテンプレートに対応するものです。グリッドテンプレートの場合、URI は /pages/itemDetail/itemDetail.html となります。分割テンプレートの場合、URI は /pages/items/items.html となります。
```
_itemInvoked: function (args) {
    args.detail.itemPromise.done(function itemInvoked(item) {
        // TODO: Navigate to the item that was invoked.
        var itemData = [item.groupKey, item.data.title];
        WinJS.Navigation.navigate("/pages/item/item.html", { item: itemData });
    });
},
```

アプリの実行時に検索結果を簡単に確認できるように、data.js の一部の値を変更します。この例では、サンプルデータ (sampleItems 変数) のいくつかのタイトルとサブタイトルを "Hello" と "hloTitle" に置き換えています。次のコードをご覧ください。

var sampleItems = [
    // . . .
    { group: sampleGroups[0], title: "Hello", subtitle: "Item Subtitle: 5", description:
        itemDescription, content: itemContent, backgroundImage: mediumGray },

    { group: sampleGroups[1], title: "hloTitle", subtitle: "Hello", description:
        itemDescription, content: itemContent, backgroundImage: darkGray },
    { group: sampleGroups[1], title: "Hello", subtitle: "Item Subtitle: 2", description:
        itemDescription, content: itemContent, backgroundImage: mediumGray },
    // . . .
];

検索をテストする

Hh923025.wedge(ja-jp,WIN.10).gif 検索をテストするには

デバッガーツールバーの [デバッグの開始] の横のボックスの一覧から、[ローカルコンピューター] を選びます。
F5 キーを押してデバッグを開始します。
左側のハブセクションに表示される検索ボックスに「Hello」と入力して、Enter キーを押します。

検索結果ページに、検索語句が含まれているデータモデル内の項目が表示されます。次の図は、検索ボックスに「Hello」と入力した場合の検索結果ページを示しています。
いずれかの検索結果をクリックします。
ハブ、グリッド、分割のいずれかのアプリで項目ページが開き、選ばれたタイトルが最も上に表示されます。

[戻る] ボタンをクリックすると、検索結果ページに戻ることができます。

検索結果項目テンプレートの追加

検索結果項目テンプレートを追加する

検索コントロールを追加する (ハブテンプレート)

検索コントロールを追加する (グリッドテンプレートおよび分割テンプレート)

検索によって返された項目へのナビゲーションを実装する

検索をテストする

関連トピック

その他のリソース

検索結果項目テンプレートの追加

検索結果項目テンプレートを追加する

検索コントロールを追加する (ハブ テンプレート)

検索コントロールを追加する (グリッド テンプレートおよび分割テンプレート)

検索によって返された項目へのナビゲーションを実装する

検索をテストする

関連トピック

その他のリソース

検索コントロールを追加する (ハブテンプレート)

検索コントロールを追加する (グリッドテンプレートおよび分割テンプレート)