0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

絵文字の互換性問題:Webページで使うべき絵文字はどれ?

Last updated at Posted at 2025-05-05

■ きっかけ

自分が書いた Qiita の記事の見出しが、 PC で見たときに「太字になっているだけでちょっと見づらいなー」 と感じた。そこで見出しの先頭に入れていた ■,● などの記号を 絵文字 🟦,🟢 に変えてみたらどうかな?と思いついた。

俺ちゃんの Linux PC では問題なく表示されたのだが…

ちょっと古めの端末の Android 9 以下では表示されなかった。。

Firefox_Android9_emojiBAD.png

10 以降では表示されるが、俺ちゃんのよく使う Termux 上の w3m という Webブラウザでも やはり表示されない。。

w3m_emojiBAD_01.png

文字化けしてしまっている。
この原因を調査し、ついでに「全端末で安心して見れる絵文字はいったい どれと どれなのか?」について調べてみたので記事化してみる。

■ 現象を詳しく追うと…

Android 9 でも Termux + w3m でもなぜか 🔶 だけはちゃんと表示された。

w3m_emojiBAD_02.png

なぜこれだけ…?

しかし、実は思い返すと思い当たるフシがある。
俺ちゃんは昔、仕事で絵文字などの文字を実装している技術 Unicode1 の仕組みや互換性について調べたことがあり、どんな絵文字があるかもだいたい知っていた。はずだった。
なのに、絵文字 🟦,🟢 については、「へぇ、そんなのあったんだ」と思ったのだ。…つまり、昔 見た記憶がない。

ってことは、おそらく最近追加されたのではないだろうか?
昔の Android や Termux で表示できないのは新しい Unicode 規格に対応できていないためではなかろうか。そう思って確認してみると…

  ビンゴ!

問題の絵文字 "Large Blue Square", "Large Green Circle" は 2019年にリリースされた Unicode 12.0 で新規追加された絵文字だった。Android 9 は 2018年3月のリリースなので、これより前なのだ。

唯一、ちゃんと表示された "Large Orange Diamond" については、 2010年リリースの Unicode 6.0 および 2015年リリースの別規格 Emoji 1.02 に含まれる。

【参考】Emojipedia

絵文字の検索と、規格が確認できる有用なサイト。iOS, Android(NotoFont) での絵文字のデザイン違いも確認できるし、 Windows や Teams, Samsung, Facebook などのデザイン見え方についても確認できる。Unicode のコードポイントや名前についても閲覧できる。

【参考】Emoji - Wikipedia(en)

英語版の Wikipedia の記事。日本版よりも詳しい。日本版では Emoji 1.0 についての記載がないが、こちらにはちゃんとあった。やはり詳細は英語版に限る。

■ 全ての端末で表示できる絵文字は?何を使うのが正解?

超レトロな端末を含めるとすると、最初に絵文字を含んだバージョンである Unicode 6.0 に含まれている絵文字のみを使えば良い。これなら、ほぼ対応していない端末はないはずだ。3

…だが、それだと昔過ぎて使える絵文字が だいぶ少なくなってしまう。

そこで 2015 リリースの Emoji 1.0 規格に対応した絵文字のみを使うのが良いと思われる。2025 年現在からすると既に十年前だ。十年一昔。今日び、現役稼働している端末のほとんどは これ以降に発売されたものだと思われるためだ。

いちおう、2015 に発売された機器の OS のバージョンを確認しておこう。以下に列挙する。

OS名 バージョン 備考:代表的な機種など
iOS 9.3.5 iPhone 4S, iPad(第2世代)
Android 6.0 Xperia XZ, Nexus 6P, Nexus 5X
Windows 10.0 ※ 正式対応は 2016-08-02 Anniversary Update から
MacOS X 10.11 ※ ver.10.7 以降で絵文字対応済み

実際には規格ができてから浸透するまでに時間を要するはずだから、もう少し後の端末でなければ対応しきれていないかもしれないが。
もし対応させたい端末が、これらより前か微妙に後である場合は Unicode 6.0 の方を使うことを検討しよう。

