.../articles/

Contentfulを使い倒したくてContentful芸を磨く【検索・絞り込み編】

Headless CMSとしても有名なContentfulですが、ブログ記事を見ているとそこまで使い倒している記事を見たことはない気がしたので、一歩踏み込んだ使い方を書いてみようかと思います。 (実際にやってみながら少しずつ追記します)

タグ付けとタグでの絞り込み

まずタグの作り方ですが、 Contentでブログ以外にTagなどを作成します。
Authorと同じですね。
そして、Blog記事のContent modelを編集し、
Referencesを追加します。
この時、1個のみでも複数でも構いません。

Contentでタグをいくつか作成し、記事に紐づけてみましょう。(Authorを選択するのと同じ要領です)
それだけで記事にはタグ付けができた状態になります。

あとは、ブログ記事を表示する際に、指定のタグで絞り込めば完了です。
下記の例にもありますが、 fields に作成したcontentが入ってきますので、
そこを対象のIDで指定してやれば一致する内容を取得してくれます。

  async fetch() {
    const limit = 10
    const skip = 0
    const client = contentful.createClient(config)
    const posts = await client.getEntries({
      content_type: process.env.CTF_BLOG_POST_TYPE_ID,
      limit,
      skip,
      order: '-sys.createdAt',
      'fields.tags.sys.id': '絞り込みたいタグID',
    })
  },

参照
Links to a specific item
If you want to retrieve all items linked to a specific entry, the query URL should filter entries on their specific content_type, linking_field (field to link items) and entry_id from the target entry.
Contentful Document links/links-to-a-specific-item

除外

例えば記事に紐づく関連記事として、同じタグの他の記事を引っ張りたいなどのニーズがあるとします。
その時に、対象となる記事を関連記事のリストから除外したいというケースがあるかと思うのですが、
その際には[ne]を利用します。

下記の例だと、 対象のslug以外のブログ記事を新着順に引っ張るということをしております。

  async fetch() {
    const limit = 5
    const client = contentful.createClient(config)
    const posts = await client.getEntries({
      content_type: process.env.CTF_BLOG_POST_TYPE_ID,
      limit,
      order: '-sys.createdAt',
      'fields.slug[ne]': 'slug',
    })
  },

参照
Inequality operator
Uses the [ne] parameter to exclude items matching a certain pattern.
Contentful Document search-parameters/inequality-operator

全文検索

全文検索機能まで用意してくれています!
getEntriesqueryを追加してあげるだけで、Contentの内容を全文検索してくれるようです。
至れり尽くせりって感じですね!

  async fetch() {
    const limit = 10
    const skip = 0
    const client = contentful.createClient(config)
    const posts = await client.getEntries({
      content_type: process.env.CTF_BLOG_POST_TYPE_ID,
      limit,
      skip,
      order: '-sys.createdAt',
      query: '全文検索したいテキスト',
    })
  },

参照
Full-text search
It’s possible to perform a full-text search across all text and symbol fields with the query parameter.
Note: Full-text search is case insensitive and might return more results than expected. A query will only take values with more than 1 character.
Contentful Document search-parameters/full-text-search

ちなみに、fieldsを指定しての検索も可能なようです。
例えば、記事のタイトルに対して検索したい場合はこんな感じでしょうか?

  async fetch() {
    const limit = 10
    const skip = 0
    const client = contentful.createClient(config)
    const posts = await client.getEntries({
      content_type: process.env.CTF_BLOG_POST_TYPE_ID,
      limit,
      skip,
      order: '-sys.createdAt',
      'fields.title[match]': 'Nuxt', // Content Type BLOG_POSTの記事タイトルにNuxtを含むものを検索したい
    })
  },

参照
Full-text search on a field
You can perform a full-text search on a specific field with the [match] operator.
Note: Full-text search is case insensitive and might return more results than expected. A query will only take values with more than 1 character.
Contentful Document search-parameters/full-text-search-on-a-field

まとめ

