Emoji 最新版の様相

2022/01/23 山田 泰司

注意:このページは SeaMonkey では閲覧ができません。Firefox での閲覧をお勧めします。処理に使用している正規表現を保守的な記述に書き換え、SeaMonkey にも対応しました。

この文書は昨年書き記した「なぜ Emacs が必要か?」なる文書に一部扱っている内容が重なっています。ただ、そちらは Emacs の必要性を Unicode の見地から述べたものであり、絵文字に関しては導入的にとどめてあります。一方で、本稿は内部で使用している技術も含めて、現状の微にいった事柄を扱っており、将来に渡りブラウザやフォントの状況を把握する役割にしてあります。よって、内部で使用している Javascript が理解できる方は本稿のソースコードから得るものはあるでしょうし、絵文字を詳しく知りたい方は、前稿から眺めてみるのがよろしいかと思われます。

Emoji コードの VS-16 問題

一般人だけでなくプログラマまで「絵文字」を面白がっているのか、JIS2000 では普通に着色されていない記号を表示しようとしても、特にブラウザでは「着色絵文字」になってしまう問題がある。これは Google Chrome によって露呈する。

ここでは、閲覧者のブラウザで注意すべき Unicode の絵文字に関するコードポイントを一覧にすることによって問題を顕にしたい。

以下に、本来なら VS-16 (Variation Selector-16) を添えなければ着色絵文字にならないはずのコードポイントと、それに VS-16 を添えた文字列、VS-15 を明示的に添えた文字列を一セル毎に表にした。

1セル内の一行目が着色絵文字になってしまっているようなら、閲覧者のブラウザ環境には、意図しない着色絵文字になってしまうという問題を孕んでいる。また、3行目では「無着色絵文字」を明示的に指定されているにも関わらず着色絵文字になってしまっているなら、適切なフォントを所有していない、などの問題を孕んでいる。

Windows であれば Segoe UI Symbol、macOS であれば Apple Symbols、Unix 系 OS であれば Symbola 等が適切に備わっていることが望ましい。

Emoji コードの着色絵文字、無着色絵文字

前節で取り上げたものを除くすべての絵文字コードポイントについて、以下に、VS-15 を明示したもの、VS-16 を明示してカラー絵文字フォント指定したもの、VS-15 を明示して記号フォントを指定したものを一セル毎に表にした。

これらは着色絵文字にするなら VS-16 を明示すべきという規定はないので、ブラウザが採用するフォント次第となる。理想的には、セル毎に上から、着色絵文字、着色絵文字、無着色絵文字、となるべきであるが、閲覧者のフォント環境次第ではあるので、オープンソースの無着色絵文字フォントの Symbola あたりをシステムにインストールしておくとよい。

一方で、着色絵文字がシステム標準のものでは十分でないなら、Twitter Color Emoji をシステムにインストールしておくのはよい選択である。他の候補の Noto Color Emoji はフォント形式の違いで macOS では使用できない。

Emoji にて後続の構成要素となるコード

1文字の絵文字となるコードの構成要素となるコードポイントのうち、先頭のコードポイントを除く後続のコードポイントがある。先の VS-15 (U+FE0E), VS-16 (U+FE0F) もそれらの一部であり、他に、 ZWJ (Zero Width Joiner, U+200D) やタグ (Tag, U+E0000-E007F)、キーキャップを表す Combining Enclosing Keycap (U+20E3) も含まれる。

それ以外には、絵文字のコードポイントに ZWJ に続くコードポイントとの組み合わせで一つの絵文字を表す構成要素もある。現状はこれらも絵文字のコードポイントに限られるようだ。以下に、実はそれほど大量ではない現状の後続の構成要素となるコードポイントを前節と同様に一覧表にしておく。

やはり、通常は無着色の記号として使用する「♀︎」「♂︎」「❤︎」が存在している。これが閲覧者ではどのように見えるかはブラウザやフォント環境次第となる。

ブラウザ以外における VS-16 問題

私は CMS (Content Management System) において、VS-16 を明示していない以上のコードポイントを、閲覧者に統一してグリフが表示されるために、勝手に、ご親切に、「埋め込み画像」に置き換えてしまうという実装を目撃した!

これは真面目な議題によっては、唐突にポップな雰囲気になってしまうので、実装としては極めて不適切であって、VS-15, VS-16 を明示していないのなら無着色絵文字、というよりも、従来通りの記号にすべきである。

冒頭に「プログラマが面白がっている」と書いたが、実際のところの遠因については後に触れる。

ヘアスタイル Unicode 絵文字ゼロ幅結合による絵文字

ヘアスタイル絵文字ゼロ幅結合とその被結合文字、それぞれの集合の直積で、理論的に絵文字を下表のように構成することができる。

これらに加えて、肌の色の組み合わせもあるので、さらに 5 倍の絵文字が用意されていることになるが、まずはヘアスタイルは考慮せず、肌色のみを次に変えてみよう。

肌色 Unicode 絵文字修飾子による絵文字

