在昨天的 有趣的實驗 裡，我們測試了老朋友 🐬 在 Noto Color Emoji 上的可能性，除了讓使用者能自由的選色之外，也應該要可以讓使用者選擇想要的 Emoji——或許有人想要幫狗勾 🐶 換色呢。

Emoji 的輸入方法

自從 Emoji 納入 Unicode 的官方標準後，各個廠商已經不再需要 透過 PUA 區段 儲存。而在各個主流作業系統，也紛紛內建了輸入 Emoji 的方式，例如在 Windows 裡，可以透過「windows + .」打開 Emoji 鍵盤、而在 macOS 裡，則可以透過「control + command + space」啟用；置於 Android 和 iOS 移動設備端，也會有 Emoji 小鍵盤可以輸入。

不過，想必還是會有使用者不知道這些快捷鍵，至今還是透過複製貼上的方式來輸入，因此，我們想要直接放置一個 Emoji 挑選器——直觀、簡單、又方便。

Emoji-Mart

如果在 Github 上搜尋 Emoji picker 之類的關鍵字，可以找到不少的 repo，在這裡，我們以 Star 數最多、更新最為頻繁的 emoji-mart 套件 為例。

emoji-mart 除了 Picker（選擇器）的本體之外，還需要額外掛載紀錄 emoji 的 data。除了遠端 fetch 回來的方法之外：

import { Picker } from 'emoji-mart'
new Picker({
  data: async () => {
    const response = await fetch(
      'https://cdn.jsdelivr.net/npm/@emoji-mart/data',
    )
    return response.json()
  }
})

也可以直接把 data 的部分 bundle 起來：

import { Picker } from 'emoji-mart'
import data from '@emoji-mart/data'

new Picker({ data })

Options

emoji-mart 的 repo 裡面有詳細紀錄建立一個 Picker 可以賦予的選項，其中最常設置的有以下幾個：

• data：Emoji 的資料。如上一章所示，差別就在於要聯網從 remote 抓取回來、或是直接 bundle 打包起來。
• onEmojiSelect：選取 Emoji 時要觸發的動作。以今天的目標為例，就是要讓使用者在點選任一個 Emoji 時，可以傳回該 Emoji 的資料。
• emojiVersion：Emoji 的版本。這個版本號與 Unicode 的版本號一致，換句話說，目前最新的 Unicode 15.1 對應的就是 Emoji 15.1 版本。比較可惜的是，emoji-mart 的版本目前停留在 14.0，也就是 2021 年九月的版本。更新版本的 Emoji 如（請確定你裝置的字型也有更新才會正確顯示） 🫨（顫抖的臉 U+1FAE8）、🫎（麋鹿 U+1FACE）、🪿（鵝 U+1FABF）、🪼（水母 U+1FABC）就不在 Picker 裡面。
• set：要用哪套 Emoji。除了隨使用者裝置顯示的 native 之外，可選的還有 apple 、 facebook 、 google 以及 twitter。

至於要選擇哪一種風格集嘛～這裡提到的四種 set 可以說是四分天下，apple 和 google 風格佔據了 iOS/macOS 和 Android 的市場份額，而 facebook 和 twitter 也是許多人日常一定會使用的社群網站。使用者對他們應該都相對熟悉，所以端看網頁需求即可。

onEmojiSelect

每當使用者點選任一個 Emoji 的時候，就可以藉由 onEmojiSelect 回傳該 Emoji 的詳細資訊，我們可以印出這個資訊的 Object 看看：

const pickerOptions = { onEmojiSelect: (res, _) => console.log(res) }

在點選 🐬 之後，我們就可以得到 🐬 的資訊啦：

> {id: 'dolphin', name: 'Dolphin', native: '🐬', unified: '1f42c', keywords: Array(8), …}
aliases: ['flipper']
id: "dolphin"
keywords: (8) ['flipper', 'animal', 'nature', 'fish', 'sea', 'ocean', 'fins', 'beach']
name: "Dolphin"
native: "🐬"
shortcodes: ":dolphin:"
unified: "1f42c"

裡面有一些有趣的東西，像是 Emoji 本體 native、名字 name、代表 Unicode 唯一碼位的 unified、可以找到該 Emoji 的關鍵字 keywords 等等。而我們真正需要的，可以是本體 native，也可以是代表碼位的 unified，畢竟兩者之間的關係是唯一的，其轉換方式可以參考 DAY 20 的內容。