絵文字を表示

絵文字の標準セットは Unicode で毎年更新されており、あらゆる種類のアプリで絵文字の使用が急増しています。

アプリがインターネット コンテンツを表示する場合やテキスト入力を提供する場合は、最新の絵文字フォントをサポートすることを強くおすすめします。そうしないと、新しい絵文字が豆腐と呼ばれる小さな四角い箱（☐）や、間違ってレンダリングされた絵文字シーケンスとして表示されることがあります。

Android バージョン 11（API レベル 30）以前では絵文字フォントを更新できないため、そうした古いバージョンで絵文字を表示するアプリは手動で更新する必要があります。

最新の絵文字の例を以下に示します。

例 バージョン
🫩 🪉 🇨🇶 16.0（2024 年 9 月）
🐦‍🔥 🧑‍🧑‍🧒‍🧒 👩🏽‍🦽‍➡️ 🇲🇶 15.1（2023 年 9 月）
🩷 🫸🏼 🐦‍⬛ 15.0（2022 年 9 月）
🫠 🫱🏼‍🫲🏿 🫰🏽 14.0（2021 年 9 月）
😶‍🌫️ 🧔🏻‍♀️ 🧑🏿‍❤️‍🧑🏾 13.1（2020 年 9 月）
🥲 🥷🏿 🐻‍❄️ 13.0（2020 年 3 月）
🧑🏻‍🦰 🧑🏿‍🦯 👩🏻‍🤝‍👩🏼 12.1（2019 年 10 月）
🦩 🦻🏿 👩🏼‍🤝‍👩🏻 12.0（2019 年 2 月）

BOM 2023 年 3 月（Compose UI 1.4）では、API 21 までの古い Android バージョンとの下位互換性を含め、最新の絵文字バージョンがサポートされます。

このサポートではアプリの変更は必要ありません。Text と TextField（マテリアル 2 またはマテリアル 3）または BasicText と BasicTextField を使用している場合は、最新の絵文字サポートがすぐに利用できます。

アプリで最新の絵文字をテストする最善の方法は、API 30 以下の実際のデバイスを使用することです。

カスタム絵文字ソリューションを使用している場合や、その他の理由で Compose のデフォルトの絵文字解決を無効にする必要がある場合は、PlatformTextStyle(emojiSupportMatch) を使用できます。

Text(
    text = "Hello $EMOJI_TEXT",
    style = TextStyle(
        platformStyle = PlatformTextStyle(
            emojiSupportMatch = EmojiSupportMatch.None
        )/* ... */
    )
)
EmojiSnippets.kt

相互運用性

アプリで同じ Activity 内でビューと Compose の両方を使用する場合は、適切な API を使用して絵文字を正しく構成していることを確認してください。以降のセクションでは、各 API を使用するタイミングについて説明します。

ComponentActivity からの拡張

Activity が AppCompatActivity ではなく Compose ComponentActivity から拡張されている場合は、AppCompat なしで絵文字をサポートするの手順に沿って操作します。

AppCompatActivity を拡張していないため、次のスニペットに示すように、依存関係に Emoji2 ライブラリを追加し、TextView ウィジェットの代わりにビューで EmojiTextView を使用します。

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val emojiTextView: EmojiTextView = findViewById(R.id.emoji_text_view)
        emojiTextView.text = getString(R.string.emoji_text_view, EMOJI_TEXT)

        val composeView: ComposeView = findViewById(R.id.compose_view)

        composeView.apply {
            setContent {
                // compose code
            }
        }
    }
}
EmojiSnippets.kt

次に、XML ファイルで次の操作を行います。

<androidx.emoji2.widget.EmojiTextView
    android:id="@+id/emoji_text_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    />
example_view.xml

AppCompatActivity からの拡張

Activity が AppCompatActivity から拡張されている場合は、ComposeView を使用してコンポーズ可能な関数を呼び出すことができます。Text コンポーザブルを使用すると、Android のバージョン間で絵文字が正しくレンダリングされます。

AppCompatActivity から拡張する場合は、XML から TextView をインフレートして、絵文字が正しくレンダリングされるようにします。

これは、XML をインフレートする場合に適用されます。

  • ComposeView の外部の Activity にあります。次のスニペットで AppCompatActivity と TextView が使用されていることに注目してください。

class MyActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val emojiTextView: TextView = findViewById(R.id.emoji_text_view)
        emojiTextView.text = getString(R.string.emoji_text_view, EMOJI_TEXT)

        val composeView: ComposeView = findViewById(R.id.compose_view)

        composeView.apply {
            setContent {
                // compose code
            }
        }
    }
}
EmojiSnippets.kt

class MyActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContentView(
            ComposeView(this).apply {
                setContent {
                    Column {
                        Text(EMOJI_TEXT)

                        AndroidViewBinding(ExampleViewBinding::inflate) {
                            emojiTextView.text = EMOJI_TEXT
                        }
                    }
                }
            }
        )
    }
}
EmojiSnippets.kt

ComposeView 内の AndroidView を含むテキストを拡張するには、AppCompatTextView を使用して絵文字を適切にレンダリングします。

class MyActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContentView(
            ComposeView(this).apply {
                setContent {
                    Column {
                        Text(EMOJI_TEXT)

                        AndroidView(
                            factory = { context -> AppCompatTextView(context) },
                            update = { it.text = EMOJI_TEXT }
                        )
                    }
                }
            }
        )
    }
}
EmojiSnippets.kt

詳しくは、相互運用性 API のドキュメントをご覧ください。

トラブルシューティング

絵文字ではなく豆腐（☐）が表示される場合は、まず問題が特定のテストデバイスで発生しているかどうかを確認します。確認できる主な項目は次のとおりです。