© 2023 eureka, Inc. All Rights Reserved. カラースキーム自作の すすめ June 30th, 2023 ゴリラ.vim

2 © 2023 eureka, Inc. All Rights Reserved. CONFIDENTIAL INFORMATION: Not for Public Distribution - Do Not Copy All Hands Meeting Satoru Kitaguchi June 30th, 2023 © 2023 eureka, Inc. All Rights Reserved. eureka 23年入社 Back-end engineer 業務では決済基盤やPairsの機能開発に携わっています 休日はGoやCを書いたり、ロードバイクやサッカーをしたりします

© 2023 eureka, Inc. All Rights Reserved. Mission 人生に「あってよかった」と思ってもらえるものを。
 To provide a life-changing service that people will remember with great fondness.

© 2023 eureka, Inc. All Rights Reserved. Vision かけがえのない人との出会いを生み出し、
 日本、アジアにデーティングサービス
 文化を定着させる。
 To help people find their life partner and make dating services a social norm in Japan and Asia.

© 2023 eureka, Inc. All Rights Reserved.

© 2023 eureka, Inc. All Rights Reserved. Vim カスタマイズ してますか

© 2023 eureka, Inc. All Rights Reserved. カラースキーム こだわってますか

8 © 2023 eureka, Inc. All Rights Reserved. CONFIDENTIAL INFORMATION: Not for Public Distribution - Do Not Copy All Hands Meeting ’17年の調査結果 © 2023 eureka, Inc. All Rights Reserved. https://speakerdeck.com/cocopon/creating-your-lovely-color-scheme?slide=15

9 © 2023 eureka, Inc. All Rights Reserved. CONFIDENTIAL INFORMATION: Not for Public Distribution - Do Not Copy All Hands Meeting 今日のゴール カラースキーム 意外と簡単に作れるじゃん と思ってもらうこと © 2023 eureka, Inc. All Rights Reserved.

10 © 2023 eureka, Inc. All Rights Reserved. CONFIDENTIAL INFORMATION: Not for Public Distribution - Do Not Copy All Hands Meeting ● カラースキームを作るとは ● 用語の説明 ● 簡単な変更をしてみる ● カラースキーム自作の流れ ● まとめ Agenda © 2023 eureka, Inc. All Rights Reserved.

11 © 2023 eureka, Inc. All Rights Reserved. CONFIDENTIAL INFORMATION: Not for Public Distribution - Do Not Copy All Hands Meeting カラースキームを作るとは © 2023 eureka, Inc. All Rights Reserved. ハイライトグループに色や書式を設定すること ハイライトグループに色や書式を設定しなければデフォルトが適用される

© 2023 eureka, Inc. All Rights Reserved. 用語の説明

13 © 2023 eureka, Inc. All Rights Reserved. CONFIDENTIAL INFORMATION: Not for Public Distribution - Do Not Copy All Hands Meeting ハイライトグループとは © 2023 eureka, Inc. All Rights Reserved. ● テキスト(Normal) ● ステータスライン(StatusLine) ● 行番号(LineNr) ● 補完のポップアップ(Pmenu) ● quickfixリスト(QuickFixLine) ● コメント(Comment) ● 定数(Constant) ● 変数(Identifier) ● 命令文(Statement) ● プリプロセッサ命令(Preproc) :hi[ghlight] {group-name} {key}={arg} ... Vim本体の部品で使う
 ハイライトグループ
 Syntax機能で使う
 ハイライトグループ
 :help group-name :help highlight-groups

14 © 2023 eureka, Inc. All Rights Reserved. CONFIDENTIAL INFORMATION: Not for Public Distribution - Do Not Copy All Hands Meeting CUIとGUIの色定義 © 2023 eureka, Inc. All Rights Reserved. cterm Boldやunderlineなどの修飾設定 ctermfg 文字色設定。色番号で指定する ctermbg 文字背景設定。色番号で指定する gui Boldやunderlineなどの修飾設定 guifg 文字色設定。色番号で指定する guibg 文字背景設定。色番号で指定する :hi[ghlight] Comment term=bold ctermfg=Cyan guifg=#80a0ff gui=bold CUI GUI

