ジェン文字でアプリに表情を追加

ジェン文字でアプリに表情を追加

アプリ内でのジェン文字（Genmoji）の使い方に精彩を与える方法を習得しましょう。ジェン文字を含むテキストをレンダリング、格納、やり取りする方法を概説します。カスタムテキストエンジンを使用するアプリにジェン文字のサポートを追加する手法もご紹介します。

関連する章
- 0:00 - Introduction
- 0:37 - Express yourself
- 1:17 - Emoji enhancements
- 2:17 - NSAdaptiveImageGlyph
- 3:15 - Adopting in your app
- 8:01 - Compatibility
- 9:10 - Advanced usage
- 10:33 - Wrap-up
リソース
関連ビデオ

WWDC24
- AppKitの新機能
- UIKitの新機能
ダウンロード

こんにちはエンジニアのAaronです Input Experienceチームに所属しています今日は絵文字を使ってアプリの表現力を高める新しいエキサイティングな方法をご紹介したいと思いますこのセッションでは最新の絵文字の機能を探りカスタム絵文字を送信するための新しいAPIを紹介し絵文字をアプリに簡単に取り入れる方法を紹介しますその後互換性に関する注意事項やカスタムテキストレンダリングの高度な使用例についても深く掘り下げます絵文字はいたるところにありますそれには理由があります
絵文字はとても表現豊かでテキストの段落全体をたった1つの絵文字で置き換えることもできます
汎用性もあります 1つの絵文字では伝えきれない場合も適切な組み合わせを見つければ完璧に表現できます！
絵文字はテキストなのでテキストと組み合わせるとさらにパワフルになります画像と違って絵文字は文章の一部なので周囲のテキストに合った表示にすることができます Appleは今年絵文字をさらに良くするための様々なアップデートを行いますその1つがよく使われる標準の絵文字をパーソナライズされたコンテンツと組み合わせて絵文字のように使える新しい絵文字キーボードです
ステッカーミー文字アニ文字に加えオリジナルの絵文字を作るためのまったく新しい方法を利用できますジェン文字（Genmoji）です
なかなかクールな犬ですねみなさんの中にはこう考える方もいるでしょう従来の絵文字は実際には画像ではなくプレーンテキストとして送信される標準化されたUnicode文字のリストなので他のテキストコンテンツと同様適切な画像が表示されるかどうかは表示するデバイスのフォントに依存するとしかしジェン文字のようなパーソナライズされた画像はラスタ化された固有のビットマップなので Unicodeテキスト文字では記述できませんどんな仕組みになっているのでしょうか NSAdaptiveImageGlyphは ジェン文字などのパーソナライズされた画像を標準の絵文字と同じように扱うためのまったく新しいAPIです NSAdaptiveImageGlyphは標準の画像フォーマットを基盤としており正方形のアスペクト比で複数の解像度をサポートしています追加のメタデータとしてグローバルに一意で安定した識別子アクセシビリティのために使用できるコンテンツの説明画像の適切なレイアウトと配置を可能にする調整メトリックスなどがあるため通常のテキストと一緒に使用したりフォーマットしたりできますジェン文字は単独で使うこともテキストと組み合わせて使うこともできますフォーマットコピー貼り付けのほかステッカーとして送信することもできます
リッチテキストに対応していればいずれの環境でもジェン文字を含む表現豊かな画像がすべてサポートされます
それではアプリでジェン文字をサポートする方法がいかに簡単か見ていきましょう NSAdaptiveImageGlyphは TextViewでネイティブでサポートされますそのためアプリがすでにリッチテキストに対応していれば supportsAdaptiveImageGlyphを有効にするだけで簡単に始められます
iOSでは pasteConfigurationなど画像に対応する貼り付けのターゲットアクションがすでにテキストビューで構成されていればジェン文字と適応型画像グリフのサポートがデフォルトで有効になるためその構成も必要ありません macOSでは importsGraphicsをテキストビューで宣言して同じことができますでは例を見てみましょう
ユーザーがペットとの思い出を記録して共有できるアプリがあるとしますメインテキスト領域はすでにリッチテキストビューになっていてリッチテキストデータで永続モデルに格納されますそのためジェン文字のサポートはデフォルトで有効になり機能しています
SecureCodingやPasteboardなどシステムのシリアル化フレームワークはすべて NSAdaptiveImageGlyphをネイティブでサポートするように更新されているからです実際テキストコンテンツがすでに NSAttributedStringsで格納されていれば他にやることはなくあとは自分を表現するだけです他のリッチテキストと同じようにテキストビューのコンテンツをそのままRTFDデータオブジェクトにシリアル化してデータベースに格納しますコンテンツを再度表示する時は逆のプロセスで前に格納したデータから属性付き文字列を作成しますとても簡単です簡単ではありますがジェン文字はUnicodeではないためメールアドレスや電話番号のようなテキストのみの項目には適さない場合があることに注意してください一方でブログ投稿やタイトルメッセージなどというユーザーが作成するコンテンツはまさに画像グリフのサポートによって生き生きとしたものになります例えばカスタムの絵文字を使ってタイトルを目立たせることができますデータはプレーンテキストとして格納されているので最終的にバックエンドサーバで共有して Webブラウザで表示することができますそのためにはどうすればよいでしょうか 1つの方法としてプレーンテキストなどの非RTFのデータストアを使用する時はインライン画像と同じ方法で画像グリフを扱います例えば該当するテキスト位置にある Unicode付加文字を画像グリフの識別子の参照とともにプレーンテキストデータフィールドに格納しその画像を画像ストアに追加できます contentIdentifierは一意で安定しているためこの識別子を使ってすでに画像グリフを格納している場合は再度格納する必要はありません属性付き文字列を分解して組み立て直す例については本セッションに付属のコードをご覧くださいこれらの変更によってタイトルにジェン文字が追加されメインエントリとリストにも表示されますでは前に述べた Webインターフェイスはどうでしょうかこれ以上ないほど簡単です HTMLで画像を表示するには先ほどと同じ範囲データのメソッドを使用して RTFDに変換しますが今回は HTMLドキュメントタイプをリクエストしますこれにより相互互換性のあるHTMLが出力され「apple-adaptive-glyph型」に対応する Webkitなどの高度なエンジンで標準の絵文字のように画像がテキストにインラインで表示されます画像グリフに対応していないエンジンの場合この代替画像が代わりに表示されますこの代替テキストは NSAdaptiveImageGlyphのコンテンツ説明のものでありブラウザで最終的にどのソースを表示するかに関係なく適用されますアプリでコミュニケーション通知を利用する場合はジェン文字や他の画像グリフを通知に含めることもできますこれには新しいUNNotificationAttributed MessageContext APIを使用します必要なのはプッシュ通知のペイロードにリッチテキスト表現を含めることだけでそれに画像グリフも含めることができますリッチテキストの解析アセットのダウンロード属性付き本文の作成通知コンテンツの更新には Notification Service Extensionの使用をおすすめします画像グリフを含む属性付き文字列から通知メッセージを作成し attributedContentとして渡すだけでコンテキストが作成されますそのコンテキストでリクエストを更新し最後にハンドラを呼び出します NSAdaptiveImageGlyphの高度な使用法を紹介する前にアプリで重要となる互換性に関する注意事項について少しお話しします
画像グリフは一緒に表示されるテキストと同様何らかの意味を伝えるものであり適切に伝わらないと意味が失われたり変わったりしてしまうためサポートされていない場合のフォールバックの扱いに注意が必要です大切なのは重要な情報が簡単に破棄されないようにすることですアプリがインライン画像に対応していない場合は contentDescriptionのテキスト表現を使用することを検討してくださいまたそもそも互換性がない場合なら対応していないシステムではドキュメントを開かないことを検討してください
RTFD形式で格納された画像グリフは画像グリフを認識しないものも含めいずれのリッチテキストビューとも下位互換性をもつようにエンコードされますサポートされていない環境で RTFドキュメントを共有する場合古いOSで実行されている旧バージョンのアプリなどでは画像グリフが自動的にフォールバックして標準のテキストアタッチメントに戻りますジェン文字を使うにはリッチテキストをサポートするのが一番簡単かもしれませんがサードパーティのデータ形式やまったく独自のテキストエンジンでも画像グリフを完全にサポートできますテキストビューコンテンツの編集可能な WebView SwitfUIのテキストなどすべてのAppleプラットフォームの既存のUIテキスト要素が画像グリフに対応していることに加えて TextKitやCoreTextのような Appleの既存のフレームワークを基に構築した独自のテキストエンジンでも更新されたテキストレンダリングAPIを利用してジェン文字の独自のソリューションを提供できます CoreTextにはカスタムの印字ソリューション向けに NSAdadptiveImageGlyphをアダプティブ画像プロバイダとして使用して現在のフォントのメトリックスに基づいて適切なタイポグラフィの範囲を照会できるメソッドが用意されていますこの方法で現在のコンテキスト中の所定の位置に画像をレンダリングすることもできますその仕組みを詳しく見てみましょう CTFontGetTypographicBoundsFor AdaptiveImageProviderは横方向の配置に必要な詳しい幅などのメトリックスを返しますベースライン上のグリフの原点を基準とした相対位置です描画する時は CTFontDrawImageFromAdaptiveImage ProviderAtPointがその範囲内に画像を配置します必要なことはこれだけです
今回はすべてのAppleプラットフォームで利用できるいくつかの新しい絵文字の機能について簡単にご紹介しましたまったく新しい絵文字キーボードやジェン文字を使った独自の絵文字の作成さらにNSAdaptiveImageGlyphを使用してアプリで表情豊かな画像をサポートするいくつかの方法も説明しました標準のリッチテキストビューを使う場合もまたは完全に独自の印字ソリューションを使う場合もぜひ最新のSDKをチェックしてくださいジェン文字を使えばアプリでまったく新しい自己表現の可能性が簡単に開かれることがわかるでしょうご視聴ありがとうございました

