見出し画像

Headless CMSの「Strapi」で、お知らせ機能をサクッと実装してみた

Tanny｜MaaSのPM

こんにちは。株式会社Mobility Technologiesで、法人向けタクシーソリューション『GO BUSINESS』のプロダクトマネージャー（PdM）を担当しております、Tannyです。

私が担当してきたサービスもそうだったんですが、どんなWebサービスでも「お知らせ機能」って必要ですよね。例えばnoteでも、右上の🔔マークからお知らせを開いて、新機能やイベントに関する情報を得ることができます。

noteのお知らせ機能

一方で、1から作成しようとすると、意外と面倒な機能でもあります。ログイン管理、記事の新規作成・編集・削除、画像の添付、などなど、最低限必要になりそうな機能だけでもたくさんあります。
実際に運用し始めると、「URLリンクを貼りたい」「カテゴリを記載したい」「プレビュー機能が欲しい」「予約投稿機能が欲しい」などなど、追加機能のご要望をいただくことも多いです😅　本来はもっと、サービスのコア機能の開発に集中したいですよね。

そこで今回は、お知らせ機能を低コストで実装する方法について考えてみました。その結果、「HeadlessCMS」という仕組みを使うとよさそうだと思い、実際に簡単なお知らせ機能を実装してみました👍
この記事では、以下の内容を紹介しています。

  • HeadlessCMSの概要

  • Strapiを用いて、お知らせ情報を投稿・管理する方法

  • Webアプリでお知らせ情報を表示する方法

この記事を読むことで、お知らせ機能のような、コンテンツを投稿するタイプの機能を実装する方法や、その仕組みが分かるようになります。
また、非エンジニアの方でもある程度内容がわかるように書いたつもりなので、Webアプリがコンテンツを取得・表示する方法についてもイメージしていただけるかと思います🙏

HeadlessCMSについて

CMSとは

まず「CMS」とは、「Contents Management System：コンテンツ・マネジメント・システム」の略で、Webサイトのテキスト、画像、デザインなどを保存・管理するシステムのことです。例えば、noteもCMSの一種と言えそうです。
これを活用することで、Web画面の操作によって、お知らせ記事や、ブログ記事などを管理できるようになります。

一般的なCMSは見た目（Head）の部分も管理することができますが、「HeadlessCMS」は見た目の部分は管理しません。ユーザーに見せるWebページ部分は自分で作り、コンテンツの管理はHeadless CMSを利用する、といった形で使い分けることができます。
そのため今回のように、Webページを別に用意していて、その中にお知らせ機能を構築するようなケースにはピッタリというわけです。

HeadlessCMSの概要については以下のページが参考になります。結構たくさんの種類があるようですが、今回は「Strapi」を利用することにしました。

Strapiについて

Strapiはオープンソースのソフトウェアで、自前でサーバーを用意すれば無料で利用することができます。インストールが簡単で、なおかつ必要な機能が十分に備わっていそうだったので、今回はこのHeadless CMSを利用してお知らせ機能を実装することにしました。

Strapiの管理画面。ブログを書くようにデータを登録できる

Strapiでお知らせ情報を投稿する

ここからは、Strapiを使ってお知らせ機能を投稿・管理する手順について紹介します。なお、この作業を行うためには「Node.js」のインストールが必要です。（インストール手順は末尾の参考文献に記載しています。）

Strapiをインストールする

まずはローカル環境（自分のPC上）にStrapiをインストールしていきます。インストール手順はこれ以上ないほどに簡単です！以下の1行をターミナルで実行します。

npx create-strapi-app@latest my-project

実行すると、自動的にダウンロードとインストールが始まります。インストールが完了すると、Webブラウザが自動的に開いて初回ログイン画面にアクセスできます。ここまで3分もかかりませんでした。

Strapiの初回ログイン画面

初回ログイン画面に必要事項を入力すると、管理画面が開きます。ここからお知らせ記事を投稿します。

Strapiの管理画面

お知らせ記事のフォーマットを設定する

次に、お知らせ情報のフォーマットを設定していきます。1つのお知らせ情報の中身としては、「タイトル」「アイキャッチ画像」「お知らせの中身」といったコンテンツが必要になりますね。
Strapiでは、そういったコンテンツ（入力フィールド）を自由に設定することができます。

この辺りの細かい手順は割愛しますが、今回は上記の3つの入力フィールドを追加しました。（詳細な手順は末尾の参考文献を参照してください）
他にも、テキスト・画像・カテゴリ・URLなど、ブログ記事などに必要なフィールドを細かく登録することができます。

Strapiの入力フィールド設定画面。1行テキストの「タイトル」を設定している

お知らせ記事を登録する

入力フィールドの設定が完了したら、次はお知らせ記事の中身を登録します。ブログ記事を投稿するように、画面上で登録できます。

