Money Forward Developers Blog

株式会社マネーフォワード公式開発者向けブログです。技術や開発手法、イベント登壇などを発信します。サービスに関するご質問は、各サービス窓口までご連絡ください。

20230215130734

vimのカラースキームを作ってみた

こんにちは。 マネーフォワードでインターン中の牧田です。

先日マネーフォワードのvimカラースキームを(勝手に)作ったので簡単に紹介します。

背景

vimに限らず、エディタを使う上でカラースキームは重要な要素です。 そして、個々人で好みも多種多様です。

みなさんの中にも、好みに合ったカラースキームを中々見つけられず、妥協しつつも既存のものから選んだという人も多いのではないでしょうか。

私もカラースキームに対して特別に情熱を燃やしているわけではありませんが、既存のカラースキームは自分の好みにあと一歩届かずといったところでした。

「それならば自分で作ってしまおう」と考えました。 偶然ながら個人的に好きな色であるオレンジと青が、マネーフォワードのコーポレートカラーとプロダクトカラーということもあり、それをマネーフォワードのカラースキームにしようと思いました。

多少強引かもしれませんが、マネーフォワードのカラースキームであれば愛着も沸き、社内、社外にも共有できるので自分一人で完結させるよりも意味のあるものになります。 ということで、カラースキームの簡単な作り方と共に共有させていただきたいと思います。

カラースキームの作り方(vim)

今回私が作ったものがこちらです。

https://github.com/anoike/vim-moneyforward

GUI未対応です。すみません。

カラースキームを作る際に既存のものをいくつか参考にしました。

vimのカラースキームを見るならこちらのサイトがおすすめです。

http://vimcolors.com/

カラースキームを作るときは.vim/colors配下などに<カラースキームの名前>.vimのようなファイルを用意して、そこに色々と記述していきます。

はじめに、カラースキームは明るい背景と暗い背景で大きく2種類に別れます。

vimには明るい背景と暗い背景それぞれに合う色の組み合わせが用意されており、それらを使えるようにするのがset background=light,set background=darkという設定です。 多くのカラースキームの定義ファイルの冒頭にはこれらが記述されています。 今回はset background=darkとしました。

続いて、シンタックスハイライトを一度デフォルトに戻します。

hi clear
if exists("syntax_on")
  syntax reset
endif

こちらも多くのカラースキームの冒頭に記述されています。

let colors_name = "moneyforward" これでカラースキームの名前を設定できます。

ここからはいよいよ色を指定していきます。 色を指定するときに必要となるのはグループ名色を指定する属性指定する色の3つです。

グループ

vimには同じ構文(変数、関数等)を指すグループとそれ以外のvimで使われるもの(選択中の行、ステータスバー等)を指すグループが存在し、それぞれ :help {group-name}:help highlight-groupsで確認できます。

:help {group-name}

*がついているものは親グループで子グループの色を指定しない限り親グループの色が子グループに適用されます。

help group-nameでもグループを表示できますが、親グループしか表示されません。

グループ名 詳細
* Comment any comment
* Constant any constant
String a string constant: "this is a string"
Character a character constant: 'c', '\n'
Number a number constant: 234, 0xff
Boolean a boolean constant: TRUE, false
Float a floating point constant: 2.3e10
* Identifier any variable name
Function function name (also: methods for classes)
* Statement any statement
Conditional if, then, else, endif, switch, etc.
Repeat for, do, while, etc.
Label case, default, etc.
Operator "sizeof", "+", "*", etc.
Keyword any other keyword
Exception try, catch, throw
* PreProc generic Preprocessor
Include preprocessor #include
Define preprocessor #define
Macro same as Define
PreCondit preprocessor #if, #else, #endif, etc.
* Type int, long, char, etc.
StorageClass static, register, volatile, etc.
Structure struct, union, enum, etc.
Typedef A typedef
* Special any special symbol
SpecialChar special character in a constant
Tag you can use CTRL-] on this
Delimiter character that needs attention
SpecialComment special things inside a comment
Debug debugging statements
* Underlined text that stands out, HTML links

 

:help highlight-groups

