Twemojiが2023年になると表示されなくなる問題に対処する (解消)
Twitter がオープンソースで提供している絵文字セット Twemoji を使えば、HTML 内に出てくる絵文字を、簡単に Twitter と同じデザインの絵文字画像に変換することができます。
しかし、デフォルトのまま使っている場合、 『2023年になって、突然絵文字画像が表示されなくなる』 なんてことになりかねないので、現在 Twemoji を使用している場合は注意が必要です。
この問題、あまり注目されていないみたいなので、啓蒙活動で記事にしました。
🆙 更新: 2023年1月13日
この記事に記すように、 『MaxCDN が廃止され、レイオフで Twitter による Twemoji の更新が期待できない状況』 であるため、レイオフされたメンテナーがリポジトリを Fork し、新しいパッケージ @twemoji/api として最新版 v14.1.0 が公開されました。
twemoji is now @twemoji/api
This is a fork of Twitter's Twemoji maintained by the same people. We don't work at Twitter anymore, but we love Twemoji and want to keep it alive.
v14.1.0 では、デフォルトの CDN が本記事で紹介している jsDelivr に変更されたため、 ライブラリの差し替え更新で、絵文字が再び表示されるようになります。
npm uninstall twemoji
npm install @twemoji/api --save
-import twemoji from 'twemoji'
+import twemoji from '@twemoji/api'
twemoji.parse(document.body)
<script> タグで CDN を使用している場合
-<script src="https://twemoji.maxcdn.com/v/latest/twemoji.min.js" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/@twemoji/api@latest/dist/twemoji.min.js" crossorigin="anonymous"></script>
また、今回 Twitter の枷が外れたことで、今後はコミュニティ主導での更新 (Unicode 15 の新規絵文字への対応など) にも期待が持てるようになります。
🪄 解消: 2023年1月18日
jsDelivr が StackPath とコンタクトを取り、 "廃止された twemoji.maxcdn.com のドメインを jsDelivr が取得する" というウルトラCが発動し、既存の Twemoji を使用する際のリンク切れが解消されました。
twemoji.maxcdn.com ドメインの URL は、現在 jsDelivr で配信されている対応するファイルに CNAME でリダイレクトされるようになっています。
The CDN is back online! All previous URLs will continue to work and redirect to jsDelivr
e.g. https://twemoji.maxcdn.com/2/svg/1f525.svgStackpath reached out to @jsdelivr and changed the DNS CNAME to point to a CDN we control.
— https://github.com/twitter/twemoji/issues/580#issuecomment-1385782398
jsDelivr の Dmitriy Akulov 氏 は、この記事が公開された直後より、世間に数多存在する Twemoji 画像のリンク切れを回避するために積極的に行動しており、（結果的にダウンタイムは発生してしまったものの）その行動が結実した形になります。
- https://github.com/twitter/twemoji/issues/556#issuecomment-1365110878
- https://github.com/twitter/twemoji/issues/580#issuecomment-1376274630
- https://github.com/twitter/twemoji/issues/580#issuecomment-1376282720
jsDelivr は過去、同じように廃止された RawGit や BootstrapCDN のリンク切れを回避した実績があります。
ひとまず画像は復旧しましたが、相変わらず Twitter が Twemoji にメスを入れる動きは見られないため、 @twemoji/api が元のメンテナーによるコミュニティフォークとして、引き続き維持される可能性はあります。
以下、過去のアーカイブとして経緯を残しておきます。
MaxCDN の廃止
Twemoji を普通に使うと、画像は MaxCDN という CDN でホスティングされているものが使用されます。例えば、 https://twemoji.maxcdn.com/v/14.0.2/svg/1fa84.svg などのような URL になります。
この MaxCDN ですが、現在は StackPath という会社に買収されており、 2022年末をもってプロダクトとしての MaxCDN が廃止される ことが5月に発表されています。
日本時間では大晦日、 2022年12月31日午前9時 にサービスが完全にシャットダウンされるようです。
もし既存の Web ページが twemoji.maxcdn.com を参照している場合、MaxCDN が何か特別な例外措置でも取っていない限り、このタイミングで絵文字画像を表示できなくなってしまいます。
Twemoji 側では、7 月にその旨の Issue が立っており、その時点では解決に向けて動いているようでした。
Twitter 買収に伴う影響
さすがにデフォルトで生成される URL が使えなくなるというのはライブラリとして問題ですので、『MaxCDN の廃止前に Twemoji ライブラリのアップデートで対処されるだろう』と思っていました。
しかし、11月にイーロン・マスクによる Twitter の買収があり、 Twemoji を担当するデザイナーがレイオフされ、ライブラリ更新が期待できない状況 になってしまいました。以下の Issue に詳細があります。
Twemoji の新バージョン (v15) は 10 月末時点で準備が整っていたようですので、新しいバージョンが出る可能性はまだありますが、今の Twitter やその周辺の状況を見る限り、その可能性はかなり低いでしょう。
また、仮に出たとしても、MaxCDN の問題が実際に対処されているかどうかも分かりません。
対処
Twemoji で生成される画像のベース URL は、base オプションで任意のものに変更することができます。
import twemoji from 'twemoji';
twemoji.parse(
document.body,
{ base: 'https://assets.example.com/twemoji/' }
);
例えば上記の場合、 https://assets.example.com/twemoji/72x72/2764.png といった URL を参照するようになります。
このベース URL を、自身が管理する Twemoji 画像をホスティングしているサーバー・ディリクトリに向ければ、ひとまず突然リンクが切れる心配は無くなります。
Twemoji を使用している Discord や Zenn などは、実際に自身で画像データを持っていますね。
代替のベース URL
とはいえ、デフォルトで使用しているユーザーにとって、急に画像をホスティングする環境を用意するのは難しいことです。以下に MaxCDN の代替として使える可能性のある URL を挙げておきます。
jsDelivr CDN: https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/
当該 Issue では、npm や GitHub のコンテンツを参照できる CDN jsDelivr が言及されています。jsDelivr を使えば、GitHub 上にある Twemoji 絵文字画像を CDN を通して参照することが可能です。
twemoji.parse(
document.body,
{ base: 'https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/' }
);
注意点として、 latest の部分は、現在使っている Twemoji のバージョンに合わせるのが好ましいでしょう。例えば最新の 14.0.2 なら、 https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/ になります。
cdnjs: https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/
問題発覚後の緊急パッチ (注: 未リリース) として、Cloudflare が運用する CDN cdnjs が使用されました。こちらを使っても、絵文字画像を参照することができます。
twemoji.parse(
document.body,
{ base: 'https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/' }
);
GitHub が信頼できる唯一のソースとなる jsDelivr とは異なり、cdnjs ではライブラリ単位で登録・管理が行われています。 (https://github.com/cdnjs/cdnjs/blob/master/ajax/libs/twemoji)
また、latest などのエイリアスバージョンはなく、常に明示的にバージョンを指定する必要があります。
GitHub Pages: https://twitter.github.io/twemoji/v/latest/
https://twitter.github.io/twemoji/v/latest/元々の MaxCDN の URL https://twemoji.maxcdn.com/ は、Twemoji リポジトリの GitHub Pages の内容を指すカスタムドメインのようです。
そのため、GitHub Pages オリジナルの URL https://twitter.github.io/twemoji/ を使っても、理論上同じコンテンツが参照されます。
コード（参考）
twemoji.parse(
document.body,
{ base: 'https://twitter.github.io/twemoji/v/latest/' }
);
まとめ
Twemoji を使用中の方は、 base オプションを見直して、2023年に絵文字画像が表示されなくなってしまわないように備えましょう！そして良い年末年始をお過ごしください🎍
Discussion
とても参考になる情報をありがとうございます！
GitHub PagesのURLについては皆が一斉に使い出すとBandwidth制限を超えてしまってもしかするとアクセスできなくなるかも（？）です。
ご指摘ありがとうございます、確かにそうでした！それが CDN を通している理由ですね。
jsDelivr の方をお勧めするように記事を更新しておきます！ありがとうございます！！
有用な記事ありがとうございます...!! 😻✨
$ git grep maxcdnをいくつかのリポジトリで試して気づいたのですが、昔の Bootstrap は MaxCDN を使っていたようなので、Twemoji だけでなく 数年前に Bootstrap を導入したまま更新していない場合 も影響範囲の対象になりそうかなと思いました 😭💦（こっちはレイアウトが全体的に崩れちゃうかもしれないですね...😢）検索例: https://www.google.com/search?q="maxcdn"+bootstrap
コメントありがとうございます！
一番頻出する
maxcdn.bootstrapcdn.comに関して言えば、セカンドレベルドメインが MaxCDN のmaxcdn.comではなく、jsDelivr が運用しているbootstrapcdn.comになっているので、影響を受けません。jsDelivr のブログによると、 "
maxcdn.bootstrapcdn.comは Cloudflare による新しい CDN インフラに移行した" (意訳) と記されていることから、今回提供が終了する MaxCDN のインフラは使用されていない可能性が高いです。なるほど!
maxcdn.*となっているから MaxCDN を使っているのかなと思い込んでしまいましたが、そちらは Cloudflare だったんですね 😎✨ コメントでの共有ありがとうございます...!! 🙏💖公式には明言されていませんが cdnjs を確認したところいつの間にか twitter/twemoji から jdecked/twemoji を参照するように変更されてました。