絵文字ピッカー:検索してコピー
Unicode 15.1の3,700以上の絵文字ピッカー。名前で検索、9カテゴリを閲覧、肌の色を選んでクリックでコピー。
絵文字ピッカーとは?
このピッカーを作ったのは、システムの絵文字パネルを開いて毎回同じ5つの顔を取りに行くのに疲れて、結局2分スクロールしてしまうのが嫌だったからです。タイプして、クリックして、貼り付ける——フローはそれだけです。データセットはUnicode 15.1(3,700以上の絵文字)で、9つのカテゴリに整理されています。検索ボックスは名前とキーワードの両方にマッチし、人の絵文字には6段階のFitzpatrickの肌の色、そしてセッション中にコピーしたものを覚えてくれる「最近」の行があります。
主な機能
データセットはUnicode 15.1で、2023年までに追加されたすべての顔、手、食べ物、旗、シンボルを規格から直接取り込んでいます。カテゴリはUnicodeコンソーシアムが定義する9つです:スマイリーと感情、人と体、動物と自然、食べ物と飲み物、旅行と場所、アクティビティ、オブジェクト、シンボル、旗。「最近」の行はカテゴリボタンの隣に並び、セッション中にコピーしたものを記録します。localStorageのRECENT_EMOJIS_KEYに保存され、MAX_RECENT_EMOJIS件で上限が設けられています。
検索は絵文字の名前とキーワードリストの両方を照会するので、heartと入力すると❤️だけでなく💛、💚、💙、💘も返ってきます。肌の色はFitzpatrickスケール(デフォルト+5つのモディファイア)を使い、選んだ色は対応するすべての人の絵文字に適用され、hasSkinTone === falseの絵文字(オブジェクト、旗、食べ物)は選択を無視します。絵文字をクリックするとクリップボードに書き込まれ、タイル上に1.5秒間緑のチェックオーバーレイが点滅し、トーストも表示されます——クリップボード書き込みは見落としやすいので、3層のフィードバックです。
グリッドはレスポンシブで、スマホ画面で8列、タブレットで10列、デスクトップで12列です。高さは400pxに固定され、大きいカテゴリは縦スクロールで対応します。
使い方
近日公開: 絵文字ピッカーを開くと、スマイリーと感情で起動します。他のカテゴリボタンをクリックすれば切り替わります。色をつけたいときは、絵文字をクリックする前にカテゴリの上にある6つの手を振るボタンの行から1つ選んでください。選んだ色はコピー時に適用されるので、中間の色を選んだ状態で👋をクリックすればクリップボードには👋🏽が入ります。名前が思いつくものはスクロールより検索の方が速く、coffeeと打てば☚、🧋がすぐに出ます。フィールドを消せばカテゴリ閲覧に戻ります。
「最近」の行(時計アイコン、カテゴリバーの一番左)はセッションの履歴をコピー順に保ちます。「最近」はベース絵文字を肌の色モディファイアなしで保存し、現在の色選択がコピー時に再適用されるので、色を切り替えても履歴は乱れません。
実用例
ローンチについてSlackに投稿する場合:
検索:fire → 🔥をクリック
検索:rocket → 🚀をクリック
両方が「最近」に入って、次のメッセージで使えます。
国旗が何行目にあるか覚えていなくても選びたい場合:
旗カテゴリ → 検索:brazil → 🇧🇷をクリック
1つのメッセージで肌の色を揃えたい場合:
色:濃い(5番目のボタン) → 👍、🙏、🤝をクリック
クリップボードには 👍🏿 → 🙏🏿 → 🤝🏿
ヒントとベストプラクティス
色とカテゴリの選択はコンポーネントの状態に保存され、プリセットから復元されます(プレミアム機能)。保存したプリセットはselectedSkinToneとselectedCategoryの両方をキャプチャします。
検索はランク付けされていません。結果はデータセットの自然な順序で返ってくるので、heartやfaceのような広い語は多く、anguishedのような狭い語は1〜2件です。検索が空のときは類義語を試してください:cryの代わりにsob、big smileの代わりにgrin、brownで出ないならpoop。データセットの名前は正式なUnicode名で、口語表現とは必ずしも一致しません。
色のモディファイアはhasSkinTone === trueの絵文字にのみ適用されます。旗、食べ物、オブジェクト、シンボルはどの色を選んでも黄色のままです。
よくある問題と解決方法
何度かコピーしたのに「最近」が空。 リストはlocalStorageから読み込みます。プライベート/シークレットウィンドウやlocalStorageを無効にしているブラウザでは保存されません——セッション中のコピーはメモリには残りますが、再読み込みでリセットされます。
貼り付けた絵文字が四角や疑問符で表示される。 受け取り側のアプリやプラットフォームがそのUnicode 15.1コードポイントに対応していません。2022〜2023年に追加された絵文字は、古いAndroidや古いOS、絵文字フォントを更新していないアプリでは表示されないことがあります。2015〜2019年の古い絵文字はどこでも動きます。
トーストは「コピーされました」だがクリップボードの色が違う。 肌の色モディファイアが選択されています。一番左(デフォルト)の色ボタンをクリックしてモディファイアを外し、もう一度コピーしてください。
プライバシーとセキュリティ
検索、カテゴリのフィルタリング、肌の色の適用、クリップボードへの書き込みはすべてローカルで動きます。絵文字データセット全体はページのJavaScriptに同梱されています。クエリ、コピーした文字、利用データはどこにも送信されません。最近の絵文字はlocalStorageにあり、デバイスから離れません。最初の読み込み後はオフラインで動きます。
よくあるご質問
肌の色の選択はどう機能しますか?
Unicodeでは肌の色はFitzpatrickスケールのモディファイアコードポイント(U+1F3FB〜U+1F3FF)を使い、ベース絵文字のコードポイントの後に追加されます。ピッカーはapplySkintone(emoji.emoji, selectedSkinTone)を呼び出し、絵文字のhasSkinToneフラグがtrueのときにモディファイアを連結します。肌の色をサポートしない絵文字はモディファイアなしでコピーされます。
「最近」には何件まで保存できますか?
「最近」リストはMAX_RECENT_EMOJIS件で上限が設けられています。新しいコピーは先頭に押し出され、上限に達すると最も古いものが落ちます。同じ絵文字を再度コピーすると、複製ではなく先頭に移動します。
英語以外の言語で検索できますか?
いいえ。検索はデータセット内の名前とキーワードを照会しますが、これらはUnicode規格の正式な英語名です。英語のキーワードを使ってください。
絵文字をクリックすると緑のオーバーレイが出るのはなぜですか?
コピーが成功した視覚的な確認です。オーバーレイは1.5秒(setTimeout(() => setCopiedEmoji(null), 1500))保持され、その後フェードアウトします。横のトーストはコピーされた具体的な文字を確認します。
今すぐ絵文字ピッカーを試す:近日公開: 絵文字ピッカー
関連ツール
- 近日公開: ASCIIテーブル — ASCII範囲の絵文字以外の文字コードを調べる。
- 近日公開: ランダムピッカー — 自分のリストからランダムに選ぶ。