SlideShare a Scribd company logo
1 of 33
Download to read offline
SwaggerとAPIのデザイン
Swaggerではじめる楽々RESTful APIデザイン&ドキュメント管理
2017/5/12
Okachi.js vol.5
第1回
出演
{:company “Greative.GK”
:name “Kazuhiro Hara”
:twitter “@kara_d”
:interest “SPA, WebVR, Clojure,
Design research”}
Clojure / ClojureScript で
Electronアプリケーションを
作るためのスタートキット / プラットホーム
● オープンソースにてGitHubにて公開
● MITライセンス
● 現在のスター数 : 289
http://descjop.org/
+9 Point up
本日のトピック
SwaggerとAPIのデザイン
http://swagger.io/
もくじ
1. 問題意識
2. Swaggerとは
3. ExpressとSwaggerのサンプルを見てみよう
4. 僕とSwagger (Clojureベースの環境で利用しています)
問題意識
RESTful APIのドキュメントどうしていますか?
RESTful APIのドキュメントあれこれ
● Wikiで管理
● Word / Excelで管理
● クラウドで同時編集可能なGoogle Docsで管理
● リポジトリ内のドキュメント
● 何かの自動生成ツールとか
RESTful APIのドキュメントあるある
● みんなに意見を聞く
そこで
Swagger!
Swaggerとは
Swagger
Swagger is a powerful open source framework backed by a large ecosystem of tools that helps you design,
build, document, and consume your RESTful APIs.
Swagger
Swaggerは、RESTful APIの設計、構築、文書化、および使用に役立つ、大規模なエコシステムツールを使用し
た強力なオープンソースフレームワークです。(by Google翻訳)
発音
スゥァガー(YouTube調べ)
Swaggerでできること(1)
● Swagger Editor
○ http://swagger.io/swagger-editor/
○ APIの設計を視覚的に行うことが出来るツール
○ エディターエリアとプレビューエリアがある
あとでデモします
Swaggerでできること(2)
● Swagger Codegen
○ http://swagger.io/swagger-codegen/
○ Swaggerで定義した仕様からサーバー側のコードを生成する
■ API clients
● ActionScript, Bash, C# (.net 2.0, 4.0 or later), C++ (cpprest, Qt5, Tizen), Clojure, Dart, Elixir, Go, Groovy, Haskell, Java
(Jersey1.x, Jersey2.x, OkHttp, Retrofit1.x, Retrofit2.x, Feign), Node.js (ES5, ES6, AngularJS with Google Closure Compiler
annotations) Objective-C, Perl, PHP, Python, Ruby, Scala, Swift (2.x, 3.x), Typescript (Angular1.x, Angular2.x, Fetch, jQuery,
Node)
■ Server stubs
● C# (ASP.NET Core, NancyFx), Erlang, Go, Haskell, Java (MSF4J, Spring, Undertow, JAX-RS: CDI, CXF, Inflector, RestEasy),
PHP (Lumen, Slim, Silex, Zend Expressive), Python (Flask), NodeJS, Ruby (Sinatra, Rails5), Scala (Finch, Scalatra)
■ API documentation generators: HTML, Confluence Wiki
■ Others: JMeter
Swaggerでできること(3)
● Swagger UI
○ http://swagger.io/swagger-ui/
○ Swaggerの仕様をサーバー側で実装しておくと、自動でドキュメントが生成される
○ たぶん、もっともよく使う部分
こちらもあとでデモします
ExpressとSwaggerのサンプルを
見てみよう
サンプル使用までの流れ
swagger-node
https://github.com/swagger-api/swagger-node
を使います
テンプレートをexpress, hapi, restify, sailsから選べる
$ npm install -g swagger
$ swagger project create hello-world
使ってみる(1)
まずは、Swagger Editor
$ swagger project edit
使ってみる(2)
Swagger UIを試す
/app.js を変えていく。まず、ミドルウェアライブラリの読み込み
続いて、appオブジェクトにミドルウェアを指定する
サーバの起動 : http://localhost:10010/docs/
$ swagger project start
var SwaggerUi = require('swagger-tools/middleware/swagger-ui');
app.use(SwaggerUi(swaggerExpress.runner.swagger));
僕とSwagger
Swagger UIは、様々な言語から利用できる
● Node.jsで開発している人でなくても利用できる
● 既存のアプリケーションに組み込むこともできる
● 一度仕様を作れば、万が一移植することになっても、
ドキュメント面の変更がほとんどない(出力されたものに関しては)
ClojureでのAPI開発に全面的に使用
● 使い道 : SPA開発のAPIデザイン & バックエンド開発
○ フロントエンドとバックエンド同時に作ったり
● compojure-apiというフレームワークでAPIを構築している
● Swaggerと統合されているのでこんなことがかんたんに出来る
○ リクエスト時のJSONの型を定義して実装にもドキュメントにも反映
○ レスポンス時のJSONの型を定義して実装にもドキュメントにも反映
○ Swaggerの仕様の基づいているので、実装しているAPIのパラメータ仕様などが
そのままドキュメントになる
○ 開発時だけSwaggerを有効にして、本番時は無効にする
サンプルコード : I/O周りの仕様定義
POST時のリクエストの仕様 (一部適当です)
POST時のレスポンスの仕様 (一部適当です)
(s/defschema RequestPost
"POSTのスキーマ"
{:data {:type (s/eq “markdown”)
:attributes {:markdown s/Any}}})
(s/defschema ResponsePost
"POST返り値のスキーマ"
{:data {:type (s/eq “markdown”)
(s/optional-key :errors) s/Any
:attributes {:result s/Any}}})
サンプルコード : APIの実装
(def kara-d-api
(api
{:swagger (if (env/dev?)
{:ui "/api-docs-markdown"
:options {:ui {:validatorUrl nil}}
:spec "/swagger-markdown.json"
:data {:info {:title "markdown API"
:description ""}
:tags [{:name "api-markdown", :description ""}]}}
nil)
:format { ... }}}
(context "/api/markdown" []
:tags ["api-markdown"]
(POST "/" request
:summary "markdown投稿"
:body [post RequestPost]
:return ResponsePost
(if-not (authenticated? request)
(bad-request (error/unauthorized config/api-type))
(ok (handler-api/post! post request))))
... 他のAPI定義
)))
Swaggerの定義メタデータ
各APIの実装
Swaggerいいことまとめ
● Swaggerが統合されたフレームワークであれば、実装コードにSwagger用のメタデー
タを付与するだけで、ドキュメントの構築が可能
○ 使い方は、それぞれのフレームワークのドキュメントを見よう
○ かなりの言語が対応しているはず
● 実装と仕様ドキュメントのずれがなくなる
● リポジトリで一緒に管理できる
● 動作するドキュメントとして、いろいろ試せる
● APIを設計するときに細かな仕様を考えられる
● とりあえず適当なサーバを立ち上げられる
どうですか
Swagger!
- END -
ありがとうございました
2017/5/12
Okachi.js vol.5

