手順メモ

Swagger Editorインストール

dockerでも配布されていたのでdocker経由でインストール

docker run -p 80:8080 --name swagger-editor swaggerapi/swagger-editor

http://localhost/にアクセスする。swagger-editorが表示された。
単純なAPIの疎通確認なので、プリセットで入っているこのサンプルコードをそのまま利用する。

f:id:hkou:20170528104916p:plain

node.js用のサーバーコードを生成

メニューの「Generate Server」から「nodejs-server」を選択する。node.js用のコード一式が詰め込まれたzipファイルがダウンロードされる。 f:id:hkou:20170528105050p:plain

サーバー立ち上げ

準備

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を押下）。レスポンスが返ってくることを確認 f:id:hkou:20170528110334p:plain

Scala.jsでAPIアクセス側を実装

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を読み込むだけ

<!DOCTYPE html>
<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>

動作確認

Chrome起動

普通に起動するとクロスオリジンの制約で以下のようにエラーになるので、

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

動いた f:id:hkou:20170528113304p:plain

マコーの日記

SwaggerでAPI作って、Scala.jsでAPIにアクセスするまで