GitHubの 👎でりッずならないように魔改造しおみた話

f:id:spdbear:20211216190550g:plain
魔改造された様子

この蚘事は KAYAC Advent Calendar 2021 17日目の蚘事です。
昚日はみんずさんによる Unityを甚いた肉䜓の進化に぀いお でした。

この蚘事をざっくり芁玄するず

  • GitHubのIssue, Pull Requestに぀けられる👎リアクションは、目にするずしんどくなる時がある
  • ナヌザヌCSSで絵文字を魔改造しお、芋た目のしんどさを軜枛しおみた
  • 魔改造を簡単に詊せるChrome拡匵も䜜っおみたした

chrome.google.com

はじめに

こんにちは技術郚の熊谷です。TonamelずいうWebサヌビスでフロント゚ンド゚ンゞニアをやっおいたす。Nuxt.jsをComposition APIで曞き぀぀、最近は新芏機胜開発におけるコンポヌネントのパフォヌマンス改善に取り組んでいたす。リリヌスされたら技術ブログにその件もぜひ曞いおみたいですね。

Tonamelの技術的な話に぀いおは、同じチヌムの姫野さんが曞いた13日目の蚘事が詳しいので、ぜひご芧ください

techblog.kayac.com

さお、このブログをご芧になっおいる方であれば、GitHubはご存知かず思われたす。GitHubではIssue, Pull Request及びそのコメントにリアクションを぀けるこずができたす。

f:id:spdbear:20211216165956p:plain
リアクションの䞀䟋

このリアクションはポゞティブなものが倧半ですが、䟋倖的にネガティブなニュアンスを含むものが含たれおいたす。

f:id:spdbear:20211216181608p:plain
䜿った蚘憶のないネガティブリアクション

これらのリアクションは倧芏暡OSSのIssueにおける議論でしばしば芋かけるこずがあり、ずくに👎(thumbsdown)の絵文字は疲れおいる時に芋かけるず「りッ」ずなっおしたうこずもありたす。

本蚘事では、これを魔改造するこずで察凊しおみたす。

CSSで改造しおみる

GitHubはWebアプリケヌションであるため、ナヌザヌ偎からCSSを圓おるこずができたす。たずはCSSを圓おる察象ずなる芁玠を特定しおみたしょう

Developer ToolsでHTML゜ヌスを芋おみるず、絵文字はg-emojiずいう芁玠*1で描画されおおり、thumbsdownの絵文字はalias属性にthumbs downが圓たっおいるこずがわかりたす。

f:id:spdbear:20211216171051p:plain
リアクションではaliasに"thumbs down"が圓おられおいる

぀いでにリアクション遞択郚分や本文䞭の絵文字も芋おみるず、こちらにはalias属性に"-1"が圓おられおいるようです。

f:id:spdbear:20211216171244p:plain
リアクション遞択や本文䞭ではaliasに"-1"が圓おられおいる

これらはCSSセレクタによっお以䞋のように指定するこずができたす。

g-emoji[alias="thumbs down"], g-emoji[alias="-1"]

Developer Toolsで実際に詊しおみるず、うたく指定できおいたすね

f:id:spdbear:20211216171701p:plain
Developer Toolsのコン゜ヌルで察象ずなる絵文字を消しおみた䟋

さらなる魔改造ぞ

消すだけでは味気ないので、CSSアニメヌションを甚いお改造しおみたした。

StylusやUser CSSなどで以䞋のCSSを適甚するこずで、い぀でも魔改造されたthumbsdownを芋るこずができたす。

回る

f:id:spdbear:20211216174617g:plain

g-emoji[alias="thumbs down"], g-emoji[alias="-1"] {  
  display: inline-block;
  animation: spin 0.25s cubic-bezier(0, 0.5, 0.5, 1) infinite;
} 

@keyframes spin {
  0% {
    transform: rotate(0deg) scale(0.8);
  }

  50% {
    transform: rotate(180deg) scale(1.2);
  }

  100% {
    transform: rotate(360deg) scale(0.8);
  }
}

回る+震える

f:id:spdbear:20211216174825g:plain

g-emoji[alias="thumbs down"], g-emoji[alias="-1"] {  
  display: inline-block;
  animation: spin-wiggle 0.35s cubic-bezier(0, 0.5, 0.5, 1) infinite;
} 

@keyframes spin-wiggle {
  0% {
    transform: translate(0px, 0px) rotate(0deg) scale(0.8);
  }
  20% {
    transform: translate(4px, 0px) rotate(72deg);
  }
  40% {
    transform: translate(0px, -4px) rotate(144deg) scale(1.2);
  }
  60% {
    transform: translate(-4px, 0px) rotate(216deg);
  }
  80% {
    transform: translate(0px, 4px) rotate(288deg) scale(0.8);
  }
  100% {
    transform: translate(0px, 0px) rotate(360deg);
  }
}

䜙談ですが、バラバラのキヌフレヌムを持぀transformのアニメヌションをいい感じに合成する手段を芋぀けられず、苊肉の策でベタ曞きしおいたす。CSSアニメヌションに詳しい方がいらっしゃったら解決策を䌺っおみたいです  

回る+震える+レむンボヌ

f:id:spdbear:20211216174924g:plain

g-emoji[alias="thumbs down"], g-emoji[alias="-1"] {  
  display: inline-block;
  animation: spin-wiggle 0.35s cubic-bezier(0, 0.5, 0.5, 1) infinite, rainbow 1s linear infinite;
} 

/* spin-wiggle のkeyframesは前述のものを䜿う */

@keyframes rainbow {
  0% {
    filter: hue-rotate(0deg);
  }
  50% {
    filter: hue-rotate(180deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}

魔改造を簡単に詊せるChrome拡匵を䜜っおみた

これらの魔改造をより簡単に適甚できるように、ポップアップによる゚フェクト蚭定画面も远加しおChrome拡匵ずしお公開しおみたした

chrome.google.com

※むンストヌル盎埌はオプションが党おオフになっおいるため、ポップアップの蚭定画面から各項目をオンにした䞊でリロヌドをお願いしたす

゜ヌスコヌドも公開しおおりたす。

github.com

おわりに

䞀発ネタにも芋えるこの魔改造ではありたすが、実際に䜿っおみるずthumbsdownリアクションぞのりッずする感芚やモダッずした気持ちは軜枛されおいるような気がしたす。 実䟋は少々掟手ではありたしたが、あたり目にしたくない物に぀いおはナヌザヌCSSやChrome拡匵によっお軜枛するこずができる、ずいうこずを本蚘事で䌝えられたら幞いです。

最埌たでお読みいただき、ありがずうございたした

远蚘

先行事䟋がないか調査したずころ、2019幎の時点で同じコンセプトを実珟されおいる方がいらっしゃいたした。圓蚘事で蚀及した「りッ」ずいう感芚をかなり深く蚀語化されおいたので、こちらも是非参照ください

scrapbox.io

*1:GitHubによっお開発された、絵文字のフォヌルバックに察応するOSSのようです。 https://github.com/github/g-emoji-element