astamuse Lab

astamuse Labとは、アスタミューゼのエンジニアとデザイナーのブログです。アスタミューゼの事業・サービスを支えている知識と舞台裏の今を発信しています。

GitLab Pagesで複数SwaggerUIを自動で公開する

こんにちは、開発部のomiです。
前回の投稿から7ヶ月が経っていてびっくりしました。絶対背が伸びたと思います。

今回は、現在携わっている新しいプロジェクトで導入した GitLab Pages について書きたいと思います。

経緯

今のプロジェクトではAPI設計にSwaggerを使用しました。

Swagger Specで書いた仕様は、最初はSwagger Codegenでhtml化し、毎回サーバにアップして公開していました。

修正の都度ローカルでhtml化し、サーバにアップする作業は面倒ですし、アップを忘れて仕様書と実装のずれが出てくる恐れもあります。

そこで、我がチームの頼れるリーダーイケマスこと池田さん lab.astamuse.co.jp に提案していただいた、GitLab Pagesでのhtml公開を行ってみることにしました。

↓GitLab Pages 公式 Document
GitLab Pages

手順

今回、この方の方法を真似してみることにしました。

gitlab.com

私たちのプロジェクトのSwagger Specは用途ごとに分かれており、それぞれを別のURLで同時に公開したかったので、少し工夫する必要がありました。
Swagger Specが一つだよ、という方は↑の方の設定のままで大丈夫です。

Projectの任意のフォルダにSwagger Specを配置する

project
.
├── README.md
├── api-docs
│   ├── api01
│   │   └── api01.yaml
│   ├── api02
│   │   └── api02.yaml
│   ├── api03
│   │   └── api03.yaml
│   ├── api04
│   │   └── api04.yaml
│   └── api05
│       └── api05.yaml

今回は api-docs というフォルダの下にyamlを配置しました。
先述の通りこのプロジェクトのSwagger Specは用途ごとに分かれていたのでそれぞれサブディレクトリに入れてあげる必要があります。

.gitlab-ci.yml に設定を記述する

.gitlab-ci.yml に以下の通り設定を記述します。

image: hseeberger/scala-sbt:8u181_2.12.6_1.2.3

variables:
    DOCS_FOLDER: "api-docs"

cache:
    paths:
        - ./node_modules

stages:
    - deploy

