Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
4
Help us understand the problem. What are the problem?
@rhirabay

Redocを使ってみた

概要

  • 最近Redocを使用したAPI Documentationを見かけたので、触ってみた

使い方

用意するものは

  • 表示用のHTML
  • swagger.yaml

の2つだけです!

swagger.yamlの書き方はここでは触れませんが、
ここでは以下のものを使用します!

swagger.yaml
swagger: "2.0"
info:
  description: "Redocサンプル"
  title: "Redoc sample"
  version: "1.0.0"
paths:
  /user:
    get:
      summary: "ユーザ検索"
      parameters:
        - name: userId
          in: query
          description : 検索したいユーザのID
          type: "string"
      responses:
        200:
          description: "成功時のレスポンス"

HTMLを作成してみます

表示用のHTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Redoc Sample</title>
</head>
<body>
    <redoc spec-url="./swagger.yaml"></redoc>
    <script src="https://cdn.jsdelivr.net/npm/redoc/bundles/redoc.standalone.js"> </script>
</body>
</html>

ポイントは2つだけ!

  • CDNからredoc.standalone.jsを読み込む
    • <script src="https://cdn.jsdelivr.net/npm/redoc/bundles/redoc.standalone.js">
  • redocタグでswagger.yamlを指定する
    • <redoc spec-url="./swagger.yaml"></redoc>

ブラウザで表示してみると…

Screen Shot 2021-04-03 at 14.47.37.png

シングルページにしたいな…

redoc-cliを使えばOK!

# cliをインストール
$ npm i -g redoc-cli

# index.htmlとredoc.standalone.jsとswagger.yamlをひとまとめにしたHTMLを生成(するイメージ)
$ redoc-cli bundle swagger.yaml

これでredoc-static.htmlが生成されます!

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
4
Help us understand the problem. What are the problem?