お知らせ記事の登録画面。下書きを保存しておくこともできる

今回は2つのお知らせ記事を追加しました。追加した記事は、後から編集・削除することもできます。

追加したお知らせ記事の一覧

お知らせ記事を公開する

最後に、記事の公開設定を行い、API経由で外部から記事にアクセスできるようにします。以下の設定では、「/api/informations」にアクセスすることで、外部からお知らせ記事を取得できます。

アクセス許可の画面。記事へのアクセスは許可して、作成・更新・削除は許可しない。

設定が完了すると、以下のようなURLで記事にアクセスできます。

http://localhost:1337/api/informations?sort[0]=createdAt%3Adesc

これは、投稿日時（createdAt）が新しい順（降順：desc）に、お知らせ記事を取得することを意味しています。ブラウザにこのURLを入力すると、記以下のようにJSON形式でデータを取得できます。

お知らせ記事の取得結果。JSON形式で記事を取得できる

このデータをWebアプリで取得・整形して表示することで、お知らせ機能を実現できます。（通常のCMSであれば、その機能も合わせて提供しています）

Webアプリでお知らせ情報を表示する

お知らせ記事の準備と取得ができたので、次は記事をWebアプリに表示します。今回は、WebページのUIを構築するフレームワークである「React」を活用してWebアプリを構築しました。（私が書いた以前の記事でも、Reactを活用しています。）

テンプレートを作る

まずは、お知らせ情報を表示させるテンプレートを実装します。出来上がったデザインがこちらです。デザインはMaterial-UIを活用して、それっぽい感じにしています。

お知らせ記事を表示するテンプレート

ここでは「投稿日時」「タイトル」「お知らせの中身」をカード形式で表示し、縦に並べています。今はそれぞれのカードに固定の文字列を入れていますが、これをAPIで取得したデータに置き換えていきます。

APIでお知らせ記事を取得する

次にJavaScriptでAPIにアクセスするコードを書きます。先ほどはブラウザでAPIにアクセスしましたが、JavaScriptではfetch（取り出す）というメソッドでAPIにアクセスできます。

fetch()メソッドでAPIにアクセスする（例外処理は省略）

ここで取得したデータは、「infos」という変数に保存されます。以下のようなイメージでデータが保存されています。（あくまでイメージです）

記事1 [title: "メンテナンスのお知らせ", contents: "いつもご利用ありがとうござい...]
記事2 [title: "新機能追加のお知らせ", contents: "いつもご利用いただきありがとう...]

お知らせ記事を表示する

最後に、取得したデータをカードに表示します。例えば、タイトル情報は{info.attributes.title}で取り出せるので、テンプレートのタイトルの部分をこれで置き換えていきます。投稿日時（createdAt）やお知らせの中身（contents）も同様に、取得したデータで置き換えます。

お知らせ機能の実装結果。テンプレートの中身をAPIの取得結果で置き換える

補足
・41行目の「infos.data.map((info) => (」の部分で、お知らせ記事の中身を展開しています。記事が複数ある場合は、この下の処理が複数回実行されます。
・Webアプリを開いた直後はデータが空の状態なので、39行目の「!infos.data ? 」部分で空かどうかを判定しています。（この方法が正しいのかは不安）

これでお知らせ機能の実装は完了です！Strapiでお知らせ記事を新しく投稿すると、Webアプリでもその記事を表示できます。今回はローカル環境上で実行しましたが、実際に運用する際は、これをWebサーバー上で実行します。

ちなみに、世の中のWebアプリのほとんどは今回の方法と同じように、
　1. テンプレートを用意する
　2. APIでデータを取得する
　3. 取得したデータをテンプレートに展開する
という手順でサーバーから取得したデータを表示しています。

おわりに

今回は、HeadlessCMSのStrapiを活用して、簡単なお知らせ機能を実装しました。（実装ミスで詰まってしまった時間を除けば）2時間くらいで実装が完了しています。もちろん実際のWebアプリに適用する場合はサーバーの準備なども必要なので、これより時間はかかるはずです。ですが、自前で同じ機能を1から構築するよりは、圧倒的に開発工数を削減できますね👏

非常に特殊な機能を必要とする場合を除いて、お知らせ機能を実装したいだけならHeadless CMS + Webアプリの実装で十分だと感じました。これで開発工数が削減できれば、Webアプリのコア機能の方に注力することができます。

「実現したい機能を実装するために、どんな技術を採用するのか」
それを検討するのはPdMではなくエンジニアかもしれません。ですが、どんな選択肢を取れるのかを知っておくことで、PdMとしての意思決定にも活かせそうだと感じました。

参考文献

  • Node.jsのインストール方法（ちょっと古いのかも）

  • Strapiの詳しい利用方法

  • ReactでAPIを叩く方法

この記事が気に入ったらサポートをしてみませんか？