Zenn
📄

Swagger UI の openapi.json を指定する URL 入力欄をプルダウンに変更する

2021/01/30に公開
2件
Swagger
OpenAPI
tech

Swagger UI とは

OpenAPI (Swagger) 仕様を見やすく表示してくれる UI です。
REST API Documentation Tool | Swagger UI

読み込む OpenAPI 仕様の JSON はページトップに表示される入力欄で指定できます。

やりたいこと

読み込む openapi.json が決まっている場合、手動で入力するのは手間なので URL をプルダウンから選べるようにします。

コード

swagger-initializer.js の url を urls に書き換えます。

swagger-initializer.js
   window.ui = SwaggerUIBundle({
-    url: "https://petstore.swagger.io/v2/swagger.json",
+    urls: [
+      {url: `${location.href}openapi.v2.json`, name: 'Twitter API v2'},
+      {url: `${location.href}openapi.labs.json`, name: 'Twitter API Labs'},
+    ],

https://github.com/SnowCait/twitter-swagger-ui/commit/b4277c6010f640f75d07a215d542376179bc7bbf

古いバージョンで書き換える際の参考

フォームが JS から生成されるので生成された DOM を後から書き換えます。
詳細の差分はこちら。
https://github.com/SnowCait/twitter-swagger-ui/commit/2291c03db58508f8a3a4f70e86d11fde1b315a47

元々の DOM

JS で生成される DOM。

index.html
<form class="download-url-wrapper">
  <input type="text" class="download-url-input" value="./openapi.v2.json">
  <button class="download-url-button button">Explore</button>
</form>

JavaScript

<body><script> にある window.onload の最後に追加します。

index.html
// プルダウンの値
const urls = [
  `${location.href}openapi.v2.json`,
  `${location.href}openapi.labs.json`,
]

// <select> を生成
const input = document.getElementsByClassName('download-url-input')[0]
const select = document.createElement('select')
select.classList = input.classList
urls.forEach (url => {
    const option = document.createElement('option')
    option.label = url
    option.value = url
    select.appendChild(option)
  }
)

// プルダウンの選択が変更されたら読み込む
select.addEventListener('change', (event) => {
  const url = event.target.value
  ui.specActions.updateUrl(url)
  ui.specActions.download(url)
});

// <select> を <input> と置き換える
input.parentElement.replaceChild(select, input)

// [Explore] ボタンを消す
document.getElementsByClassName('download-url-button')[0].remove()

デフォルト値も書き換えておきます。

index.html
const ui = SwaggerUIBundle({
  url: `${location.href}openapi.v2.json`,

CSS

レイアウトの調整。 <head><style> に定義。

index.html
.swagger-ui .topbar .download-url-wrapper select {
  width: 100%;
  margin: 0;
  border: 2px solid #62a03f;
  border-radius: 4px 0 0 4px;
  outline: none;
  min-width: 100px;
  padding: 8px 10px;
  box-sizing: border-box;
  overflow: visible;
  font-family: sans-serif;
  font-size: 100%;
  line-height: 1.15;
}

余談：ローカルでホスト

ローカルで動かそうとすると Fetch API が使えずエラーになります。
回避するための方法を以前書いたので興味のある方はどうぞ。
https://zenn.dev/snowcait/articles/9420b3ef2a5edcea2a07

Discussion