More Related Content

What's hot

Github codespaces すごく良い。もうこれで 十分なんじゃという話
Github codespaces すごく良い。もうこれで 十分なんじゃという話Github codespaces すごく良い。もうこれで 十分なんじゃという話
Github codespaces すごく良い。もうこれで 十分なんじゃという話
xiidec
 

What's hot (20)

Gradleどうでしょう
GradleどうでしょうGradleどうでしょう
Gradleどうでしょう
 
Windows コンテナを AKS に追加する
Windows コンテナを AKS に追加するWindows コンテナを AKS に追加する
Windows コンテナを AKS に追加する
 
2020/06/16 tsjp-azure-staticwebapps-vs_codespaces
2020/06/16 tsjp-azure-staticwebapps-vs_codespaces2020/06/16 tsjp-azure-staticwebapps-vs_codespaces
2020/06/16 tsjp-azure-staticwebapps-vs_codespaces
 
Bicep + VS Code で楽々Azure Deploy
Bicep + VS Code で楽々Azure DeployBicep + VS Code で楽々Azure Deploy
Bicep + VS Code で楽々Azure Deploy
 
Swagger 入門
Swagger 入門Swagger 入門
Swagger 入門
 
Jjug 20140430 gradle_advanced
Jjug 20140430 gradle_advancedJjug 20140430 gradle_advanced
Jjug 20140430 gradle_advanced
 
GitHub + Circle CI で幸せになろう
GitHub + Circle CI で幸せになろうGitHub + Circle CI で幸せになろう
GitHub + Circle CI で幸せになろう
 