肌色絵文字修飾子とその被修飾文字、それぞれの集合の直積で、理論的に絵文字を下表のように構成することができる。

一セル毎の最下段は、これまで通り無着色絵文字であるのだが、Firefox では、それぞれ一つの着色絵文字として表現されてしまっている。これは致し方ないだろうが、「🧑︎」と「🏿︎ (U+1F3FF)」の文字列で表されるべきであろうとも思う。Chrome ではそのように適切に表されている。

これらに加えて、前節の通り、ヘアースタイルの組み合わせもあるので、さらに 4 倍の絵文字が用意されていることになるので、次に肌色とヘアスタイル双方を考慮して、すべての組み合わせを求めてみよう。

肌色 Unicode 絵文字修飾子、及び、ヘアスタイル Unicode 絵文字ゼロ幅結合による絵文字

肌色絵文字修飾子、ヘアスタイル絵文字ゼロ幅結合、とその被修飾・被結合文字である顔の絵文字、それぞれ全ての集合の直積で、理論的に絵文字を下表のように構成することができる。

これも、Firefox では明示的に VS-15 かつ記号フォントを指定しているにも関わらず、セル最下段もすべて着色絵文字になってしまう。Chrome ではセル最下段は適切に無着色絵文字になっている。

ジェンダー Unicode 絵文字ゼロ幅結合による絵文字

ジェンダー絵文字「♀」「♂」「⚧」ゼロ幅結合とその被結合文字、それぞれの集合の直積で、理論的に下表のように構成することができる。但し、トランスジェンダー「⚧」ゼロ幅結合の記号は、現在のところ、白旗記号「🏳」(🏳️) との結合による絵文字「🏳‍⚧」(🏳️‍⚧️) しか定義されていないので省略する。

絵文字のフォントデザイナーには本当に頭が下がる。バニーガールズが定義されているからといって、バニーボーイズも定義しなければいけないのだから。

肌色 Unicode 絵文字修飾子によるその他すべての絵文字

前節の「👨」「👩」「🧑」被修飾・被結合文字集合を除いて、他の肌色絵文字非修飾集合すべてを下表に一覧する。1文字の着色絵文字になっていないものは、おそらくフォントがまだ対応していないものである。

これも、Firefox では明示的に VS-15 かつ記号フォントを指定しているにも関わらず、セル最下段もすべて着色絵文字になってしまう。Chrome ではセル最下段は適切に無着色絵文字になっている。

ちなみに、Apple Color Emoji フォントでは、スノーボーダーの肌色指定は図柄に表現されているようにまったく見えないのだが、Twitter Color Emoji では確かに肌色に変化が見受けられた。

最新の Unicode の定義から表を構築しているので、まだフォントが対応していないものが手元でも多いが、直に対応していくだろう。それもなかなか楽しみではある。

肌色 Unicode 絵文字修飾子、及び、ジェンダー Unicode 絵文字ゼロ幅結合による絵文字

肌色絵文字修飾子、ジェンダー「♀」「♂」「⚧」ゼロ幅結合、とその被修飾・被結合文字、それぞれ全ての集合の直積で、理論的に絵文字を下表のように構成することができる。但し、魔神「🧞」は肌色なし、白旗記号「🏳」はジェンダーなし、よって省略する。

見事に理論通りに絵文字が受理されている。但し、ゾンビ「🧟」のように受理はされるが肌色に変化が見受けられないものも存在する。但し、それは Apple Color Emoji フォントのときで、他のカラー絵文字フォントでは意図は伝わるものの一つの絵文字にはならないものが多い。

加えて、これだけ厳しい指定をしているので、別のフォントにフォールバックされてしまうことも多々ある。

大人(男性、女性、無性別)の顔文字ペア間 Unicode ハート等絵文字ゼロ幅結合による絵文字、及び、子供(男性、女性、無性別)の顔文字のゼロ幅結合による絵文字

結論めいたことから述べれば、これは、自分でも試してみて驚いた。かつて、この絵文字は要素の「合字」で生成されているのではと推測したことが当たっていたことになる。

「👨」男性、「👩」女性、「🧑」大人の顔文字のペアの間にハート記号「❤」または「❤, 💋」をゼロ幅結合で連結すると、一つのカップルの絵文字が表される。

しかし、「👨, 👩」のならびや「🧑, 👨 または 👩」のペアは実のところ Unicode では定義されていないが、その規則を無視して順列のまま下表に表示してみる。

なんと Apple Color Emoji フォントではすべての組み合わせで一つに絵文字として表現可能であった。他のフォントではそのようにはならない。

一方で、ハート記号を握手記号「🤝」に変えるだけで、手を繋いだカップルの絵文字が表現できるが、こちらは順列は受理されず、定義された並びの組み合わせのみ一つの絵文字となる。

こちらこそ合字の仕組みを使って順列で構わないと思われるのだが、これら二種類の設計の違いは不明である。

「👦」男の子、「👧」女の子、「🧒」子供の顔文字をさらに加えて、これらをゼロ幅結合で連結すると、一つの家族の絵文字が表される。

