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

2023-04-07

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

レイアウトの準備ができたら、アダプティブカードテンプレート言語を使用して、結果の種類を定義するために使用される結果レイアウト 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 be taken over to FY21...Marketing Planning is ongoing for FY20.." 
}

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

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

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

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

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

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

考慮事項

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

するべきこと

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

してはいけないこと

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