絵文字検索とコピー

絵文字検索・コピーツールとは？#

絵文字は 1 文字のように見えますが、内部ではそうでないものが大半です。ニッコリ顔 😀 は Unicode コードポイント 1 つですが、赤いハート ❤️ は 2 つ（基本のハートに加え、それをプレーンテキストグリフではなくカラフルな絵文字として描画するよう強制するバリエーションセレクタ）で、中国の旗 🇨🇳 は 2 つの地域指示文字を貼り合わせたものです。絵文字そのものが必要なときは関係ありません — グリフを貼るだけです。しかし、ドキュメント用のコードポイント、Web ページ用の HTML エンティティ、文字列リテラル用の JavaScript エスケープ、content: ルール用の CSS エスケープが必要になった瞬間、複数コードポイントの絵文字は UTF-16 単位で分割する素朴なツールを壊し、壊れたサロゲート片を生成します。

本ページは、それらすべてを正しく扱う検索可能な絵文字カタログです。自分の言語で名前やキーワードで検索し、9 つのカテゴリを閲覧し、任意の絵文字をクリックして 5 つの形式のいずれかでコピーできます — グリフ、コードポイント、HTML、JavaScript、CSS — いずれもグリフをコードポイントごとに歩いて生成されるため、❤️ も 🇨🇳 も正しく出力されます。

使い方#

レイアウトは、左に サイドバー（検索＋カテゴリ）、右に グリッド＋詳細パネル です。

1. 絵文字を探します。 検索 ボックスに入力するか、サイドバーのカテゴリをクリックします（顔と感情、人と身体、動物と自然、食べ物と飲み物、アクティビティ、旅行と場所、物、記号、旗）。検索は自分の言語の名称とキーワード、さらに英語名とコードポイントに一致します — そのため heart や 1F600 はどのロケールでも機能します。
2. グリッドの絵文字をクリックします。 グリッド下の詳細パネルに、グリフ、ローカライズされた名称、Unicode バージョンが入ります。
3. 必要な形式でコピーします。 詳細パネルに 5 つのコピーボタンがあります。
   • 絵文字をコピー — グリフそのもの。チャット、ドキュメント、デザインツール用。
   • コードポイントをコピー — U+... 形式（複数ある場合はスペース区切り）。ドキュメントや Unicode ルックアップ用。
   • HTML エンティティをコピー — 10 進の数値文字参照。生の HTML への貼り付け用。
   • JS エスケープをコピー — ES2015 のブレースエスケープ。JavaScript や TypeScript の文字列リテラル用。
   • CSS エスケープをコピー — CSS エスケープ。content: や ::after ルール内で使用。

主な機能#

• 5 つのコピー形式、いずれも 1 クリック。 グリフ、コードポイント、HTML/JS/CSS エスケープ形式の間の手動変換は不要 — すべての絵文字が 5 つすべてで利用できます。
• 複数コードポイント絵文字に正確。 エスケープはグリフを UTF-16 単位ではなく Unicode コードポイントで反復して生成されます。赤いハート ❤️ は壊れたサロゲートペアではなく、きれいな \u{2764}\u{FE0F} を生成します。
• 言語をまたぐロケール対応検索。 名称とキーワードはローカライズされますが、英語も常にインデックスされ、生のコードポイントも加わるため — smile、ローカライズされた単語、1F600 のいずれも同じ絵文字に届きます。
• 9 つのカテゴリ。 標準の Unicode 絵文字カテゴリで、それぞれにサイドバーに代表的なグリフがあり、検索語がないときにも閲覧できます。
• キーボードとスクリーンリーダーに配慮。 グリッドは矢印キーでナビゲーションできるリストボックスで、詳細パネルは移動に合わせて名称とコードポイントをアナウンスする aria-live 領域です。

実例#

赤いハート ❤️ を 5 つの形式すべてでコピーします。記号カテゴリ（または heart で検索）でクリックすると、詳細パネルに次が表示されます。

• 絵文字: ❤️
• コードポイント: U+2764 U+FE0F
• HTML: ❤️
• JS: \u{2764}\u{FE0F}
• CSS: \2764 \FE0F

コードポイントが 1 つではなく 2 つ あることに注目してください。U+2764 は基本のハート（絵文字が存在する前からのプレーンテキスト文字）で、U+FE0F はバリエーションセレクタ-16 というゼロ幅のコードポイントで、唯一の役割はレンダラに「前の文字を黒いテキストグリフではなく、カラフルな絵文字形式で表示せよ」と伝えることです。セレクタを外せばプラットフォームによってはテキストスタイルのハートになり、保持すれば赤い絵文字になります。ここでのすべての形式が両方のコードポイントを保つため、HTML エンティティをページに貼っても色付きハートが描画されます。

対照的に、ニッコリ顔 😀 は単一コードポイント（U+1F600）です。その形式は 😀、\u{1F600}、\1F600 と畳み込まれます — エンコードすべきコードポイントが 1 つしかないため、エスケープも 1 つずつです。両者の違いこそ、（1 グリフ = 1 コードポイントと仮定するのではなく）コードポイントを歩くツールが意味を持つ理由です。

よくある質問#

何をしているかに応じてどの形式をコピーすべきですか？#

チャットメッセージ、ドキュメント、デザインモックアップには 絵文字をコピー — グリフは普遍的です。特定の文字を参照する技術ドキュメントやバグ報告には コードポイントをコピー（U+1F600）。生の HTML ソースには HTML（😀）が最も安全で、エンコーディング問題で壊されることがありません。JavaScript や TypeScript の文字列には JS（\u{1F600}）。CSS の content: 値には CSS（\1F600）。

なぜ赤いハートは 2 つのコードポイントを示すのですか？#

❤️ は単一の文字ではなくシーケンスだからです。基本コードポイント U+2764 はテキストのハートで、U+FE0F は絵文字表示スタイルを要求するバリエーションセレクタです。絵文字の中にはさらに進んで、ゼロ幅接合子で複数のグリフを 1 つに結合するものもあり（家族の絵文字はこうやって作られます）、旗は常に地域指示文字のペアです。本ツールはエスケープを生成する前にグリフをコードポイントで歩くため、シーケンス内のすべてのコードポイントが保たれます。

なぜ 😀 ではなく \u{1F600} なのですか？#

どちらも同じ絵文字の有効な JavaScript 表現ですが、動作が異なります。😀 は サロゲートペア — U+FFFF を超える文字をエンコードする古い方法で、一緒になって初めて意味を持つ 2 つの UTF-16 コード単位です。\u{1F600} は ES2015 の コードポイントエスケープ で、実際のコードポイントを直接書き、はるかに読みやすい形式です。本ツールは、曖昧さがなくモダンなため、コードポイント形式を出力します。サロゲート形式が必要な場合は、コードポイントの値が変換すべき内容を正確に教えます。

絵文字がスマホとパソコンで違って見えます。なぜですか？#

Unicode は各絵文字が 何を意味するか を定義しますが、各プラットフォーム（Apple、Google、Microsoft、Samsung）が独自のアートワークを描くため、同じコードポイントがそれぞれ異なる絵で描画されます。コードポイント、HTML エンティティ、すべてのエスケープはプラットフォーム間で同一で — 異なるのはピクセルだけです。厳密な視覚的一致が重要な場合（ブランドキャンペーンなど）は、プラットフォームフォントに頼らず独自の絵文字画像セットを出荷することになります。ほとんどの用途では、プラットフォームのネイティブ描画が望むものです。