WordPress: Emoji機能とは。何をやっているのかコードを追ってみた

WordPressは絵文字に関するスクリプトコードをWebサイトに組み込んでいます。
どんな機能なのか気になったので、少し調べてみました。

headタグ内に挿入されるEmoji

WordPressはheadタグに次のタグを出力してくれます。

<script type="text/javascript">
window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/13.1.0\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/13.1.0\/svg\/","svgExt":".svg","source":{"concatemoji":"http:\/\/xxx.com\/wp-includes\/js\/wp-emoji-release.min.js?ver=5.9.1"}};
/*! This file is auto-generated */
!function(e,a,t){var n,r,o,i=a.createElement("canvas"),p=i.getContext&&i.getContext("2d");function s(e,t){var a=String.fromCharCode;p.clearRect(0,0,i.width,i.height),p.fillText(a.apply(this,e),0,0);e=i.toDataURL();return p.clearRect(0,0,i.width,i.height),p.fillText(a.apply(this,t),0,0),e===i.toDataURL()}function c(e){var t=a.createElement("script");t.src=e,t.defer=t.type="text/javascript",a.getElementsByTagName("head")[0].appendChild(t)}for(o=Array("flag","emoji"),t.supports={everything:!0,everythingExceptFlag:!0},r=0;r<o.length;r++)t.supports[o[r]]=function(e){if(!p||!p.fillText)return!1;switch(p.textBaseline="top",p.font="600 32px Arial",e){case"flag":return s([127987,65039,8205,9895,65039],[127987,65039,8203,9895,65039])?!1:!s([55356,56826,55356,56819],[55356,56826,8203,55356,56819])&&!s([55356,57332,56128,56423,56128,56418,56128,56421,56128,56430,56128,56423,56128,56447],[55356,57332,8203,56128,56423,8203,56128,56418,8203,56128,56421,8203,56128,56430,8203,56128,56423,8203,56128,56447]);case"emoji":return!s([10084,65039,8205,55357,56613],[10084,65039,8203,55357,56613])}return!1}(o[r]),t.supports.everything=t.supports.everything&&t.supports[o[r]],"flag"!==o[r]&&(t.supports.everythingExceptFlag=t.supports.everythingExceptFlag&&t.supports[o[r]]);t.supports.everythingExceptFlag=t.supports.everythingExceptFlag&&!t.supports.flag,t.DOMReady=!1,t.readyCallback=function(){t.DOMReady=!0},t.supports.everything||(n=function(){t.readyCallback()},a.addEventListener?(a.addEventListener("DOMContentLoaded",n,!1),e.addEventListener("load",n,!1)):(e.attachEvent("onload",n),a.attachEvent("onreadystatechange",function(){"complete"===a.readyState&&t.readyCallback()})),(n=t.source||{}).concatemoji?c(n.concatemoji):n.wpemoji&&n.twemoji&&(c(n.twemoji),c(n.wpemoji)))}(window,document,window._wpemojiSettings);
</script>
<style type="text/css">
img.wp-smiley,
img.emoji {
display: inline !important;
border: none !important;
box-shadow: none !important;
height: 1em !important;
width: 1em !important;
margin: 0 0.07em !important;
vertical-align: -0.1em !important;
background: none !important;
padding: 0 !important;
}
</style>

AFFS Simple Code Viewer

Copy

これは絵文字に関するもので、絵文字を使用しないサイトではムダなコードだから削除しようという意見が多い。
僕もムダという意見には賛同します。

でも削除したからといって、絵文字が使えなくなるわけではありません。
このコードって絵文字とか関係ないんじゃない？って思いますよね。

絵文字が表示される理由

絵文字というと、次のようなものを思い浮かべると思います。

😀😂👻💞💯🗯👩‍🎓🧚‍♀️

これらはUnicodeの絵文字に文類されます。
Unicodeは文字に番号を振った一覧表で、漢字も含まれています。
つまり漢字と絵文字は同じ仲間ということです。
絵文字が他の文字と同じようにコピペできるのは、同じ仲間だからです。

ブラウザでWebページを表示するとき、サーバーからは文字の番号が送られてきます。
実際に表示される文字や絵はコンピューターに保存されていて、対応する番号の絵を画面に表示しています。

つまりWordPressが何もしなくても、絵文字は表示されるのです。

Unicodeを含めた文字コードについて、こちらの記事で解説しています。

UTF-8・16やShift-JISって何？文字コードについて説明してみる

WordPressは何をしているのか

WordPressは何をしているのかは、次の解説がありました。

For best performance, we use the system emoji where available. When the viewer’s device does not support the latest emoji, WordPress.com uses Twiemoji, Twitter’s open-source emoji.
https://wordpress.com/support/emoji/より

翻訳すると、次のようになります。

「最高のパフォーマンスを得るには、可能な場合はシステム絵文字を使用します。視聴者のデバイスが最新の絵文字をサポートしていない場合、WordPress.comはTwitterのオープンソース絵文字であるTwiemojiを使用します。」

ここでの絵文字は主に二つ以上の絵文字が複合されるものを指しているようです。

この場合のデバイスとはコンピューターではなくてブラウザを指しているようです。

例えば次のとろける顔は、Uniocode Emoji 14.0という新しいバージョンで追加されたものです。