Help us understand the problem. What is going on with this article?

Swaggerを使ってインタラクティブなWeb APIドキュメントをつくる

More than 5 years have passed since last update.

swagger-top.jpg

この記事は、微妙に以下の記事の延長線上です。わかりにくければ、こちらから読んでいただいた方がいいかもしれません。

「インタラクティブなWeb APIドキュメント」とはどういうものか

Swaggerというツールを使います。Web APIをYAMLで書いておいて、Swaggerでサーバを立てると、読むだけのドキュメントではなくて、以下のようにパラメータを指定して実際にHTTPリクエストを送ることができるWebページが生成されます。

Swagger_UI.jpg

以下が返ってきたレスポンスです。

Swagger_UI1.jpg

以下は実物です。ご自由に動かしてみて下さい。

インタラクティブなWeb APIドキュメント

まだちょっと分かりにくいという方のために、アノテーションからドキュメントを作れるswaggerの使い方 - gong023の日記から引用させていただくと、Swaggerの概要は以下のようなものです。

開発ドキュメントをどうやって書くかという話題は常々ある。そして一番素直なアプローチを取ると、大抵 wiki みたいなアプリケーションを用意して、そこにドキュメント書こうぜという話になる。しかし、この管理は割とすぐ破綻してしまう。 理由はいろいろあるが、最新のコードに追従できなくなるとか、統一されたフォーマットを保証できず書き手によっては何を書いているのか全くわからないとかそういうケースが多い。

前者について、 swagger はアノテーションでドキュメントを書けるので違いは起きづらくなる。( それでも不足だが自分でライブラリ作って補った )

また後者に関していえば、swagger は API の仕様を記述するためのフォーマットを提供してくれる。

つまり、swagger は API の記述方法について考える手間を肩代わりし、また違反があれば解析の段階でエラーを吐くのでドキュメントの一貫性保証もしてくれる。

作業の流れ

  1. Swagger Editorを使ってWeb APIドキュメント(swagger.yaml)を書く
  2. swagger.yamlからswagger.jsonを生成する
  3. Swaggerサーバをダウンロードする
  4. Swaggerサーバをローカルで立ててみる
  5. Swaggerサーバを修正する
  6. SwaggerサーバをHerokuにプッシュして立てる

なお、

  • いきなりWeb APIドキュメントを書く方法の他に・・・
  • アプリケーション・コードにアノテーションを付けて、それを読み込ませてドキュメントを自動生成させる

こともできますが、今回はやりません(たぶんそうしたほうがコードが読みやすくなって良いと思うのですが、実はやり方がまだよくわからないです)。

Swagger Editorを使ってWeb APIドキュメントを書く

以下のページがSwagger Editorです。

Swagger Editor

画面の右側に、出力されるインタラクティブWeb APIドキュメントが表示されます。左側のソースを編集すると、右側のドキュメントがリアルタイムに更新されます。

JSONオブジェクト・モデルの書き方は、以下のページが参考になります。

rest - How to structure a response with an array that has an href to itself in YAML/swagger.io? - Stack Overflow

右側のドキュメントから実際にWeb APIを叩くことも可能ですが、そのためにはクロスオリジンを許可しなければなりません(自分でEditorを立てるなど、もっと安全な方法もあります)。

今回のWeb APIサーバはSinatra / Rubyだったので、以下のページを参考にさせて頂きました。

Sinatraとajax通信でクロスドメイン制約の突破方法 - Qiita

swagger.yamlからswagger.jsonを生成する

「File」→「Download JSON」

Swagger_Editor.jpg

Swaggerサーバをダウンロードする

「Generate Server」→「Node.js」

Swagger_Editor1.jpg

Swaggerサーバをローカルで立ててみる

先ほどダウンロードしたファイルを解凍して、以下のように進めます。

$ cd nodejs-server
$ npm install

APIドキュメントはapiフォルダに入ります。swagger.jsonというファイルがあると思います。Swagger EditorでAPI ドキュメントを更新したら、jsonファイルを再度ダウンロードして、ここに入れます。

個人的にはSwagger Editorで「File」→「Download YAML」して、swagger.yamlapiフォルダに保存しておいた方が良いと思います。

$ node index.js

これでローカルにSwaggerサーバが起ち上がります。

Swaggerサーバを修正する

そのままHerokuにプッシュしても動きません。これは困りました。ログを見るとHerokuからポート番号を取得できていないようでしたので、以下のように編集しました。

index.js
--- var serverPort = 8080;
+++ var serverPort = process.env.PORT || 8080;

--- http.createServer(app).listen(8080, function () {
+++ http.createServer(app).listen(process.env.PORT || 8080, function () {

また、Herokuにプッシュすると自動でnpm startが実行されるので、以下のように編集します。

package.json
+++  "scripts": {
+++    "start": "node index.js"
+++  }

SwaggerサーバをHerokuにプッシュして立てる

$ git push heroku master

お疲れさまでした!


ブログやってます:http://weed.nagoya

Feel-Physics
今はHoloLensのアプリを開発しており、技術記事はすべてブログ( http://weed.nagoya )に書いています。以前はSwift、OpenCV+Python、JavaScript、Objective-Cを書いていました。
http://feel-physics.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした