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

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

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

Transcript

1. 管理画⾯付き API が簡単に作れる microCMS との
   向き合い⽅まとめ
   株式会社 NoSchool CTO / meijin
   

   View Slide

2. 概要
   microCMS を実務に導⼊して 1 年ほどが経ち、Nuxt.js および Next.js 製のサイトの記事系コン
   テンツページへの導⼊実績を積んだ
   型定義、デプロイ、サムネ画像の扱いなどの知⾒が溜まってきたので、まとめてみました
   

   View Slide

3. ⾃⼰紹介
   TypeScript と Testing と DDD が好き
   最近はゼルダ無双をプレイ中
   オンライン家庭教師マナリンクを開発
   

   View Slide

4. マナリンク
   https://manalink.jp/
   ⼩〜⾼校⽣向けオンライン家庭教師サービス
   カナダ在住、塾講師、某坂道アイドルの作曲家など個性豊かな
   先⽣が在籍
   

   View Slide

5. microCMS とは
   管理画⾯が予め提供されていて、⼊稿する
   と JSON Web API が⽣える SaaS。
   ビジネス職が⼊稿 → エンジニアは SPA
   のフロントを実装するだけで OK。便利！
   ※添付画像は私が個⼈で利⽤しているアカ
   ウントのスクショです
   

   View Slide

6. microCMS をバックエンド
   にした例
   https://manalink.jp/passed-
   stories/f_lhea4vq
   ユーザー(⽣徒さん)へのインタビュー
   インタビュワー(ビジネス職)が⼊稿
   フロントエンド(Nuxt.js)で好きにデザ
   インできる！
   

   View Slide

7. microCMS を扱う上で溜まった知⾒
   

   View Slide

8. microCMS で返ってく
   る記事データの型を定義
   する
   フロントエンドが SPA×TypeScript な時
   に便利
   TypeScript でレスポンスの型を定義
   画像が{ url: string }型になる縛りといっ
   た罠を回避できる
   

   View Slide

9. microCMS にリクエストする
   ときのクエリの型を定義する
   microCMS はデータの検索や取得フィールドの指
   定も可能だが、専⽤のクエリを覚えなければならな
   い
   クエリの型を TS で定義することで学習コストを削
   減
   

   View Slide

10. 下書き状態の記事でも⾒
    れるようにする
    公開前の記事の表⽰チェックや社内レ
    ビューに有効
    記事ごとに発⾏される draftKey を使
    うと下書き記事を API で取得できる
    Nuxt.js では query 経由で draftKey
    を取得、Next.js(ISR)ではPreview
    modeを使う
    

    View Slide

11. 管理画⾯での変更が反映されな
    い！そんなときは...
    Vercel など⼀部の環境からアクセスする際、たま
    にキャッシュが消えないらしく記事の更新が反映さ
    れないことがある
    microCMS は前段に CDN(CloudFront?)を使⽤
    しているため、CDN を逆⽤して、Cache-
    Control: no-store を設定して無理やり解決
    Incremental Static Regeneration 等の SSG 利
    ⽤時は有⼒かも
    

    View Slide

12. imgix を活⽤しよう
    microCMS にアップロードした画像は imgix を通
    してアクセス可能になります
    imgix とは、クエリパラメータで画像を臨機応変に
    最適化して取得できる CDN
    例）w で幅、fm で画像種別、q で画質
    

    View Slide

13. imgix 画像専⽤の Vue
    Component
    URL, width, height などを props で
    渡すと、前述のクエリパラメータを組
    み合わせた上で
    
    ,
    
    タグ等を使って Webp 対応
    してくれる Component を作った
    vue-imgix というライブラリもあるの
    でこっちもアリかも
    

    View Slide

14. まとめ
    microCMS を使うと、管理画⾯を内製するコストを削減できる
    Nuxt や Next 等のモダンフロントエンド(SPA)と相性がいい
    imgix が実質無料で付いてくるので、活⽤してパフォーマンス向上しよう
    

    View Slide

15. View Slide

16. ご清聴ありがとうございました
    採⽤に少しでも興味を持った⽅はお気軽に DM ください！
    Twitter: @Meijin_garden
    

    View Slide