pages:
    image: node:10-alpine
    stage: deploy
    before_script:
        - npm install swagger-ui-dist@3.22.1
    script:
        - mkdir -p public
        - cp -rp $DOCS_FOLDER public/
        - cd public/$DOCS_FOLDER/
        - find . -mindepth 1 -type d -exec cp -p ../../node_modules/swagger-ui-dist/* {} \;
        - ls -1 | while read FILE ; do sed -i "s#https://petstore\.swagger\.io/v2/swagger\.json#${FILE}.yaml#g" ${FILE}/index.html ; done
    artifacts:
        paths:
            - public
    only:
        - develop

variables
Swagger Specを入れたフォルダを指定します。
pages:stage
html公開を走らせたいタイミング
pages:script
GitLabではpublicという名前のフォルダが公開対象と決まっているため、public配下にhtmlを配置してあげる必要があります。
DOCS_FOLDERで指定したSwagger Specを入れたフォルダをpublicフォルダにコピーし、各サブディレクトリ配下にswagger-ui-distフォルダをコピーします。
デフォルトでは公開するhtmlのurlがhttps://petstore.swagger.io/v2/swagger.json になっているので、ここをまるっとそれぞれのyaml / jsonの名前に変換します。
pages:artifacts
path:publicで生成されたジョブの成果物をジョブが成功した後にGitLabに送信します。

これが、developブランチのdeploy時に毎回走ることになります。

Swagger Specから生成されたhtmlが公開される

上記設定をしておくと、developブランチがdeployされたタイミングで

http://[Project].[GitLabのホスト]/[api-docsまでのパス]/api-docs/api01/

というようなURLでAPI仕様書が公開されます。

※イメージ

f:id:astamuse:20191109183606p:plain
swagger-ui-image

最後に

今までの方法だとサーバ上のhtmlとプロジェクトにpushされているyamlの内容が食い違うというようなことが起こり得ていましたが、
今回の対応でyamlと公開されるhtmlが連動するようになり、yamlの管理も徹底されるようになったのでとても良い効果だと思いました。

弊社ではエンジニア・デザイナーを募集中です!興味を持っていただけましたらバナーからよろしくお願いします!
以上です。読んでいただきありがとうございました。

SSL証明書の有効期限一覧を自動生成した話

こんにちは。開発部のtorigakiです。 弊社ではSSL証明書を使ったサイトが300以上ありますが、このSSL証明書の期限をEXCELなどを使って手作業で管理しようとするとなかなか大変な作業となります。

そこで自動的にSSL証明書の有効期限の一覧を生成する仕組みを作ってみましたので、今回はそのお話をさせていただければと思います。

route53からドメインリストを取得する

弊社ではDNS管理にroute53を使っていますので、route53をコマンドラインで使えるツールを使って運用ドメインの一覧を取得します。

ドメイン一覧の取得にはcli53を使用しました。

SSL証明書を使っているFQDNの一覧は以下のように取得します。

  • cli53 list にて運用ドメインを取得。
  • cli53 export ${DOMAIN}にて各ドメインごとのゾーンを取得し、そのゾーン情報からAレコードを取得。
  • Aレコード+ドメイン名からFQDNを取得。

上記で取得したFQDN一覧の中にはSSL運用していないサイトも含まれますので、SSL運用しているサイトに絞り込みます。 絞り込む方法は、opensslコマンドでアクセスし応答の有無で判定します。 opensslコマンドは以下のように実行します。 応答が返ってこないときの対策として先頭にtimeoutをつけて実行します。

timeout 3 openssl s_client -connect ${FQDN}:443 -servername ${FQDN} < /dev/null 2> /dev/null

上記で応答が返ってきたFQDNに対して、以下コマンドで有効期限を取得します。

openssl s_client -connect ${FQDN}:443 -servername ${FQDN} < /dev/null 2> /dev/null | openssl x509 -noout -startdate -enddate | grep notAfter

上記を実行すると以下の結果が得られます。

notAfter=Feb 13 12:00:00 2021 GMT

SSL証明書の発行署名者も一覧に加える場合は、以下コマンドにて発行署名者を取得します。

openssl s_client -connect ${FQDN}:443 -servername ${FQDN} < /dev/null 2> /dev/null | openssl x509 -noout -issuer

上記を実行すると以下の結果が得られます。

issuer= /C=US/O=DigiCert Inc/OU=www.digicert.com/CN=RapidSSL RSA CA 2018

上記3つを取得できたら、FQDN、発行署名者、有効期限 のCSV形式でファイルに出力します。

CSVファイルをHTMLファイルに変換する

ブラウザで一覧を見れるようにするため、生成したCSVファイルをHTMLに変換します。

変換はシェルスクリプトで実行します。変換スクリプトはこちらを参考にさせていただきました。

HTML形式に変換した結果、ブラウザにて以下のように一覧表示できるうようになります。

f:id:astamuse:20191029144212p:plain
SSL

まとめ

以上のように、cli53とopensslコマンドから情報収集してCSV出力し、HTML変換する処理を毎週1回cronで実行するようにしておけば自動的にはSSL証明書の期限管理をできるようになります。

またこの一覧とは別に、証明書期限が30日前になったらSlack宛に通知する仕組みも入れたりしてSSL証明書の更新忘れ防止をしております。

今回はSSL証明書期限管理について工夫した点について紹介させていただきました。 少しでもSSL証明書の運用されている方のお役に立てれば幸いです。

弊社では引き続きエンジニア・デザイナーを募集中ですので、ご興味のある方は下からご応募いただければと思います。

バリアブルフォントで遊ぼう

f:id:astamuse:20191024122921p:plain

はじめまして、フロントエンドエンジニアの minamo です。

趣味は映画鑑賞、特にアクション映画が大好きです。

今年は「イップ・マン外伝マスターZ」、「ジョン・ウィック : パラベラム」、 「HiGH&LOW THE WORST」と最高アクション映画が豊作でうれしいですね。

2月に astamuse にジョインしてから初めてのブログで、好きな映画以外書くことが思い浮かばなかったのですが、最近「バリアブルフォントがおもしろい!」と思ったので、ご紹介します。

バリアブルフォントって何?

バリアブルフォントとは、Adobe・Apple・Google・Microsoftが共同で開発したフォントの規格です。 Variable = 可変フォントとも呼ばれていました。

通常のフォントは字幅やウェイト、斜体などによってファイルが分かれていますが、バリアブルフォントだとそれらが ひとつのフォントファイルで利用できる のが特徴です。

ほとんどはウェイトの調整だけですが、書体によっては傾斜やフォント自体の形状など独自の数値を調整することができます。

f:id:astamuse:20191024123412p:plain
Photoshop の画面。 "VAR" とついているのがバリアブルフォントですね。

Photoshop や Illustrator で利用でき、デザイナー向けの話題と思われがちですが、もちろん Web font としても利用できます。

バリアブルフォントを CSS アニメーションと組み合わせたら楽しいのでは?!と思い、色々遊んでみることにしました。

ドキュメント

まずは MDN Web Doc を読んでみましょう。

Variable フォントガイド

バリアブルフォントを CSS で設定するときのプロパティ font-variation-settings も合わせて。

ウェイトや斜体の数値をこのプロパティで設定していくようです。

font-variation-settings

バリアブルフォントの対応状況

caniuse によるとブラウザでの対応状況はこのとおり。 ほとんど対応できています。

f:id:astamuse:20191024124014p:plain
https://caniuse.com/#search=variable%20fonts

バリアブルフォントをアニメーションさせてみよう

実際に動かしてみました。 まずはかんたんに font-weight のアニメーションから。

f:id:astamuse:20191024145111g:plain
League Spartan Variable

ソースはこちら

// HTML
<h1 class="zycon">
  astamuse
</h1>

// CSS
@font-face {
  font-family: 'LeagueSpartan';
  src: url('/LeagueSpartanVariable.woff2') format('woff2-variations');
}

.leagueSpartan {
  font-family: 'LeagueSpartan';
  display: block;
  font-size: 100px;
  color: #35495e;
  letter-spacing: 1px;
  animation: weight 2000ms infinite alternate;
}

@keyframes weight {
  0% {
    font-weight: 200;
  }
  100% {
    font-weight: 900;
  }
}

もうちょっとバリアブルフォントっぽいことがしたい!

font-weight 以外も動かしてみましょう。

さきほどの font-variation-settings でバリアブルフォント独自の数値を設定することができます。

f:id:astamuse:20191024145650g:plain
Handjet

// HTML
<h1 class="handjet">
  astamuse
</h1>

// CSS
@font-face {
  font-family: 'Handjet';
  src: url('/Handjet-VF.woff2') format('woff2-variations');
}

.handjet {
  font-family: 'Handjet';
  display: block;
  font-size: 100px;
  color: #35495e;
  animation: digit 2000ms infinite alternate;
}

@keyframes digit {
  0% {
    font-variation-settings: 'wght' 1, 'wdth' 400, 'opsz' 100;
  }
  100% {
    font-variation-settings: 'wght' 80, 'wdth' 400, 'opsz' 100;
  }
}

wght = font-weight のこと、など独自の値があります。

Dingbats(装飾記号)のバリアブルフォントもあるので、こっちの方がおもしろいかも。

f:id:astamuse:20191024145636g:plain
Zycon

// HTML
<h1 class="zycon">
  🐈
</h1>

// CSS
@font-face {
  font-family: 'Zycon';
  src: url('/Zycon.ttf');
}

.zycon {
  font-family: 'Zycon';
  display: block;
  font-size: 100px;
  color: #35495e;
  animation: meow 2000ms infinite alternate;
}

@keyframes meow {
  0% {
    font-variation-settings: 'T1  ' 0;
  }
  100% {
    font-variation-settings: 'T1  ' 1;
  }
}

ねこちゃんかわいいですねえええええ!!

ローディングアニメーションにもいいんじゃないでしょうか!

f:id:astamuse:20191024145705g:plain
いぬもかわいいです!

バリアブルフォントで遊べるサイト紹介

現在公開されているバリアブルフォントを閲覧できるサイトがあります。

数値をグリグリ調整してるだけで飽きずに遊べちゃいますよ。

Variable Fonts

数が多いですが、調子にのって遊んでいると重くなります。

Font Playground -- Play with variable fonts!

直感的な UI で数値をいじれます。

お気に入りのバリアブルフォント

f:id:astamuse:20191024144205p:plain
Fit

見たまま・超・カッコイイです。ラグランパンチっぽいですね。

f:id:astamuse:20191024144212g:plain
Pappardelle Party

ペカペカできて楽しい!かわいい!

未来へ

和文のバリアブルフォントはあるの?ということが気になると思います。日本人なので。

現時点(2019年10月)で調べた限り、ちょっと見つかりませんでした。。 バリアブルフォントでドープな日本語のサイトを作れる日はまだのようです。

モリサワの「タイプデザインコンペティション 2019」でもバリアブルフォント部門の募集があったそうですが、受賞作品…該当なし!ないんかい!

なんだかしまらないですが、astamuse ではいつでもエンジニア&デザイナーを募集しています。

日本語のバリアブルフォントあるよ!というツッコミのついででも良いので、おきがるにどうぞ!

Copyright © astamuse company, ltd. all rights reserved.