Kohara's Blog

KoharaKazuya
職業はプログラマーです。趣味がプログラミングです。Web 技術が好きで、中でもフロントエンドの JS, HTML, CSS が好きです。得意なのは TypeScript, CSS, AWS, シェル芸です。

RGB ↔ HSL などの色表現を変換するツールを作った

tl;dr

  • cocore を作った
    • RGB ↔ HSL などの色表現を変換する CLI ツール

cocore の紹介

cocore を作った。

RGB, HSL, Hex 形式の色表現を CLI で相互変換するコマンド。

RGB rgb(255, 0, 0) ↔ HSL hsl(0, 100%, 50%) ↔ Hex #F00 といった感じで CSS 形式の表現を変換できる。

使用例

$ cocore --to=rgb '#f00'
rgb(255, 0, 0)
$ echo 'hsl(0, 100%, 50%)' | cocore
#F00

なぜ作ったか

GUI が必要なツールなどを作るとき、配色を決める際に HSL で色相かトーンを固定しつつ色を量産することが多い。 その際に HSL 形式で直接指定できれば楽だが、RGB 形式または Hex 形式でしか受け付けていないことがままある。 変換するツールはインターネットにいくらでもあるが手元でサッとやりたかったのと、ジェネレーターなどのスクリプトに組み込みたかったので。

使い方

バイナリファイルを実行可能にしてパスを通すだけ。 macOS ユーザーは Homebrew でインストールできる。

インストール後、ヘルプ表示。

$ cocore -h

詳細は GitHub の README で。

使ったツールの感想

Rust で作った。Rust 2018 Edition を試したかったので。 といってもモジュール周りが楽になった!ぐらいの使い方しかしてない。

Rust の Linter として Clippy を使った。 元々 VSCode の Rust (rls) 拡張に組み込まれているようで、オプションで有効にするか #![warn(clippy)] を指定することで、リアルタイムでアドバイスされるようになる。しばらく気づいてなかった。

rgb(255, 0, 0) などの文字列をパースするために、cssparser という crate を使っている。 これ Servo organization のリポジトリだ。見つけたときは興奮した。

テストとビルドのため、CircleCI を使った。 macOS と Linux 両方のバイナリを作りたかったので、TravisCI を最初試していたがローカルコマンドのために Gem のインストールを要求されて失敗したり、YAML のフォーマットが理解しにくい感じだったりといまいち感が出てきたため CircleCI にした。 が、そちらでも Rust の macOS 向けクロスコンパイルで失敗して原因がわからなかったので諦めて手元でビルドするようにした。

バイナリの配布のために GitHub Releases と Homebrew を使った。 Homebrew の Formula を作るのは今回が初。思っていたより簡単にできた。


cocore のアイデアや解決したこと自体が微妙なので記事を書いててテンションが上がらない。 作っている最中の勉強がメインの成果だった。