166
157

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

SwaggerでAPIを定義してインタラクティブAPIドキュメントを見る

Last updated at Posted at 2016-01-17

Swaggerを使ってAPI定義をしてスタブを動かしてみます。
Swaggerの関連ツールは様々な言語に対応していますが、ここではNode.jsを使って試してみます。

Swaggerとはなんぞ?

Swaggerは関連ツールが多くあるので全容がつかみにくいのですが、

What is Swagger?
The goal of Swagger™ is to define a standard, language-agnostic interface to REST APIs which allows both humans and computers to discover and understand the capabilities of the service without access to source code, documentation, or through network traffic inspection.

端的に言うと「REST API仕様を定義するもの」ということです。
API定義言語と言ってもよいでしょう。

この分野はSwaggerを含め、

の三大勢力が有力なようですが、次の理由でSwaggerを選択しました。

Swaggerを使ってみる

Swaggerにはいろいろな周辺ツールがあり逆に悩ましいのですが、ここでは

  1. オンライン版のswagger-editor を使ってswagger.yamlを書く
  2. swagger-editorからNode.jsのscaffoldコードを吐き出してそれを利用する

この利用法を採用しました。

API仕様を書く

Swaggerの記法はswagger-specificationに書かれている通りJSONです。しかし、Jsonは各キーに""をつけたり、{}で囲う必要があったりして書くのが割とめんどくさいので一般的にはYAMLで書くようです。(YAMLはJSONへの変換が簡単に行えます)

YAMLを書けばいいので道具はテキストエディターなら何でも良いのですが、swagger-editorというものが用意されています。swagger-editorはnode.jsで書かれたプログラムで

$ git clone https://github.com/swagger-api/swagger-editor.git
$ cd swagger-editor
$ npm start

これで動かすことが出来ますが、特に理由がなければオンライン版の http://editor.swagger.io を利用するのが手っ取り早いでしょう。

HTML版のAPIドキュメントを見る

Swaggerの真骨頂は http://petstore.swagger.io/ のようなインタラクティブなAPI仕様のドキュメントを運用できることです。

swagger-uiというツールがJSONを食ってこのAPI画面をレンダリングをするのですが、swagger-uiの実体は swagger-ui.js というJavaScript(Node.jsではなくブラウザで動くJS)ライブラリです。
つまり、ApacheなどのWEBサーバーに静的HTML+JSを書くだけで運用できます。(JSONをswagger-uiに渡すのはajaxでJSONをHTTP取得して渡す形です)

このように、静的HTMLの方法でもできるのですが、関連するCSSの配置やHTMLタグコーディングが面倒なので、最も簡単な「swagger-editorのGenerate Server機能を使う」方法を紹介します。

1. swagger-editorからGenerate Serverする

Screenshot from 2016-01-17 19:53:26.png

ここではNode.jsを選択します。
すると、zipで固められたNode.jsのプロジェクト形式でダウンロードされます。

2. 展開して実行

下記のコマンドで8080ポートでHTTPサーバーが起動します。

$ npm install
$ node index.js

http://localhost:8080/docs にアクセスするとAPIドキュメントが見えます。

モック(スタブ)サーバーとして使う

node-serverのディレクトリ構造
.
├── README.md
├── api
│   └── swagger.yaml    #API仕様。書き換えて再起動すれば反映される。 
├── controllers         #codegenが吐いたScaffoldコード
│   ├── Default.js
│   └── DefaultService.js
├── index.js            #起動用のJS
└── package.json

index.jsに下記のような記述があり、環境変数NODE_ENVdevelopmentをセットするとスタブが使用できます。

index.js
// swaggerRouter configuration
var options = {
  swaggerUi: '/swagger.json',
  controllers: './controllers',
  useStubs: process.env.NODE_ENV === 'development' ? true : true // Conditionally turn on stubs (mock mode)
};

APIドキュメントからTry it out!ボタンを押してみましょう。

Screenshot from 2016-01-17 20:11:10.png

AJAXでサーバーにリクエストが送られ、レスポンス内容が画面に表示されます。
直接curl -X GET --header "Accept: application/json" "http://localhost:8080/v1/pets/11111"しても結果が得られるはずです。

注意点としては、userStbsの意味するところはswagger-codegenが吐き出したcontrollersを使ってレスポンスを返しているわけでなく、swagger-routerというのが内部でゴニョゴニョした固定値が帰ってくるようになっていました。(String型なら"Sample text"とか)
このへんの話はまた次回にします。

なお、SwaggerにはレスポンスJSON例を定義するセクションがあるのですが、残念ながら上記のuseStubでは考慮してくれないようです。(swagger-toolのバージョンアップに期待)

次回はswagger-codegenで吐き出されたコードの掘り下げと、それをexpressで動かすことをしてみたいと思います。

166
157
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
166
157

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?