こんにちは。 マネーフォワードでインターン中の牧田です。
先日マネーフォワードのvimカラースキームを（勝手に）作ったので簡単に紹介します。
背景
vimに限らず、エディタを使う上でカラースキームは重要な要素です。 そして、個々人で好みも多種多様です。
みなさんの中にも、好みに合ったカラースキームを中々見つけられず、妥協しつつも既存のものから選んだという人も多いのではないでしょうか。
私もカラースキームに対して特別に情熱を燃やしているわけではありませんが、既存のカラースキームは自分の好みにあと一歩届かずといったところでした。
「それならば自分で作ってしまおう」と考えました。 偶然ながら個人的に好きな色であるオレンジと青が、マネーフォワードのコーポレートカラーとプロダクトカラーということもあり、それをマネーフォワードのカラースキームにしようと思いました。
多少強引かもしれませんが、マネーフォワードのカラースキームであれば愛着も沸き、社内、社外にも共有できるので自分一人で完結させるよりも意味のあるものになります。 ということで、カラースキームの簡単な作り方と共に共有させていただきたいと思います。
カラースキームの作り方(vim)
今回私が作ったものがこちらです。
https://github.com/anoike/vim-moneyforward
GUI未対応です。すみません。
カラースキームを作る際に既存のものをいくつか参考にしました。
vimのカラースキームを見るならこちらのサイトがおすすめです。
カラースキームを作るときは.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> <属性>=<指定する色>
とします。hiはhilightでも構いません。
あとはこれを各グループに対して指定していきます。ゼロから指定するのは大変だと言う方は、グループ、属性について理解した上で既存のカラースキームの色を置換してみるといいかもしれません。
言語別に色指定
最後に特定の言語に対して色を指定する方法です。
vimではここまで色を指定できるグループは:help {group-name}と:help highlight-groupsで確認できると説明しましたが、vimでは各言語ごとに構文ハイライトグループを定義することができます。
ある一つの言語用の構文とハイライト色定義コマンドは通常1つのファイルによってデフォルトで定義されいます。 この構文ハイライトグループはこれまでに説明したグループと同様に扱うことができ、グループ名は通常言語名を接頭につけた形となります。
例えば、rubyであればrubyStringやrubyFunctionといった具合です。
これらを利用して言語ごとに色を指定することができます。
例)rubyの文字列に色を付ける場合
hi rubyString <属性>=<指定する色>
今回カラースキームを作る上で利用した知識は以上です。
まとめ
カラースキームを作る上で配色を決めるのが一番難しかったです。 こればかりはセンスが問われます 笑
今回紹介したものを利用すれば満足の行くカラースキームが作れると思います。 いつも付き合うエディタを少しでも愛着のわくものにするためにみなさんもぜひ作ってみてください。
もし、moneyforwardのカラースキームが気に入りましたら、使っていただけますと幸いです。
ありがとうございました。
最後に
マネーフォワードでは、エンジニアを募集しています。 ご応募お待ちしています。
【採用サイト】 ■マネーフォワード採用サイト ■Wantedly | マネーフォワード
【プロダクト一覧】 自動家計簿・資産管理サービス『マネーフォワード』 ■Web ■iPhone,iPad ■Android
ビジネス向けクラウドサービス『MFクラウドシリーズ』 ■会計ソフト『MFクラウド会計』 ■確定申告ソフト『MFクラウド確定申告』 ■請求書管理ソフト『MFクラウド請求書』 ■給与計算ソフト『MFクラウド給与』 ■経費精算ソフト『MFクラウド経費』 ■入金消込ソフト『MFクラウド消込』 ■マイナンバー管理ソフト『MFクラウドマイナンバー』 ■資金調達サービス『MFクラウドファイナンス』
メディア ■くらしの経済メディア『MONEY PLUS』
