Swaggerページを最速で準備する方法

はじめに

最近もっぱらサーバー側の開発にべったりですが、その過程でAPIのドキュメントをSwaggerで作成しています。
今回は恐らく最速であろうSwaggerページの準備手順を備忘録的に残しておこうと思います。

①SwaggerUIディレクトリをcloneする

SwaggerUIのディレクトリは以下になります。
https://github.com/swagger-api/swagger-ui

すでにymlなどのswaggerドキュメントは作成している前提で進めますが、公開するためにはjsやhtml、cssなどを用意する必要があります。
上記SwaggerUIディレクトリの中にdistというディレクトリがありますが、このディレクトリ内にすでに公開に必要なコードが用意されているので、こちらを使用します。

②distディレクトリを任意のプロジェクトに追加する

私はintelijを使用しているのですが、任意のプロジェクト内にdistディレクトリをそのまま追加していただければと思います。

③作成したymlファイルを追加し、設定を変更する

あらかじめ記載したymlファイルをdist直下に追加し、dist直下にあるswagger-initializerを修正します。

swagger-initializer.js

window.onload = function() {
  //<editor-fold desc="Changeable Configuration Block">

  // the following lines will be replaced by docker/configurator, when it runs in a docker-container
  window.ui = SwaggerUIBundle({
    url: "読み込みたいymlを指定してください",
    dom_id: '#swagger-ui',
    deepLinking: true,
    presets: [
      SwaggerUIBundle.presets.apis,
      SwaggerUIStandalonePreset
    ],
    plugins: [
      SwaggerUIBundle.plugins.DownloadUrl
    ],
    layout: "StandaloneLayout"
  });

  //</editor-fold>
};

上記コードのURLパラメータに先ほど追加したymlファイルを指定する形になります。
これで調整は以上です、ymlファイルに誤りがなければdist直下のindex.htmlを表示することでドキュメントとして確認が可能です。

さいごに

swagger、とても優秀ですよね。
プラグインなどを駆使することでそのままコードにも落とし込めますし、もはやなくてはならない存在と言えます。
InteliJは便利なプラグインがたくさんありますので、どこかで紹介したいと思います。