Optimizely SaaS CMS + Coveo 検索ページ

背景

最近、Optimizely Hackathon 2024 に参加し、Optimizely の最新製品である SaaS CMS を検討するプロジェクトの構築チームを率いることができて光栄でした。これはバックエンドへの大きな依存関係を排除し、編集者がフロントエンド コンポーネントだけで Web サイトを構築できるようにすることを目的としています。

これは私たちにとって新しい製品であったため、SaaS CMS のコアを使用して完全に機能するサイトを構築し、従来の PaaS とどのように異なるかを確認することにしました。必須の機能の 1 つは、データ ストアに保存されているエンティティを対話的に検索する方法を提供するリスト ページです。これは最初から大きな挑戦のように思えました。私たちは経験から、検索機能の構築は膨大で時間のかかる作業であることを知っていました。そして、ここでは時間が非常に重要でした。ハッカソンだったので、量には限界があり、最初はどれだけの量があるのかすら分かりませんでした。

重要な考慮事項の 1 つは、SaaS で利用可能な検索およびナビゲーション モジュールを使用せずにコンテンツにインデックスを付ける方法でした。 GraphQL が潜在的なソリューションのように思えましたが、私たちはより時間効率の高いオプションを探していました。幸いなことに、SaaS へのアクセスとは別に、強力な検索 API とともに、GraphQL を介したコンテンツのインデックス作成と取得を可能にするプラットフォームである Coveo のライセンスも取得しました。これによりインデックス作成の課題は解決されましたが、検索 UI を構築するタスクはまだ残っています。

この時点で、私たちは Coveo の検索ページ機能を発見しました。これは、リスト ページを構築するための強力なツールです。フリーテキスト検索、フィルター、ページネーション、並べ替えなど、必要な機能をすべて備えています。数回クリックするだけで、完全に機能する検索インターフェイスが完成しました。最後のステップは、JavaScript スニペットをコードに挿入するだけで、すぐに検索機能が Web サイトに読み込まれます。

私たちが何を構築し、どのようにそれを実現したかを示す旅に皆さんを連れて行きましょう。

ステップ 1: データソースの構成

最初のステップはデータ ソースの構成です。必要に応じて複数のデータ ソースを構成できます。 2 つの個別のリストを提供したかったため、2 つのソースを使用しました。1 つは求人情報用、もう 1 つは候補者プロフィール用です。

ソースの作成は、 コンテンツ → ソース セクション。[ソースの追加]をクリックすると、すぐに使用できる既存のコネクタが多数表示されます。私たちの場合、Optimizely GraphQL コネクタに興味がありました。

ソース タイプを選択すると、セットアップ モーダルが表示され、3 つのメイン タブが表示されます。

1. 認証 – ここで、アクセス資格情報が入力されます。これらは、SaaS CMS ダッシュボードの コンテンツのレンダリング ヘッダ。 Coveo の「HTTP、Basic、Kerberos、または NTLM 認証 (オプション)」フィールド内で、「App key」をユーザー名として使用し、「Secret」をパスワードとして使用する必要があります。

   
   

2. 含めるコンテンツ – このセクションには、データ ソースの JSON ベースの構成が含まれています。基本的な使用には、いくつかの必須フィールドのみが必要です。

   {
     "services": [
       {
         "url": "https://cg.optimizely.com/",
         "authentication": {
           "username": "@username",
           "password": "@password",
           "forceBasicAuthentication": "true"
         },
         "endpoints": [
           {
             "path": "content/v2",
             "method": "GET",
             "paging": {
               "pageSize": 10,
               "offsetType": "item",
               "totalCountKey": "data.JobOffer.total"
             },
             "itemPath": "data.JobOffer.items",
             "itemType": "JobOffer",
             "uri": "%[_metadata.url.base]%[_metadata.url.default]",
             "clickableUri": "%[_metadata.url.base]%[_metadata.url.default]",
             "title": "%[_metadata.displayName]",
             "modifiedDate": "%[_modified]",
             "queryParameters": {
               "query": "@getJobListingQuery"
             }
           }
         ]
       }
     ]
   }
   
   

   ここでいくつかの重要な点に注目してください。

   • 前のセクションの認証値が自動的に挿入されます。

   • ソースがデータをバッチでフェッチするようにページネーションを設定できます。

   • アイテムへの URL は、CMS ページのメタデータ フィールドから構築する必要があります。

   • GraphQL クエリは変数名を介して参照されます。

   • 使用する %[string] 構文を使用すると、メタデータのインデックス作成のためにデータを動的に参照できます。

   • 「JobOffer」テキストは、宛先 CMS ページ タイプ名に置き換える必要があります。

3. GraphQL クエリ – ここでは、必要なデータをすべて取得するためにクエリが定義されています。 その名前は前のセクションで参照されています。私たちの場合、求人に関する詳細を抽出するためにそれを使用しました。

   query JobListingQuery { 
     JobOffer(locale: en, skip:@offset, limit:@pageSize) { 
       total
       items { 
         Description { 
           html 
         } 
         Company
         Title
         RequiredSkills
         Location
         Salary
         _metadata {
           displayName,
           url {
             default,
             base
           } 
         }
         _modified
       }
     }
   }
   
   

   次のような特殊な変数があることに注意してください。 オフセット そして ページサイズ、バッチ ページネーションを制御するためにクエリに挿入されます。