Riot + generator で始める新しいデータバインディング
Riot + generator で始める新しいデータバインディングRiot + generator で始める新しいデータバインディング
Riot + generator で始める新しいデータバインディング
 
VSCode Conference Japan 2021 kyusque
VSCode Conference Japan 2021 kyusqueVSCode Conference Japan 2021 kyusque
VSCode Conference Japan 2021 kyusque
 
【東京Node学園祭2016】Node.js × Babel で AWS Lambda アプリケーションを開発する
【東京Node学園祭2016】Node.js × Babel で AWS Lambda アプリケーションを開発する【東京Node学園祭2016】Node.js × Babel で AWS Lambda アプリケーションを開発する
【東京Node学園祭2016】Node.js × Babel で AWS Lambda アプリケーションを開発する
 
海外で注目されてるJs framework “mithril”の特徴
海外で注目されてるJs framework “mithril”の特徴海外で注目されてるJs framework “mithril”の特徴
海外で注目されてるJs framework “mithril”の特徴
 
Github codespaces すごく良い。もうこれで 十分なんじゃという話
Github codespaces すごく良い。もうこれで 十分なんじゃという話Github codespaces すごく良い。もうこれで 十分なんじゃという話
Github codespaces すごく良い。もうこれで 十分なんじゃという話
 
Riotjsハンズオン
RiotjsハンズオンRiotjsハンズオン
Riotjsハンズオン
 
づや会 Vol4 Node.jsとphpのパフォーマンスを比較してみる
づや会 Vol4 Node.jsとphpのパフォーマンスを比較してみるづや会 Vol4 Node.jsとphpのパフォーマンスを比較してみる
づや会 Vol4 Node.jsとphpのパフォーマンスを比較してみる
 
Rancher使ってみたよ(初心者向け)
Rancher使ってみたよ(初心者向け)Rancher使ってみたよ(初心者向け)
Rancher使ってみたよ(初心者向け)
 
インフラ部門で働くCプログラマの話
インフラ部門で働くCプログラマの話インフラ部門で働くCプログラマの話
インフラ部門で働くCプログラマの話
 
はじめての CircleCI
はじめての CircleCIはじめての CircleCI
はじめての CircleCI
 
WebAssemblyとBlazor 、WebAssembly System Interfaceでコンテナライズの設計を解説
WebAssemblyとBlazor 、WebAssembly System Interfaceでコンテナライズの設計を解説WebAssemblyとBlazor 、WebAssembly System Interfaceでコンテナライズの設計を解説
WebAssemblyとBlazor 、WebAssembly System Interfaceでコンテナライズの設計を解説
 
Om Next ~React.jsを超えて
Om Next ~React.jsを超えてOm Next ~React.jsを超えて
Om Next ~React.jsを超えて
 
AWS SDK for Go in #jawsmeguro
AWS SDK for Go in #jawsmeguroAWS SDK for Go in #jawsmeguro
AWS SDK for Go in #jawsmeguro
 

Similar to SwaggerとAPIのデザイン

Swagger jjug ccc 2018 spring
Swagger jjug ccc 2018 springSwagger jjug ccc 2018 spring
Swagger jjug ccc 2018 spring
kounan13
 
Google Cloud Messaging for Android ことはじめ(Eclipseから動かしてみる編)
Google Cloud Messaging for Android ことはじめ(Eclipseから動かしてみる編)Google Cloud Messaging for Android ことはじめ(Eclipseから動かしてみる編)
Google Cloud Messaging for Android ことはじめ(Eclipseから動かしてみる編)
kojiokb
 
試して学べるクラウド技術! OpenShift
試して学べるクラウド技術! OpenShift試して学べるクラウド技術! OpenShift
試して学べるクラウド技術! OpenShift
Etsuji Nakai
 
HTML5-20100626
HTML5-20100626HTML5-20100626
HTML5-20100626
Taku AMANO
 

Similar to SwaggerとAPIのデザイン (20)

Swagger jjug ccc 2018 spring
Swagger jjug ccc 2018 springSwagger jjug ccc 2018 spring
Swagger jjug ccc 2018 spring
 
全部入り!WGPで高速JavaScript+HML5体験
全部入り!WGPで高速JavaScript+HML5体験全部入り!WGPで高速JavaScript+HML5体験
全部入り!WGPで高速JavaScript+HML5体験
 
