Help us understand the problem. What is going on with this article?

Vimで24bit カラーコードを素早く編集して Colorschemeを作成した話

はじめに

この記事はvim2 advent calendar 2019 17日目の記事です。

完成物は以下です。

自分で Colorscheme を作りたくなった

私は vim-gotham というcolorschmeを3~4年間ほど使用してきました。

このcolorschemeに非常に満足していたのは

  • 単純に色がいい
  • 端末のAnsi colors の設定も ここ にまとまっていて、Truecolorが使えないvimでも端末さえ設定すれば綺麗な色で使えた。

という点です。

ですが、少しずつ自分の好みとは違うなあと思い始めて、それをどうやって調整していたかというと
端末のAnsicolorを少しずつ調整して、vim側では notermguicolors で使っていたんですね。
これによってColorscheme自体には全く手入れすることなく、色合いだけを自分好みにできていたというわけです。(非常に情けないですが)

こんな本質的でないやり方をしていたのはひとえに、 「Colorscheme作るの、大変そうだし、難しそう」という思いからでした。

そんなとある日、私は VimConf 2019 に参加しました。

登壇されていた方のお話はそのどれもが素晴らしくて、1日が本当にあっという間でした。

この会場で直接vimのcolorschemeのお話を聞いたわけではないんですが、
私は、参加者皆様ののvimに対する熱意といいますか、こだわりといいますか、そういったものを感じているうちに、
自分が現状のcolorschemeに満足していないにも関わらず、妥協し、自分のニーズを満たすものを作ろうとしていないことに非常に 情けなさ・恥ずかしさ を覚えました。

そこで初めてcolorschemeを作成することを決意したのです。

とりあえず暗い背景のcolorschemeが完成した

vim-gotham の色を微調整しながら使っていた
ので、なんとなくこういうのが作りたいというイメージがありました。
ですので、それを目指しながらなんとか黒背景のcolorschemeを完成させました。

(commit でいうと このへん でしょうか)

iceberg という非常に洗練されたcolorschemeがあるのですが、
lightline の設定の仕方などは非常に参考にさせていただきました。大変感謝しています。

自分の好きなように作っただけあって、全体的な色合いには確かに満足できました。

しかしこの頃から以下の課題を感じ始めるようになりました。

課題1. 微妙な調整をしたくなることがある

完成したものを使っていると、度々「ここの色はもう少しこうしたい」というのが生まれてきます。
そのたびに色を少しずつ調整して試行錯誤するというのは辛いものがあります。

課題2. 同系統の色を基調とした明るい背景のcolorschemeもほしい

超有名なcolorschemeにsolarized というのがありますが、
これは dark / light と2種類用意されていて、背景が違えど全体的なコンセプトは統一されていて、気分でカジュアルに使い分けられるなど、どこか羨ましい思いがありました。

とはいえ、私はすぐにlight版のcolorschemeの作成に取り組むことはできませんでした。
黒背景のcolorschemeをひとつ作ってその大変さを痛感してしまい、
もう一回それをやるというのは気が進まなかったのです。

気づき: 色の編集、特に明度の調整がボトルネック

ある時、ひとつのことに気づきました。

私がcolorschemeの作成、とりわけ色の調整をしている時にいたずらに時間を消費しているのは
#abcdef ← こういうカラーコードを編集している時でした。

さらに言うと、個人的に色の調整を行うときに多い操作としては、特定の色の明るさを上げていく(或いは下げていく)というよりは、「明度をあげる」「明度をさげる」という調整をすることが非常に多かったです。

こうなると煩わしさは単色の調整の凡そ3倍で、R, G, B それぞれの値を16進数を意識しながらインクリメント、デクリメントするという操作の繰り返しでした。

vimには現在行にある(カーソル下、あるいはカーソル右側の)数字をインクリメント、デクリメントする<C-a>, <C-x> があるんですが、それと同じような感じで色を編集できたらどれだけ楽だろうと思うようになりました。

色のインクリメント・デクリメントの実装

そこで vim-colorrange を開発しました。
(正確には自分の .vimrc などに書いていたものを最終的にプラグインとして切り離しました)

demo

特に自分が課題としていた 明度の微調整 にすこぶる強いものを開発しようと思って作りました。

見ていただければ仕様は簡単に分かるとは思うんですが、

:ColorrangeIncrement を カーソルがカラーコードの #上、或いはそれより左の時に実行すればRGBそれぞれ1bitインクリメントした値に書き換わり、カーソルがカラーコード中にあるときは、その桁のみをインクリメントするというものです。

(カラーコードに色がついているのは https://github.com/lilydjwg/colorizer を使用しています)

Vimのデフォルトの <C-a>, <C-x> と同じように扱えるように私は

nnoremap <A-a> :ColorrangeIncrement<CR>
nnoremap <A-x> :ColorrangeDecrement<CR>

のようにマッピングして optionキーa or x でインクリメント or デクリメント を行っています。

プラグインの名前なんですが、color と arrange をいい感じに短縮したつもりなんですが、結果的に colorrange みたいになったので命名悪かったなと思っています。
(そういう意味で自分でも覚えやすいからよかったと思っている側面もあります)

回数の指定にも対応しているので 10<A-a> とかってやると 10bit 分 インクリメントしてくれます。

無事 light 版のcolorschemeも作成できた

上で紹介したのを使うと、あっという間にlight版もおおかた完成しました。
時間が短縮されたというのも大きいんですが、何より試行錯誤のストレスが激減して、colorschemeを作ることに全く抵抗を感じなくなりました。

以下が完成物ですので興味のあるかたはぜひ使ってみてください。

https://github.com/relastle/bluewery.vim

(まだ私の開発する範囲でしか色の調整をできていないので、プラグイン、言語によって見た目が酷い場合があると思います。ご了承ください。)

青色がベースのcolorschemeを意識したのと、私がビールが好きなので、
bluebrewery をいい感じに合わせて命名しました。

まとめ

本記事では 作ったcolorscheme
その過程でできたPluginについて紹介したんですが、
主題は 「VimConf 2019に参加したからこういう意欲が湧いた」 というところです。

colorschemeを作っても、自分だけで使っていればよいし、
色を編集する便利コマンドを作っても自分の .vimrc にベタ書きして使っていればよかったかもしれません。

それでも公開しようと思えたのは間違いなくVimConfに参加できたおかげですし、
参加できて心から良かったと思っています。

来年もぜひ参加させてください。

ありがとうございました。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away