少し長いシリーズとして playwright を利用してサムネイルを取得する API を準備しました。今回は、これを Sitecore Search に対して適用していきます。

新しいソースの作成

今回は、https://doc.sitecore.com/xmc の XM Cloud の英語のドキュメントに対して、検索結果としてサムネイルを表示する仕組みを実装していきます。

今回はソースを作成するにあたって、Document Extractors を作成するにあたって、以下のような設定としました。

• Extractor Type としては JS を選択

• URLs to Match では Regular Expression で .*\/xmc\/.* を指定する

• Tagger に関しては、以下の JavaScript のコードを設定する

  • この際、サムネイルを作成する API のサーバーに関しては image_url で指定しています

  • このページのサンプルサイトの URL はダミーです

function extract(request, response) {
    $ = response.body; 

    let url = request.url;

    return [{
        'title': $('h1').text(),
        'subtitle': $('meta[name="description"]').attr('content') || $('section[data-component-name="Hero Banner"] div[class*="side-content"]>div>p, header div.lead p').text(),
        'description': $('meta[name="description"]').attr('content') || $('meta[property="og:description"]').attr('content') || $('p').text(),
       'name': $('meta[name="searchtitle"]').attr('content') || $('title').text(),
        'image_url': "https://yoursampleserver.vercel.app/api/thumbnail?url=" + url,
        'product': $('meta[name="product"]').attr('content'),
        'type': 'Documentation',
        'site_name': 'Sitecore Documentation',
        'url': url
    }];
}

これでクローラーがデータを取得していき、そのページの画像に関してはサムネイルを作成、表示する API を指定する形となりました。

動作確認

今回は XM Cloud のドキュメントを読み込んでいるため、キーワードとして XM を入力してみます。まずはキーワードを入れたときのおすすめとして、画面のスクリーンショットが表示されていることがわかります。

検索結果の一覧でも、画像としてサムネイルが利用されています。

検索結果のページでも、サムネイルが利用されています。

まとめ

商品情報などでページに対して利用するべき画像が明確になっている場合は、この画像を利用する仕組みは不要です。とはいえ、すべてのページに検索結果向けの画像を用意するのは工数的にも、費用対効果を考える場合でもハードルが高くなりますが、Playwright を利用したサムネイルの仕組みで、検索結果に対して画像を表示することができました。