Good-Bye Swagger
Good-Bye SwaggerGood-Bye Swagger
Good-Bye Swagger
 
Google Cloud Messaging for Android ことはじめ(Eclipseから動かしてみる編)
Google Cloud Messaging for Android ことはじめ(Eclipseから動かしてみる編)Google Cloud Messaging for Android ことはじめ(Eclipseから動かしてみる編)
Google Cloud Messaging for Android ことはじめ(Eclipseから動かしてみる編)
 
Azure DevOps で始めるスタートダッシュ
Azure DevOps で始めるスタートダッシュAzure DevOps で始めるスタートダッシュ
Azure DevOps で始めるスタートダッシュ
 
Open modeler
Open modelerOpen modeler
Open modeler
 
試して学べるクラウド技術! OpenShift
試して学べるクラウド技術! OpenShift試して学べるクラウド技術! OpenShift
試して学べるクラウド技術! OpenShift
 
Web制作勉強会 #2
Web制作勉強会 #2Web制作勉強会 #2
Web制作勉強会 #2
 
Swaggerで始めるモデルファーストなAPI開発
Swaggerで始めるモデルファーストなAPI開発Swaggerで始めるモデルファーストなAPI開発
Swaggerで始めるモデルファーストなAPI開発
 
How To Drink Wsgi
How To Drink WsgiHow To Drink Wsgi
How To Drink Wsgi
 
多分モダンなWebアプリ開発
多分モダンなWebアプリ開発多分モダンなWebアプリ開発
多分モダンなWebアプリ開発
 
サーバーレスの今とこれから
サーバーレスの今とこれからサーバーレスの今とこれから
サーバーレスの今とこれから
 
grpc-gateway を試してみた fukuoka.go#11
grpc-gateway を試してみた fukuoka.go#11grpc-gateway を試してみた fukuoka.go#11
grpc-gateway を試してみた fukuoka.go#11
 
はてなにおける継続的デプロイメントの現状と Docker の導入
はてなにおける継続的デプロイメントの現状と Docker の導入はてなにおける継続的デプロイメントの現状と Docker の導入
はてなにおける継続的デプロイメントの現状と Docker の導入
 
Scalaでのプログラム開発
Scalaでのプログラム開発Scalaでのプログラム開発
Scalaでのプログラム開発
 
サーバーレスのアーキテクチャパターンとそれぞれの実装・テストの勘所
サーバーレスのアーキテクチャパターンとそれぞれの実装・テストの勘所サーバーレスのアーキテクチャパターンとそれぞれの実装・テストの勘所
サーバーレスのアーキテクチャパターンとそれぞれの実装・テストの勘所
 
HTML5-20100626
HTML5-20100626HTML5-20100626
HTML5-20100626
 
高速!Clojure Web 開発入門
高速!Clojure Web 開発入門高速!Clojure Web 開発入門
高速!Clojure Web 開発入門
 
Jawsug chiba API Gateway
Jawsug chiba API GatewayJawsug chiba API Gateway
Jawsug chiba API Gateway
 
アプリ開発&チーム管理で 役立った拡張機能
アプリ開発&チーム管理で役立った拡張機能アプリ開発&チーム管理で役立った拡張機能
アプリ開発&チーム管理で 役立った拡張機能
 

More from Kazuhiro Hara

Playbay Play 2.0 plugin イロハのイ
Playbay Play 2.0 plugin イロハのイPlaybay Play 2.0 plugin イロハのイ
Playbay Play 2.0 plugin イロハのイ
Kazuhiro Hara
 

More from Kazuhiro Hara (20)

MDX with Next.js
MDX with Next.jsMDX with Next.js
MDX with Next.js
 
MDX and Next.js
MDX and Next.jsMDX and Next.js
MDX and Next.js
 
About Plone Conference Tokyo 2018 Frontend Day
About Plone Conference Tokyo 2018 Frontend DayAbout Plone Conference Tokyo 2018 Frontend Day
About Plone Conference Tokyo 2018 Frontend Day
 
Gatsby & React Static
Gatsby & React StaticGatsby & React Static
Gatsby & React Static
 
Clojure.tokyo.descjop
Clojure.tokyo.descjopClojure.tokyo.descjop
Clojure.tokyo.descjop
 
