目次
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)

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

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

HTML、CSS、JavaScriptを使用してアニメーションカウントダウンタイマーを作成する方法 HTML、CSS、JavaScriptを使用してアニメーションカウントダウンタイマーを作成する方法 Apr 11, 2025 am 11:29 AM

プロジェクトにカウントダウンタイマーが必要だったことはありますか?そのようなことのために、プラグインに手を伸ばすのは自然なことかもしれませんが、実際にはもっとたくさんあります

HTMLデータ属性ガイド HTMLデータ属性ガイド Apr 11, 2025 am 11:50 AM

HTML、CSS、およびJavaScriptのデータ属性について知りたいと思っていたことはすべて。

SVGでタータンパターンを生成する静的サイトを作成する方法 SVGでタータンパターンを生成する静的サイトを作成する方法 Apr 09, 2025 am 11:29 AM

タータンは、スコットランド、特にファッショナブルなキルトに通常関連する模様のある布です。 Tartanify.comでは、5,000を超えるTartanを集めました

SASSをより速くするための概念の証明 SASSをより速くするための概念の証明 Apr 16, 2025 am 10:38 AM

新しいプロジェクトの開始時に、SASSコンピレーションは瞬く間に起こります。これは、特にbrowsersyncとペアになっている場合は素晴らしい気分です。

WordPressテーマでVueコンポーネントを構築する方法 WordPressテーマでVueコンポーネントを構築する方法 Apr 11, 2025 am 11:03 AM

インラインテンプレートディレクティブにより、既存のWordPressマークアップに対する進行性の強化として、リッチVUEコンポーネントを構築できます。

PHPはテンプレートのA-OKです PHPはテンプレートのA-OKです Apr 11, 2025 am 11:04 AM

PHPテンプレートは、多くの場合、サブパーコードを促進するために悪いラップを取得しますが、そうである必要はありません。 PHPプロジェクトが基本を実施する方法を見てみましょう

SASSをプログラミングして、アクセス可能な色の組み合わせを作成します SASSをプログラミングして、アクセス可能な色の組み合わせを作成します Apr 09, 2025 am 11:30 AM

私たちは常にWebをよりアクセスしやすくしたいと考えています。色のコントラストは単なる数学なので、SASSはデザイナーが見逃したかもしれないエッジケースをカバーするのに役立ちます。

See all articles