こんにちは、Vimカッコイイ計画実行委員会（総員1名）のcocoponです。コツコツ製作していた新生Vimカラースキームギャラリー「colorswat.ch」を、本日公開します。

前作「Vim Colorscheme Gallery」から3年。見えてきた課題

前作「[Vim Colorscheme Gallery][vag]」を公開してから、もう3年が過ぎてしまいました。あれからカラースキームは増え続け、それらを取りまく状況はいくらか変わって、いい感じのまとめサイトもいくつか生まれました。

自分自身といえば変わらずカラースキームが大好きで、ウォッチ自体は継続していました。しかしながら、肝心のサイト更新は滞っていたのです。なぜか？

運用コストの改善

更新が滞った主な原因は、運用コストを甘くみていたことです。ここでいう「コスト」は、主に時間のこと。

前作はカラースキームのデータを抽出するフローが脆く、環境を選び、ちょっとした変化ですぐに動かなくなってしまうものでした。原因は非常にやっかいなもので、修正するには仕組みそのものから見直す必要があり…そのうち面倒になり、更新の手が止まってしまいました。

利益も出ない完全自己満足プロジェクトとなると、いくらでも放置できてしまいます。「いかに省エネルギーで更新できるか」ということがとても重要なのだと気づかされました。

この反省を活かして、新版では環境を選ばない安定したデータ抽出の仕組みが構築されています。

愛がないと実現できない「おすすめ」と、ぜんぶ見たい人のための「新着」

先にも書いたとおり、昨今いい感じのまとめサイトがいくつか誕生しており、その完成度にやや焦りを感じるものもありました。が、いずれも一番大きな問題が解決されていません。それは、

「たくさんありすぎて選べない」

ということです。

この問題を解決するために、colorswat.chでは前作に引き続き、プロ（？）の目が厳選した「おすすめ」を一覧することができます。カラースキームを並べたところで利益なんて出ませんから、企業でやろうにも採算は取れないでしょう。これは愛がないとできないことであり、個人の趣味でやることの強みです。（カラースキームを愛でることで暮らしていけるならば全力でそうしたいところですが、人生そんなに甘くはないようです）

掲載数が増えてくると、問題を抱えたカラースキームもちらほら出てきます。試用してみた結果に特記事項があれば、メモとして見られるようにしました。

これも愛のなせる業…。

いい感じのカラースキームはそう頻繁に出てくるものではないので、物足りないよ、自分で探したいよという人も出てくると思います。そのため「新着」一覧機能も用意して、収集したものすべてを閲覧できるように改善されました。

加えて、「スター数」や「最終アップデート日」など、様々な切り口で探せるようになりました。

3年で進化したデザイン。Source Code Proの美しさを堪能してくれ

前作から3年が経ち、業務や趣味で手を動かし続けた結果、デザインスキルもいくらか向上したようです。前作は非常に迷い、苦しみながらデザインした記憶があります。

余白の取りかたが全体的に垢抜けてない、リズムが悪い、…などなど、今だからわかる改善点がたくさん。Vimっぽさが必要なのかなぁと思って最上部にVimグリーンの線を入れたのですが、これは完全に蛇足でしたね。

新作はこんな感じです。

作っていてあらためて実感したのですが、わたくしこの「Source Code Pro」というフォントが本当に大好きなんですね。見れば見るほど「いい…」という感情しか湧いてこなくて、もうこれは全面Souce Code Proで、文字中心のデザインにしようって決めました。Source Code Proを存分にご堪能くださいませ。

あ、今回もちゃんとモバイル対応しています。通勤中に突然カラースキームが眺めたくなっても大丈夫ですよ。

技術のキャッチアップ: React + Redux

前回、サーバー側の実装はRuby (Sinatra)でした。正直言うとしばらく触らないうちにすっかり忘れてしまって、これも更新を遠ざける理由のひとつになっていました。

今回、サーバー側の実装はNode.js (Express)です。JavaScriptはいま個人的に一番触っていて、今後もしばらくお付き合いは続くだろうなぁといった感じ。忘れようにも忘れられません。

クライアント側は、React + Reduxです。React自体は前からお世話になっていたのですが、Reduxとあわせて本格的に組むのははじめての挑戦でした。幾多のリファクタリングを乗り越え、だいぶいい感じに書けるようになった気がするので、もう少し整理したらソースコードをまるっと公開したいな…という野望があります。

ガンガン使って & レコメンド歓迎！

というわけで、新生Vimカラースキームギャラリー「colorswat.ch」のご紹介でした。

前作同様、あなたの推しカラーがなかった場合のレコメンド機能が搭載されています。「推しがいない！センスねぇな！プンプン！」というかたは、シュッとご報告いただけるとうれしいです！

余力があれば…余力さえあれば…シュッと動くカッコいいモーション入れたいし、類似検索やレコメンドシステムみたいな便利機能も搭載したい…！カラースキーム道の追究はまだまだ楽しめそうです。