Markdown 絵文字について理解したい

Markdown 絵文字について、この仕様は CommonMark や GitHub flavored Markdown 等に記載されていない。

本記事では、Markdown 絵文字が “どのような実働的仕様で構成されているか” や “Emoji shortcodes がどのように構成されているのか” について理解したい。

本記事では、:blush: で表現される絵文字を “Markdown 絵文字”、😊 のような絵文字を “Unicode 絵文字” と呼称します。

一方で、:) のような文字記号を利用して顔を表現するものは、顔文字（Emoticon または smiley ^Wikipedia）と呼ばれます。これは Markdown 絵文字と異なります。

■ Markdown 絵文字とは

Markdown 絵文字は Emoji shortcodes を : で囲う :emoji_shortcode: で表現される。

:smile: や :+1: 等の smile や +1 を Emoji shortcodes と呼ぶ。（以下では Emoji shortcodes を単に shortcodes とする）

この shortcodes によって、特定の Unicode 絵文字やカスタム絵文字を指定している。

表示される絵文字は、オープンソースな Twemoji (Twitter) や Noto Color Emoji (Google)、EmojiOne などが利用される。Qiita では Twemoji を利用して表示されている。

この記法は 2011 年の GitHub Blog から端緒を発しているようだ。これ以降、さまざまなサービスで Markdown 絵文字を利用できるようになっていった、と言う構図のようだ。¹

Markdown 絵文字を利用することのメリットとデメリットは以下のようになる。

• メリット:
  • 閲覧者の環境を問わない
    • 表示できない絵文字がない
    • text-style や emoji-style を問わない
    • 絵文字のテイストが揃う
  • 独自の絵文字を表示することが出来る
• デメリット:
  • Emoji shortcodes が割り当てられていない Unicode 絵文字は利用できない
  • 可搬性を損ねる可能性がある

いくつかのデメリットはあるものの、Unicode 絵文字は Unicode のバージョンによって表示されない場合がある。そのため、Markdown 絵文字を利用することは多分に意義がある。

▽ Markdown 絵文字の実体

Markdown 絵文字の実体は PNG や SVG などの画像で表現されている。そのため、Unicode 文字そのものとは取り扱いが異なる。

Markdown

:smile:

⇓

HTML

<img src="link/to/emoji/image/1f604.png" alt=":smile:">

このため、パース後の表示結果をコピペする場合、Unicode 絵文字の 😄 はコピーされず、alt 属性（上の例では :smile:）がコピーされる。

■ Markdown 絵文字の実働的仕様

ここで示す実働的仕様は GitHub.com と Qiita で再現されます。

shortcodes は case-sensitive を採る。そのため、:smile: を :Smile: や :SMILE: としても Markdown 絵文字とは解釈されない。

:smile:、:Smile:、:SMILE:

、:Smile:、:SMILE:

Markdown におけるインラインの要素 4 つについて、その内部で Markdown 絵文字がどのように解釈されるのか確認したい。

• 強調
• 行内コード
• リンク
• 取り消し線

Markdown 絵文字は囲い込む : とその内側の shortcodes が接している必要があるため、互い違いのようにすると Markdown 絵文字は解釈されない。

