手順メモ
Swagger Editorインストール
dockerでも配布されていたのでdocker経由でインストール
Swagger Tools Docs
docker run -p 80:8080 --name swagger-editor swaggerapi/swagger-editor
http://localhost/にアクセスする。swagger-editorが表示された。
単純なAPIの疎通確認なので、プリセットで入っているこのサンプルコードをそのまま利用する。
node.js用のサーバーコードを生成
メニューの「Generate Server」から「nodejs-server」を選択する。node.js用のコード一式が詰め込まれたzipファイルがダウンロードされる。
サーバー立ち上げ
準備
nodejs-server-server\api\swagger.yaml
を開いて、hostをlocalhost:8080
に設定する。
package.jsonがあるディレクトリで以下のコマンドを実行して依存パッケージを落としてくる。
npm install
実行
>node index.js
Your server is listening on port 8080 (http://localhost:8080)
Swagger-ui is available on http://localhost:8080/docs
http://localhost:8080/docs
にアクセスする
なんでも良いので適当なAPIを開き、実行してみる(Try it outを押下)。レスポンスが返ってくることを確認
plugins.sbt
scala-jsプラグインとscalariformプラグインを追加する。
resolvers += Resolver.typesafeRepo("releases")
addSbtPlugin("org.scalariform" % "sbt-scalariform" % "1.6.0")
addSbtPlugin("org.scala-js" % "sbt-scalajs" % "0.6.16")
build.sbt
scala.jsプラグインを有効化
enablePlugins(ScalaJSPlugin)
mainを作成
scalaJSUseMainModuleInitializer := true
依存ライブラリにscala.js-dom, upickleを追加
libraryDependencies += "org.scala-js" %%% "scalajs-dom" % "0.9.1"
libraryDependencies += "com.lihaoyi" % "upickle_sjs0.6_2.12" % "0.4.4"
Code
GET http://localhost:8080/v2/pet/{id}
にアクセスしてレスポンス取得、パースしてcase classにマッピングするコード
import org.scalajs.dom.ext._
import upickle.default._
import scala.concurrent.ExecutionContext.Implicits.global
import scala.scalajs.js.JSApp
import scala.util.{ Failure, Success }
case class Category(
id: Int,
name: String
)
case class Pet(
id: Int,
category: Category,
name: String,
photoUrls: Seq[String],
tags: Seq[String],
status: String
)
object Main extends JSApp {
def main(): Unit = {
Ajax.get("http://localhost:8080/v2/pet/10").onComplete {
case Success(r) => {
println(r.responseText)
val parse = read[Pet](r.responseText)
println(parse.id)
}
case Failure(t) => println(t.getMessage)
}
}
}
js生成
sbt
fastOptJS
HTML
scala.jsで生成したjsを読み込むだけ
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>scala.js api test</title>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<script src="../target/scala-2.12/scalajspractice-fastopt.js"></script>
</body>
</html>
動作確認
普通に起動するとクロスオリジンの制約で以下のようにエラーになるので、
XMLHttpRequest cannot load http://localhost:8080/v2/pet/10. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
セキュリティ設定無効で起動
chrome.exe --disable-web-security --user-data-dir
動いた