全体的にドキュメントを読めば、こんなん出来るのか👀 みたいなのがいっぱいあるので、是非色んな機能を使ってMVPをサクッと作るとかやってみたいですね

今後も便利な機能があったら、紹介したいと思います!

.../articles/

Articles

記事

AWS AmplifyにmonorepoのNext.js(App Router)をデプロイする

AWS AmplifyにmonorepoのNext.js(App Router)をデプロイする

monorepo管理しているNext.jsをAmplifyにデプロイしようとした際にいくつか躓く内容があったのでまとめておきます。

リモートワーク・オンライン会議でも、スムーズに制作を進めるために大切なこと[資料編]

リモートワーク・オンライン会議でも、スムーズに制作を進めるために大切なこと[資料編]

コロナ禍の影響により、リモートワークの導入をおこなっている制作会社も多く、実際に弊社でも導入しています。

売れるECサイトデザインを作るために。参考にしたいおしゃれな事例の探し方。

売れるECサイトデザインを作るために。参考にしたいおしゃれな事例の探し方。

売れるECサイトのデザインは、「この形式」という決まりはありません。ECサイトで売り上げを上げるなら、しっかりとしたコンセプトと、コンセプトを決定するまでのリサーチが必要です。

制作会社の考える、業務効率化ツールのおすすめ。個人でも使いやすいサービスなど。

制作会社の考える、業務効率化ツールのおすすめ。個人でも使いやすいサービスなど。

新型コロナウイルス感染拡大の影響で、リモートワークが主流になり、弊社でも週のほとんどは各自宅で作業をしています。

Figmaでデザインのコミット履歴を残せるプラグイン【Thought Recorder】をリリースしました

Figmaでデザインのコミット履歴を残せるプラグイン【Thought Recorder】をリリースしました

Figmaを利用するWebデザイナーの助けになれると嬉しいです。使い方は本記事をご覧ください。

ECの構築方法、おすすめのECサービス。

ECの構築方法、おすすめのECサービス。

ファッションや家電、スーパーの買い物でさえもECサイトを利用することが当たり前になりました。加えて新型コロナウイルスの影響もあり、弊社にも「どんなプラットフォームを利用したら良いか」「どれくらいコストがかかるのか」などECに関するさまざまなご相談を頂きます。

FastAPIのスキーマクラスをOpenAPIから生成する方法

FastAPIのスキーマクラスをOpenAPIから生成する方法

PythonでAPIを構築する要件があり、フレームワークに比較的モダンなFastAPIを採用しました。FastAPIはバックエンドの開発を行えば自動でOepnApi定義を生成する機能が備わっていますが、今回はこれを使わず、事前に用意したOepnApi定義からFastAPIで利用するスキーマクラスを生成する方法を紹介します。

Laravel 日本一解りやすい全文検索のマイグレーション記載方法解説

Laravel 日本一解りやすい全文検索のマイグレーション記載方法解説

Laravel + MySQLで全文検索を実装する

とあるPythonのソースで sys.path.append としたく無かった話

とあるPythonのソースで sys.path.append としたく無かった話

とあるプロジェクトのとあるソースコードのレビューをしてた時、「ソースコードの参照がうまくいってなかったので修正しました」とレビュー依頼がきました。 ディレクトリ構造 ``` module L __init__.py L main.py L tests L __init__.py L test_main.py ``` ソースコード ``` python tests/test_main.py sys.path.append(os.path.abspath("..")) from main import fuga ``` 今まで案件でPythonに触れる機会も結構ありましたが、なんとなく使ってきた部分も多く、この書き方が良いのか悪いのか判別できなかったので、改めてPythonのモジュールのインポートに関して調べてみたのでブログにしました。普段PHPを書いている事が多くPythonに関して何も分からないので初心者向けの内容になっていると思います。

GiFT1号目新卒デザイナーの2021年振り返り

GiFT1号目新卒デザイナーの2021年振り返り

いつの間に、年末ですね。入社してもう、9ヶ月も立っていたようです。2021年の振り返りを記事にしました。

すべての記事

お問い合わせ