15 © 2023 eureka, Inc. All Rights Reserved. CONFIDENTIAL INFORMATION: Not for Public Distribution - Do Not Copy All Hands Meeting ハイライトのリンク © 2023 eureka, Inc. All Rights Reserved. :hi[ghlight][!] [default] link {from-group} {to-group} ハイライトにはリンク機能があり、 特定のハイライトグループを別のハイライトグループの書式と同じにすることができる :h group-namesで*がついているグループだけを最低限定義すれば良い デフォルトでリンクされているのは11個 定義しなければデフォルトのハイライトが使用される *Comment, *Constant, *Identifier, *Statement, *PreProc, *Type, *Special, *Underlined, *Ignore, *Error, *Todo

16 © 2023 eureka, Inc. All Rights Reserved. CONFIDENTIAL INFORMATION: Not for Public Distribution - Do Not Copy All Hands Meeting ハイライトのリンク © 2023 eureka, Inc. All Rights Reserved. highlight default link String Constant highlight default link Character Constant highlight default link Number Constant highlight default link Boolean Constant highlight default link Float Number *Constant o 定数
 String o 文字列定数: "これは文字列です"
 Character o 文字定数: 'c', '\n'
 Number o 数値定数: 234, 0xff
 Boolean o ブール値の定数: TRUE, false
 Float o 浮動小数点数の定数: 2.3e10
 helpの抜粋 実際の記述

© 2023 eureka, Inc. All Rights Reserved. 簡単な変更をしてみる

18 © 2023 eureka, Inc. All Rights Reserved. CONFIDENTIAL INFORMATION: Not for Public Distribution - Do Not Copy All Hands Meeting 簡単な変更方法 © 2023 eureka, Inc. All Rights Reserved. :colorscheme name を実行する :colorscheme colorscheme1 Molokai color scheme for Vim cocopon/iceberg.vim for Vim 3. 一部カスタマイズ augroup MyVimrcCmd autocmd ColorScheme * call s:onColorScheme() augroup END function! s:onColorScheme() highlight DiffChange ctermbg=55 endfunction call s:onColorScheme() 2. 公開済みカラースキーム カスタマイズしたい部分だけ上 書きするように .vimrcに追記する ダウンロードして colors配下に置いて適用する 1. 標準のカラースキーム colorschemes for Vim (wikiにPreview)

19 © 2023 eureka, Inc. All Rights Reserved. CONFIDENTIAL INFORMATION: Not for Public Distribution - Do Not Copy All Hands Meeting カラースキーム使いのレベル10 © 2023 eureka, Inc. All Rights Reserved. Lv1 カラースキームの変更ができる Lv2 デフォルトのカラースキームを使うのをやめ、素晴らしいハイライトに自己陶酔する Lv3 自分でインストールしたカラースキームの数が5を越え、ダメカラースキームはすぐに判別できるようになる Lv4 自分で作ったカラースキームを vim.org でリリースし、何人かをLife Changingさせる Lv5 他のアプリケーション使用時に :colorscheme を打ってしまい、イラっとする日々を送る Lv6 カラースキームは当然 iceberg. solarized など人気カラースキームのバグを発見し、パッチ付きで報告する Lv7 Vim本体のSyntax周りのソースコードを読み、あまりの魔界に発狂する Lv8 独自のカラースキームを作り、vim_devに投稿する。当然採用されない Lv9 カラースキーム開発への貢献が日常になる。投稿し採用されたパッチ数が10を越える Lv10 神になる Vim使いのレベル10

© 2023 eureka, Inc. All Rights Reserved. カラースキーム自作の流れ 1. コンセプト・テーマ設定 2. テンプレートを埋める 3. 色の見え方を確認する