この時点から、インデックスを構築できます。もう 1 つの価値のあることは、データが常に最新の状態になるように、繰り返しの時間枠で自動再構築を設定することです。これは、ソースを選択することで実現できます。 情報源 リストを表示し、「…もっと見る」をクリックします。

ステップ 2: マッピング

データがフェッチされたら、次のステップは必要なフィールドをマッピングすることです。たとえば、求人リストには、必要なスキル、求人を公開した会社名、給与、所在地などのフィールドが必要でした。これらのフィールドを使用すると、後でフィルター オプションを構築できるようになり、ユーザーが関連するオファーをすぐに見つけられるようになります。

マッピングを設定するには、目的のソースを選択する必要があります。 情報源 セクション。これにより、 マッピング 上部バーのボタン。これをクリックするとモーダルが開き、デフォルトのマッピングが表示され、「マッピングの追加」ボタンをクリックして新しいマッピングを追加できます。これにより、新しいマッピングを構成できる別のモーダルが表示されます。

マッピング モーダルでは、既存のフィールドを選択することも、新しいフィールドを作成することもできます。たとえば、「required_skills」という名前の新しいフィールドを作成しました。フィールドを複数値ファセットとして設定したり、フリーテキスト検索を有効にしたりするなど、フィールド モーダルでは多くの構成オプションを使用できます。

フィールドを選択した後、GraphQL クエリからの JSON 応答内の特定のデータ プロパティを指すマッピング ルールを作成する必要があります。文字列の配列として保存される必須スキルのマッピング ルールは次のようになります。 %[raw.RequiredSkills]。

ほとんどの場合、マッピング ルールは単にプロパティ名をラップしたものです。 %[]。ただし、URL などのより複雑なフィールドでは異なる場合があります。 %[raw._metadata.url.base]、またはリッチ テキスト フィールドを使用しました。 %[raw.Description.html]。 GraphQL からのデータは、 生 物体。

ステップ 3: 検索ページのデザイン

データが準備できたら、検索ページを構築します。ページ作成者は次の場所にあります。 検索 → ページ検索、ビルダーのタイプを選択する必要があります。推奨される Simple Builder を選択しました。これにより、レイアウト、スタイル、そして最も重要なフィルターを簡単に構成できます。これらの設定は別のセクションにまとめられています。

1. 検索結果表示 – ここで、結果アイテム (リストまたはグリッド) のレイアウトを構成し、表示するデータを選択することができます。各結果項目には 2 つの主表示領域があります。 1 つ目は色付きのバッジで、単一のデータ フィールドを強調表示します。たとえば、ここでは場所を表示します。項目の下部にある 2 番目の表示領域には追加の詳細が表示され、単一ファセットと複数ファセットの両方を表示できます。弊社の場合は、会社名、給与範囲、求められるスキルを記載し、明確で読みやすい結果項目を作成しました。

2. フィルタリングオプション – このセクションでは、マッピング手順で定義されたフィールドを使用してフィルターと並べ替えオプションを設定できます。私たちの場合、スキル、場所、会社によるフィルタリングを可能にしたいと考えていました。

3. スタイル – このセクションでは、リスト ページ全体の色とフォント ファミリーを調整し、ページが全体のデザインと一致するようにします。

4. 設定 – ここでは、Web サイト上の目的の場所にコピーして貼り付けるコード スニペットが見つかります。さらに、リストを表示するコンテナの CSS セレクターを指定できる配置入力フィールドもあります。 CMS ページ内に検索機能を統合したため、デフォルトの「body」セレクターをオーバーライドするコンテナー セレクターとして「.search-page」を指定しました。

ステップ 4: 検索ページの挿入

すべての設定が完了したら、最後のステップは CMS ページにリストをレンダリングすることです。埋め込みスクリプトタグをコピーする前に、 設定 検索ページビルダーのセクションでは、API キーを作成する必要があります。

これは、Coveo ダッシュボードの次の場所で実行できます。 組織 → API キー。このセクションでは、新しいキーを追加して名前を指定し、さらに重要なことに、必要なアクセス権を構成できます。 特権 タブ。検索ページには、次の権限を設定する必要があります。

これらの権限は、 分析 そして 検索 サブタブ、または 匿名検索 プリセットを使用すると、自動的に設定されます。

さらに、警告プロンプトに従って、適切な検索ハブ名 (自動的に生成され、検索ビルダーの設定に表示される識別子) を選択して、キーの範囲を制限することをお勧めします。

キー設定を保存した後、その値は 1 回しか表示されないため、設定を保存して、検索ビルダーからスクリプト スニペットに貼り付けることが重要です。

生の HTML 埋め込みコードは次のようになります。

div class="search-page">
	script
		async
		onload="CoveoSearchPage.initialize('API_KEY')"
		src="https://search.cloud.coveo.com/rest/organizations/{orgId}/searchpage/v1/interfaces/{pageId}/loader"
	/>