目次
FitzPatrickスキントーングレーディング方法
CSSを使用して皮膚色の修飾子を適用します
JavaScriptを使用して、肌の色の修飾子を削除および切り替えます
ZWJシーケンスの処理
制限
開発の導入問題
ホームページ ウェブフロントエンド CSSチュートリアル 絵文字の肌の色調をプログラム的に変更します

絵文字の肌の色調をプログラム的に変更します

Apr 02, 2025 pm 04:00 PM

絵文字の肌の色調をプログラム的に変更します

絵文字スキントーン修飾子:プログラマティック処理ガイド

絵文字が複数の肌の色を持っていることは秘密ではありません。特にテキストやソーシャルメディアでは、非常に人気があります。 ✊?? (Rising Black Fist)絵文字は、絵文字の世界絵文字賞によって「2020年のベスト絵文字」と名付けられました。

各肌の色は修飾子であり、多くの絵文字は、特定の文字に対応する修飾子と基本的なエンコーディングで構成されています。残念ながら、すべての絵文字ライブラリが修飾子をサポートするわけではありません。しかし、その人気を考えると、絵文字のスキントーン修飾子は、「ケーキのアイシング」機能以上のものです。さらに、よりモジュール式で効率的なコードを書くことができるため、それらは賢い作業方法でもあります。

したがって、この記事の目的は、絵文字修飾子をプログラムで処理する方法を把握することです。このようにして、肌の色調がサポートされていない状況に遭遇したり、他の絵文字のカスタムバリエーションを作成したい場合は、何をすべきか知っています。

FitzPatrickスキントーングレーディング方法

皮膚トーン修飾子は、Unicode 8.0の一部として2015年に正式に絵文字に追加されました。それらは、人間の肌の色調の正式な分類であるFitzpatrick肌のトーン定格方法に基づいています。次の表は、絵文字のキャラクターがフィッツパトリックのタイプとどのように一致するかを示しています。

最も単純なユースケースでは、これらのキャラクターの1つが肌のトーン修飾子をサポートする絵文字に取り付けられている場合、絵文字の肌のトーンが変わります。

言い換えると: ? ? = ??

CSSを使用して皮膚色の修飾子を適用します

CSSを使用して絵文字の皮膚トーンを切り替えるには、基本的な絵文字の文字(?)から始めて、 ::after pseudoセレクターを使用してスキントーンを取り付けます。

レンダリングされた絵文字文字を使用することに加えて、Unicode Hexadecimalコードを使用することもできます。

JavaScriptを使用して、肌の色の修飾子を削除および切り替えます

処理されている絵文字が既にスキントーン修飾子を適用している場合はどうなりますか?これを行うには、CSSを超えて行く必要があります。 JavaScriptを使用した例は次のとおりです。

ここで何が起こっているのですか?まず、フィッツパトリックタイプ4のベビー絵文字から始めます。次に、皮膚トーン修飾子を検索してストリングから削除するremoveModifier関数に渡されます。修飾子がない絵文字があるので、好きな修飾子を追加できます。

このアプローチは多くの絵文字で機能しますが、他の修飾子を導入する際に問題があります。だから今、私たちは議論する必要があります...

ZWJシーケンスの処理

ゼロ幅コネクタ(ZWJ)シーケンスは、Unicodeの複合単語のようなものです。それらは、ゼロ幅コネクタu 200dで接続された2つ以上の絵文字で構成されています。

ZWJシーケンスは、絵文字に性別修飾子を追加するために最も一般的に使用されます。たとえば、weightlifter plus zwjと女性のシンボルは、重量挙げの女性に相当します(️?€−♀︎=?§÷−するまさい)。

ZWJシーケンスを処理する場合、次のポイントに注意する必要があります。

  • これらのシーケンスは単なる提案です。それらはUnicode Allianceから来ており、すべてのプラットフォームでサポートされることは保証されていません。プラットフォームがそれらをサポートしていない場合、通常の絵文字のフォールバックシーケンスが表示されます。
  • スキントーン修飾子が存在する場合、絵文字の後にZWJの前に含める必要があります。
  • 一部のZWJシーケンスには、複数の絵文字が含まれており、それぞれ異なるスキントーン修飾子があります。

この情報を考えると、以前のコードの例に次の変更を行う必要があります。

  • スキントーン修飾子は、絵文字の端に取り付けられているだけでなく、基本的な絵文字の後に挿入する必要があります。
  • ZWJシーケンスに皮膚緊張修飾子を使用して複数の絵文字がある場合は、各絵文字の修飾子を置き換える必要があります。

