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

microCMS × OpenAPIで高速かつ安全な開発を行う話

microCMS × OpenAPIで高速かつ安全な開発を行う話

2022年4月21日に行われた microCMS Online Meetup の発表資料です。
https://microcms.connpass.com/event/240629/

発表のアーカイブをYouTubeで公開しています。こちらもあわせてご覧ください。
https://www.youtube.com/watch?v=2BBsCR1Mop8&t=3540s

microCMS

April 22, 2022
Tweet

More Decks by microCMS

Other Decks in Programming

Transcript

  1. #microcms_meetup

    View full-size slide

  2. 目次
    2
    ● そもそも OpenAPI とは?
    ● microCMS の OpenAPI 連携機能の紹介
    ● microCMS の API の未来について
    #microcms_meetup

    View full-size slide

  3. 自己紹介
    ● 入沢翼 (@lambdasawa)
    ● https://www.lambdasawa.me/
    ● microCMS のバックエンドエンジニア
    3
    #microcms_meetup

    View full-size slide

  4. 目次
    4
    ● そもそも OpenAPI とは?
    ● microCMS の OpenAPI 連携機能の紹介
    ● microCMS の API の未来について
    #microcms_meetup

    View full-size slide

  5. そもそも OpenAPI とは?
    ● RESTful API の仕様を表現するための仕様
    ● 言語非依存 & 機械可読 (JSON or YAML)
    ● 人間に優しいフォーマットにも変換できる
    5
    #microcms_meetup

    View full-size slide

  6. 想定する API の例
    6

    View full-size slide

  7. OpenAPI 定義ファイル
    7

    View full-size slide

  8. OpenAPI 定義ファイル
    8

    View full-size slide

  9. OpenAPI 定義ファイル
    9

    View full-size slide

  10. OpenAPI 定義ファイル (paths)
    10

    View full-size slide

  11. OpenAPI 定義ファイル (paths)
    11

    View full-size slide

  12. OpenAPI 定義ファイル (paths)
    12

    View full-size slide

  13. OpenAPI 定義ファイル (paths)
    13

    View full-size slide

  14. OpenAPI 定義ファイル (components)
    14

    View full-size slide

  15. OpenAPI 定義ファイル (components)
    15

    View full-size slide

  16. OpenAPI 定義ファイル (components)
    16

    View full-size slide

  17. OpenAPI 定義ファイル (components)
    17

    View full-size slide

  18. OpenAPI 定義ファイル (components)
    18

    View full-size slide

  19. OpenAPI 定義ファイル (components)
    19

    View full-size slide

  20. OpenAPI を使うメリット
    ● 曖昧さが無い
    ● 「foo が空になる」とは?
    ○ {“foo”: “”} なのか?
    ○ {“foo”: null} なのか?
    ○ {} なのか?
    20
    #microcms_meetup

    View full-size slide

  21. OpenAPI を使うメリット
    ● 豊富なエコシステムと連携できる
    ● コード生成 (openapi-generator など)
    ● ドキュメント生成 (Swagger UI, ReDoc, RapiDoc)
    ● モックサーバ生成 (Prism)
    ● 自動バリデーション (committee-rails, express-openapi-validator)
    ● GUI エディター (Stoplight Studio)
    21
    #microcms_meetup

    View full-size slide

  22. 目次
    22
    ● そもそも OpenAPI とは?
    ● microCMS の OpenAPI 連携機能の紹介
    ● microCMS の API の未来について
    #microcms_meetup

    View full-size slide

  23. microCMS の OpenAPI 連携機能の紹介
    23
    (画面は開発中のものです)

    View full-size slide

  24. コード生成をするコマンド
    24
    #microcms_meetup

    View full-size slide

  25. API 一覧の補完
    25
    #microcms_meetup

    View full-size slide

  26. API 一覧の補完 (確定後)
    26
    #microcms_meetup

    View full-size slide

  27. クエリストリングの補完と型チェック
    27
    #microcms_meetup

    View full-size slide

  28. レスポンスボディの補完
    28
    #microcms_meetup

    View full-size slide

  29. リクエストボディの補完と型チェック
    29
    #microcms_meetup

    View full-size slide

  30. 目次
    30
    ● そもそも OpenAPI とは?
    ● microCMS の OpenAPI 連携機能の紹介
    ● microCMS の API の未来について
    #microcms_meetup

    View full-size slide

  31. API v2 を開発中
    ● よりキレイな API に
    ● OpenAPI と自動バリデーションを活用してより堅牢な API に
    ● OpenAPI 連携機能は API v2 から提供される予定
    31
    #microcms_meetup

    View full-size slide

  32. API v2 のリリース スケジュール (予定)
    32
    #microcms_meetup

    View full-size slide

  33. マネジメント API を強化
    ● コンテンツ API 同様に RESTful な API として提供予定
    ● 管理画面で出来ることはなんでも API でも出来るように
    33
    #microcms_meetup

    View full-size slide

  34. マネジメント API として提供されるもの
    ● 例) メディアの検索、アップロード、削除
    ● 例) API スキーマの CRUD
    ○ OpenAPI 以外のアプローチでコード生成
    ○ 逆に TypeScript から API スキーマ生成
    ● 例) レビューの CRUD
    ○ 放置されたレビューを Slack でリマインド
    34
    #microcms_meetup

    View full-size slide

  35. 35
    #microcms_meetup

    View full-size slide

  36. ご清聴ありがとうございました
    36
    https://microcms.io
    Copyright © microCMS All rights reserved.
    #microcms_meetup

    View full-size slide