自称ぎゃるなのでGitHubも可愛くしたい‼️🥺💖
この記事は、以下の投稿の裏話です〜！！🤩
初めまして、どこかで学生をしながらいろんなものを作っている @risako070310です🧸🎀
私は自称ぎゃるエンジニアなのでとにかく可愛いものが好きです。
せっかく買った無刻印US配列HHKBをどうしても可愛くしたいがためにしょうがなく無刻印を諦めてキーキャップを取り替えました。かわいい💜💙🩷🩵
左上のEscapeキーに関してはわざわざ裏の基盤を開けてCherryMX互換のAdapter-Xに付け替えました😺さすがにかわいすぎる🌟(HHKB高い買い物だったから基盤はがすのめっちゃこわかった)
💭突然ですがみなさん、GitHubのプロフィールは可愛いですか？
エンジニアには必須なGitHub、 見ての通りただのツール です。
あんまり草生えてないのバレる🥺
でもぎゃるなので可愛くしたいです。
特に草と呼ばれるコントリビューショングラフ、有名だし特徴的だけど可愛くはない…もっと頑張りを愛でたい、可愛いのがいい❗️❗️❗️(じたばた)(地団駄)
💡とりあえず可愛くしてみた
Arcというイケイケモダンな新感覚ブラウザをご存知でしょうか？
普段から愛用してる画期的ブラウザなのですが、その中にBoostという機能がありサイトごとにカラーテーマをいじることができます(詳しくはこちら)
早速、GitHubにカラーテーマを反映してみます…
か❣️❣️❣️わ❣️❣️❣️い❣️❣️❣️い❣️❣️❣️
さすがにかわいい❣️❣️❣️❣️❣️❣️
…ちょっと惜しい。
とっても可愛いんだけど私はぎゃるエンジニアなのでもっといい感じにしたい。
惜しいポイント🅿️
絵文字の色まで変わっちゃってくまさんがハロウィン🎃👻😈🧡💜って感じだし、ちょっとホラー。季節感的にはいいんですけどね！
けど、アイコンの画像とかはしっかり保たれてたり、要素ごとの色差分や判別はめちゃくちゃ精度高い。すんげーー🪅
💻ほな、欲しいやつ作るぞ
ないものは作る、それがエンジニアってやつです。
では、作りたいと思います。とにかくブラウザで表示するGitHubのページをかわいくすることに特化したいので、普段アプリ開発をメインにしていますが封印。Chrome拡張を実装するためにChatGPTと仲良くしたいと思います✨
そして、ムダエイティブクリエイターの@andex_tokyoにも協力してもらってほぼ1日で実装しました。
機能としては、GitHubのContribution Graphの色を変更できる。もしできたら画像とか入れれてもいいよね〜なんて甘い考えも🤔
実装はTypeScriptでGitHubページのDOMにアクセスし、CSSをゴニョゴニョいじる。そんな感じです。
超特急で実装したのでコードは綺麗じゃないですが、詳しい実装が気になる方はこちらのリポジトリを見てください⬇️
🎀できた
できた〜🥰
↑私が1番気に入ったカスタム！ポイントは1番頑張った日にはおぱんちゅうさぎが生えてるところです
Chrome拡張を選択するとこんな感じでポップアップを表示して、そこで設定した色が反映されます‼️
プリセットも用意したのでワンクリックで可愛くすることもできちゃいますｱｹﾞ⤴️
かわいすぎる‼️
1番苦労したところは、デフォルトに戻すボタンの設置です。自分の環境のみで作って満足していたらGitHubにはLightThemeとDarkThemeがあってハマりました…😿💦
⚙️公開した
Chrome拡張機能って死ぬほど簡単にリリースできました。ストアに一度リジェクトされてしまったりで公開まで1週間かかったのですが、無事に‼️ぎゃるの皆さんはぜひGitHubを可愛くしてみてください💖💖💖
我こそはかわいいGitHubを作れたよ〜という方は、ぜひ#kawaiigithubでツイートポストしてネ🛎️
✅今後
無事実装とストアへの公開ができたので、もっとぎゃるになれるアップデートも考えています❕
- 絵文字とか使いたい！！🥺
- プリセット増やしたい！！🎨
- 背景に画像を入れたい！🖼️
- 作ったプリセットを公開できるようにしたい！💡
ぜひこのChrome拡張を使ってGitHubでテンションあげていっぱいかわいい草生やしましょ〜💖
Discussion
余談ですが、可愛すぎるものに対して発生する「キュートアグレッション」という攻撃的反応をご存知でしょうか。要は、"人は可愛すぎるものを見ると、噛みつきたくなったりギュッと握ってしまいたくなるような衝動"とのことです。
つまり、自分のGitHubを噛みつきたいという気持ちにならない限り、まだまだこれ以上可愛いくできるはずです。
変な話で申し訳ございません。頑張ってください。