<h1 id="%E3%83%93%E3%83%A5%E3%83%BC%E3%82%92%E8%A1%A8%E7%A4%BA">
<a class="header-anchor-link" href="#%E3%83%93%E3%83%A5%E3%83%BC%E3%82%92%E8%A1%A8%E7%A4%BA" aria-hidden="true"></a> ビューを表示</h1>
<h2 id="swagger-ui">
<a class="header-anchor-link" href="#swagger-ui" aria-hidden="true"></a> Swagger UI</h2>
<ul>
<li>サーバーを立てる</li>
</ul>
<div class="code-block-container"><pre class="language-shell"><code class="language-shell">$ <span class="token function">docker</span> pull swaggerapi/swagger-ui
$ <span class="token function">docker</span> run <span class="token parameter variable">-p</span> <span class="token number">80</span>:8080 <span class="token parameter variable">-e</span> <span class="token assign-left variable">SWAGGER_JSON</span><span class="token operator">=</span>/openapi.yaml <span class="token parameter variable">-v</span> <span class="token punctuation">{</span>ホストのyamlファイルの絶対パス<span class="token punctuation">}</span>:/openapi.yaml swaggerapi/swagger-ui
</code></pre></div><ul>
<li>ブラウザで<code>http://localhost/</code>にアクセス</li>
</ul>
<h2 id="vscode">
<a class="header-anchor-link" href="#vscode" aria-hidden="true"></a> VSCode</h2>
<ul>
<li>拡張で<code>Swagger Viewer</code>をインストールし、<code>Preview Swagger</code>で表示</li>
</ul>
<h2 id="stoplight-studio">
<a class="header-anchor-link" href="#stoplight-studio" aria-hidden="true"></a> Stoplight Studio</h2>
<ul>
<li>ツール上のプレビューで確認</li>
</ul>
<h1 id="%E9%9D%99%E7%9A%84%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AB%E5%87%BA%E5%8A%9B">
<a class="header-anchor-link" href="#%E9%9D%99%E7%9A%84%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AB%E5%87%BA%E5%8A%9B" aria-hidden="true"></a> 静的ファイルに出力</h1>
<div class="code-block-container"><pre class="language-shell"><code class="language-shell">$ redoc-cli bundle <span class="token punctuation">{</span>yamlファイルパス<span class="token punctuation">}</span> <span class="token parameter variable">-o</span> index.html
</code></pre></div>

OpenAPI メモ

ビューを表示

Swagger UI

VSCode

Stoplight Studio

静的ファイルに出力

Discussion