制限

この例から、一貫性の制限に気付くことができます。編集者ビューは、ZWJシーケンスに各文字を表示しますが、皮膚トーン修飾子を除き、すぐに対応する絵文字に適用されます。一方、コンソールまたは結果ビューは、シーケンス全体の文字をレンダリングしようとします。

これのサポートは、プラットフォームごとに異なります。一部の編集者はZWJシーケンスをレンダリングしようとする場合があり、すべてのブラウザが同じZWJシーケンスのセットをサポートするわけではありません。

さらに、ZWJシーケンスにスキントーンを追加するには、基本的な絵文字として使用されるものを知る必要があります。これは、既知のコレクションによって絵文字が提供されている場合には比較的簡単ですが、ユーザーからの任意の入力を処理できるようにしたい場合、事態はより困難になる可能性があります。

また、この記事のCSSソリューションはZWJシーケンスと互換性がないことに注意してください。

開発の導入問題

絵文字の肌のトーン修飾子を扱う必要があるシステムを設計する際に自分自身に尋ねる必要があるかもしれない質問をいくつか整理しました。

  • システムが対話する絵文字を制御できますか?
  • 私の絵文字ライブラリには、どの絵文字が肌のトーン修飾子をサポートするかに関する情報が含まれていますか?
  • 私のシステムは、修飾子を追加、削除、または変更する必要がありますか?
  • 私のプラットフォームはZWJシーケンスをサポートしていますか?もしそうなら、どれですか?
  • 私のシステムは、複数のスキントーン修飾子を使用してZWJシーケンスをサポートする必要がありますか?

これらの質問とここに表示される例に対する回答があれば、必要に応じて絵文字のスキントーン修飾子をサポートするために必要なものすべてができます。

以上が絵文字の肌の色調をプログラム的に変更しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Vue 3 Vue 3 Apr 02, 2025 pm 06:32 PM

それは' Vueチームにそれを成し遂げてくれておめでとうございます。それは大規模な努力であり、長い時間がかかったことを知っています。すべての新しいドキュメントも同様です。

ブラウザから有効なCSSプロパティ値を取得できますか? ブラウザから有効なCSSプロパティ値を取得できますか? Apr 02, 2025 pm 06:17 PM

私はこの非常に正当な質問で誰かに書いてもらいました。 Leaは、ブラウザから有効なCSSプロパティ自体を取得する方法についてブログを書いています。それはこのようなものです。

CI/CDで少し CI/CDで少し Apr 02, 2025 pm 06:21 PM

「ウェブサイト」は「モバイルアプリ」よりも適していると言いますが、Max Lynchからのこのフレーミングが好きです。

粘着性のあるポジショニングとサスのダッシュを備えた積み重ねられたカード 粘着性のあるポジショニングとサスのダッシュを備えた積み重ねられたカード Apr 03, 2025 am 10:30 AM

先日、Corey Ginnivanのウェブサイトから、この特に素敵なビットを見つけました。そこでは、スクロール中にカードのコレクションが互いに積み重ねられていました。

WordPressブロックエディターでのマークダウンとローカリゼーションを使用します WordPressブロックエディターでのマークダウンとローカリゼーションを使用します Apr 02, 2025 am 04:27 AM

WordPressエディターでユーザーに直接ドキュメントを表示する必要がある場合、それを行うための最良の方法は何ですか?

レスポンシブデザインのブラウザを比較します レスポンシブデザインのブラウザを比較します Apr 02, 2025 pm 06:25 PM

これらのデスクトップアプリがいくつかあり、目標があなたのサイトをさまざまな次元ですべて同時に表示しています。たとえば、書くことができます

スティッキーヘッダーとフッターにCSSグリッドを使用する方法 スティッキーヘッダーとフッターにCSSグリッドを使用する方法 Apr 02, 2025 pm 06:29 PM

CSS Gridは、レイアウトをこれまで以上に簡単にするように設計されたプロパティのコレクションです。何でもするように、少し学習曲線がありますが、グリッドは

Googleフォント変数フォント Googleフォント変数フォント Apr 09, 2025 am 10:42 AM

Google Fontsが新しいデザイン(ツイート)を展開したようです。最後の大きな再設計と比較して、これははるかに反復的です。違いをほとんど伝えることができません

See all articles