3:30 - Enable support for NSAdaptiveImageGlyph in a UITextView
```
let textView = UITextView()
    textView.supportsAdaptiveImageGlyph = true
```

4:41 - Read and write attributed string for serialization

// Extract contents of text view as an attributed string
let textContents = textView.textStorage

// Serialize as data for storage or transport
let rtfData = try textContents.data(from: NSRange(location: 0, length: textContents.length),
              documentAttributes: [.documentType: NSAttributedString.DocumentType.rtfd])


// Create attributed string from serialized data
let textFromData = try NSAttributedString(data: rtfData, documentAttributes: nil)

// Set on text view
textView.textStorage.setAttributedString(textFromData)

6:08 - Decompose and recompose an attributed string

// Decompose an attributed string

func decomposeAttributedString(_ attrStr: NSAttributedString) -> (String, [(NSRange, String)], [String: Data]) {
    let string = attrStr.string
    var imageRanges: [(NSRange, String)] = []
    var imageData: [String: Data] = [:]
    attrStr.enumerateAttribute(.adaptiveImageGlyph, in: NSMakeRange(0, attrStr.length)) { (value, range, stop) in
        if let glyph = value as? NSAdaptiveImageGlyph {
            let id = glyph.contentIdentifier
            imageRanges.append((range, id))
            if imageData[id] == nil {
                imageData[id] = glyph.imageContent
            }
        }
    }
    return (string, imageRanges, imageData)
}
    
