読者です 読者をやめる 読者になる 読者になる

Webナントカ

やっていくでおま

GitHubの:ok_man:のズレを直すためだけのChrome拡張機能を作った

やっていき 作ったシリーズ

「2017年イチ便利なChrome拡張機能を作った(2017年1月1日時点)」

というタイトルでネタ記事として投稿しようとして、早1ヶ月が過ぎてしまったが、せっかくなので、投稿した。

作ったもの

f:id:kikunantoka:20170210085542p:plain

ダウンロード

https://chrome.google.com/webstore/detail/fix-okman/hmclbogjkbealmfpibilnenmlglcindd

ソースコード

https://github.com/kikunantoka/fix-ok-man

以下、開発の経緯

使命感の芽生え

同僚のPRレビューのLGTMコメントを見て、衝撃が走った⚡

f:id:kikunantoka:20170222001138p:plain

:ok_man: :ok_woman: :ok_man: :ok_woman: :ok_man: :ok_woman:

GitHubでは、Macで使える:ok_woman:(🙆これ)のような絵文字の他、:ok_man:といった拡張絵文字が使える。見事なジェンダーフリーっぷりだが、なんと、普通の絵文字と並べると大幅にズレてるではないか。これはなんとかせねば。

使命を遂げる

拡張絵文字がズレている原因を調査してみた。

:ok_woman:のような絵文字は普通に文字として、🙆これを取り扱っているが、:ok_man:のような拡張絵文字は画像を読み込んで表示している。<img>要素であるが故、ズレていたようだ。

そこで、前々から作ってみたかったChrome拡張機能で解決することにした。 GitHubにアクセスしている時だけ、下記スタイルを当てれば、直りそうだった。(他の絵文字と絵文字画像の余白の取り方がバラバラで細かい1pxのズレとかは妥協しました🙇)

p g-emoji img {
  vertical-align: middle!important;
  width: 21px!important;
  padding-bottom: 2px!important;
}

Chromeの公式を読みながら、拡張機能開発を進め、使命を果たすことに成功🎉 デベロッパーモードで試すまでが気軽で良かった🙆

せっかくなので、Chrome拡張機能開発を色々を試してみようと、各機能を試していたが、「直した絵文字の数をカウントして、アイコンの下に数値を出す」機能を作ってるあたりで我に返った。

そして伝説へ

記事の最初にも書いたが、怠惰により1月1日にネタ投稿する機会を損じてしまったが、せっかくなので、年明けの社内のもくもく会でネタ見せしようと、Googleに $5 課金して、公開した。(その場は軽く盛り上がりました🙆)

次回作

Chrome拡張を公開する権利を獲たので、気が向いたら何か作るかもしれない。

今のところ、Slackで使っている拡張絵文字をGitHub上でも使えるようにしたいなーという想いがある。