Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

7fccfb690a818ed2f3a15fc21d426d5a?s=47 meijin
January 20, 2021

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

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

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

7fccfb690a818ed2f3a15fc21d426d5a?s=128

meijin

January 20, 2021
Tweet

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 が実質無料で付いてくるので、活⽤してパフォーマンス向上しよう

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