kakakakakku blog

Weekly Tech Blog: Keep on Learning!

CircleCI 1.0 → 2.0 に設定ファイルをマイグレーションするために「config-translation API」を試した

2月末にアナウンスがあり,CircleCI 1.0 のサポートが終了することになった.時期は今年の8月末で,それまでにマイグレーションをする必要がある.単純にマイグレーションをするだけではなく,せっかくなら CircleCI 2.0 の新機能も積極的に活用したいと思っていて,最近調査をはじめた.今日は「config-translation API」の話をまとめる.

circleci.com

config-translation API とは?

CircleCI 2.0 では,今まで使ってきた circle.yml の記法が使えなくなり,CircleCI 2.0 の記法を使う必要がある(ディレクトリも .circleci/config.yml に変更になる).そこで CircleCI から公式に提供されている「config-translation API」を使うと,CircleCI 2.0 の記法に変換できる.ただし,ドキュメントにも書いてある通り,注意点(とポイント)が多くあった.

  • マイグレーションガイドとなるコメントが含まれている
  • 動作を保証するわけではないので,変換した設定ファイルで動作確認をすること
  • CircleCI 2.0 で使える「ワークフロー機能」は含まれないため,使う場合は自分で修正する必要がある
  • などなど

よって,スタンスとしては「CircleCI 2.0 の設定ファイルを学ぶために」今回の「config-translation API」を使うと良さそう.

circleci.com

試してみた

API は以下のエンドポイントになっている.今回は GitHub リポジトリを対象にするので :vcs-typegithub になる.

/project/:vcs-type/:username/:project/config-translation

