Quantcast
Channel: Vimタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 5608

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

$
0
0

はじめに

この記事は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に参加できたおかげですし、
参加できて心から良かったと思っています。

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

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


Viewing all articles
Browse latest Browse all 5608

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>