Twitter Emoji — как использовать красивые эмодзи на своём сайте

Перед началом статьи хочу сказать, что еще больше полезной и нужной информации для айтишников всех специальностей и уровней вы найдете на нашем сайте DevGeeks.

Оригинал: Twitter Emoji – How to Use Twemoji on Your Website

Twitter Emoji — как использовать красивые эмодзи на своём сайте

В этой статье я объясню, что такое Twitter Emoji - или Twemoji - и почему вы можете захотеть их использовать.

Пару месяцев назад я начал работать над одним своим проектом, и мне нужно было дать пользователям возможность выбирать различные значки для ввода.

Подумав немного, я решил использовать эмодзи вместо иконок, поскольку все уже знают о них, и они доступны практически везде.

Пример веб-приложения с нативными эмодзи

Достаточно просто, верно? Ну, не совсем. Как и у всего остального, у эмодзи есть свои проблемы, о которых вы можете не знать, пока не потратите некоторое время на работу с ними.

Одна из самых распространенных проблем с эмодзи заключается в том, что они очень непостоянны в дизайне и поддержке в разных операционных системах и даже в разных браузерах.

Например, если вы выбрали определенный эмодзи на своем телефоне, он может выглядеть совсем иначе на ноутбуке, или он может отображаться как квадрат или как рамка, если ваша ОС не имеет последней версии поддержки Unicode.

Если у вас много эмодзи по всему проекту, это может превратиться в серьезную проблему пользовательского опыта и начать раздражать ваших пользователей. Поэтому мне нужно было найти способ решить эту проблему до того, как она начнет отталкивать пользователей от проекта.

Проведя небольшое исследование, я наткнулся на набор эмодзи от Twitter! Twemoji - это библиотека с открытым исходным кодом, которая обеспечивает стандартную поддержку эмодзи на всех платформах. С ее помощью очень легко поддерживать все новейшие эмодзи на разных ОС и браузерах, и чтобы все они выглядели одинаково.

Это все, что мне было нужно, поэтому я, не колеблясь ни минуты, интегрировал ее в свой проект, и она решила все мои проблемы.

Пример веб-приложения с использованием эмодзи Twitter

Давайте теперь немного испачкаем руки кодом и посмотрим, как работает Twemoji.

Вкратце, Twemoji имеет альтернативные SVG и PNG для каждого Unicode emoji. Это позволяет нам импортировать их из CDN или локально и отображать каждый в виде изображения вместо текста Unicode. Это означает, что они поддерживаются везде, и у нас всегда есть доступ к самым последним эмодзи.

Для начала нам нужно импортировать Twemoji в наш HTML-документ. Для этого скопируем и вставим в тег нашего документа следующее.

Далее нам нужно использовать библиотеку, которую мы только что импортировали, и заставить ее разобрать наш Unicode в Twemojis. Существует два способа разбора ваших эмодзи, и я расскажу об обоих, чтобы вы решили, какой из них больше подходит для ваших нужд.

Разбор всего содержимого Body

Первый и более простой вариант - это заставить Twemoji проанализировать весь наш DOM и автоматически преобразовать каждый Unicode emoji и заменить его на Twemoji. Чтобы реализовать это, все, что нам нужно сделать, это использовать пакет, который мы только что импортировали, и передать ему тело нашего документа следующим образом:

twemoji.parse(document.body);

Как только мы вызовем twemoji.parse и передадим ему тело документа в качестве аргумента, он разберет все, что находится внутри тела. И заменит текстовые Unicode emojis на изображения Twemoji без ущерба для окружающих записей.

На этом этапе ваш HTML-документ должен выглядеть следующим образом. Когда вы откроете его в браузере, вы должны увидеть Twemoji.

<html> <head> <script src="https://twemoji.maxcdn.com/v/latest/twemoji.min.js" crossorigin="anonymous"></script> </head> <body> 📮 </body> <script> twemoji.parse(document.body) </script> </html>

Имейте в виду, что этот метод сопровождается некоторым снижением производительности, поскольку мы выполняем эту операцию над каждым элементом внутри нашего тела, что может быть довольно дорогостоящим.

Разбор каждого Emoji вручную

Для своего проекта я выбрал путь ручного парсинга. Это дало мне больше контроля над тем, как обрабатываются данные, и снизило потери производительности по сравнению с разбором всего документа.

Но этот метод более сложный, и я бы не рекомендовал его использовать, если у вас нет веских причин, чтобы решить вручную разобрать ваши emojis вместо того, чтобы разбирать весь документ.

Чтобы понять разницу, важно знать, как работает метод разбора:

Если первым аргументом twemoji.parse является HTMLElement, метод автоматически разберет элемент и заменит эмодзи внутри документа. Если же первым элементом является строка, метод разберет один эмодзи и позволит нам получить данные в функции обратного вызова, которую мы можем определить.

Вернемся к нашему HTML-документу, передадим эмодзи в виде строки, предоставим метод обратного вызова и выведем аргументы на консоль.

const emoji = "📮" twemoji.parse(emoji, { callback: (icon, options) => { console.log(icon, options) } }) // Вывод в консоле // 1f4ee {base: 'https://twemoji.maxcdn.com/v/14.0.2/', ext: '.png', size: '72x72', callback: ƒ, attributes: ƒ, …}

Как видите, параметры обратного вызова дают нам всю информацию, необходимую для построения исходного URL и добавления его в наш документ в виде изображения.

Далее давайте определим метод, который принимает опции и создает наш исходный URL.

function constructTwemojiURL(icon, options) { return ''.concat( options.base, options.size, '/', icon, options.ext ); }

Теперь мы можем вызвать этот метод из обратного вызова, чтобы получить URL источника, затем создать новый тег изображения и добавить его в наш документ.

const emoji = "📮" twemoji.parse(emoji, { callback: (icon, options) => { // создать тег изображения const img = document.createElement('img'); // назначить источник изображения img.src = constructTwemojiURL(icon, options) img.alt = "Twemoji" // добавляем тег в тело нашего документа document.body.append(img) } })

Наконец, если мы откроем HTML-документ в нашем браузере, мы увидим наш Twemoji. На этом этапе ваш HTML-документ должен выглядеть следующим образом:

<html> <head> <script src="https://twemoji.maxcdn.com/v/latest/twemoji.min.js" crossorigin="anonymous"></script> </head> <body></body> <script> function constructTwemojiURL(icon, options) { return ''.concat( options.base, options.size, '/', icon, options.ext ); } const emoji = "📮" twemoji.parse(emoji, { callback: (icon, options) => { // создать тег изображения const img = document.createElement('img'); // назначить источник изображения img.src = constructTwemojiURL(icon, options) img.alt = "Twemoji" // добавляем тег в тело нашего документа document.body.append(img) } }) </script> </html>

Вот, в общем-то, и все! В этой статье мы поговорили о том, почему вы можете решить использовать Twemojis в своем веб-приложении, и рассмотрели два различных способа реализации этого в зависимости от вашего сценария использования.

Мы регулярно публикуем материалы для айтишников всех специальностей и уровней. Вы их найдете на нашем сайте DevGeeks.ru

#twitter #эмодзи #javascript #иконки_приложений

Twitter Emoji — как использовать красивые эмодзи на своём сайте

Почему вы должны использовать Twitter Emojis на своём сайте?

Как работает Twemoji?

Как начать работу с Twemoji

Заключение