絵文字と異体字と Markdown

絵文字ってある意味で漢字より難解なので，なるべく使わないようにしてきたのだが，文章に混ぜたり emoticon 代わりに使ったりするだけでなく Zenn みたいにページのアテンションに使ってる例もあるわけで「もう少し積極的に使ってもいいかなぁ」という気になってきた。

とはいえ input method から延々と探したりその辺のページから絵文字をコピペするのも馬鹿らしいし，折角 markdown で書いてるんだから意味のあるコードで書きたい。

Hugo なら config.toml 等の設定ファイルで

enableEmoji = true

とすれば markdown テキスト内の :heart: 等を ❤️ 等に変換してくれる。 あるいはテンプレートや shortcodes で

{{ emojify ":heart:" }}

などとしてもよい。

変換可能な絵文字の一覧は以下を参照のこと。

• 🎁 Emoji cheat sheet for GitHub, Basecamp, Slack & more

ただしリンク先にある全部の文字が Hugo で使えるわけではないらしい。 私がよく使いそうな絵文字を挙げておくか。

さて，皆さんの環境ではどう見えているでしょうか。 人によって見え方が異なると思います（絵文字のフォント指定については後述）。

ところで，上に挙げた :bow: ってどう見えてます？ 実は 🙇♂ ってな感じの2文字に見えてません？ うちでは :bow: から変換した絵文字をターミナル・エミュレータとかにコピペすると，こうなるんですよ。

というわけでコードを見てみると

$ echo 🙇‍♂️ | gnkf dump --unicode
0x0001f647, 0x200d, 0x2642, 0xfe0f, 0x000a

おいおい。 本来のコードの後ろに何か付いとるやないかいっ 💢 （← 早速）

実はこれ，絵文字の異体字なんだよ。 内訳はこんな感じ。

ZERO WIDTH JOINER (ゼロ幅接合子; ZWJ) はアラビア文字なんかで複数の文字を結合してひとつの文字にするための制御文字。 さらに VARIATION SELECTOR-16 は “Emoji Variation Selector” とも呼ばれ，絵文字の異体字であることを示す異体字セレクタである²。

つまり :bow: で表示されるのは「土下座する男性」を意味する絵文字（の異体字）なわけだ。 処理系によって異体字を上手く表示できない場合は 🙇♂ のように2つの文字が並んでいるように見えたりするようだ。

…なんで男性なんだろうね。 GitHub の既定ブランチ名を弄るとかするくらいなら，こういうのを真っ先に改善すべきなんじゃないの？

というわけで Hugo 環境全体の設定は変えずに，絵文字表示用の shortcode を作って対応することにした。 こんな感じ。

{{- range $i, $s := .Params -}}
{{- if gt $i 0 -}}&nbsp;{{- end -}}<abbr title="{{ $s }}">
{{- if eq $s "ゴメン" -}}&#x1f647;
{{- else if eq $s "ふむむ" -}}&#x1f914;
{{- else if eq $s "はぁと" -}}&#x1f49b;
{{- else if eq $s "キーボード" -}}&#x2328;
{{- else if eq $s "はなまる" -}}&#x1f4ae;
{{- else if eq $s "錠前と鍵" -}}{{- emojify ":closed_lock_with_key:" -}}
{{- else -}}{{ emojify $s }}{{- end -}}
</abbr>{{- end -}}

これで {{< emoji ":zzz:" >}} などとすれば

<abbr title=":zzz:">💤</abbr>

という感じに展開してくれる。 あとは自分で定義名を作れば別名定義もできるし対応する絵文字を増やすこともできる。 上の shortcode だと

てな感じで定義している。

【2020-10-09 追記】 絵文字のフォント指定

絵文字に関しては Google Fonts みたいなメジャーな Web フォントはないっぽいので各自ローカル環境のフォントをあてにするしかないんだけど（もう自前で Web フォントを用意したくない），これに関して Unicode 本家サイトで

.chars, .charsSmall {
    text-decoration: none;
    color: #ccc;
    font-family: "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji",
        Times, Symbola, Aegyptus, Code2000, Code2001, Code2002, Musica, serif,
        LastResort;
    font-variant-emoji: emoji;
}

みたいな記述があったので，ありがたくパクらせていただくことにした（笑） すなわち

abbr.emoji-chars {
  text-decoration: none;
  font-family: "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", Times, Symbola, Aegyptus, Code2000, Code2001, Code2002, Musica, serif, LastResort;
  font-variant-emoji: emoji;
}

と定義して

<abbr class="emoji-chars" title=":zzz:">💤</abbr>

となるよう shortcode を書き直せばいいわけだ。 当面はこれで。

ブックマーク

• Full Emoji List : based on Unicode CLDR data
• emojify | Hugo
• 絵文字一覧 🤣 | Let’s EMOJI
• UnicodeのEmojiの一覧 - Wikipedia
• twitter/twemoji: Emoji for everyone. https://twemoji.twitter.com/
• googlefonts/noto-emoji: Noto Emoji fonts