【SwaggerUIはもう古い？！】今時のイケてるデザインなAPIドキュメントツール「ReDoc」の導入方法と使い方【簡単】

Anker PowerCor

Anker PowerCore モバイルバッテリー 20000mAh iPhone iPad Android

created by Rinker

Anker

¥4,990 (2024/04/03 21:42:08時点 Amazon調べ-詳細)

旅行には必須の大容量モバイルバッテリー！

ペヤングソースやきそば 120g×18個

created by Rinker

ペヤング

¥2,600 (2024/04/03 21:42:16時点 Amazon調べ-詳細)

とりあえず保存食として買っておけば間違いなし！

レッドブルエナジードリンク 250ml×24本

created by Rinker

Red Bull(レッドブル)

¥4,000 (2024/04/03 21:42:12時点 Amazon調べ-詳細)

翼を授けよう！

モンスターエナジー 355ml×24本 [エナジードリンク]

アサヒ飲料モンスターエナジー 355ml×24本 [エナジードリンク]

created by Rinker

モンスター

¥4,748 (2024/04/03 21:33:15時点 Amazon調べ-詳細)

脳を活性化させるにはこれ！

ドラゴンクエストメタリックモンスターズギャラリーメタルキング

created by Rinker

スクウェア・エニックス(SQUARE ENIX)

¥3,250 (2024/04/03 21:42:09時点 Amazon調べ-詳細)

みんな大好き経験値の塊をデスクに常備しておこう！

Bauhutte ( バウヒュッテ ) 昇降式 L字デスクブラック BHD-670H-BK

created by Rinker

Bauhutte(バウヒュッテ)

¥14,935 (2024/04/03 21:42:10時点 Amazon調べ-詳細)

メインデスクの横に置くのにぴったりなおしゃれな可動式ラック！

サンディスク microSD 128GB

サンディスク microSD 128GB UHS-I Class10 Nintendo Switch SanDisk Ultra SDSQUA4-128G-EPK

created by Rinker

SanDisk

¥1,856 (2024/04/03 21:33:16時点 Amazon調べ-詳細)

スマホからSwitchまで使える大容量MicroSDカード！

1 SwaggerUIにつぐ新たな勢力
2 ReDoc
3 手順
- 3.1 Htmlファイルを用意
4 終わりに

SwaggerUIにつぐ新たな勢力

以前、Swaggerに関する記事をご紹介しました。

参考

【炎上回避】APIドキュメントはSwaggerで定義すると幸せになれる説

そして、先日SwaggerUIに取って代わりそうな新たなUIツールを発見したのでご紹介しようと思います。

ReDoc

What’s?

ReDocとは、SwaggerSpecで書かれた定義を元に、Htmlベースのドキュメントページを作成してくれるツールとなっています。

OpenAPI/Swagger-generated API Reference DocumentationRedocly/redoc: 📘 OpenAPI/Swagger-generated API Reference Documentation

SwaggerUIとの違いは？

ここだけの説明を見ると、SwaggerUIと同じじゃん！と思う方もいると思いますが、とりあえずDEMOページを見てみてください。

ちなみにSwaggerUIはDEMOページと比較してみてください。

感性は人それぞれですが、少なくとも筆者はReDocの方が見やすく感じました。

3カラムに分けられており、それぞれのカラム内の項目も見やすく情報が整理されています。

なんとなくですがフォントやデザインも今風な気がしますね。笑

さらにReDocの方はカスタマイズもしやすいとの事！

使い方も簡単

では、実際にどうやって使うの？！というと、SwaggerUIと同様に特定のhtmlを配置してその中からSwaggerSpecを読み込むだけです。

なので、SwaggerUIからの乗り換えも可能ですし、両方を共存させることが可能です！

それでは、実際にReDocを導入するために必要なHtmlを用意してみましょう。

手順

Htmlファイルを用意

ReDocを表示するためのHtmlを用意しましょう。

公式ページにあるサンプルをベースにする形で良いです。
一旦はこのような形になりました。

<!DOCTYPE html>
<html>
  <head>
    <title>ReDoc</title>
    <!-- needed for adaptive design -->
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700|Roboto:300,400,700" rel="stylesheet">
 
    <!--
    ReDoc doesn't change outer page styles
    -->
    <style>
      body {
        margin: 0;
        padding: 0;
      }
    </style> 
  </head>
  <body>
    <redoc spec-url="../spec.yaml"></redoc><!-- Specへのパス -->
    <script src="https://cdn.jsdelivr.net/npm/redoc/bundles/redoc.standalone.js"> </script> 
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>ReDoc</title>

<!--

ReDoc doesn't change outer page styles

-->

<style>

body {

margin: 0;

padding: 0;

}

</style>

</head>

<body>

</body>

</html>

準備はたったこれだけ。
CDNで必要なスクリプト類を読み込めるのでめちゃくちゃ簡単です！

SwaggerUIの場合は関連する各ファイルもサーバーに配置して管理する必要があったので、この辺もとても導入しやすくなっていますね。

あとは、サーバーにSpeckファイルと合わせて配置するだけで簡単にAPIドキュメントをブラウザ管理する事が出来ちゃいます。

終わりに

以上のように、同じSpecファイルを元にイケてるAPIドキュメントページを作成する事が出来ました。

これからAPIドキュメントを作成する方は、SwaggerUIではなくReDocを試してみてはいかがでしょうか♪

【SwaggerUIはもう古い？！】今時のイケてるデザインなAPIドキュメントツール「ReDoc」の導入方法と使い方【簡単】

Anker PowerCor

ペヤング ソースやきそば 120g×18個

レッドブル エナジードリンク 250ml×24本

モンスターエナジー 355ml×24本 [エナジードリンク]

ドラゴンクエスト メタリックモンスターズギャラリー メタルキング

Bauhutte ( バウヒュッテ ) 昇降式 L字デスク ブラック BHD-670H-BK

サンディスク microSD 128GB

SwaggerUIにつぐ新たな勢力

ReDoc

What’s?

SwaggerUIとの違いは？

使い方も簡単

手順

Htmlファイルを用意

終わりに

CATEGORIES & TAGS

ペヤングソースやきそば 120g×18個

レッドブルエナジードリンク 250ml×24本

ドラゴンクエストメタリックモンスターズギャラリーメタルキング

Bauhutte ( バウヒュッテ ) 昇降式 L字デスクブラック BHD-670H-BK