🤝

Contentful & Algolia で Webhookを使った連携方法

2022/05/23に公開

Contentful

はじめに

Contentful で管理しているコンテンツデータをWebhookを利用して、Algolia 側にコンテンツデータを連携する方法ついてご紹介します。

Contentfulとは

Contentfulとは

昨今注目されている「Headless CMS」の代表格。

Algoliaとは

Algolia

全文検索機能をSaaS形式で提供してくれているサービスです。

前提

本記事は以下のアカウントをお持ちの方を対象にした記事となっています。

Contentfulのアカウントを作成している
Algoliaのアカウントを作成している

Algoliaの下準備

Algolia の下準備として Application の作成から API Key の取得までの流れをご紹介します。

Algolia のホーム画面「Applications」を選択します。

「Nesw Application」を選択してアプリケーション作成を実行します。

アプリケーションの名前、今回は「example」と入力しました。サブスクリプションは「FREE」し、「Next Step: Data Center」を選択します。

データセンターのエリアを選択するのですが、日本在住なので「Japan」を選択し「Review Application Details」で詳細の確認へ遷移します。

規約関連に同意するチェックして、「Create Application」を選択して作成します。

続いて、コンテンツデータを格納するIndexを作成します。今回はIndxの名称を「content」を入力し「Create Index」を選択します。

作成が正常に完了すると以下のIndex(content)画面が表示されます。

API Keyの取得

ここまでくればあとは API Key を取得するだけです。ヘッダーに表示されているアイコンをクリックし、「Settings」メニューを選択します。

続いて「API Keys」を選択してください。

API Keys 画面が表示されます。以下のキーを利用するのでメモしておいてください。

Application ID
Admin Api Key

Contentfulの下準備

「Design your content model」を選択してください。

「Create a content type」を選択し、コンテンツタイプを指定します。

今回はサンプルとして「Post」というコンテンツタイプで作成します。

「Add a field」を選択して、コンテンツタイプに登録する項目を設定します。

「Text」というテキストを指定できる項目を指定します。

テキスト指定の項目名称を「Title」として登録します。

サンプルとして「Slug」、「Content」も登録します。

「Title」「Slug」「Content」を指定したので「Save」を選択し登録します。

コンテンツタイプが登録できたのでヘッダーメニューの「Content」を選択します。

「Add Post」を選択して、Postデータを追加します。

各項目を入力し「DRAFT(下書き)」状態のデータを登録しておきます。

ContentfulのWebhook設定

「Contentful」で「Webhook」の設定します。　ヘッダーメニューの「Setting」を選択し「Webhooks」を選択します。

「See All 18 templates」を選択してください。

Templates 内の「Algolia」を選択し、Algoliaの下準備で用意した項目を入力してください。

Algolia Application ID
Index nam
- 作成したIndex名を入力してください、今回は「content」を指定しました。
API Key

入力ができたら「Create Webhook」を選択して作成を完了してください。

Webhookの動作確認

それでは実際にWebhookが動作しているか確認をしてみます。
まずContentful側で下書き状態にしておいたPostデータ画面に移動し、「Publish」を選択して公開します。

「Publish」ラベルが表示されていればOKです。

Algolia側の「content」Indexを確認してみるとちゃんとデータ登録されていることが確認できました。

Payloadの設定

Contentful と Algolia間のデータ連携はできたのですが送信されるデータフォーマットがContentful独自のフォーマットだったので、ちょっと扱いやすいように調整をしてみたいと思います。

Contentfulのヘッダーメニューの「Setting > Webhooks」を選択します。
すると登録されたWebhookが表示されているのでコンテンツデータが「PUT」メソッド時のWebhookを選択します。

「Webhook settings」を選択し詳細設定を行います。

「Payload」セクションの「Customize the webhook payload」をチェックします。

Payloadの指定入力エリアに以下のフォーマットを指定します。

{
  "objectID": "{ /payload/sys/id }",
  "title": "{ /payload/fields/title/en-US }",
  "slug": "{ /payload/fields/slug/en-US }",
  "content": "{ /payload/fields/content/en-US }"
}

Postコンテンツを再度PublishしてみるとAlgolia側に登録されるデータフォーマットがシンプルになったことが確認できると思います。

補足: 前段で作成したコンテンツデータは一度削除してから再度Publishしてください。

最後に

SaaSサービスの Contentful と Algolia をWebhookを使用した連携方法についてご紹介をしました。

HeadlessCMSの代表格のContentfulはコンテンツデータの管理に長けていて機能も充実していていいサービスです。そしてAlgoliaは全文検索を手軽に提供してくれているのでコンテンツデータをキーワードで抽出する際に非常に役立ちます。

SasSサービスをうまく活用したTipsとして、どなたかのお役にたてれば幸いです。