Re-frame and A-Frame
Re-frame and A-FrameRe-frame and A-Frame
Re-frame and A-Frame
 
ひとりアドベントカレンダーのご紹介
ひとりアドベントカレンダーのご紹介ひとりアドベントカレンダーのご紹介
ひとりアドベントカレンダーのご紹介
 
(IDEユーザのための) ClojureのEmacs開発環境について
(IDEユーザのための) ClojureのEmacs開発環境について(IDEユーザのための) ClojureのEmacs開発環境について
(IDEユーザのための) ClojureのEmacs開発環境について
 
Cryogenでサイトつくろーじぇん
CryogenでサイトつくろーじぇんCryogenでサイトつくろーじぇん
Cryogenでサイトつくろーじぇん
 
WebSocket+Akka(Remote)+Play 2.1 Java
WebSocket+Akka(Remote)+Play 2.1 JavaWebSocket+Akka(Remote)+Play 2.1 Java
WebSocket+Akka(Remote)+Play 2.1 Java
 
第2回 -Play部屋- Play 2.0はじめて&もくもく会
第2回 -Play部屋- Play 2.0はじめて&もくもく会第2回 -Play部屋- Play 2.0はじめて&もくもく会
第2回 -Play部屋- Play 2.0はじめて&もくもく会
 
-Play部屋- Play 2.0はじめて&もくもく会
-Play部屋- Play 2.0はじめて&もくもく会-Play部屋- Play 2.0はじめて&もくもく会
-Play部屋- Play 2.0はじめて&もくもく会
 
Play framework 2.0のおすすめと1.2からのアップグレード
Play framework 2.0のおすすめと1.2からのアップグレードPlay framework 2.0のおすすめと1.2からのアップグレード
Play framework 2.0のおすすめと1.2からのアップグレード
 
sbtマルチプロジェクトビルドの使いどころ
sbtマルチプロジェクトビルドの使いどころsbtマルチプロジェクトビルドの使いどころ
sbtマルチプロジェクトビルドの使いどころ
 
Playbay Play 2.0 plugin イロハのイ
Playbay Play 2.0 plugin イロハのイPlaybay Play 2.0 plugin イロハのイ
Playbay Play 2.0 plugin イロハのイ
 
PlayFramework 2.0 Javaと WebSocketでつくる リアルタイムMVC Webアプリケーション
PlayFramework 2.0 Javaと WebSocketでつくる リアルタイムMVC WebアプリケーションPlayFramework 2.0 Javaと WebSocketでつくる リアルタイムMVC Webアプリケーション
PlayFramework 2.0 Javaと WebSocketでつくる リアルタイムMVC Webアプリケーション
 
PlayFramework1.2.4におけるWebSocket
PlayFramework1.2.4におけるWebSocketPlayFramework1.2.4におけるWebSocket
PlayFramework1.2.4におけるWebSocket
 
クリーンな WordPress サイトのための PHP コーディングのお作法 ― 計画的に WordPress を拡張していくためのフレームワーク思考 |...
クリーンな WordPress サイトのための PHP コーディングのお作法 ― 計画的に WordPress を拡張していくためのフレームワーク思考 |...クリーンな WordPress サイトのための PHP コーディングのお作法 ― 計画的に WordPress を拡張していくためのフレームワーク思考 |...
クリーンな WordPress サイトのための PHP コーディングのお作法 ― 計画的に WordPress を拡張していくためのフレームワーク思考 |...
 
WP Jelly vol.01 WordPress管理画面にメニューを追加しよう
WP Jelly vol.01 WordPress管理画面にメニューを追加しようWP Jelly vol.01 WordPress管理画面にメニューを追加しよう
WP Jelly vol.01 WordPress管理画面にメニューを追加しよう
 
Play FrameworkとWeb Socketの話
Play FrameworkとWeb Socketの話Play FrameworkとWeb Socketの話
Play FrameworkとWeb Socketの話
 

Recently uploaded

Recently uploaded (12)

論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
 
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
 
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native IntegrationsUtilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
 
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
 
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイスLoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
 
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半        2024/04/26の勉強会で発表されたものです。新人研修 後半        2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
 
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアルLoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
 
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
 
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
 
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
 
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
 
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
 

SwaggerとAPIのデザイン