• :*smile:* ⇒ :smile:
• :`smile:` ⇒ :smile:
• :[smile:](https://www.example.com) ⇒ :smile:
• :~~smile:~~ ⇒ :smile:

Markdown におけるインライン要素内部に Markdown 絵文字がある場合、以下のようになる。

• *:smile:* ⇒
• `:smile:` ⇒ :smile:
• [:smile:](https://www.example.com "Example Domain") ⇒
• ~~:smile:~~ ⇒

Markdown 絵文字は画像として表示されるため、強調やリンク、取り消し線は、その見た目では分からない。もしも、これらのインライン要素内に Markdown 絵文字を含む場合は、Markdown 絵文字以外の文字も含まれているべきだろう。

強調と取り消し線について、Unicode 絵文字と取り扱いが異なる。

- 強調
    - Unicode：*😄*
    - Markdown：*:smile:*
- 取り消し線
    - Unicode：~~😄~~
    - Markdown：~~:smile:~~

• 強調
  • Unicode：😄
  • Markdown：
• 取り消し線
  • Unicode：😄
  • Markdown：

Unicode 絵文字が通常の文字のように取り扱われるのに対して、 Markdown 絵文字は画像として取り扱われる。そのため、Markdown 絵文字は強調や取り消し線の影響を受けない。

ちなみに、GitHub.com では、Unicode 絵文字も Markdown 絵文字と同じような処理結果になっているため、Unicode 絵文字を利用していても Markdown 絵文字と同じ結果を得る。

また、Markdown 絵文字に title 属性が与えられている場合、画像側のリンクタイトルが優先される。そのため、Markdown 絵文字以外の文字が用意されているべきだろう。

[Example Domain :smile:](https://www.example.com "Example Domain")

Example Domain

▽ エスケープ

Markdown 絵文字をエスケープするには難しい。以下のような : をエスケープしたり、HTML エンティティ参照にしても、Markdown 絵文字は解釈される。

\:smile\:、:smile:、:smile:

、、

これをエスケープするには、Markdown 絵文字内で適当な HTML タグを使用すれば良い。

:smile<foo>:

:smile:

■ Emoji shortcodes の文字種

shortcodes に統一された命名規則はないものの、利用される文字については一定の規則があるようだ。

多くの shortcodes はスネークケース (snake_case) またはケバブケース (kebab-case) で表現されている。また、・ は :thumbsup:・:thumbsdown: と表現される一方で、:+1:・:-1: とも表現される。

これらを踏まえると、代表的に以下のような正規表現で表すことが出来る。²

:([a-z0-9]+([_-][a-z0-9]+)*|[+-]1):

ここで、[0-9] のアラビア数字は、数字のみの絵文字の他、動物などの複数のパターンがあるものや時計、四角に囲まれた漢字、スキントーンなどで利用される。

• :100:：、:1234:： ……
• :pig:： と :pig2:：、:pencil:： と :pencil2:： ……
• :clock1:：、:clock230:： ……
• :u7a7a:：、:u6e80:： ……
• :tone1:：、:tone2:：、:tone3:：、:tone4:：、:tone5:：

この他、スキントーンを変更できる絵文字に関して、元の shortcodes に続けて _toneN とすることで、スキントーンを変更することが出来る。（N：1~5）

スキントーンからも分かるように、異体字セレクタを利用するような絵文字シーケンスを構成できない。そのため、Family 系統は割り当てられている絵文字のみしか利用できない。Markdown 絵文字は shortcodes に絵文字が割り当てられているだけである。

▽ 命名規則

命名規則？そんなものはないです。

上で示したように文字種はある程度決まっているものの、統一された命名規則がありません。

この節では、shortcodes の非統一性を以下の Emoji cheat sheet（以下 ECS と表記）から考えてみたい。

一覧の中で、以下のような非統一性が確認できる。

• 統一されない case：

  スネークケースが大多数を占めるものの、ごく一部（e-mail と non-potable_water）ではケバブケースも存在する。また、+1・-1 はスネークケースやケバブケースとは異なる。

• 異なるパターンの shortcodes：

  2 を付記してバリエーションを示す shortcodes がある。これには、2 と _2 がある。

  e.g.

  • (:cat:)、 (:cat2:) ……
  • (:point_up:)、 (:point_up_2:)

  多くの動物絵文字に関して、無印は顔のみ、体全体は 2 が付記されている。

• のような顔を示す shortcodes：

  _face が付くものと付かないものがある。

  e.g. (:sweat_smile:)、 (:tired_face:)

• 日本語を含むもの：

  (:u7981:) などの四角に囲われた漢字 (ideograph) は、内側の漢字の Unicode コードポイントを利用しているのに対して、 (:accept:) は “可” そのものの意味を shortcodes にしている。

• ローマ字のもの：

  (:hocho:) は、knife ではなく “包丁” のローマ字表記となっている。

  (:koko:) や (:sa:) は、カタカナの読みをそのままローマ字にしている。³

以上で明らかのように、単純に Unicode 名をスネークケースやケバブケースにしているわけではない。そのため、入力する際に全く見当が付かない場合がある。

もしも新たに shortcodes を命名する場合は、Unicode 絵文字の CLDR (Common Locale Data Repository) をスネークケースにしたものがベターになるだろう。（Emojipedia では例としてこの shortcodes を掲載している）

ちなみに、同じ絵文字が複数の shortcodes で表現されている場合もある。例えば、:shit:・:poop:・:hankey: は、いずれも を表している。

動物における Markdown 絵文字のバリエーション（折りたたみ）

顔だけのものと体全体のものがあり、体全体の shortcodes に 2 が付記されるものと、顔だけの shortcodes に _face が付記されるものがある。

顔だけ	体全体
(cat)	(cat2)
(cow)	(cow2)
(dog)	(dog2)
(mouse)	(mouse2)
(pig)、 (:pig_nose:)	(pig2)
(rabbit)	(rabbit2)
(tiger)	(tiger2)
(dragon_face)	(dragon)
(monkey_face)	(monkey)

(:panda_face:) は _face と付いているが、体全体の shortcodes はない。

また、次のようなバリエーションもある。

動物	バリエーション
ウシ	(ox)、 (water_buffalo)
クジラ	(whale)、 (whale2)、 (dolphin)
げっ歯類	(hamster)、 (rat)
ニワトリ	(chicken)、 (rooster)
ヒツジ	(ram)、 (sheep)、（ (:goat:) これはヤギ）
ひよこ	(baby_chick)、(hatched_chick)、(hatching_chick)
ラクダ	(camel)、 (dromedary_camel)
馬	(horse)、 (racehorse)
魚	(fish)、(blowfish)、(tropical_fish)

● Emoji cheat sheet の詳細

ここで示される shortcodes は GitHub や Qiita で利用されている。ただし、このチートシートが完全なリストになっていないことに注意が必要になる。⁴

全 5 カテゴリ 877 種ある。

• People (194)
• Nature (115)
• Objects (260)
• Places (106)
• Symbol (202)

同じ絵文字を複数の shortcodes で指定しているこカテゴリをまたぐ場合がある。（exclamation (people) と heavy_exclamation_mark (symbols)、squirrel (nature) と shipit (symbols)）

この一覧を JSON として作成した。

■ Emoji shortcodes 一覧

shortcodes は Markdown 絵文字を取り扱うツールによって異なる。そのため、1 つの統一されたリストは存在しない。この節では、いくつかのサービスで利用可能な shortcodes の一覧を挙げておきたい。

GitHub.com で利用可能な Markdown 絵文字は次のチートシートを参照すると良い。そもそも、GitHub API から shortcodes を取得することが出来るため、これを表にしているようだ。

• ikatyang/emoji-cheat-sheet: A markdown version emoji cheat sheet
• GitHub API - https://api.github.com/emojis

GitLab で利用可能な Markdown 絵文字は次のチートシートを参照すると良い。

• gitlab-emoji/README.md at master · yodamad/gitlab-emoji

この他、gemoji や markdown-it-emoji、node-emoji 等の Markdown パーサに追加して Markdown 絵文字を処理するツールがある。これらから、shortcodes と Unicode 絵文字を関連付けるファイルを参照しておく。

• gemoji/emoji.json at master · github/gemoji
• markdown-it-emoji/full.json at master · markdown-it/markdown-it-emoji
• node-emoji/emoji.json at master · omnidan/node-emoji

Qiita における shortcodes のリストは見つからなかった。そのため、編集画面上部の絵文字パレットから抽出して JSON に変換した。絵文字の表示結果と並記したリストを作成することは面倒だったため、JSON ファイルのみになる。

Qiita の shortcodes は ECS とスキントーンのバリエーション等を加えたものが利用されているようだ。

全 9 カテゴリ 1632 種ある。（このカテゴリは Qiita の絵文字パレットによるもの）

• People (484)
• Nature (147)
• Food (67)
• Activity (102)
• Travel (115)
• Objects (178)
• Symbols (271)
• Flags (257)
• Bonus (11)

▽ ECS における GitHub.com と Qiita との比較

ECS で掲載されている shortcodes が、GitHub.com や Qiita 上でどの Unicode に対応しているか確かめた。

上で示した対応内における、undefined な shortcodes が 4 つあった。これらは GitHub.com 内で利用することが出来ない。代替となる shortcodes と合わせて、以下に表としておく。（この問題、どこに提出すれば解決するんですかね）

sample	undefined な shortcodes	代替 shortcodes
	simple_smile	slightly_smiling_face (U+1F642)
	person_with_pouting_face	pouting_face (U+1F64E)
	person_with_blond_hair	blond_haired_person (U+1F471)
	person_frowning	frowning_person (U+1F64D)

Qiita では、simple_smile が利用できないのみだった。もしも、simple_smile が利用したい場合は、GitHub.com と同様に :slightly_smiling_face: を代用すれば良い。

また、GitHub.com と Qiita の ECS の解釈の違いを確認することも出来た。

例えば、bride_with_veil や ok_woman、 man_with_turban や guardsman がそれぞれの性別の ZWJ シーケンスを採るかどうかがある。GitHub.com では性別を区別して ZWJ シーケンスとしているが、Qiita ではどれも Person の扱いだった。

また、egg と beetle に関して、次のような違いがあった。

shortcodes	GitHub.com	Qiita
egg	🥚 (U+1F95A)	🍳 (U+1F373)
beetle	🪲 (U+1FAB2)	🐞 (U+1F41E)

ECS 内であっても、いくつかの違いがあることが分かった。9 割程度は可搬性があるが、一部の shortcodes には可搬性がないと言える。

▽ ツールごとに異なる Emoji shortcodes

同じ Unicode 絵文字を全く異なる shortcodes で表現するものがいくつかある。この節では、異なる shortcodes について、いくつかの例を見てみたい。

• 雪が降る雪だるま ：⁵
  • snowman_with_snow
  • snowman2
• Family 系統 ：
  • 家族構成を完全に開いて示すもの family_man_woman_girl_boy
  • 略しているもの family_mwgb

これらの違いをリストから確認することは難しいものの、Emojipedia から個々の文字を確認することが出来る。

また、かなりヤヤコシイ shortcodes もある。

“Person Gesturing OK (🙆)” には、person の他に man と woman の 2 種がある。そのため、shortcodes は 3 種ないしは person のみが提供していると思ってしまう。しかし、woman の :ok_woman: のみが提供されている場合がある。（Qiita がこの好例となっている）

• :ok_person:：:ok_person:
• :ok_man:：:ok_man:
• :ok_woman:：

Person Gesturing OK (🙆) は古く女性で示されていた経緯 ^⧉ があるため、:ok_woman: にのみ shortcodes が割り当てられているのかもしれない。⁶

また、:ok_woman: に対応する shortcodes は :no_good: は “Person Gesturing No” であり、“Woman Gesturing No” は :ng_woman: になっている。男女がごちゃごちゃしている。

■ カスタム絵文字

shortcodes で指定する文字は Unicode 絵文字に限らず、独自に作成された絵文字を指定していることもある。これらの絵文字は Unicode 絵文字ではないため、他の絵文字と比べて絵のテイストが異なってしまうことがある。

例えば、GitHub では次のような shortcodes を含め 19 ^⧉ が提供されている。

• :bowtie:：
• :octocat:：
• :shipit:：

:bowtie: を見ると、Noto Color Emoji 風の絵文字に見える。Qiita では Twemoji が利用されているため、統一感が伴わないように感じられる。

Qiita でも、:qiitan: から を表示させることが出来る。これを含め全 11 の独自の絵文字が提供されている。

• :qiita:：、:qiita-team:：
• :qiita-fabicon:：、:qiita-team-fabicon:：
• :qiitan:：、:qiitan-cry:：
• :lgtm:：、:like:：、:stock:：
• :file:：、:edit-request:：

すでにお気づきかと思いますが、Qiita から提供される shortcodes はケバブケースです。

参考

• 🎁 Emoji cheat sheet for GitHub, Basecamp, Slack & more
• Emojipedia
  • Emoji Shortcodes
  • 😺 GitHub Emoji Support and Emoji Codes
• The GitHub Blog
  • Emoji!
  • Emoji autocomplete
• 😋 Emoji copy and paste - All Emojis to ✂️ Copy and 📋 Paste
• 絵文字ショートコードの起源をたどる | temoki | note
• Full Emoji List, v15.0
• CLDR Short Name - Unicode Emoji Chart Format
• Unicode CLDR - Emoji Names and Keywords

余談

Markdown 絵文字は絵文字を早く入力するためにはかなり良い。一方で、shortcodes はツールごとに違いがある場合があるため、可搬性を損ねる可能性がある。

可搬性を意識するのであれば、Emoji cheat sheet に掲載されているような shortcodes を利用すると比較的良いでしょう。（GitHub.com では 4 つ使えない shortcodes があることを示していますが……）

顔文字

顔文字 (emoticon) には ;) や :D のようなものがある。これを Unicode 絵文字に変換するツールがある。

markdown-it-emoji/shortcuts.js at master · markdown-it/markdown-it-emoji

これらの demo として、以下の折りたたみのような表の emoticon が Unicode 絵文字に変換される。

Emoticon shortcuts（折りたたみ）

※ 連続する kissing 内の * や表内の neutral_face の | が上手くパース出来ていませんが、パラグラフ内では上手くパースされます。

|     Meaning      | Emoticon shortcuts                     |
| :--------------: | :------------------------------------- |
|      angry       | >:(, >:-(                              |
|      blush       | :"), :-")                              |
|   broken_heart   | </3, <3                                |
|     confused     | :/, :-/                                |
|       cry        | :(, :-(, :,(, :,-(                     |
|     frowning     | :(, :-(                                |
|      heart       | <3                                     |
|       imp        | ]:(, ]:-(                              |
|     innocent     | o:), O:), o:-), O:-), 0:), 0:-)        |
|       joy        | :), :-), :,), :,-), :D, :-D, :,D, :,-D |
|     kissing      | :*, :-*                                |
|     laughing     | x-), X-)                               |
|   neutral_face   | :                                      | , :- |  |
|    open_mouth    | :o, :-o, :O, :-O                       |
|       rage       | :@, :-@                                |
|      smile       | :D, :-D                                |
|      smiley      | :), :-)                                |
|   smiling_imp    | ]:), ]:-)                              |
|       sob        | :,(, :,-(, ;(, ;-(                     |
| stuck_out_tongue | :P, :-P                                |
|    sunglasses    | 8-), B-)                               |
|      sweat       | ,:(, ,:-(                              |
|   sweat_smile    | ,:), ,:-)                              |
|     unamused     | :s, :-S, :z, :-Z, :$, :-$              |
|       wink       | ;), ;-)                                |

