Twemoji
Twitterのemoji library
/icons/github.icontwitter/twemoji
絵文字の画像の取得方法
手動の場合
絵文字画像をダウンロードするからdownloadするのが簡単
自動の場合
https://cdn.jsdelivr.net/npm/twemoji@13.1.0/dist/twemoji.esm.js などからtwemojiのlibraryを読み込んで使う
例
code:sh
deno run --allow-net https://scrapbox.io/api/code/takker/Twemoji/test.js
code:test.js
import twemoji from 'https://cdn.jsdelivr.net/npm/twemoji@13.1.0/dist/twemoji.esm.js';
import {codemap} from '../Slack絵文字コードの対応表/codemap.js';
import {throttle} from '../promise-parallel-throttle/script.js';
const emojis = Object.keys(codemap).map(key => codemapkey);
let counter = 1;
const notFounds = [];
const json = await throttle(emojis.map(emoji => async () => {
// emojiを構成するUTF-16 surrogate pairsを取得する
/*const list = [];
for(let i = 0;;i++){
const code = emoji.charCodeAt(i);
if (isNaN(code)) break;
list.push(code.toString(16));
}*/
const filename = twemoji.convert.toCodePoint(emoji);
const url = https://cdnjs.cloudflare.com/ajax/libs/twemoji/13.1.0/svg/${filename}.svg;
const index = counter++;
console.log([${index}/${emojis.length}] Fetch ${url});
try {
const res = await fetch(url);
if (!res.ok) throw Error(status: ${res.status});
console.log([${index}/${emojis.length}] ${emoji} is available. code: ${filename});
return {emoji, url, svg: await res.text()};
} catch (e) {
// -fe0fを削って再挑戦
const newFilename = filename.replaceAll('-fe0f', '');
const newURL = url.replaceAll('-fe0f', '');
const res = await fetch(newURL);
if (!res.ok) {
console.error([${index}/${emojis.length}] ${emoji} is not found. code: ${newFilename});
notFounds.push({emoji, filename: newFilename});
return;
}
console.log([${index}/${emojis.length}] ${emoji} is available. code: ${newFilename});
return {emoji, url: newURL, svg: await res.text()};
}
}), {maxInProgress: 10});
console.log(Finished. success: ${emojis.length - notFounds.length}, failed: ${notFounds.length});
console.log('Faild: ', notFounds);
2021-07-08 13:00:51 これでも404になる?
e.g.
🐿️: https://cdnjs.cloudflare.com/ajax/libs/twemoji/13.0.2/svg/1f43f-fe0f.svg
🏙️: https://cdnjs.cloudflare.com/ajax/libs/twemoji/13.0.2/svg/1f3d9-fe0f.svg
2021-07-08 13:27:00 twemojiのversionが古かった
versionを上げてもいっかいチャレンジ
2021-07-08 13:29:50 やはりバリエーションセレクター16が含んであるものの一部がエラーになっている?
👁️‍🗨️: https://cdnjs.cloudflare.com/ajax/libs/twemoji/13.1.0/svg/1f441-fe0f-200d-1f5e8-fe0f.svg
-fe0fを削るとうまくいく
https://cdnjs.cloudflare.com/ajax/libs/twemoji/13.1.0/svg/1f441-200d-1f5e8.svg
2021-07-08 13:40:28 -fe0fを削ったら1つ以外うまく行った
うまく行かなかったのはⓜ️
https://cdnjs.cloudflare.com/ajax/libs/twemoji/13.1.0/svg/24dc.svg
どうやらⓜはSlack絵文字コードには:m:として存在するが、twitter絵文字には存在しないようだ
Slack絵文字にも存在しない
\u24c2は存在するが\u24dcは存在しない
というかSlack絵文字はNoto Emojiだった
じゃあそっちを使えばいいか
うまく行かなかったコード
String.prototype.codePointAt()を使ってUnicode valueを取得する
これだと一部の絵文字のURLを正しく生成できない
twemojiのファイル名の生成方法がわからなかった
code:js
(async () => {
const {getURL} = await import('https://scrapbox.io/api/code/takker/Twemoji/script.js');
console.log(getURL('0️⃣'));
})();
code:script.js
export function getURL(emoji) {
// emojiを構成するcode pointを取得する
const list = [];
for(let i = 0;;i++){
const code = emoji.codePointAt(i);
if (isNaN(code)) break;
// バリエーションセレクター16を飛ばす
if (code === 65039) continue;
//サロゲートペアを飛ばす
if (55296 <= code && code <= 57344) continue;
list.push(code.toString(16));
}
return https://cdnjs.cloudflare.com/ajax/libs/twemoji/13.0.2/svg/${list.join('-')}.svg;
}
#Twitter絵文字
#2021-07-08 11:21:16