ZIZO産Headless CMSで自社Techブログを作る - API編 -
はじめに
広報活動や社内のエンジニアリング活発化を目的として、小ネタだったりを投稿できるブログのようなものを立ち上げる動きになり、
せっかくなので以前の記事で紹介した自社オリジナルCMSを使って構築することにしました。
合わせて構築手順の紹介をしようと思います。
作って行くぅ！
ブログの立ち上げが目的ではなく、その後の展開から案件、求人に繋げるのが目的なので
構築は速度優先で行います。凝ったデザイン、アニメーションなんかは暇な時にアップデートで良きです。
採用する技術スタック
CMS
- 自社製SaaS型ヘッドレスCMS
フロントエンド
- NextJS
- GraphQLでのAPI提供なので Apollo Client を利用します
- TypeScript, Sass
- CSSフレームワーク：検討中
インフラ
- CloudFront+S3（SSGにするか、SPAにするか検討中）
テーブル設計
ブログに必要なテーブルを設計を行います。
- 記事
- メインになるテーブルですね
- 著者
- 誰が書いたのかを持たせたいので追加します。SNSリンクだったりも管理したいですね。
- タグ
- タグはCMSの基本機能で自由に付与できるので特に不要です
- 問い合わせ
- 問い合わせは自社コーポレートに誘導したいので今回は不要です
user（ユーザ）
| カラム名 | 論理名 | 備考 |
|---|---|---|
| name | 名前 | |
| profile | プロフィール | |
| icon | アイコン画像 | |
| x_url | X（旧Twitter） URL | |
| github_url | Github URL | |
| other_url | その他URL |
article（記事）
| カラム名 | 論理名 | 備考 |
|---|---|---|
| kv | キービジュアル画像 | |
| title | タイトル | |
| body | 本文 | |
| auther | 著者 | userテーブルとリレーション |
テーブル設計はこの辺りでしょうか。
作成日時、更新日時、下書き、承認ステータス（承認フロー利用有無設定可能）はデフォルトで付与されるので、設計に含める必要はありません。
CMS管理画面（Staging）にログインしてAPIを作っていく
ログインするとまずダッシュボードが表示され、API接続のためのAPIキーや、コンテンツ一覧を確認することができます。
今はまだAPIを作成していないので、コンテンツ一覧は空ですね
サイドメニューから[カスタムAPI]>[新しくカスタムAPIを追加する]を選択し、API作成画面に入ります
まずはUserを作成します。下記のように登録します
[基本設定]
APIタイプ：Read（Writeを選択するとMutationのAPIが生成されます）
API名：ユーザ（著者）
APIパス:user
mainAPI:チェックオン(ダッシュボードに表示させず、中間テーブル等の場合にOFFにします）
[フィールド]
| 必須項目 | 管理画面一覧表示 | フィールドタイプ | キー | フィールド名 | |
|---|---|---|---|---|---|
| ON | ON | as_string | name | 名前 | |
| OFF | OFF | as_text | profile | プロフィール | |
| OFF | OFF | as_image | icon | アイコン画像 | |
| OFF | ON | as_string | x_url | X（旧Twitter） URL | |
| OFF | ON | as_string | github_url | Github URL | |
| OFF | ON | as_string | other_url | その他URL |
作成すると、カスタムAPI一覧と、ダッシュボードのコンテンツ一覧に表示され、確認できます
同様に記事APIも登録しましょう。
１点、ユーザAPIと違うところとして、記事はユーザに紐づくのでその定義をしてやります
フィールドタイプに[as_references]を選択することで、親APIを選択できるので、
親に先ほど登録したユーザ（著者）を選択します
はい、これでAPIの登録完了です
では早速テストデータを登録していきます
ダッシュボードのコンテンツ一覧から、ユーザ（著者）のレコードから一覧へ飛び、レコードの追加をクリック
カスタムAPI作成で登録したフィールドが入力項目としてあるので、適当に入力します
画面下部では基本機能として搭載される下書き/表示期間の設定と、自由にタグの追加ができます
一通り入力が完了したら、作成ボタンを押しましょう
一覧画面に戻るので、登録完了したことがわかります。
閲覧ボタンで詳細画面に入ってみましょう
画像も無事アップロードされてますね。
下部に進むと、記事API作成時にユーザと紐付けを登録しているので、ここから記事の登録をすることもできます。
このまま記事も登録しちゃいましょう
本文は[as_text]を選んでいるので、WYSIWYGで編集可能です。
画像もBase64ではなくAPI経由でS3に保存される形です
無事記事も投稿できました
APIにアクセスしてみる
API定義の確認
本CMSへのアクセスはGraphQLを採用しているので、GraphiQLを利用してAPIへの接続をテストしてみます。
利用できるクエリはダッシュボードから確認できます
APIアクセステスト
一度ユーザ一覧を取得してみます。
GraphQLなので POST でコールします。
[POST]
https://stg.hogehoge/graphql
query {
userList {
id
name
iconUrl
profile
xUrl
githubUrl
otherUrl
tags {
name
}
}
}
[response]
{
"data": {
"userList": [
{
"id": "408",
"name": "おやま",
"iconUrl": "https://stg-api.zizo.ne.jp/rails/active_storage/blobs/proxy/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBWkE9IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--981aa7436ae2406aa542f57d47dca8232b6b2a0f/dog_toypoodle_miscolor%20(1).png",
"profile": "<p>おやまです</p><p>エンジニアしてます</p>",
"xUrl": "https://x.com/oyamanoco",
"githubUrl": "",
"otherUrl": "",
"tags": [
{
"name": "エンジニア"
}
]
}
]
}
}
無事取得できました。
もちろん、不要な項目はクエリに含まなければレスポンスから外せます。
タグでの検索や、ransackクエリでの検索。好きな項目でのソート機能（カスタムソート）等も実装してあり、
ソートした上での nextId, prevId の取得もできます。よくある「次のページへ」の実装に使えますね。
APIの作成はこれで完了です。
あとは煮るなり焼くなりフロントエンド側で自由に使いましょう。
次回 NextJS+ SSG(自動ビルド） + GraphQL 編（多分書くかもしれない）
おまけの設定
API定義は開発者だけ触りたく、投稿者には触って欲しくないので
投稿のみできる権限を作りましょう
サイドメニュー[基本設定]-[権限]から記事とユーザのみ全操作可能な権限「投稿者権限」を作成します。
承認フローは今回使わないので承認権限も付与してあります（これでデフォルト承認状態になります）
APIキーやGraphQL情報の表示も不要なので、開発者情報表示もOFFにしておきます
続いて、この権限を付与するログインアカウントの追加です。
サイドメニュー[アカウント]から新規追加します
role に先ほど作成した権限を設定
一度このユーザでログインし、思った通りの権限になってるか確認
使わない項目が非表示になってスッキリしました。
これで間違ってAPIを消しちゃったりって操作ミスも無くなりますね。
おまけのおまけ（その他機能紹介）
その他基本機能の紹介（羅列）
- お問い合わせ（カスタムフィールド対応）
- Mutation登録時にメール送信機能（管理者宛、ユーザ宛）
- メールテンプレート編集機能
- 多言語対応（項目名に _en を付与、メールテンプレートの言語コード設定）
- Jamstack機能（記事更新時等にビルド指示発行。現時点でAWS CodePiplineに対応）
- API定義エクスポート/インポート機能（ステージング環境から本番環境に即時反映できます）
最後に
弊社の取り組みの簡単なお話と、弊社製HeadlessCMSの宣伝記事でした。
CMSだけでなく、スーパーなデザイナーやウルトラなフロントエンドエンジニアが揃っております
少しでも興味ある方は是非お問い合わせをお待ちしております🎵
Discussion