Upgrade to Pro — share decks privately, control downloads, hide ads and more …

カラースキーム自作のすすめ

 カラースキーム自作のすすめ

https://gorillavim.connpass.com/event/283937/
それぞれの.vimrcが公開されているようにカラースキームも公開されるといいなと思って作りました
Vim公式が使用しているカラースキーム作成プラグイン https://github.com/lifepillar/vim-colortemplate を使えば簡単にカラースキームを作成することができます(Vimのカラーテンプレートも↑でビルドされている)

Pairsのカラースキームはこちらから
https://github.com/satorunooshie/pairscolorscheme

その他のリンクはこちらから
https://speakerdeck.com/cocopon/creating-your-lovely-color-scheme?slide=15
https://github.com/vim/colorschemes
https://github.com/tomasr/molokai
https://github.com/cocopon/iceberg.vim
https://vim-jp.org/vim-users-jp/2010/01/13/Vim-10.html
http://mswift42.github.io/themecreator/
http://bytefluent.com/vivify/
https://github.com/lifepillar/vim-colortemplate

Satoru Kitaguchi

June 30, 2023
Tweet

More Decks by Satoru Kitaguchi

Other Decks in Programming

Transcript

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

    View Slide

  2. 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を書いたり、ロードバイクやサッカーをしたりします

    View Slide

  3. © 2023 eureka, Inc. All Rights Reserved.
    Mission
    人生に「あってよかった」と思ってもらえるものを。

    To provide a life-changing service that people will remember with great fondness.

    View Slide

  4. © 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.

    View Slide

  5. © 2023 eureka, Inc. All Rights Reserved.

    View Slide

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

    View Slide

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

    View Slide

  8. 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

    View Slide

  9. 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.

    View Slide

  10. 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.

    View Slide

  11. 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.
    ハイライトグループに色や書式を設定すること
    ハイライトグループに色や書式を設定しなければデフォルトが適用される

    View Slide

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

    View Slide

  13. 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

    View Slide

  14. 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

    View Slide

  15. 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

    View Slide

  16. 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の抜粋 実際の記述

    View Slide

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

    View Slide

  18. 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)

    View Slide

  19. 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

    View Slide

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

    View Slide

  21. 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や自分が使用しないオプションについても考えた方が良いですが、
    カラースキーム自作の敷居を下げるために割愛します

    View Slide

  22. 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. コンセプト・テーマ設定

    View Slide

  23. 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. コンセプト・テーマ設定

    View Slide

  24. 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

    View Slide

  25. 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がオンの場合に適用

    View Slide

  26. 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の色見本の一覧
    現在有効なグループの一覧
    属性がセットされた
    グループの一覧

    View Slide

  27. 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 が公開されているように
    自作のカラースキームがたくさん公開されるといいなと思いました

    View Slide

  28. 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

    View Slide