表を見れば明らかなように、（´・ω・｀） のような日本ライクな顔文字を解釈するようなツールではない。

追記

• 2023/02/13: 一部修正・追加

1. Unicode 絵文字は 2010 年以降にサポートされるようになったが、Unicode バージョンなど閲覧者の環境に依存するため、Markdown 絵文字が考案されることになったようだ。^[要出典]

   • Unicode 絵文字：2010 年（Unicode 6.0）
   • Markdown 絵文字：2011 年
   ↩

2. 実は、この正規表現で示したような文字種以外の文字を利用しているツールも存在する。

   Hugo における Markdown 絵文字は kyokomi/emoji から提供されているようだ。以下の記事では、この kyokomi/emoji から提供される Markdown 絵文字の一覧を作成している。

   • Markdown 用の絵文字コードの一覧を作ってみる - Zenn
   • Emoji Shortcode List - Gist

   この shortcodes リストを見ると、[A-Z] や (、) が含まれている。 ↩

3. もしも、絵文字の持つ意味から shortcodes を作成するならば、 は prohibition、 は here などとするべきだろう。しかしながら、漢字やカタカナを知らない人にとって、このような意味を持たせることは有意義ではないだろう。

   ちなみに、:hocho: には knife のエイリアスが与えられている場合がある。 ↩

4. このチートシートに含まれている shortcodes は、ほとんどのサービスで提供している。そのため、shortcodes のサブセットとして考えても良いだろう。 ↩

5. 雪のない雪だるま は :snowman: で変わらない。 ↩

6. 実際、Discode で利用される shortcodes では、Person Gesturing OK を :ok_woman:、Woman Gesturing OK を :woman_gesturing_ok: としている。 ↩