検索結果をカスタマイズするレイアウトを作成する

  • [アーティクル]

検索レイアウト デザイナーを使用して、カスタム カテゴリの結果レイアウトを設計できます。 レイアウト デザイナーで提供されるテンプレートを選択し、要件に合ったテンプレートを使用することで、レイアウトの設計を開始できます。 または、要件に合わせてさまざまな方法でこれらのテンプレートを編集することもできます。 たとえば、画像の追加/削除、テキストの追加/削除、テキストの変更などです。 要件を満たすテンプレートがない場合は、空白のテンプレートを使用してレイアウトの設計を開始できます。

レイアウトの準備ができたら、 アダプティブ カード テンプレート言語 を使用して、結果の種類を定義するために使用される結果レイアウト JSON を作成します。 結果のプロパティをレイアウトにマップするには、レイアウト デザイナーの [マッピング] ステップを使用します。

独自にレイアウトを作成する

独自にレイアウトを作成するには、 アダプティブ カード とそのスキーマに関する知識が必要 です。 検索結果レイアウトでは、アダプティブ カードによって提供される要素のサブセットが使用され、レイアウト デザイナーを使用して、サポートされている要素のセットについて学習できます。

独自のレイアウトを作成するときに、コネクタのデータを使用してアダプティブ カード レイアウトを作成し、レイアウトを完成させます。 独自のレイアウトを作成するには、次の 2 つの主要な手順があります。

  • レイアウトを設計します。
  • テンプレートからデータを分離します。

レイアウトのデザイン

この例では、ヘッダー、ロゴ、リンク、説明テキストを含むレイアウトを示します。

ヘッダー、リンク、説明を含むレイアウトの例。

レイアウトに関連付けられている JSON ファイルを次に示します。

{ 
    "type": "AdaptiveCard", 
    "version": "1.3", 
    "body": [ 
        { 
            "type": "ColumnSet", 
            "columns": [ 
                { 
                    "type": "Column", 
                    "width": "auto", 
                    "items": [ 
                        { 
                            "type": "Image", 
                            "url": "https://searchuxcdn.blob.core.windows.net/designerapp/images/OOTBLayouts/search.png", 
                            "altText": "Thumbnail image", 
                            "horizontalAlignment": "center", 
                            "size": "small" 
                        } 
                    ], 
                    "horizontalAlignment": "center" 
                }, 
                { 
                    "type": "Column", 
                    "width": 10, 
                    "items": [ 
                        { 
                            "type": "TextBlock", 
                            "text": "[Contoso Solutions](https://contoso.com)", 
                            "weight": "bolder", 
                            "color": "accent", 
                            "size": "medium", 
                            "maxLines": 3 
                        }, 
                        { 
                            "type": "TextBlock", 
                            "text": "[https://contoso.com](https://contoso.com)", 
                            "weight": "bolder", 
                            "spacing": "small", 
                            "maxLines": 3 
                        }, 
                        { 
                            "type": "TextBlock", 
                            "text": "Marketing team at Contoso.., and looking at the Contoso Marketing documents on the team site. This contains the data from FY20 and will taken over to FY21...Marketing Planning is ongoing for FY20..", 
                            "maxLines": 3, 
                            "wrap": true 
                        } 
                    ], 
                    "spacing": "medium" 
                } 
            ] 
        } 
    ], 
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json" 
}

データをレイアウトから分離する

データをレイアウトから分離し、データをバインドできます。

データをバインドした後のレイアウト JSON を次に示します。

{ 
    "type": "AdaptiveCard", 
    "version": "1.3", 
    "body": [ 
        { 
            "type": "ColumnSet", 
            "columns": [ 
                { 
                    "type": "Column", 
                    "width": "auto", 
                    "items": [ 
                        { 
                            "type": "Image", 
                            "url": "https://searchuxcdn.blob.core.windows.net/designerapp/images/OOTBLayouts/search.png", 
                            "altText": "Thumbnail image", 
                            "horizontalAlignment": "center", 
                            "size": "small" 
                        } 
                    ], 
                    "horizontalAlignment": "center" 
                }, 
                { 
                    "type": "Column", 
                    "width": 10, 
                    "items": [ 
                        { 
                            "type": "TextBlock", 
                            "text": "[${title}](${titleLink})", 
                            "weight": "bolder", 
                            "color": "accent", 
                            "size": "medium", 
                            "maxLines": 3 
                        }, 
                        { 
                            "type": "TextBlock", 
                            "text": "[${titleLink}](${titleLink})", 
                            "weight": "bolder", 
                            "spacing": "small", 
                            "maxLines": 3 
                        }, 
                        { 
                            "type": "TextBlock", 
                            "text": "${description}", 
                            "maxLines": 3, 
                            "wrap": true 
                        } 
                    ], 
                    "spacing": "medium" 
                } 
            ] 
        } 
    ], 
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json" 
}

