管理画面付きAPIが簡単に作れるmicroCMSとの向き合い方まとめ

管理画面付きAPIが簡単に作れるmicroCMSとの向き合い方まとめです。

- microCMS という、管理画面付きの API が簡単に作れるサービスを実務に導入して 1 年ほどが経った
- Nuxt.js 製の Web アプリケーションのメディアページに導入したり、Next.js×Incremental Static Regeneration なサイトに導入した
- サイトマップだったり、型定義だったり、デプロイだったりに知見が溜まってきたのでまとめてみた

Transcript

1. 管理画⾯付き API が簡単に作れる microCMS との 向き合い⽅まとめ 株式会社 NoSchool CTO / meijin
2. 概要 microCMS を実務に導⼊して 1 年ほどが経ち、Nuxt.js および Next.js 製のサイトの記事系コン テンツページへの導⼊実績を積んだ 型定義、デプロイ、サムネ画像の扱いなどの知⾒が溜まってきたので、まとめてみました
3. ⾃⼰紹介 TypeScript と Testing と DDD が好き 最近はゼルダ無双をプレイ中 オンライン家庭教師マナリンクを開発
4. マナリンク https://manalink.jp/ ⼩〜⾼校⽣向けオンライン家庭教師サービス カナダ在住、塾講師、某坂道アイドルの作曲家など個性豊かな 先⽣が在籍
5. microCMS とは 管理画⾯が予め提供されていて、⼊稿する と JSON Web API が⽣える SaaS。 ビジネス職が⼊稿 → エンジニアは SPA のフロントを実装するだけで OK。便利！ ※添付画像は私が個⼈で利⽤しているアカ ウントのスクショです
6. microCMS をバックエンド にした例 https://manalink.jp/passed- stories/f_lhea4vq ユーザー(⽣徒さん)へのインタビュー インタビュワー(ビジネス職)が⼊稿 フロントエンド(Nuxt.js)で好きにデザ インできる！
7. microCMS を扱う上で溜まった知⾒
8. microCMS で返ってく る記事データの型を定義 する フロントエンドが SPA×TypeScript な時 に便利 TypeScript でレスポンスの型を定義 画像が{ url: string }型になる縛りといっ た罠を回避できる
9. microCMS にリクエストする ときのクエリの型を定義する microCMS はデータの検索や取得フィールドの指 定も可能だが、専⽤のクエリを覚えなければならな い クエリの型を TS で定義することで学習コストを削 減
10. 下書き状態の記事でも⾒ れるようにする 公開前の記事の表⽰チェックや社内レ ビューに有効 記事ごとに発⾏される draftKey を使 うと下書き記事を API で取得できる Nuxt.js では query 経由で draftKey を取得、Next.js(ISR)ではPreview modeを使う
11. 管理画⾯での変更が反映されな い！そんなときは... Vercel など⼀部の環境からアクセスする際、たま にキャッシュが消えないらしく記事の更新が反映さ れないことがある microCMS は前段に CDN(CloudFront?)を使⽤ しているため、CDN を逆⽤して、Cache- Control: no-store を設定して無理やり解決 Incremental Static Regeneration 等の SSG 利 ⽤時は有⼒かも
12. imgix を活⽤しよう microCMS にアップロードした画像は imgix を通 してアクセス可能になります imgix とは、クエリパラメータで画像を臨機応変に 最適化して取得できる CDN 例）w で幅、fm で画像種別、q で画質
13. imgix 画像専⽤の Vue Component URL, width, height などを props で 渡すと、前述のクエリパラメータを組 み合わせた上で <pircure> , <source> タグ等を使って Webp 対応 してくれる Component を作った vue-imgix というライブラリもあるの でこっちもアリかも
14. まとめ microCMS を使うと、管理画⾯を内製するコストを削減できる Nuxt や Next 等のモダンフロントエンド(SPA)と相性がいい imgix が実質無料で付いてくるので、活⽤してパフォーマンス向上しよう
16. ご清聴ありがとうございました 採⽤に少しでも興味を持った⽅はお気軽に DM ください！ Twitter: @Meijin_garden