MoreBeerMorePower

Power Platform中心だけど、ノーコード/ローコード系を書いてます。

Microsoft Searchの結果をAdaptive Cardsでカスタマイズする

お友達のてっちゃん太田さんが教えてくれたので、自分のブログをMicrosoft Searchを使って検索→Adaptive Cardsで結果をカスタマイズする方法を残しておきます。

てっちゃん、太田さんありがとうございました!

検索結果のカスタマイズ

Microsoft Searchでは、Search用のコネクターを利用して様々なサービスからコンテンツを検索できます。 ここで得られる検索結果はAdaptive Cardsを利用して表示をカスタマイズすることができるので、このブログを対象にして表示のカスタマイズを試してみました。

公式のレファレンスはここの一連をご覧ください。

docs.microsoft.com

1. コネクターの追加

まずは何をするにもコネクターを設定しなければなりません。

標準ではMicrosoftから提供されている7つから選択することになります。ブログなどの場合には、Enterprise Websites を選択することで記事を検索対象とできます。 f:id:mofumofu_dance:20200622133132p:plain

まずはMicrosoft 365 管理センターから、Microsoft Search管理センターに遷移し、タブにある「Connectors」から、「+Add」に進みます。 f:id:mofumofu_dance:20200622133059p:plain

先ほどの7種のコネクターが表示されるので、ここでは「Enterprise websites」を選び次へ。 f:id:mofumofu_dance:20200622133549p:plain

コネクションの名前と、IDを指定します。次へが活性化されないと思ったら、小さいチェックボックスを確認しましょう。(何度もわすれた) f:id:mofumofu_dance:20200622133745p:plain

次に接続先の設定を行います。接続先にアクセスするために認証が必要であれば、Basicを選んでユーザー名・パスワードを入力します。

※自分のブログは公開サイトなので、接続情報はURLだけで問題なかったです。 f:id:mofumofu_dance:20200622133955p:plain

オプションで、検索から排除するURLを指定できます。

例えばカテゴリー一覧のページや、XXの一覧のようなページがヒットしてしまうのを防ぐために、任意で設定できます。 f:id:mofumofu_dance:20200622134249p:plain

次がすごく大事な検索スキーマの設定です。クエリーを発行する対象にするのか、検索対象にするのか、データを取得するのかをここで指定できます。

特にRetrieve (データ取得)については、結果カスタマイズするときのデータとして使うので、注意してセットしましょう。 f:id:mofumofu_dance:20200622134401p:plain

クロールの間隔は1日~4週間まで広く設定できます。特に問題なければ1日でよさそう。

f:id:mofumofu_dance:20200622134554p:plain

最後に確認したら完了です。

Connectorsの一覧に、今追加したものが表示されていればOKです。しばらくするとConnection stateがReadyに変わります。 ありがたいことに、次にやることを教えてくれています。

あとやるのは、Result typeの作成とVerticalの作成です。 f:id:mofumofu_dance:20200622134813p:plain

2. Result type作成

(ちょっとよくわかっていませんが) コネクターや検索ルールによって、表示を分けることができます。例えばブログがソースならタイトルと本文だけでいいけど、Service Nowのようなチケットの場合には、RequesterやStateを表示したい など、データによって表示するものがことなることへの配慮かなと思います。

設定するには、「Customization」の「Result types」で「+Add」をクリックします。 f:id:mofumofu_dance:20200622135401p:plain

result typeにはわかりやすい名前を付けておきましょう。今回はBlog Postsとしています。 f:id:mofumofu_dance:20200622135532p:plain

先ほど設定したコネクター名が表示されます。結果を取得したいコネクター名を選択して次へ。 f:id:mofumofu_dance:20200622135619p:plain

あらかじめresult typeを設定する条件を指定できます。同一コネクターの中でも、結果の種類が違う場合、(SharePointでいえば、ドキュメントなのかリストアイテムなのかのような) には、ここでresult typeを適用する条件を絞れます。 f:id:mofumofu_dance:20200622135907p:plain

ここがポイント! 検索結果を表示するためのレイアウトを指定します。

この指定がAdaptive Cardsなんです! f:id:mofumofu_dance:20200622140025p:plain

Launch Layout Designerをクリックすると、Adaptive Cards Designerのようなカスタマイズページが表示されます。

(落ち着いた感じで書いていますが、この時点でテンション爆上げでした) f:id:mofumofu_dance:20200622140419p:plain

レイアウトを決めたら、次にコンテンツとのマッピングを指定します。(Adaptive CardsでのData bindingです) ここで指定できるデータが、まさにRetrieveで指定したプロパティです。

例えばTitle, URL, Descriptionです。これらを指定したら、JSONをコピーしましょう。(画面下のボタン) f:id:mofumofu_dance:20200622140843p:plain

タブを戻って、result typeの設定画面で、コピーしてきたJSONを貼り付けます。あとはReviewして完了。 f:id:mofumofu_dance:20200622140941p:plain

3. Vartical追加

Verticalは、検索ページでの↓ここです。 f:id:mofumofu_dance:20200622141133p:plain

Verticalの設定は単純にデータソース (コネクション) の指定と名前の指定だけです。 f:id:mofumofu_dance:20200622141357p:plain

結果確認

もしVerticalが表示されない/result typeが表示されないという場合には、キャッシュをクリアしてみましょう。

うまく設定できていると以下のように検索結果が表示されます。 f:id:mofumofu_dance:20200622141526p:plain

さらにカスタマイズしたい場合は・・・

どうもコネクターを自前で用意できるようなのですが、まったく情報不明なので割愛します・・・。

docs.microsoft.com