21 © 2023 eureka, Inc. All Rights Reserved. CONFIDENTIAL INFORMATION: Not for Public Distribution - Do Not Copy All Hands Meeting 1. コンセプト・テーマ設定 © 2023 eureka, Inc. All Rights Reserved. コンセプトがあった方が色の選定に迷わない ● 背景(background) ○ dark ○ light ○ 両方 ● カラー対応 ○ GUI ○ base256 ○ base16 ○ 全て Universal Colorや自分が使用しないオプションについても考えた方が良いですが、 カラースキーム自作の敷居を下げるために割愛します

22 © 2023 eureka, Inc. All Rights Reserved. CONFIDENTIAL INFORMATION: Not for Public Distribution - Do Not Copy All Hands Meeting © 2023 eureka, Inc. All Rights Reserved. ThemeCreator Create Color Themes for IntelliJ Editors, Atom, Emacs, TextAdept, Textmate, Vim and Gnome Terminal. ● 大まかな雰囲気の確認 ● Vim以外(Intellijなど)にも対応 ● そのままダウンロード可能 ● 複数のThemeのサンプル ● 複数のプログラミング言語対応 ○ JavaScript ○ Ruby ○ C ○ Python ThemeCreator 1. コンセプト・テーマ設定

23 © 2023 eureka, Inc. All Rights Reserved. CONFIDENTIAL INFORMATION: Not for Public Distribution - Do Not Copy All Hands Meeting © 2023 eureka, Inc. All Rights Reserved. Bytefluent | Vivify ● 各ハイライトグループが各言語のどの部分に対応するのかを ハイライトを実際に変更しながら、確かめることができる ● 数多くのカラースキームとその微調整を試すことができる Vivify 1. コンセプト・テーマ設定

24 © 2023 eureka, Inc. All Rights Reserved. CONFIDENTIAL INFORMATION: Not for Public Distribution - Do Not Copy All Hands Meeting 2. テンプレートを編集する © 2023 eureka, Inc. All Rights Reserved. lifepillar/vim-colortemplate ● シンプルでカスタマイズしやすい ● CUI・GUIどちらも対応できる ● 書き方も標準に揃えられる ● ベストプラクティスに従って生成できる ● Vim本体のお墨付き Vim本体のカラースキームも このテンプレートを使ってビルドされている 本体にマージされていない理由は分かりませんでした 誰かわかる方教えてください $VIMRUNTIME/colors/README.txt https://github.com/vim/colorschemes

25 © 2023 eureka, Inc. All Rights Reserved. CONFIDENTIAL INFORMATION: Not for Public Distribution - Do Not Copy All Hands Meeting 2. テンプレートを編集する © 2023 eureka, Inc. All Rights Reserved. メタデータ ヘルプドキュメント生成 リンク ハイライトグループに対して 割り当てするカラーの一覧 Terminal Colorの設定 (Optional) 色数・背景色 ファイルタイプ colortemplate ビルド方法 :Colortemplate! {path} ヘルプ :h colortemplate.txt GUIはgVimかterminalguicolorsがオンの場合に適用

26 © 2023 eureka, Inc. All Rights Reserved. CONFIDENTIAL INFORMATION: Not for Public Distribution - Do Not Copy All Hands Meeting 3. 色の見え方を確認する © 2023 eureka, Inc. All Rights Reserved. :hi :so $VIMRUNTIME/syntax/hitest.vim :so $VIMRUNTIME/syntax/colortest.vim Vimの色見本の一覧 現在有効なグループの一覧 属性がセットされた グループの一覧

27 © 2023 eureka, Inc. All Rights Reserved. CONFIDENTIAL INFORMATION: Not for Public Distribution - Do Not Copy All Hands Meeting まとめ © 2023 eureka, Inc. All Rights Reserved. テンプレートを使えば カラースキームが思ったより簡単に作れました たくさんの .vimrc が公開されているように 自作のカラースキームがたくさん公開されるといいなと思いました

28 © 2023 eureka, Inc. All Rights Reserved. CONFIDENTIAL INFORMATION: Not for Public Distribution - Do Not Copy All Hands Meeting まとめ © 2023 eureka, Inc. All Rights Reserved. をコンセプトにしたカラースキームを作ってみました(宣伝)
 非公式のカラースキームです https://github.com/satorunooshie/pairscolorscheme