swagger ui のスタイルを変更してみた

• 概要
• 環境
• 事前準備
  • Apache Httpd をインストールする
  • TODO アプリの CORS を有効にする
• swagger ui のインストールと起動
• スタイルの設定
• 最後に
• 参考サイト

概要

swagger ui にスタイルを当ててみました
使用するアプリケーションはこれまでに作成した TODO アプリを使用します

環境

• CentOS 6.7 64bit
• go-swagger dev
• golang 1.6
• swagger ui v2.2.10

事前準備

Apache Httpd をインストールする

• yum -y install httpd
• service httpd start

TODO アプリの CORS を有効にする

• go get github.com/rs/cors
• cd $GOPATH/src/github.com/hawksnowlog/todo-list
• emacs restapi/configure_todo_list.go

import "github.com/rs/cors"

func setupGlobalMiddleware(handler http.Handler) http.Handler {
        handleCORS := cors.Default().Handler
        return handleCORS(handler)
}

修正できたらビルドしてアプリを起動します

• go fmt restapi/configure_todo_list.go && go install ./cmd/todo-list-server/
• todo-list-server –host=0.0.0.0 –port=18080

swagger ui のインストールと起動

• cd /tmp
• git clone https://github.com/swagger-api/swagger-ui.git
• cp -ipr swagger-ui/dist /var/www/html

swagger ui の dist 配下に index.html やら必要な静的ファイルがあるのでこれを Apache の DocumentRoot 配下に配置するだけです
配置できたら http://xxx.xxx.xxx.xxx/dist/ にアクセスしてみましょう

すると、swagger ui が表示されるので、ヘッダにあるフィールドに http://xxx.xxx.xxx.xxx:18080/swagger.json を入力し「Explore」を選択します
でとりあえず自分のアプリでデフォルトの swagger ui が表示されると思います

スタイルの設定

今回はすでに公開されているスタイルを使ってみたいと思います

• cd /var/www/html/dist/css
• wget ‘https://github.com/ostranme/swagger-ui-themes/archive/master.zip’
• zip master.zip
• cp swagger-ui-themes-master/themes/theme-feeling-blue.css
• cd /var/www/html/dist/
• vim index.html

<link href="css/theme-feeling-blue.css" media="screen" rel="stylesheet" id="sut" type="text/css">

を head タグの <!-- Some basic translations --> の直下にコピペします
そして再度 http://xxx.xxx.xxx.xxx/dist/ にアクセスするとスタイルが変わっていると思います

最後に

swagger ui でスタイルを変更する方法を紹介しました
公式の swagger ui は go-swagger で表示させた ui のスタイルとは全く違うデザインになっていました

今回はすでに公開されているスタイルを使いましたが、直接 css や html を変更しても問題ないと思います

参考サイト

• https://github.com/swagger-api/swagger-ui/issues/146
• http://swagger.io/docs/#swagger-ui-documentation-29