結論
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を取得するメソッドが使いたいところだが、なぜか無かった…。