ブラウザからアクセスすることもできるけど,今回は curl で API を叩くことにした.その場合は,事前に CIRCLE_TOKEN の取得が必要になる.Personal API Tokens の画面 ( https://circleci.com/account/api ) から,API を新規発行しておく.

f:id:kakku22:20180315005147p:plain

あとは API を叩くだけで,変換した結果が返ってくる.

$ CIRCLE_TOKEN=xxxxx
$ curl https://circleci.com/api/v1.1/project/github/kakakakakku/dotfiles/config-translation?circle-token=${CIRCLE_TOKEN}

学んだこと

変換した結果を抜粋しながら,CircleCI 2.0 の設定ファイルで学んだことをまとめておこうと思う.

Docker イメージを指定できるようになった

version: 2
jobs:
  build:
    (中略)
    # In CircleCI 1.0 we used a pre-configured image with a large number of languages and other packages.
    # In CircleCI 2.0 you can now specify your own image, or use one of our pre-configured images.
    # The following configuration line tells CircleCI to use the specified docker image as the runtime environment for you job.
    # We have selected a pre-built image that mirrors the build environment we use on
    # the 1.0 platform, but we recommend you choose an image more tailored to the needs
    # of each job. For more information on choosing an image (or alternatively using a
    # VM instead of a container) see https://circleci.com/docs/2.0/executor-types/
    # To see the list of pre-built images that CircleCI provides for most common languages see
    # https://circleci.com/docs/2.0/circleci-images/
    docker:
    - image: circleci/build-image:ubuntu-14.04-XXL-upstart-1189-5614f37
      command: /sbin/init

CircleCI 2.0 では,任意の Docker イメージを指定して CI を実行できるようになっている.CircleCI 1.0 では,2種類の VM (Ubuntu 12.04 (Precise) or Ubuntu 14.04 (Trusty)) から選ぶ仕組みになっていたため,VM に必要なツールなどをインストールする必要があったけど,構築済の Docker イメージを指定すれば,そのあたりを考慮する必要がなくなり,シンプルになる.ビルド時間の高速化もメリットだと思う.なお,以下のように Pre-Built CircleCI Docker Images も提供されているので,基本的には Docker を使うのがベストプラクティスになりそう.

circleci.com

ちなみに CircleCI 1.0 と同じく VM を使うこともできて,その場合は machine: true と書く.ただし,CiecleCI 2.0 だとあまり使う場面はなさそう.

jobs:
  build:
    machine: true

circleci.com

checkout するディレクトリを変更できる

version: 2
jobs:
  build:
    working_directory: ~/xxx/yyy
    (中略)
  # The following `checkout` command checks out your code to your working directory. In 1.0 we did this implicitly. In 2.0 you can choose where in the course of a job your code should be checked out.
  - checkout

CircleCI 1.0 だと,自動的にブランチが展開されていたけど,CircleCI 2.0 では意図的に checkout を含める必要がある.また working_directory の設定を変更することで,任意のディレクトリに変更することもできる.

コマンドは全て記載する

CircleCI 1.0 だと,例えばリポジトリに composer.json があれば,自動的に composer install が実行されていたけど,CircleCI 2.0 では自動実行の仕組みがなくなり,全て記載する必要がある.よって CircleCI 2.0 では,以下のように run: を使って composer install を実行する必要がある.

version: 2
jobs:
  build:
    working_directory: ~/xxx/yyy
    (中略)
    # The following line was run implicitly in your 1.0 builds based on what CircleCI inferred about the structure of your project. In 2.0 you need to be explicit about which commands should be run. In some cases you can discard inferred commands if they are not relevant to your project.
    - run: composer install --no-interaction

マイグレーションガイド

今回紹介した「config-translation API」を使わなくても,公式のマイグレーションガイドを使って書き換えていくこともできる.ただし,実際に設定を書いてみないとわからないことも多いので,結局はトライアンドエラーになる気がする.

circleci.com

まとめ

  • CircleCI 1.0 は今年の8月末でサポートが終了する
  • CircleCI 1.0 と CircleCI 2.0 の設定ファイルには互換性がなく,マイグレーションをする必要がある
  • 設定ファイルを変換する「config-translation API」が提供されている
  • 注意点が多いため「CircleCI 2.0 の設定ファイルを学ぶために」使うと良さそう
  • マイグレーションガイド(コメント)は非常に役に立った

chef-cookbooks/git を使って Git 2.x をインストールする

CentOS(例えば 6.9 など)で yum から Git をインストールすると,普通に Git 1.x になってしまうので,Chef 公式クックブックを使って Git 2.x をインストールできるようにした.基本的には GitHub を見ればわかるけど,自分用にメモを残しておく.

$ git --version
git version 1.7.1

github.com

git::source

Git Cookbook で Git をインストールする場合,大きく以下の2種類のレシピがある(Windows は除く).デフォルトは git::package になっているけど,今回は Git 2.x をインストールするため git::source を使うことにした.

  • git::package
  • git::source

git::source を使う場合,デフォルト設定が attributes に入っているので,レシピに以下のように書くだけで,簡単にインストールできてしまう.

include_recipe 'git::source'

なお,master ブランチの attributes だと,Git 2.9.5 に固定されている.

$ git --version
git version 2.9.5

任意のバージョンを指定する

現時点だと Git 2.16.2 が最新なので,attributes/default.rb に以下の設定を追加すれば,インストールすることができる.

default['git']['version'] = '2.16.2'
default['git']['checksum'] = 'cbdc2398204c7b7bed64f28265870aabe40dd3cd5c0455f7d315570ad7f7f5c8'

正常にインストールすることができた.

$ git --version
git version 2.16.2

attributes/default.rb にバージョンを指定するだけだと Chef::Exceptions::ChecksumMismatch でエラーになってしまうので,チェックサムも変更する.ただし,チェックサムは自分で計算する必要があるので,git のリリースバイナリをダウンロードして shasum -a 256 を実行する.

github.com

実際に Git 2.9.5 と Git 2.16.2 のチェックサムは以下のように確認することができる.

$ shasum -a 256 git-2.9.5.tar.gz
88995ab18154fa302478d33efa4418d354a5e592645ebef02c69b3dd76b526c1  git-2.9.5.tar.gz

$ shasum -a 256 git-2.16.2.tar.gz
cbdc2398204c7b7bed64f28265870aabe40dd3cd5c0455f7d315570ad7f7f5c8  git-2.16.2.tar.gz

時系列データベース InfluxDB の基本操作と Grafana 連携を試した

InfluxDB とは?

InfluxDB とは OSS で開発されている時系列データベースで,メトリクス/イベントなど,時系列データを扱うのに特化している.現在も活発に開発が進んでいて,先週に最新バージョンとなる InfluxDB 1.5.0 もリリースされている.CLI で操作できること,HTTP API で操作できること,クライアントライブラリが充実してること,Grafana と連携できることなどが,ポイントになる.

github.com

InfluxDB の導入事例を見ると,大きく以下の3種類に分類されていて,一般的なユースケースを知ることができる.

  • DevOps Monitoring
  • IoT and Sensor Monitoring
  • Real-Time Analytics

www.influxdata.com

また,InfluxDB 以外の時系列データベースで言うと,RRDtool と Graphite あたりはよく知られていると思う.あくまで参考としてだけど,DB-Engines の時系列データベースランキングを見ると,InfluxDB はずっと1位をキープしている.

InfluxDB インストール

InfluxDB の雰囲気を知るため,チュートリアルレベルの機能を試してみた.今回は最新バージョンの InfluxDB 1.5.0 を Mac にインストールした.特に難しいことはなく,brew 経由でインストールできた.

$ brew update
$ brew install influxdb
$ influxd -config /usr/local/etc/influxdb.conf

docs.influxdata.com

InfluxDB を試す

ドキュメントの Getting started に沿って,データベースの作成,時系列データの操作を試してみた.

docs.influxdata.com

まず,CLI で InfluxDB に接続する.接続時に指定する -precision rfc3339 はタイムスタンプの精度を意味していて,今回の例だと RFC3339 format (YYYY-MM-DDTHH:MM:SS.nnnnnnnnnZ) となる.

$ influx -precision rfc3339
Connected to http://localhost:8086 version v1.5.0
InfluxDB shell version: v1.5.0
>

InfluxDB でもデータベースを作成する.このあたりは SQL と操作感が似ている.

> CREATE DATABASE mydb

> SHOW DATABASES
name: databases
name
----
_internal
mydb

> USE mydb
Using database mydb

InfluxDB では measurement と呼ぶテーブルのような概念があり,measurement の中に tagsfields を登録する.タグはメタデータのようなイメージで,フィールドは実際の時系列データとして扱う.そして常に time がプライマリインデックスとなる.以下の例を見るとよくわかる.なお,時系列データの操作感は SQL に似ている.

  • measurement
    • cpu
  • tags
    • host=serverA
    • region=us_west
  • fields
    • value=0.64
> INSERT cpu,host=serverA,region=us_west value=0.64

> SELECT "host", "region", "value" FROM "cpu"
name: cpu
time                          host    region  value
----                          ----    ------  -----
2018-03-10T16:33:42.39199169Z serverA us_west 0.64
  • measurement
    • temperature
  • tags
    • machine=unit42
    • type=assembly
  • fields
    • external=25
    • internal=37
> INSERT temperature,machine=unit42,type=assembly external=25,internal=37

> SELECT * FROM "temperature"
name: temperature
time                           external internal machine type
----                           -------- -------- ------- ----
2018-03-10T16:34:13.758402578Z 25       37       unit42  assembly

あとはクエリを書くだけという感じで,例えば,全部の measurement から1レコードを取得するというおもしろクエリも書ける.

> SELECT * FROM /.*/ LIMIT 1
name: cpu
time                          external host    internal machine region  type value
----                          -------- ----    -------- ------- ------  ---- -----
2018-03-10T16:33:42.39199169Z          serverA                  us_west      0.64

name: temperature
time                           external host internal machine region type     value
----                           -------- ---- -------- ------- ------ ----     -----
2018-03-10T16:34:13.758402578Z 25            37       unit42         assembly

Ruby から InfluxDB に接続する

次は,Ruby からクエリを投げてみる.既に公式でクライアントライブラリが提供されているので,それを使うと簡単だった.

github.com

今回は以下で動いた.GitHub に書いてある通り,基本的な操作は全て実装されていた.

require 'influxdb'

influxdb = InfluxDB::Client.new 'mydb'

# {"name"=>"cpu", "tags"=>nil, "values"=>[{"time"=>"2018-03-10T16:33:42.39199169Z", "host"=>"serverA", "region"=>"us_west", "value"=>0.64}]}
puts influxdb.query 'SELECT "host", "region", "value" FROM "cpu"'

Grafana 連携

次は NOAA から提供されている「温度/水温など」のサンプルデータをインポートして,Grafana で可視化してみた.サンプルデータのインポートは,以下のドキュメントに載っている.

$ influx -precision rfc3339
Connected to http://localhost:8086 version v1.5.0
InfluxDB shell version: v1.5.0

> CREATE DATABASE NOAA_water_database
> exit

$ curl https://s3.amazonaws.com/noaa.water-database/NOAA_data.txt -o NOAA_data.txt
$ influx -import -path=NOAA_data.txt -precision=s -database=NOAA_water_database

$ influx -precision rfc3339 -database NOAA_water_database
Connected to http://localhost:8086 version v1.5.0
InfluxDB shell version: v1.5.0

> SHOW measurements
name: measurements
name
----
average_temperature
h2o_feet
h2o_pH
h2o_quality
h2o_temperature

docs.influxdata.com

Grafana も Mac にインストールした.

$ brew update
$ brew install grafana

docs.grafana.org

普段は Grafana 3 を使っているので,今回 Grafana 5 をインストールしたら,ログイン画面がオシャレになっていて驚いた!

f:id:kakku22:20180311223511p:plain

InfluxDB のデータソースを登録して,あとはポチポチとグラフ設定をすれば可視化できた.今回は「サンタモニカの平均気温」を可視化した.

f:id:kakku22:20180311223500p:plain

まとめ

  • 時系列データベース InfluxDB を試した
  • CLI を使えば SQL ライクな操作ができるので,すんなりと理解できた
  • クライアントライブラリも充実していて,今回は Ruby で試した
  • 可視化も Grafana を使えば困ることはなさそう

今後

今回 InfluxDB を試したとは言え,まだチュートリアルレベルなので,例えば以下など,もう1歩踏み込んで調査したいと思う.あと,あまり身近で InfluxDB の導入事例を聞いたことがなくて,どの程度使われているんだろう?

  • InfluxQL Continuous Queries
  • Downsampling
  • クラスタリング(スケールアウト)

どんな現場でもカイゼンできると勇気をもらえた /「カイゼン・ジャーニー」を読んだ

気になっていた「カイゼン・ジャーニー」を読んだ.どんな状況でも現場のカイゼンに挑戦したことがある人なら,誰しも自分自身に投影して「そうだそうだ!」と頷けるような内容だった.現場をカイゼンしたいけど難しいと悩む人がメインの読書層かもしれないけど,ある程度「カイゼン」の実践経験がある僕が読んでも,十分に楽しむことができた.冒頭に出てくる「あなたは何をしている人なんですか?」という質問は異常に刺さった.定期的に「僕は何をしている人なんだろう?」と問い続けたいと思う.

カイゼン・ジャーニー たった1人からはじめて、「越境」するチームをつくるまで

カイゼン・ジャーニー たった1人からはじめて、「越境」するチームをつくるまで

勇気をもらえるストーリー

本書は現場で悩む主人公を中心にしたストーリーになっている.特に「一人から始める」「チームで強くなる」「みんなを巻き込む」とステップを重ねていく流れと,どんな現場にもいるであろう「懐疑派代表(Fearless Change に出てくる)」のような登場人物が出てくるリアルさが良かった.

また,コラムと解説が多く入っているので,聞き慣れない用語とプラクティスがあったとしても,理解を深めながら読み進めることができた.僕も「ECRS(カイゼンの原則)」「ハンガーフライト」は今まで知らなくて勉強になった.そしてもう1点,特定のプラクティスに依存せず(型にハマらず),アジャイル,スクラム,カンバン,リーン,ファシリテーション,組織論などのプラクティスが集まっているのも良かった.

合わせて読む

本書を読んで「カイゼンするぞ!」と奮起した人たちに,合わせて読むと効果的な本を紹介する(一部は本書の中にも出てくる).本書はあくまでストーリーなので,コラムと解説が入っていたとしても,他の本と合わせて読む方が効果的だと思う.

カンバン仕事術

読んで以来,多くの人にオススメし続けている「カンバン仕事術」は「カイゼン・ジャーニー」とも相性が良いと思う.タスクマネジメント,タスクボード,完成の定義,WIP 制限など,チームを構成する前に知っておいて欲しいことがほとんど書いてある良書.

カンバン仕事術

カンバン仕事術

  • 作者: Marcus Hammarberg,Joakim Sundén,原田騎郎,安井力,吉羽龍太郎,角征典,?木正弘
  • 出版社/メーカー: オライリージャパン
  • 発売日: 2016/03/26
  • メディア: 単行本(ソフトカバー)
  • この商品を含むブログ (7件) を見る

Fearless Change

新しい技術に挑戦できなかったり,新しいアイデアが普及しなかったり,組織的な課題をカイゼンするための「バイブル」と言える「Fearless Change」も合わせて読むと良さそう.僕も実体験として,様々な組織課題を「Fearless Change」を活用して変革できた経験があり,とにかくお世話になっている良書.

Fearless Change アジャイルに効く アイデアを組織に広めるための48のパターン

Fearless Change アジャイルに効く アイデアを組織に広めるための48のパターン

  • 作者: Mary Lynn Manns,Linda Rising,川口恭伸,木村卓央,高江洲睦,高橋一貴,中込大祐,安井力,山口鉄平,角征典
  • 出版社/メーカー: 丸善出版
  • 発売日: 2014/01/30
  • メディア: 単行本(ソフトカバー)
  • この商品を含むブログ (16件) を見る

まとめ

  • 「カイゼン・ジャーニー」を読んだ
  • 現場をより良くカイゼンしたいと考える人の背中を押すストーリーになっていた
  • 最後の Appendix にプラクティスの一覧がまとまっているのが助かる
  • 親友の id:ykmc の名前が最後に載っていてすごく嬉しくなった

関連記事

「カンバン仕事術」の素晴らしさは以前にまとめた.

kakakakakku.hatenablog.com

本書にも出てきた「リーダーズインテグレーション」は「ザ・ファシリテーター」にも詳しく出てくる.

kakakakakku.hatenablog.com

「タックマンモデル」で言うところの「ストーミング」に近いけど,意図的に衝突を起こすことも重要で,そのあたりの知識をストーリーで学べる「あなたのチームは、機能してますか?」もオススメ.

kakakakakku.hatenablog.com

去年の「XP 祭り 2017」で登壇した資料も「カイゼン・ジャーニー」の読書層に参考になるかも!

kakakakakku.hatenablog.com

DevOps を普及させる側面だと「July Tech Festa 2017」で登壇した資料も参考になるかも!

kakakakakku.hatenablog.com

Code School の講義「Assembling Sass」で Sass に入門した

今まで使う機会がなくて未経験だった Sass に入門した.今さら Sass って言われる気もするけど,最近担当しているプロジェクトでフロントエンド技術の理解が必要になり,幅広く学ぶことにした.最近 Vue.js を学んでいるのも同じ理由だったりする.Sass を学んだメモを残しておこうと思う.

sass-lang.com

"Code School : Assembling Sass" を受講した

最近は動画コンテンツで学ぶことが多くなっていて,今回は「Code School : Assembling Sass」の LEVEL 1 を受講してみた.LEVEL 2 からは有料(毎月 $29)になってしまうので,他のコースも同時並行で受講する場合は払っても十分に効果が得られそう.今回は LEVEL 1 だけでも十分に楽しめた.

www.codeschool.com

  • LEVEL 1 : Foundation
  • LEVEL 2 : Variable
  • LEVEL 3 : Mixin
  • LEVEL 4 : Extend
  • LEVEL 5 : Directive
  • LEVEL 6 : Math + Color
  • LEVEL 7 : Responsive

なお,LEVEL 1 は YouTube にも動画が公開されている.

www.youtube.com

1.1 Sass, Not SASS

  • Sass を作った人って Haml を作った人だったんだ!知らなかった!
  • メタ言語としての「Sass」は「SASS」ではなく「Sass」と表記するのが正しい

1.2 SCSS: Sassy CSS

  • 記法は .scss.sass がある
  • 一般的には CSS ライクな .scss が普及している

1.3 Commenting

  • Sass のコメント記法は2種類ある
  • /* */ を使うと,コンパイル後にも反映される

1.4 Importing

  • パーシャルテンプレートを作ってインポートすることができる
    • @import を使う
    • テンプレートのファイル名は _ から始める
@import "buttons";

1.5 Nesting Selectors

以下のようにネストした Sass を書く.

.content {
  border: 1px solid #ccc;
  padding: 20px;
  h2 {
    font-size: 3em;
    margin: 20px 0;
  }
  p {
    font-size: 1.5em;
    margin: 15px 0;
  }
}

コンパイルをすると,ネストした構造がフラットに展開される.

$ sass application.scss --style expanded
.content {
  border: 1px solid #ccc;
  padding: 20px;
}
.content h2 {
  font-size: 3em;
  margin: 20px 0;
}
.content p {
  font-size: 1.5em;
  margin: 15px 0;
}

また,コロンを使うと,スタイルの名前空間(プレフィックス)を定義できる.

.btn {
    text: {
        decoration: underline;
        transform: lowercase;
    }   
}

例えば,上記のように text: と書いておくと,自動的に展開される.これは便利そう!

$ sass application.scss --style expanded
.btn {
  text-decoration: underline;
  text-transform: lowercase;
}

1.6 The Parent Selector

& を使うと,親のセレクターと合わせることができる.

.content {
  border: 1px solid #ccc;
  padding: 20px;
  .callout {
    border-color: red;
  }
  &.callout {
    border-color: green;
  }
}

&.callout と書くと .content.callout のように展開される..content .callout.content.callout の違いは,セレクターが階層で出現するか,同時に出現するかの違いとなる.

$ sass application.scss --style expanded
.content {
  border: 1px solid #ccc;
  padding: 20px;
}
.content .callout {
  border-color: red;
}
.content.callout {
  border-color: green;
}

hover などの状態を表現するときに & を1番よく使う.

a {
    color: #999;
    &:hover {
        color: #777;
    }
    &:active {
        color: #888;
    }
}

このように,展開することができる.

$ sass application.scss --style expanded
a {
  color: #999;
}
a:hover {
  color: #777;
}
a:active {
  color: #888;
}

1.7 Nesting Pitfalls

  • ネストしすぎると可読性が悪くなる
  • 3,4階層になったらリファクタリングを検討する

"Sass Basics" を読んだ

「Code School : Assembling Sass」を受講した後は,公式ドキュメントの「Sass Basics」を読みながら他の機能を試した.気になったポイントをザッとまとめる.

sass-lang.com

sass --watch

コンパイル結果を標準出力に表示することもできるけど,アウトプットファイルを指定すると,コンパイル結果を書き出すことができる.さらに --watch を使うと,SCSS を更新したら自動的にコンパイルできるようになる.また,コンパイル時に --style expanded を付けると,カッコの位置なども見やすく表示される.

$ sass --watch app/sass:public/stylesheets
$ sass --style expanded --watch app/sass:public/stylesheets

Mixin

Mixin の考え方が Sass にもあると知れて良かった.

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }

上記のように @mixin で Mixin を定義して @include で読み込むことができる.また引数を渡すことができるため,汎用的な Mixin を作ることもできる.

継承

Mixin とは異なり,階層関係が成り立つ場合は継承を使う.

%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.message {
  @extend %message-shared;
}

"ドットインストール" を見た

最後にドットインストールを見たところ,Code School のカリキュラムにも含まれていた Sass の機能も紹介されていて,参考になった.

  • @for
  • @while
  • @each
  • @function

特に色を変更する関数 lighten()darken() は非常に便利そうだった.以下のように割合を指定すると,自動的に色を変更してくれる.ただエンジニアの観点だと便利だけど,デザイナーの観点だと計算すると逆に読みにくくなる可能性もありそう.

$color: #ff0000;

p {
  color: lighten($color, 30%);
}
$ sass application.scss --style expanded
p {
  color: #ff9999;
}

ドキュメントを読むと,他にも多くの関数が用意されていた!おおー.

まとめ

  • 今さらながら Sass に入門した
    • 今回は "Code School" と "ドキュメント" と "ドットインストール" を活用した
  • オブジェクト指向のプラクティスを CSS に適用できるのは非常に良かった