📄

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

2 min read

Swagger UI とは

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

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

やりたいこと

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

コード

フォームが 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

ログインするとコメントできます