GitHubのREADMEでもTwemojiを使いたいよ〜！

追記 本記事公開後、twemojiの開発体制は変化しています。

https://zenn.dev/kakkokari_gtyih/articles/88c11ffd659fdc

記事中で紹介している画像URLは古い可能性があります。
本記事末尾で紹介している https://twemoji.deno.dev からは最新のtwemoji URLを取得できます。

先日、こんな記事を書きました。

https://zenn.dev/kawarimidoll/articles/f02d2891a9634d

そして、この記事で紹介したリポジトリが以下のものです。
https://github.com/kawarimidoll/pax.deno.dev

このリポジトリを見てくれた方は以下の点に気づいたかもしれません。

「あれっ…」

pax.deno.devのREADME

「この絵文字…」

「Twemojiやん！！」

https://twemoji.twitter.com/

「READMEで普通の絵文字以外も表示できるのか」
「どうやっているの？」

では、その方法をご紹介しましょう。

表示方法

Twemojiはmaxcdnで配信されているので、それをページに埋め込みます。

以下に一覧ページがあります。
右クリックメニューから画像URLを取得しましょう。

https://twemoji.maxcdn.com/2/test/preview.html

普通にMarkdown上で表示する場合、取得したURLを参照すればOKです。

![sauropod](https://twemoji.maxcdn.com/v/13.1.0/72x72/1f995.png)

普通に画像として表示

しかしこれでは、文中に埋め込むことができません。画像として表示はできていますが、「絵文字」っぽくはないですよね。

そこで、GitHubのMarkdownではHTMLの記述もValidであるという仕様を使用します。
Markdown形式の画像表示（![]()）では自動でdisplay:blockになるのですが、直接HTMLタグを書く（<img>）とスタイルがつかず、display:inlineで表示されます。

<img src="https://twemoji.maxcdn.com/v/13.1.0/72x72/1f995.png" alt="sauropod">

これだけだと文字と画像のサイズが合わないので、公式が推奨しているスタイルをあてます。
https://github.com/twitter/twemoji#inline-styles

以下のものです。

img.emoji {
   height: 1em;
   width: 1em;
   margin: 0 .05em 0 .1em;
   vertical-align: -0.1em;
}

これを該当のimgタグの中に追記します。

<img src="https://twemoji.maxcdn.com/v/13.1.0/72x72/1f995.png" alt="sauropod" style="height:1em;width:1em;margin:0 0.05em 0 0.1em;vertical-align:-0.1em;">

ZennのMarkdownではHTMLタグを直接記述できないので、ここに表示することはできないのですが…GitHubでは動作するので試してみてください。

Zennの場合、サイズの変更はできるが、インラインにできない

TwemojiのURLを簡単に取得する

ここで、こんな脳内会議が繰り広げられました。

kawarimidoll「やり方は分かった、これでTwemojiを表示できそう」

kawarimidoll「でもTwemoji一覧ページが画像いっぱいで重たい」

kawarimidoll「目的の絵文字を探すのが面倒、Twemojiの配信URLを簡単に取得したい」

kawarimidoll「ええ…しょうがないなあ…」

ということで作りました。Deno Deploy上で動いています。

https://twemoji.deno.dev

こちらのページの入力欄に絵文字を入力すると、対応するhttps://twemoji.maxcdn.com/...のURLを取得できます。

https://twemoji.deno.dev/api?emoji=[emoji]というAPIを設定し、これを呼んで取得しています。
こちらを直接叩けばサーバーサイドなどからの利用も可能ですのでご利用ください。もちろんパラメータの絵文字はURLエンコードが必要です。

おわりに

タイトルでは「GitHubのREADME」としていますが、imgタグを利用する方法なので、ほかにも使える環境はあると思います。

なお、GitHubのREADMEでTwemojiのURLを使用した場合、maxcdnに取得しに行くのではなく、camo.githubusercontent.comに画像を保存し、それを読み込んでいるようです。

リポジトリはこちらです。
https://github.com/kawarimidoll/deno-twemoji-convert