さて。
今回の俺ちゃんのケースでは、現役の端末で表示できれば事足りる。
Qitta を覗くのに使うであろう、主要な PC, スマホ, タブレット でちゃんと表示させたいだけだからだ。なので Emoji 1.0 で定義された絵文字のみを使うことにした。以下の参考サイト一覧に含まれる絵文字のみを使うのである。

件の ■, ● に代わる絵文字は 🔶, 🔵 にした。元々 🔶 だったものは🔹に。
これらは以下のページで確認できる。

以上。
絵文字をWebページで使う際には互換性に気をつけよう!ってお話しでした



以下は おまけ。見たい人だけどーぞ。

■ おまけ①:Unicode ってなんやねん?って人のための歴史的あらまし

Qiita ユーザーにはよもやいないとは思うが…
「 Unicode って何?ウニの仲間?」ってくらいの知識の人向けに、あるいは初学者向けに Unicode の歴史的経緯と概要について説明を書いてみた。素人向けなのでちょっと面白おかしく、やや脚色してあるので注意。
厳密性を求める方は WikipediaThe Unicode Consortium などの お堅い文章を参照してほしい。

● 絵文字の起源と歴史

── むかし、むかし。その昔。

ときは平成。ガラケー全盛の時代に 絵文字 なるものが隆盛した。4
その頃はカラーではなかったり、色数が少なかったり、解像度が低くてレトロゲーム感があったりする、今とは似て非なる絵文字が流行っていた。

やがて、この絵文字文化は日本以外でも 👱「Oh! エモジ? ソレハ Good デスネ👍️」 と海外の人々にも便利さを認められて広がってゆく。
しかし、この頃は統一された規格がなく、DoCoMo, KDDI, SoftBank, あるいは海外勢の Vodafone, Nokia, BlackBerry などが好き勝手に 「俺のところはこうする。お前はお前で勝手にやれや!」 と独自の絵文字を作っていた。

当然これらに互換性はなく、「DoCoMo ユーザーが au ユーザーに送ったら表示されなかった💦」とか「全然違う絵文字が表示された❗️」とか「・とか〓みたいなわけわからん記号に文字化けする…😟」とか色々問題が起こって混乱した。
(後に一応、Eメールについては相互変換する仕組みは作られた)

見かねた Unicode コンソーシアム という、全世界のコンピューターで使われている文字を統一しようとしている機関が、「じゃあ、統一規格を作りましょう」といってできたのが Unicode 絵文字 である。

── ときは流れ、2025年 現代。

現代の PC, Mac, iOS, Android などはいずれも この Unicode 規格に従ったものをベースとして絵文字を作成している。…ただし、絵文字のデザインに関しては各社でまだ統一されておらず独自のデザインを使っている。たまに変えたりもしている。だから表示されるにはされるが、 「デザインがちょっと違うな…」 とか 「このデザインじゃニュアンスが変わっちゃうよ」 みたいなことは今もある。

あと、まだ新規追加されたりしてるので、 「古い OS だと表示されない💦」 みたいなことも結構あったりする。そういう意味での互換性の問題はまだまだあるのだ。謎の 「豆腐 ☐」 が表示されてしまったりすることも…。

果たしてすべてのデバイスで同じデザインが表示される日は来るのであろうか…。

● Unicode 規格とは?

と、いうわけで、
現代の絵文字は Unicode 規格にまとめられている。Unicode 規格とはなにか?を簡単に説明しておこう。

絵文字だけではなく、アルファベットや数字、記号、日本語などの文字などはすべて本来は 2進数のバイナリデータだ。そのままでは人間が読めない。
そこで 「2進数 01000001 だったらアルファベットの A を表示する」 みたいに、対応表(テーブル)が作られた。基本的なアルファベットや数字は ASCII テーブル にまとめられ、全世界共通で利用しているが、それ以外に関しては 文字コード (文字セット、キャラセットなどとも呼ばれる) というテーブルを各国の言語に合わせて作り、従うことになっていた。

文字コード も同じように バイナリ→文字 を変換するテーブルなのだが、日本語のような文字数が多いものについては 1 バイトでは表現しきれない。ので 2バイト以上のバイナリを使って表現するようになっている。これらはマルチバイト文字列と呼ばれる。その文字コードの方も昔はいくつか方式があって、例えば日本語だと ShiftJIS, EUC-JP, JIS (ISO-2022-JP) などがよく利用されていた。