Unicode の定義において、大人、子供それぞれ2人まで、かつ、大人は女性、男性の順は不可、子供は男の子、女の子の順は不可、という制限がある。

しかも、ジェンダーフリーも上表のように性別に参加することも、ジェンダーフリーのみで構成することも不可となる。

しかし、単一のコードポイント U+1F46A に「大人、大人、子供」の3人家族のみ、絵文字が定義されている。

以上、Apple Color Emoji フォント以外では筆者の意図した合字にはならない。

肌色 Unicode 絵文字修飾子、及び、大人(男性、女性、無性別)の顔文字ペア間 Unicode ハート等絵文字ゼロ幅結合による絵文字

前節の組み合わせに、気が遠くなるが、(家族以外は)肌色を指定可能である。理論上すべての組み合わせを以下に表にしておく。

なんと、これも驚愕の結果であったが、Apple Color Emoji フォントではすべての組み合わせを受理して、一つの絵文字になる。やはり、合字で実現しているのであろう。

次の握手記号「🤝」のゼロ幅結合による絵文字に肌色を組み合わせてみよう。但し、肌色指定無しは、前例とは異なり受理されなかったので省略する。

これも Apple Color Emoji フォントではすべての組み合わせで一つに絵文字として表現可能であった。他のフォントではそのようにはならない。

家族の絵文字の肌色との組み合わせは Unicode でそもそも定義されていないので省略する。

もし、受理されるような Unicode の定義が存在したとしたら、膨大な組み合わせが家族絵文字だけで存在することになる。それは現実的ではないだろう。これは、なかったことにしたい。

Emoji コードの VS-16 問題、再び

プログラマが「絵文字」を面白がっているわけではなく、意図せず「着色絵文字」になってしまう問題の遠因がわかった。Unicode のデータベース UCD では、これまでに参考にしてきたものの他にもあり、そちらで VS-15, VS-16 を明示しなければならないと思わせるデータが VS-15, VS-16 それぞれに定義されている。しかも、ベースとなるコードポイントは現時点では両者まったく同一なのだから、何か意図を感じせざるを得ない。

問題なのは VS-15, VS-16 を明示しなかったときの閲覧環境の挙動である。例えば、過去の資産の Shift_JIS, euc-jp, ISO-2022-JP 等テキストを絵文字に配慮せず UTF-8 に変換すれば、VS-15 をつけるべきか判断が簡単にはつかないし、コストも大きいので通常はつけないだろう。そして、VS-15 が明示されていないので Google Chrome のようにトランプのハート印「🖤︎」が意図せず紅色の「🖤️」になってしまうわけである。よって、そうした問題のある絵文字が UCD によってさらに追加で定義されているので、追加分のみ一覧しておく。

以下に、本来なら VS-16 (Variation Selector-16) を添えなければ着色絵文字にならないはずのコードポイントと、それに VS-16 を添えた文字列、VS-15 を明示的に添えた文字列を一セル毎に表に、改めて追記した。

1セル内の一行目が着色絵文字になってしまっているようなら、閲覧者のブラウザ環境には、意図しない着色絵文字になってしまうという問題を孕んでいる。また、3行目では「無着色絵文字」を明示的に指定されているにも関わらず着色絵文字になってしまっているなら、適切なフォントを所有していない、などの問題を孕んでいる。

しかも、Google Chrome では現時点でこの表では、すべてセル内最下段の VS-15 を明示したものまで「着色絵文字」になってしまっているのだ。言われてみれば「❓️」「❗️」「◽️」「◾️」「⬛️」「⬜️」などは実によくみる意図しない着色絵文字である。







































特殊囲みラテン大文字による地域指定子=旗絵文字

特殊囲みラテン大文字2文字の組み合わせで国旗、または、地域の絵文字が表される。ラテンアルファベット2文字すべての組み合わせを下表にこれまで通り表示してみよう。

Unicode で定義されていないがフォントとしては存在する絵文字などがある。実は機微な話題なので、ここでは多くは説明しない。但し、マウスをホバーすると JIS X 0304:2011 (ISO 3166-1:2006) などの国コードなどが現れるようにはしておいた。

閲覧者によるフォント指定

以下の URL のようにフォントを指定してこの頁を閲覧できるので、興味がある方は試してみるとよい。

参考文献

  1. The Unicode Consortium, “Index of /Public/emoji/14.0,” https://unicode.org/Public/emoji/14.0/, 2021.
  2. The Unicode Consortium, “Index of /Public/14.0.0,” https://www.unicode.org/Public/14.0.0/, 2021.
  3. The Unicode Consortium, “Index of /Public/15.0.0,” https://www.unicode.org/Public/15.0.0/. 2021.
  4. International Organization for Standardization, “Country Codes Collection,” https://www.iso.org/obp/ui/#iso:pub:PUB500001:en, 2022.
  5. WikiPedia, “ISO 3166-1,” https://ja.wikipedia.org/wiki/ISO_3166-1, 2021.
Written by Taiji Yamada at 2022/01/24