OSS CMSツール Strapi の導入事例

はじめに

こんにちは。ご覧いただきありがとうございます！
KINTO FACTORY（以下 FACTORY）という今お乗りのクルマをアップグレードできるサービスで、フロントエンド開発をしている中本です。

今回は、先日リリースしました FACTORY マガジンの記事コンテンツを、執筆・管理するために導入しました OSSのツール、Strapi について紹介したいと思います。

Strapi とは

Strapi とは、セルフホスト型のヘッドレスCMSで、SaaS 等で提供されている他のCMSサービスとは異なり、自身でサーバーやデータベース等の環境を用意し運用していくものになります。（Strapi には、クラウド環境も用意してくれる Strapi Cloud も用意されています。）

KINTO では SaaS の CMSサービスを利用し、コラムなどの記事を掲載しているサービスがすでにいくつか有りましたが、運用面・コスト面の両立の難しさや、新しい機能追加や既存機能のカスタマイズ領域が少なかったりと課題感が分かってきたので、自前で用意することを視野に OSS CMS ツールの選定を行ってきました。

OSS のヘッドレスCMS と聞いて、よく耳にするのは Wordpress が有名かもしれませんが、他にも最近勢いのあるツールを調べたところ、Strapi について知ることとなりました。

様々なOSSツールの中で、我々が重視したポイントは以下のようになります。

• 使いやすさ：管理UIが直感的で、開発者とコンテンツ管理者の両方に優しい設計
• コミュニティサポート：大規模なコミュニティによるサポートと豊富なドキュメント
• 豊富なプラグイン：多様なプラグインが提供されており、簡単に機能を拡張できる
• スケーラビリティ：Node.jsベースのため、高いパフォーマンスとスケーラビリティを実現

もし足りない機能や我々の使い方に合わない部分が出てきた場合でも、プラグインの更新・作成などは Java Script の知識があれば簡単に行えそうで、導入コストが低そうな事も決め手となりました。

アーキテクチャとデプロイの仕組み

Strapi は、FACTORY のECサイトと同様に AWS にてホスティングされており、ECS や Aurora を使ったシンプルなアーキテクチャで構成されています。CMS プラットフォームとしては、FACTORY の WEBアプリケーションからは独立させ、Strapi を使用するのは、主に事業部などの社内の部署で、記事の執筆や公開に限定することとしました。

記事を公開する際は、WEBアプリケーションのビルドを走らせ、その際に Strapi の API から記事情報を取得しページへ埋め込むようにしました。その結果、ユーザーのクライアントから直接 Strapi へはアクセスせず、CMS環境は閉じたネットワークとなることで、外部からの不要なアクセスを無くした形となります。

カスタマイズ事例

次に、導入を進めるにあたって、カスタマイズした部分をいくつか紹介していきます。

新規プラグインの作成

前述した FACTORY マガジンの中にお客様の声という、実際にFACTORYで商品をご購入し施工頂いたお客様のインタビュー記事を載せているコンテンツがあります。
こちらの記事には、施工を行った車種の情報や商品を紐づける必要があり、デフォルトでの入力BOXでは「車種の名前（例：RAV4）」や「商品名（例：ヘッドランプデザインアップグレード）」を直接入力してもらう形となってしまいます。

車両情報入力

ただし、上記のようなフリーでの入力となると、名前を間違って登録してしまう可能性があったり、ブログのように同じ車種や商品での記事検索を行うには、FACTORY 内部で持っている商品IDなども記事に紐づいていたほうが、後々活用しやすいかと思い、EC サイトのフロントエンドで呼んでいる BFF から、これらの入力BOXのリストを作ることにしました。

車両選択	商品選択

このように、作成したカスタムプラグインにより、商品・車種情報をミス無く紐づけることができ、更に画像も出てくるようにカスタマイズしたので、執筆者が直感的に選択できるようになったかと思います。また、このように EC サイトで使っている BFF を使いまわせたりできるのも、セルフホスト型の利点かなとも思いました。（SaaSなどのサービスからだと、どうしてもセキュリティリスクや、上記のような柔軟なカスタマイズには少し不向きかと思われます）

既存プラグインのカスタマイズ

別のカスタマイズ事例としては、記事にタグを紐づけることにより、同じタグで同様の記事を検索するという要件を実現するため、こちらの tagsinput という既存のプラグインを導入しました。

ただ、こちらのプラグインは、入力したタグを [{ name: tag1 }, { name: tag2 }] のように連想配列として、データベースへ保存しており、タグから検索する API を作る際に、検索ロジックが複雑になっていました。

そこで、検索をよりシンプルにするため、プラグインを少しカスタマイズし、下記のように入力されたタグを単純に文字列の配列 [tag1, tag2] として保存する形に変更しました。

https://github.com/canopas/strapi-plugin-tagsinput/blob/1.0.6/admin/src/components/Input/index.js#L29-L36

@@ -26,8 +26,7 @@
   const { formatMessage } = useIntl();
   const [tags, setTags] = useState(() => {
     try {
-      const values = JSON.parse(value);
-      return values.map((value) => value.name);
+      return JSON.parse(value) || [];
     } catch (e) {
       return [];
     }

https://github.com/canopas/strapi-plugin-tagsinput/blob/1.0.6/admin/src/components/Input/index.js#L64-L70

@@ -38,7 +37,7 @@
     onChange({
       target: {
         name,
-        value: JSON.stringify(tags.map((tag) => ({ name: tag }))),
+        value: JSON.stringify(tags),
         type: attribute.type,
       },
     });

このように既存のプラグインを、少しだけ我々の使い方にあわせるように修正を加えるといった事も簡単に行うことができます。

その他にも様々なカスタマイズを行ってきましたが、その中でも Strapi の中で記事の投稿に使われているリッチエディターである CKEditor に、Video タグを埋め込めるようにしたカスタマイズについて、少し長くなりそうなので別記事にて紹介する予定です。

最後に

KINTO のサービスの中で、まずは FACTORY が先陣を切って OSS の CMSツールである Strapi を導入しました。リリースした Strapi を使って記事の執筆・投稿している事業部からは、「SaaS のCMS サービスより使いやすくなった」などの意見を頂けていて、上々の滑り出しとなったかなと思っております。また「こうして欲しい」などの要望も出始めているので、OSS でのカスタマイズ性を武器にそれらに応えていければと思っております。

運用も開始したばかりですが、色々な経験値をためて、記事の執筆に留めることなく、Strapi を使った新しいソリューションを考えていくのも良さそうです。KINTO にて SaaS のCMSを使っている他のサービスについても、FACTORY での使い方を共有し社内での横展開を目指して行こうと考えております。