が、
各国で好き勝手に文字コードが乱立していると、インターネット上では超不便だ。その文字コードが入っていないと文字が表示されないし、文字化けしてしまう。入っていたとしても判定に失敗して文字化けすることも、しばしばあった。…そこで全世界のあらゆる文字を同じ文字コードで表現できることを目指して Unicode 規格が作られた。

これに絵文字も入れてしまおう、というわけだ。
初めて絵文字が追加されたのは 2010年10月 Unicode ver.6.0.0 のときだった。

● おまけ②: Androidの場合、絵文字だけを更新することができる

実はこの記事を書くに当たって調べるまでは Android/iOS については最新の絵文字に対応したければ OS のバージョン・アップが必須だろうと思っていた。が、Android の場合は "Android絵文字ポリシー" なるものができてアプリ側で対応すれば新しい絵文字を表示できるらしい。

逆に言えば、 これをやっていないアプリではいつまで経っても表示できないよ、 ということ。それが Android 10 以降なのに Termux でだけ表示されなかった理由かーー!

おそらく、Firefox ではこのポリシーに従った更新処理をしているが、 Termux 側ではしていないのだと思われる。Firefox 優秀♥️


  1. Unicode 規格:
    乱立した文字コードの統一・統合を目指して作られた協会、およびその協会の成果物である文字コード規格のこと。絵文字だけではなく、世界中で使われるほとんどすべての文字をコンピューター上で表すことができる。2025年現代、IT業界では標準規格となっている。詳しくは、本稿のおまけを参照。

  2. Emoji 規格:
    2015年6月にリリースされたいわば Unicode のサブ規格のようなもの。URT#51。 2010年 〜 2015年の間に承認されたすべての絵文字を含む。 Unicode 絵文字を再度まとめ直した規格名。それまでバラバラと細かくバージョン・アップしていた Unicode 絵文字に対して、ちゃんと対応できている機器は少なかった。Unicodeの規格に含まれる文字は多岐に渡り、とにかく数が多い。加えて、絵文字についても異字体セレクタと呼ばれる別デザインがあったりと複雑。それらを実装し、ちゃんと表示されれるかどうかテスト、確認するだけでも非常に手間だった。これが各社のバージョンアップを足踏みさせる要因だった。
    そこで他の Unicode 文字についてはいったん置いておいて。異字体セレクタの模範的な使い方をしっかり定義して。絵文字の対応状況だけでも「最新に対応してます」と言えるように再定義したのが、この Emoji 1.0 だ。
    これを各社が対応することによって、また対応状況がチグハグになりつつあった絵文字が一斉に、統一的に利用することができるようになった。
    2015年8月に公開されたこの ver. 1.0 には、主に Unicode 6.0 〜 8.0 の新しい絵文字文字が含まれている。

  3. Unicode 6.0 にほぼ対応していない端末はない:
    理論上はそうなのだが、俺ちゃんが確認してみたところ、Unicode 6.0 の絵文字でも一部の文字はちゃんと表示されないことがあるようだった。
    例えば"Regional Indicator Symbol Letter" シリーズはアルファベットを絵文字にしたものだが、Linux + NotoFont の環境では(青色の)絵文字ではなく異字体の囲みの付いたテキストで表示される。ただし、Firefox で閲覧するとちゃんと青色の絵文字が表示できる。 "Astronomical Symbol for Uranus" なども後に続く文字に影響するらしく、不正に結合されてしまうなど表示が正常に行われないことがある。前者はおそらく、異字体セレクタの実装上の問題で、後者は結合文字処理の問題だと思う。Linux で利用しているウィジェット・ツールキットのレンダラーの問題か仕様だと思われるが… まあ、そういったケースもあるということで。絶対ではないと警告を記しておく。

  4. 絵文字の起源 :
    厳密には、それ以前にも似たものはあったらしいが、爆発的に流行ったのはガラケーをみんなが持つようになった頃だろうし、俺ちゃんは昔のことは知らないのでシカトするぜ。悪く思うな。ショーワ? なにそれ。美味しいの?

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?