// Recompose an attributed string

func recomposeAttributedString(string: String, imageRanges: [(NSRange, String)], imageData: [String: Data]) -> NSAttributedString {
    let attrStr: NSMutableAttributedString = .init(string: string)
    var images: [String: NSAdaptiveImageGlyph] = [:]
    for (id, data) in imageData {
        images[id] = NSAdaptiveImageGlyph(imageContent: data)
    }
    for (range, id) in imageRanges {
        attrStr.addAttribute(.adaptiveImageGlyph, value: images[id]!, range: range)
    }
    return attrStr
}

6:30 - Convert NSAttributedString to HTML

// Converting NSAttributedString to HTML

let htmlData = try textContent.data(from: NSRange(location: 0, length: textContent.length),
               documentAttributes: [.documentType: NSAttributedString.DocumentType.html])

7:33 - Support Genmoji in communication notifications

func didReceive(_ request: UNNotificationRequest,
      withContentHandler contentHandler: @escaping (UNNotificationContent) -> Void) {

  ...
  let message: NSAttributedString = _myAttributedMessageStringWithGlyph
  let context = UNNotificationAttributedMessageContext(sendMessageIntent: sendMessageIntent,
                                                       attributedContent: _message)    

  do {
    let messageContent = try request.content.updating(from: context)
    contentHandler(messageContent)
  } catch {
    // Handle error
  }
}

9:45 - Render NSAdaptiveImageGlyph in custom typesetting solution

// Find typographic bounds for image in NSAdaptiveImageGlyph

let provider = adaptiveImageGlyph

let bounds = CTFontGetTypographicBoundsForAdaptiveImageProvider(font, provider)

// Draw it at the typographic origin point on the baseline

CTFontDrawImageFromAdaptiveImageProviderAtPoint(font, provider, point, context)

特定のトピックをお探しの場合は、上にトピックを入力すると、関連するトピックにすばやく移動できます。

クエリの送信中にエラーが発生しました。インターネット接続を確認して、もう一度お試しください。

関連する章

リソース

関連ビデオ

WWDC24