グループ名 詳細
ColorColumn used for the columns set with 'colorcolumn' |
Conceal placeholder characters substituted for concealed | text (see 'conceallevel')
Cursor the character under the cursor |
CursorIM like Cursor, but used when in IME mode | CursorIM
CursorColumn the screen column that the cursor is in when 'cursorcolumn' is | set
CursorLine the screen line that the cursor is in when 'cursorline' is | set
Directory directory names (and other special names in listings) |
DiffAdd diff mode: Added line | diff.txt
DiffChange diff mode: Changed line | diff.txt
DiffDelete diff mode: Deleted line | diff.txt
DiffText diff mode: Changed text within a changed line | diff.txt
ErrorMsg error messages on the command line |
VertSplit the column separating vertically split windows |
Folded line used for closed folds |
FoldColumn 'foldcolumn' |
SignColumn column where | signs | are displayed
IncSearch 'incsearch' highlighting; also used for the text replaced with | ":s///c"
LineNr Line number for ":number" and ":#" commands, and when 'number' | or 'relativenumber' option is set.
CursorLineNr Like LineNr when 'cursorline' or 'relativenumber' is set for | the cursor line.
MatchParen The character under the cursor or just before it, if it | is a paired bracket, and its match. | pi_paren.txt
ModeMsg 'showmode' message (e.g., "-- INSERT --") |

基本的にはここで確認できるグループに対して色を指定していくことになります。 また、現在各グループに割り当てられている色は:highlightで確認できます。

属性

属性はcui用とgui用に別れ、以下のものがあります。

属性名 指定先 備考
guifg gvimの文字色 16進数カラーコードか定義済の色で指定
guibg gvimの文字背景 同上
gui gvimの文字属性 太字、斜体など
ctermfg cuiの文字色 ターミナルの色番号で指定
ctermbg cuiの文字背景 同上
cterm cuiの文字属性 太字、斜体など

色指定

色の指定はguiならカラーコード、cuiならターミナルの色番号を用いて行います。 ターミナルの色番号については こちら を参考に。

グループに対しての色の指定は上記の3つを利用して、 hi <group-name> <属性>=<指定する色> とします。hihilightでも構いません。 あとはこれを各グループに対して指定していきます。ゼロから指定するのは大変だと言う方は、グループ、属性について理解した上で既存のカラースキームの色を置換してみるといいかもしれません。

言語別に色指定

最後に特定の言語に対して色を指定する方法です。

vimではここまで色を指定できるグループは:help {group-name}:help highlight-groupsで確認できると説明しましたが、vimでは各言語ごとに構文ハイライトグループを定義することができます。

ある一つの言語用の構文とハイライト色定義コマンドは通常1つのファイルによってデフォルトで定義されいます。 この構文ハイライトグループはこれまでに説明したグループと同様に扱うことができ、グループ名は通常言語名を接頭につけた形となります。

例えば、rubyであればrubyStringrubyFunctionといった具合です。 これらを利用して言語ごとに色を指定することができます。

例)rubyの文字列に色を付ける場合 hi rubyString <属性>=<指定する色>

今回カラースキームを作る上で利用した知識は以上です。

まとめ

カラースキームを作る上で配色を決めるのが一番難しかったです。 こればかりはセンスが問われます 笑

今回紹介したものを利用すれば満足の行くカラースキームが作れると思います。 いつも付き合うエディタを少しでも愛着のわくものにするためにみなさんもぜひ作ってみてください。

もし、moneyforwardのカラースキームが気に入りましたら、使っていただけますと幸いです。

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

最後に

マネーフォワードでは、エンジニアを募集しています。 ご応募お待ちしています。

【採用サイト】 ■マネーフォワード採用サイトWantedly | マネーフォワード

【プロダクト一覧】 自動家計簿・資産管理サービス『マネーフォワード』 ■WebiPhone,iPadAndroid

ビジネス向けクラウドサービス『MFクラウドシリーズ』 ■会計ソフト『MFクラウド会計』確定申告ソフト『MFクラウド確定申告』請求書管理ソフト『MFクラウド請求書』給与計算ソフト『MFクラウド給与』経費精算ソフト『MFクラウド経費』入金消込ソフト『MFクラウド消込』マイナンバー管理ソフト『MFクラウドマイナンバー』資金調達サービス『MFクラウドファイナンス』

メディア ■くらしの経済メディア『MONEY PLUS』