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

この記事はKAYAC Advent Calendar 2021の16日目です。

こんにちは。新卒サーバサイドエンジニアのみんと*1です。

皆さんは、次世代の肉体を手に入れ、来たるべき新時代に備えたいと思ったことがありますか？

僕はあります。

ということでUnityを使って電子上に存在可能な新たなる肉体を手に入れていきたいと思います。

Unityで新しい肉体を作る

次の3ステップで新しい顔を作っていきます。

1. 新たなる肉体となる依代を用意する

絵を描きます。

とりあえずのプロトタイプボディとして、顔と髪を用意しました。

f:id:otama_jaccy:20211216082916p:plain — 依代

2. 古い肉体の情報を取得する

Unityで顔のパーツを取得するために、OpenCV for UnityとDlib FaceLandmark Detectorを利用しました。どちらも有料のアセットですが、セールで半額になってるので買うなら今*2がおすすめです。

Dlib FaceLandmark Detectorは、画像から目や口などの形状推定をしてくれるライブラリです。カメラから取得した画像を、このライブラリに渡してあげると次の図のように、顔のランドマークの座標を教えてくれます。

3. 古い肉体の情報を元に、Unity上に新たな目や口などを構成し表情を作る

2で取得した情報を1で用意した依代に埋め込みます。

f:id:otama_jaccy:20211216082944p:plain — 依代に取り込まれたボーン

完成品

上の３つの工程を経て、新しい肉体が出来上がります。

f:id:otama_jaccy:20211216083917g:plain — 次世代の肉体

おわりに

以上です。いかがでしたか？カヤックでは次世代の肉体を手に入れたい社員を募集中です。

www.kayac.com

*1:本名

*2:2021年12月16日現在

KAYAC engineers' blog

GitHubの 👎でウッとならないように魔改造してみた話

この記事をざっくり要約すると

はじめに

CSSで改造してみる

さらなる魔改造へ

回る

回る+震える

回る+震える+レインボー

魔改造を簡単に試せるChrome拡張を作ってみた

おわりに

追記

Unityを用いた肉体の進化について

Unityで新しい肉体を作る

1. 新たなる肉体となる依代を用意する

2. 古い肉体の情報を取得する

3. 古い肉体の情報を元に、Unity上に新たな目や口などを構成し表情を作る

完成品

おわりに