サンプル データ: サンプル データ エディター でサンプル データを指定して、 プレビュー モードの場合にデータ バインド カードを表示します。

{ 
    "title": "Contoso Solutions", 
    "titleLink": "https://contoso.com", 
    "description": "Marketing team at Contoso.., and looking at the Contoso Marketing documents on the team site. This contains the data from FY20 and will taken over to FY21...Marketing Planning is ongoing for FY20.." 
}

レイアウトを結果プロパティにマップする

結果レイアウト JSON を生成するには、レイアウトの各フィールドを result プロパティまたはコネクタ プロパティにマップする必要があります。

フィールドが選択され、プロパティ ウィンドウが開いている [検索レイアウト デザイナー] ページのレイアウト例のスクリーン キャプチャ。

レイアウト内のフィールドを選択して、マップする必要がある変数を強調表示します。 1 つのフィールドに複数の変数を使用できます。すべてのフィールドを結果プロパティにマップする必要があります。

検索結果にスニペットを表示する

コネクタの結果の content プロパティで生成された動的スニペットは、検索結果に表示できます。 ResultSnippet は、コネクタの各結果に対して生成されるスニペットのプレースホルダー プロパティとして機能するシステム プロパティです。 結果レイアウトにスニペットを表示するには、 ResultSnippet システム プロパティを検索結果レイアウトの適切なフィールド (Description など) にマップする必要があります。 各結果で生成されたスニペットでは、ユーザーが入力したクエリ用語を含むスニペット内の一致も強調表示されます。

考慮事項

作業を開始する前に、いくつかの操作を行う必要があります。また、レイアウトが正常に行われるようにするために避けるべきことがいくつかあります。

するべきこと

  • レイアウトを設計する際、レイアウト構造は行と列と考え、列セット要素を追加して作成します
  • これにより、一貫性が維持され、他の結果と簡単にスキャンされるため、すべての結果レイアウトにロゴ/アイコンを指定します。 結果プロパティではなくロゴに静的リンクを使用している場合は、テンプレートを編集してレイアウトにロゴ リンクを指定します。
  • 四角形のロゴを使用して、結果の適切な配置を確保することをお勧めします。 ピクセル化を回避するには、最小サイズが 32 x 32px のロゴを使用します。
  • 結果レイアウトを設計する際のテーマの要件を考えてみましょう。結果アイコンも暗いテーマで表示する必要があります。
  • 結果 JSON で使用される結果プロパティのデータが返されないシナリオの結果レイアウトを検証します。 プロパティにデータが $when 含まれていない場合は、 条件を使用して要素を非表示にします。
  • 条件のデータ型と result プロパティが $when 一致していることを確認します。 たとえば、条件では $when とText比較Numberしないでください。 
  • 要素が動的コンテンツを Textblock 処理できることを確認します。 この目的では、 wrap および maxLines 要素のプロパティを使用できます。
  • Markdown でを使用 {DATE()} するときに日付を適切に書式設定します。 
  • StringCollection 型のプロパティが結合メソッドで 次のようにラップされていることを確認します json ${propertyName} -> ${join(propertyName, ‘,’)} 。 StringCollection から 1 つの値 (例: ith 項目) を表示する場合は、次のように json ${propertyName} -> ${propertyName[i]} 指定できます (注: StringCollection 型のインデックス作成は 0 から始まります)。

してはいけないこと

  • 値をバインドするときに無効なデータ型を定義しないでください。 データ型の詳細については、「 検索スキーマの管理」を参照してください。
  • 結果レイアウト JSON の最大高さに従って、結果ページで結果をトリミングしないようにします。 結果レイアウトの最大高さを超えると、結果ページで結果がトリミングされます。
  • 要素プロパティで値を使用 px しないでください。
  • 検索結果レイアウトの ResultSnippet プロパティで markdown を使用して、検索結果のクエリの一致を強調表示しないでください。

リソース

検索結果ページをカスタマイズする

アダプティブ カード

アダプティブ カード テンプレートの言語

アダプティブ カード スキーマ