datsukan blog
🖼️

JavaScriptで絵文字からTwemojiの画像URLを取得する方法

この記事は投稿してから1年以上が経過しています。

結論

yarn add twemoji cheerio
const twemoji = require("twemoji")
const cheerio = require("cheerio")

const url = twemojiURL("🐄")
console.log(url) // --> https://twemoji.maxcdn.com/v/14.0.2/svg/1f404.svg

function twemojiURL(emoji) {
  const html = twemoji.parse(emoji, { folder: "svg", ext: ".svg" })
  const $ = cheerio.load(html)
  const url = $("img").attr("src")

  return url
}

ダメなパターン

const codePoint = twemoji.convert.toCodePoint(emoji)
const baseUrl = "https://twemoji.maxcdn.com/v/latest/svg/"
const url = `${baseUrl}${codePoint}.svg`
const codePoint = twemoji.convert.toCodePoint(emoji)
const baseUrl = "https://twemoji.maxcdn.com/v/latest/72x72/"
const url = `${baseUrl}${codePoint.split("-")[0]}.png`

コードポイント(絵文字のUnicodeの値)を上記のように取得すると、いくつかの規則になっている。
単体のコードポイント、コードポイントが複数組み合わさったものとなっており、複数の場合はハイフン(-)区切りの文字列になってる。
厳密にはもう少し複雑な仕様らしい。(参考

このコードポイントの値を画像CDNのURLでPathを動的に指定すると、ある程度の絵文字は画像を取得できる。

前者がダメな理由

基本的にはこの方法で取得できるが、たまにURLで指定不要なコードポイント(fe0fなど)を含んでいる絵文字がある。
そのため、このままURLに指定すると画像を取得できない絵文字が出てくる。

後者がダメな理由

前者がダメな理由を考慮して、複数あるコードポイントの最初だけを取得してURLのPathに指定する方法を紹介している記事がネット上にあった。
この方法だとコードポイントが複数の絵文字(国旗など)の画像が取得できない。

とはいえ…

今回紹介した方法は、ライブラリの機能でHTMLのimgタグを生成して、生成したimgタグからURLを取得している。
本当なら単純にURLを取得するメソッドが使いたいところだが、なぜか無かった…。

コメント
 
URLをコピーしました
Profile picture
datsukan

24歳。埼玉県在住。東京都のSaaS企業でバックエンドエンジニアとして勤務しています。

© 2022 datsukan