Code Along：SwiftUIのAttributedStringを使って優れたテキスト体験を実現

Code Along：SwiftUIのAttributedStringを使って優れたテキスト体験を実現

SwiftUIのTextEditor APIとAttributedStringを使用して、優れたテキスト体験を構築する方法を学びましょう。高度なテキスト編集を実現して、エディタのコンテンツを操作するカスタムコントロールを作成し、利用可能なフォーマットオプションをカスタマイズする方法を紹介します。AttributedStringの高度な機能を利用して、最適なテキスト編集体験を構築する方法をご確認いただけます。

関連する章
- 0:00 - イントロダクション
- 1:15 - TextEditorとAttributedString
- 5:36 - カスタムコントロールの構築
- 22:02 - テキストフォーマットの定義
- 34:08 - 次のステップ
リソース
関連ビデオ

WWDC25
- アプリの多言語体験の向上
WWDC22
- Get it right (to left)（右から左方向への文字体）
WWDC21
- Foundationの新機能
こんにちは SwiftUIチームのエンジニアのMaxです Swift標準ライブラリチームのエンジニアのJeremyです今回は SwiftUIの機能と AttributedStringを使用してリッチテキスト編集機能を構築する方法についてご紹介します Jeremyの助けを借りながら SwiftUIのリッチテキスト機能の要点について詳しくご紹介します最初に TextEditorをアップグレードして AttributedStringを使用したリッチテキストをサポートします次にカスタムコントロールを構築してエディタに独自の機能を追加します最後に独自のテキスト書式の定義を作成することで最終的にコンテンツが見栄えよく表示されるエディタが完成します
さてエンジニアとして働く私ですが家に帰ると...
完璧なクロワッサンを作るパン焼き職人になります最近レシピの試行錯誤を記録するためにちょっとしたレシピエディタを開発しています
左側にレシピの一覧があり中央にはレシピを編集するテキストエディタ右側には材料の一覧を表示するインスペクタがありますレシピテキストの重要な箇所が調理中に一目でわかるようにその箇所を目立たせようと思いますそのためにリッチテキストをサポートするようエディタをアップグレードします
こちらのエディタビューはSwiftUIの TextEditor APIで実装したものです text状態の型が Stringになっていますので現在サポートされているのはプレーンテキストのみです Stringを AttributedStringに変更します
これだけでビューの機能が劇的に向上します
これでリッチテキストに対応できましたのでシステムUIを使用して文字の太さを切り替えることができますフォントの大きさなどのその他の書式も何でも適用できます
キーボードを使ってジェン文字を挿入することもできます
SwiftUIのFont属性とColor属性はセマンティックな性質を持つため新しいTextEditorはダークモードとダイナミックタイプもサポートします
TextEditorは太字、斜体、下線、取り消し線、カスタムフォント、ポイントサイズ、前景色、背景色、カーニング、トラッキング、ベースラインオフセット、ジェン文字に加えて重要な段落スタイル設定にも対応しました行間、テキスト配置、さらに基本となる書字方向についても SwiftUIの独立したAttributedString属性として設定することができます
このような属性はすべてSwiftUIの編集不可テキストで一貫して保持されるため TextEditorの内容をそのまま後のTextで表示できます Textと同様にTextEditorは任意のAttributedStringKeyに対して環境から計算されたデフォルト値を nil値に置換できますここでJeremyに相談なのですが... 私は今までAttributedStringを利用してアプリを作ってきましたがここで1回復習して自分の知識が確かかどうか確認してからコントロールの作成に移りたいんですこれからクロワッサンの生地も仕込まないといけないので私がその作業をしている間に復習をやってくれませんかもちろんいいですよあなたがクロワッサンの生地を仕込んでいる間にリッチテキストエディタの開発に役立つ AttributedStringの基本について簡単にご説明します簡単に言えば AttributedStringには一連の文字と一連の属性実行が含まれますたとえばこのAttributedStringに含まれるテキストは「Hello! Who’s ready to get cooking?」ですまた 3つの属性実行も含まれます 1つ目の実行ではフォントのみを適用し 2つ目の実行で前景色を追加し 3つ目の実行ではフォント属性のみを適用します
AttributedString型はアプリ全体で使用される他のSwift型と共存させることができますこれは値型であり標準ライブラリのStringと同様に UTF-8エンコードを使用してコンテンツを格納しますさらにAttributedStringは Equatable、Hashable、Codable、 Sendableなどの一般的なSwiftプロトコルのほとんどに準拠します Apple SDKには先ほどMaxが紹介していたようなさまざまな属性が事前定義されており属性スコープにグループ化されていますさらにAttributedStringはアプリ内で定義されたカスタム属性もサポートするため UIに合わせてカスタマイズできます
では先ほどの数行のコードを使って AttributedStringを作成してみますまず前半のテキストを含む AttributedStringを作成します次に「cooking」という文字列を作成し前景色をオレンジ色に設定してそれをテキストに追加しますそして末尾に疑問符を付けて文章を完成させます最後にテキスト全体のフォントを largeTitleフォントに設定しますこれでこの文章をデバイスのUIに表示できるようになりました
AttributedStringの基本的な作成方法と独自のカスタム属性そして属性スコープの作成と使用については WWDC 2021の「What’s new in Foundation」セッションをご覧ください
生地の仕込みが終わったようですねレシピアプリでのAttributedStringの使用法を詳しく教えてもらえますか？もちろんですそのために話す内容を「練って」いたんです私はテキストエディタをアプリの他の機能と連携させるためにコントロールを改善したいと思っていました右側のインスペクタに材料を追加するためのボタンを作りたいのですが材料の名前を改めて入力し直す手間は省きたいと思っていましたたとえばレシピ内の「butter」という単語を選択してボタンを1回押すだけでそれを材料としてマークできるようにしたいのです
このインスペクタにはリストに加える新しい材料をテキストエディタからサジェストするための設定キーがすでに定義されています
preferenceビューモディファイアに渡された値はビュー内の上の階層に浮かび上がりレシピエディタを使用するビューから「NewIngredientPreferenceKey」という名前で読み取ることができます
ではビューのbodyでこの値の計算済みプロパティを定義しましょう
ここではサジェスト対象の名前を AttributedStringと指定するだけですもちろんエディタ内のテキスト全体をサジェストするのではなく現在選択中のテキストをサジェストする必要がありますたとえば「butter」などです TextEditorはオプションのselection引数を介して選択内容を伝えます
これをAttributedTextSelection型のローカル状態にバインドします
これでビューに必要なコンテキストをすべて準備できましたので材料サジェストを計算するプロパティに戻りましょう
次に選択中のテキストを取得する必要があります
選択に対してこのindices関数を使った結果を添え字としてテキストに設定してみます
うーんこれは正しい型ではないようです
戻り値は AttributedTextSelection.Indicesです調べてみましょう
なるほどこれは面白い私は1つしか選択していませんが Indices型の2つ目のcaseが一連の範囲で示されています
Jeremy 私がクロワッサンの生地をまとめる間にどうしてこうなるのか解説してもらえますかおやおやこっちは美味しいクロワッサンを想像して考えをまとめられなくなりそうですでもご心配なくこのAPIで使われるはずのRange型が使われない理由を説明しますこのAPIで単独のRangeではなく RangeSetが使用される理由を説明するため AttributedStringの選択について見てみましょう複数の範囲がどのように選択範囲を形成するのかを説明しコード内でRangeSetを使用する方法の例を紹介します皆さんもAttributedStringなどのコレクションAPIで単独の範囲を使用した経験があると思います単独の範囲を使うと AttributedStringの一部をスライスしその1つのチャンクに対してアクションを実行できますたとえばAttributedStringが提供するAPIを使用してテキストの一部に対して 1つの属性を簡単に適用することができます range(of:) APIを使用して AttributedString内の「cooking」というテキスト範囲を検索します次にこの添え字演算子を使用してその範囲でAttributedStringをスライスし「cooking」というテキスト全体をオレンジ色に設定します
ただしAttributedStringをただ1つの範囲でスライスしても全言語に対応するテキストエディタで選択を表現するには不十分ですたとえばこのレシピアプリを使って私が休日に作るスフガニヤのレシピを保存するとしたらレシピにはヘブライ語が含まれますこのレシピに「Put the Sufganiyot in the pan」と書いてあるとします手順の部分は英語ですがこの伝統食の名前はヘブライ文字で書かれていますテキストエディタで「Sufganiyot」の単語の一部と「in」という単語を 1つの選択範囲で選択してみましょうしかしこれはAttributedStringで複数の範囲として扱われます英語は左から右に書く言語であるためエディタの表示では文章が左側から右側に向かって配置されますしかしヘブライ語のSufganiyotはそれとは反対方向に配置されますヘブライ語は右から左に書く言語だからですこのテキストの双方向的な性質は画面上のレイアウトに影響を与えますが AttributedStringはそれと関係なくすべてのテキストを同じ並び順で格納します文字の方向が違うことから私が選択した範囲が「Sufganiyot」という単語の最初の部分と「in」という単語に分かれてヘブライ語テキストの後半は除外されますこれが SwiftUIテキスト選択タイプが 1つの範囲でなく複数の範囲を使っている理由です
双方向テキストに対応するためのアプリのローカライズ方法については WWDC 2022の「Get it right (to left)」セッションと今年の「Enhance your app’s multilingual experience」セッションをご覧ください
このようなタイプの選択をサポートするため AttributedStringはRangeSetを使用したスライスをサポートしています先ほどMaxが選択APIの説明で指摘していた型です AttributedStringを 1つの範囲でスライスするのと同じように RangeSetでスライスすると不連続な部分文字列を生成できますこの例ではキャラクタビューで .indices(where:)関数を使用してテキスト内のすべての大文字を検出するRangeSetを作成していますこのスライスの前景色を青に設定するとすべての大文字が青色になりますがその他の文字は変更されません SwiftUIには同様の機能を持つ添え字もあり選択を含むAttributedStringを直接スライスできます Max クロワッサンの生地は綺麗にまとまりましたか？選択を受け取る添え字APIならあなたのコードのビルドエラーを解決してくれると思いますよでは試してみましょうテキストに選択範囲を添え字として直接設定し
不連続なAttributedSubstringを新しいAttributedStringに変換します
いい感じですねこれをデバイスで実行して「butter」という単語を選択すると SwiftUIが自動的に newIngredientSuggestionプロパティを呼び出して新しい値を計算しその値がアプリの他の部分に浮かび上がりますその後インスペクタの材料リストの末尾にこのサジェストが追加されますそれを1回タップするだけで材料リストに追加できますエディタにこのような機能を加えることで洗練された操作感を生み出すことができます
この機能を追加できたことは満足ですが Jeremyが教えてくれたことを活かせばさらに上を目指せそうですテキスト上の材料名も見栄えよく表示してみたいと思いますそのためにまず必要なのは特定のテキスト範囲を材料名としてマークするカスタム属性ですこれを新しいファイルで定義しましょう
このValue属性が材料の参照用IDになります次にRecipeEditorファイルに戻って IngredientSuggestionを計算するプロパティを見てみます
IngredientSuggestionでクロージャを2番目の引数として指定します
このクロージャはプラスボタンを押したときに呼び出され材料がリストに追加されますこのクロージャを使ってエディタのテキストを変更し Ingredient属性を使ってnameの出現箇所をマークしますそして新しく作成された材料のIDをクロージャに渡します
次にサジェストされた材料名のテキスト内での出現箇所をすべて特定する必要があります
それにはAttributedStringのキャラクタビューで ranges(of:)を呼び出します
これで範囲が得られますのであとは各範囲でingredient属性の値を更新するだけです
ここでは前に定義した IngredientAttributeの短い名前を使用します
早速試してみましょう
新しいものは何もありません結局このカスタム属性には書式設定が関連付けられていないからですでは「yeast」を選択してプラスボタンを押してみましょう
おっとこれはおかしい上にあったカーソルが下に移動していますもう一度試してみます
「salt」を選択して
プラスボタンをクリックしますカーソルが一番下にジャンプしますね私はクロワッサンの生地を伸ばさなきゃいけないのでデバッグする暇がありません選択がリセットされる原因はわかりますか？これは確かにこのアプリを使う人にとって望ましい動作ではないですねあなたは生地を伸ばす作業を始めてください私がこの予期しない動作を調べてみましょう
問題の原因を特定してその修正方法を説明するためにリッチテキストエディタで使用される範囲とテキスト選択を形成するAttributedStringインデックスについて詳しく説明します
AttributedString.Indexはテキスト内の1つの場所を表しますハイパフォーマンスな設計をサポートするために AttributedStringではコンテンツがツリー構造で格納されインデックスによってツリー内のパスが格納されますこのインデックスはSwiftUIのテキスト選択を構成する要素ですのでアプリの予想外のテキスト選択動作はこのツリー内でのAttributedString インデックスの動作によって生じます AttributedStringインデックスを扱う際は 2つの重要な点に留意する必要があります第1に AttributedStringを変更するとそのすべてのインデックスが無効になります変更の範囲外にあるインデックスも同じです消費期限が過ぎた材料では美味しい料理を作れませんおわかりだと思いますが AttributedStringで古いインデックスを使用することはそれと同じです第2にインデックスは必ずその作成元の AttributedStringと組み合わせて使用する必要があります
では先ほど作成した AttributedStringのサンプルを使ってインデックスの機能をご説明しましょう先ほど説明したようにAttributedStringはコンテンツをツリー構造に格納しますこの図はそのツリーを単純化して示したものですツリーの使用によりパフォーマンスが向上しテキストを変更したときに大量のデータをコピーする必要がなくなります
AttributedString.Indexは参照先の場所までのツリー内のパスを格納することでテキストを参照します AttributedStringは格納されたパスによってインデックスから特定のテキストの位置をすぐに特定できますがそれはつまりAttributedString ツリー全体のレイアウト情報もインデックスに含まれていることを意味します AttributedStringを変更するとツリーのレイアウトが調整される場合がありますそれによって以前に記録されたパスはすべて無効になりますそのインデックスの参照先がテキスト内にまだ存在していても同じです
さらに 2つのAttributedStringのテキストと属性コンテンツが同じ場合でもツリーのレイアウトが異なることからインデックスの相互互換性がない場合もあります
インデックスを使用してツリーをたどり情報を探すには AttributedStringの1つのビュー内でそのインデックスを使用する必要がありますインデックスは特定のAttributedStringに固有のものですがその文字列の任意のビューで使用できます Foundationにはテキストコンテンツの文字つまり書記素クラスタ、各文字を構成する個々のUnicodeスカラ、そして文字列の
属性実行に対するビューが用意されています
キャラクタビューとUnicodeスカラビューの違いについて詳しくは Swiftキャラクタタイプに関するAppleのデベロッパ向けドキュメントをご覧ください
その他 NSStringなど Swiftキャラクタタイプを使用しない文字列のような型を扱う場合はより低いレベルのコンテンツを利用してもよいでしょうさらにAttributedStringではテキストの UTF-8スカラとUTF-16スカラに対するビューを得られるようになりましたこの2つのビューも既存のすべてのビューと同じインデックスを共有します
ここまでインデックスと選択について詳しく説明してきましたここでMaxがレシピアプリで遭遇した問題を検討してみましょう IngredientSuggestionの onApplyクロージャは属性付き文字列を変更しますが選択のインデックスは更新しません SwiftUIはこのインデックスが無効になったことを検出しアプリのクラッシュを避けるために選択範囲をテキスト末尾に移動しますこれを修正するには AttributedString APIを使用してテキスト変更時にインデックスと選択を更新します
ではこのレシピアプリと同じ問題を持つ簡単なコード例を使って説明しましょう最初にテキスト内の「cooking」という単語の範囲を特定します次に「cooking」の範囲の前景色をオレンジ色に設定しますさらにレシピっぽさを高めるため文字列に「chef」という単語を追加します
テキストを変更すると AttributedStringのツリーのレイアウトが変わる可能性があります
文字列の変更後にはcookingRange変数の使用が無効になりそれを行うとアプリがクラッシュすることもあります AttributedStringではその代わりに範囲または範囲の配列を受け取る transform関数を使用することができさらに指定のAttributedStringをその場で変更するクロージャも使用できます
クロージャの末尾では指定した範囲が transform関数により新しいインデックスで更新されるため最終的なAttributedStringでは範囲を正しく使用できます AttributedString内ではテキストがずれる可能性がありますが範囲は依然として同じセマンティック位置を示しますこの場合は「cooking」になります SwiftUIでは範囲ではなく選択を更新する同様の関数も用意されています
きれいな形のクロワッサン生地ができあがりましたねアプリの作業に戻る準備ができたらこの新しい変換関数を使ってみませんかコードを形作るのに役立つと思いますありがとうまさに私が求めていたもののようですさっそくコードに組み込んでみましょう
まずこうやって範囲をループすべきではありませんでした最後の範囲に到達するまでにテキストが何度も変更されますしインデックスは古くなってしまいますこの問題は最初にRangeをRangeSetに変更することで完全に回避できます
次にこれをスライスしループを削除します
こうするとすべてが1回で変更されるため変更のたびに残りの範囲を更新する必要がなくなります
次に変更したい範囲の横にカーソルの位置を表す選択が配置されていますこれは常に変換後のテキストと一致させる必要がありますそれにはAttributedStringでSwiftUIの transform(updating:)オーバーロードを使用します
これでテキストが変更されると同時に選択が更新されるようになります
実際の動作を見てみましょう「milk」を選択するとそれがリストに表示されます追加した後も私の選択はそのまま残ります確認のためにキーボードの「command + B」を押してみます「milk」が太字に変わりましたうまくいったようです
これでレシピのテキストにすべての情報が揃ったので材料名に色を付けて強調してみようと思いますありがたいことにTextEditorにはそのための機能があります AttributedTextFormattingDefinition プロトコルですカスタムテキスト書式設定の定義に使用するのはテキストエディタが応答する AttributedStringKeysとその値です AttributedTextFormattingDefinitionに応じた型はすでにここで宣言されています
デフォルトでは SwiftUIAttributesスコープが使用され属性の値に対する制約はありません
このレシピエディタのスコープでは
前景色、ジェン文字、カスタム材料属性のみを許可することにします
RecipeEditorに戻って attributedTextFormattingDefinition 修飾子を使用して私のカスタム定義をSwiftUIの TextEditorに渡します
この変更により TextEditorで任意の材料、ジェン文字、前景色を使用できるようになります
他のすべての属性にはデフォルト値が適用されますが環境を変更することでエディタ全体のデフォルト値を変更できることに注意してください今回の変更ですでにいくつかの重要な変更がシステム書式設定UIに加えられています行揃え、行間、フォントプロパティを変更するためのコントロールが表示されなくなります各機能に対応するAttributedStringKeysがスコープに含まれないからですただしカラーコントロールを使えばテキストに任意の色を適用できます無意味な色を適用することも可能です
おっと「milk」が消えてしまいました
材料だけを緑色でハイライトしてそれ以外はすべてデフォルトの色を使うことにしますこのロジックの実装には SwiftUIの AttributedTextValueConstraint プロトコルを使用できます
RecipeFormattingDefinition ファイルに戻ってこの制約を宣言します
AttributedTextValueConstraint プロトコルに準拠するためにそれが属している AttributedTextFormattingDefinitionのスコープを指定し次に制約対象のAttributedStringKeyを指定します今回はForegroundColorAttributeです属性を制約する実際のロジックは constrain関数に組み込みますこの関数では有効と思われる前景色の値を AttributeKeyに設定します
このロジックはingredient属性が設定されているかどうかに依存します
設定されている場合は前景色を緑にし
そうでない場合はnilにします
この場合 TextEditorはデフォルトの色を置き換える必要があります
制約を定義できましたのであとは AttributedTextFormattingDefinitionの bodyにこれを追加するだけです
その他の点については SwiftUIがすべて処理してくれます TextEditorは自動的に定義とその制約をテキストの各所に適用して画面に表示します
これですべての材料の文字色が緑になりました
面白いことに書式設定定義のスコープには前景色が含まれているのに TextEditorのカラーコントロールは無効になっていますこれはIngredientsAreGreen制約が追加されているからですこれでテキストの前景色は ingredient属性でマークされているかどうかによって決まることになります TextEditorは自動的に AttributedTextValueConstraintsを調べて現在の選択に対する変更が有効かどうかを判断しますたとえば「milk」の前景色を再び白に設定しようとしてもその後でIngredientsAreGreen制約を実行すると前景色がまた緑に戻りますそのため TextEditorはそれが無効な変更であると認識してコントロールを無効にするのです値の制約はエディタに貼り付けるテキストにも適用されます「command + C」で材料をコピーして「command + V」でペーストしてもカスタムingredient属性はそのまま保持されます CodableAttributedStringKeyを使用すると別のアプリのTextEditor間でもこれが機能しますただし双方のアプリの AttributedTextFormattingDefinitionでこの属性が指定されている必要があります
いい感じになりましたがまだ改善すべき点がいくつかあります「milk」の末尾にカーソルを置いて文字を削除したり入力を続けたりすると通常のテキストのように扱われますこれでは単なる緑色のテキストのようで特定の材料名のように見えませんこの違和感をなくすために材料名の後に入力するときには ingredient属性が拡大されないようにしますそして材料名自体に変更を加えたときには単語全体の前景色を一気にリセットするようにします
Jeremy あとでクロワッサンを1個余分にあげるからこの実装を手伝ってもらえませんか？ 1個で足りるかどうかわからないけど 2、3個ならいいですよお手伝いしましょうクロワッサンをオーブンに入れている間この問題の解決に役立つ APIについてご説明します Maxが説明したように書式設定定義の制約を利用すると各TextEditorで表示可能な属性と特定の値を限定することができますレシピエディタに関するこの新しい問題を解決するには AttributedStringKeyプロトコルの追加のAPIを使用して任意のAttributedStringを変更する際の属性値の変更方法を制限します属性で制約を宣言すると AttributedStringによって常に各属性とテキストコンテンツの一貫性が確保されるため単純で高速なコードを使用して予期しない状態を回避できます属性に対してこのようなAPIを使用する場合についていくつかの例を挙げて説明しますまず値がAttributedStringの他のコンテンツと関連付けられている属性例えばスペルチェック属性等についていくつか例を挙げて説明します
このスペルチェック属性は「ready」という単語のスペルミスを赤い破線の下線によって示していますテキストにスペルチェックを実行したらスペルチェック属性が検証済みのテキストだけに適用されていることを確認する必要がありますでもテキストエディタで入力を続けるとデフォルトで既存テキストの属性がすべて挿入されたテキストに継承されますこれはスペルチェック属性の望ましい挙動ではありませんこれを修正するため AttributedStringKeyに新しいプロパティを追加します AttributedStringKey型に対して値がfalseの inheritedByAddedTextプロパティを宣言することで追加したテキストがこの属性値を継承しなくなります
これで文字列に新しいテキストを追加してみるとこのテキストにはスペルチェック属性が含まれません新しいテキストはまだスペルチェックを実行していないからです残念なことにこの属性にはまた別の問題も見つかりましたスペルミスとしてマークされた単語の途中にテキストを追加すると追加したテキストの下で赤い破線が不自然に途切れてしまいますこの単語がまだスペルミスかどうかは未チェックなので望ましい処理はこの単語からこの属性を削除して UIに古い情報が表示されないようにすることです
この問題を解決するために invalidationConditionsプロパティを AttributedStringKey型に追加しますこのプロパティはテキストからこの属性の実行を削除するべき状況を宣言します AttributedStringはテキストの変更に関する条件と特定の属性の変更に関する条件を指定します属性キーは任意の数の条件に応じて無効化することができますこの場合この属性実行のテキストが変更されるたびこの属性を削除する必要があるので「textChanged」値を使用します
これで属性実行の中にテキストを挿入してみると実行全体で属性が無効化されるため UIの一貫性が損なわれることを回避できますこの2つのAPIは Maxのアプリでingredient属性を有効に保つのに役立つかもしれませんではMaxがオーブンに生地を入れている間にもう1つのカテゴリの属性を紹介しますこの属性にはテキストのどのセクションでも一貫した値が必要ですたとえば段落の揃え方向の属性です
揃え方向はテキストの段落ごとに適用できますが段落内の1つの単語だけに他と異なる揃え方向を使用することはできません AttributedStringの変更中にこの要件を適用するには AttributedStringKey型に対して runBoundariesプロパティを宣言します Foundationでは段落の端または指定キャラクタの端に実行境界を限定することができますこの場合はこの属性が段落境界で制約されるよう定義することで段落の最初から最後まで一貫した値を維持するように要求します
これでこの状況は起こらなくなります段落内の1単語だけに左揃えの値を適用すると AttributedStringが自動的に段落全体に属性を拡大しますさらにalignment属性を列挙した場合 2つの連続する段落に同じ属性値が含まれていても AttributedStringは個々の段落を列挙します他の実行境界も同じように動作します AttributedStringは境界から境界へと値を拡大して列挙された実行が実行境界ごとにブレークされるようにします
クロワッサンのいい香りが漂ってきましたあとは焼けるのを待つだけならこのようなAPIを使ってアプリの書式設定定義を補完し望ましいカスタム属性の動作を実現してみませんかそれはまさに私が求めていた隠し味ですクロワッサンは焼き上がりを待つだけなので早速試してみましょう
このカスタムIngredientAttributeにオプションの inheritedByAddedText要件を実装し値をfalseにすることで材料名の後に文字を入力しても拡大されなくなります
次に textChangedを含む invalidationConditionsを実装すると材料名の文字を削除したときにその材料名が認識されなくなります
早速試してみましょう「milk」の末尾に「y」を付けると「y」は緑色ではなくなり「milk」から1文字を削除すると単語全体のingredient属性が一度に削除されます AttributedTextFormattingDefinitionに従って ForegroundColorAttributeは引き続きカスタムingredient属性の動作に完全に従います
ありがとうJeremy アプリが本当によくなりましたいえいえでは約束のクロワッサンは... ご心配なくもうすぐできあがりますオーブンを見張っててくれませんか Lucaが持って行くんじゃないかと少し心配なので Lucaの噂は聞いたことがありますよウィジェットとクロワッサンに目がない男とか私が見張っておきますでは私もオーブンを見に行く前に最後のヒントをいくつかご紹介しますこのアプリはサンプルとしてダウンロードできますので SwiftUIの転送可能ラッパーを使用してロスレスのドラッグアンドドロップや RTFDへのエクスポートを行ったり SwiftデータでAttributedStringを維持したりする方法を確認できます AttributedStringはSwiftのオープンソース Foundationプロジェクトの一部ですこの実装をGitHubで探してその進化に貢献したり Swiftフォーラムのコミュニティで質問したりもできます新しいTextEditorではアプリでのジェン文字入力がこれまでになく簡単になりましたのでぜひお試しください皆さんがこのAPIを使用してアプリのテキスト編集機能をどのようにアップグレードされるかとても楽しみです少しの工夫で大きく変わりますよ
うんこれはおいしいいやここは「リッチ」ですよ

import SwiftUI

struct RecipeEditor: View {
    @Binding var text: String

    var body: some View {
        TextEditor(text: $text)
    }
}

1:45 - TextEditor and AttributedString

import SwiftUI

struct RecipeEditor: View {
    @Binding var text: AttributedString

    var body: some View {
        TextEditor(text: $text)
    }
}

4:43 - AttributedString Basics

var text = AttributedString(
  "Hello 👋🏻! Who's ready to get "
)

var cooking = AttributedString("cooking")
cooking.foregroundColor = .orange
text += cooking

text += AttributedString("?")

text.font = .largeTitle

5:36 - Build custom controls: Basics (initial attempt)

import SwiftUI

struct RecipeEditor: View {
    @Binding var text: AttributedString
    @State private var selection = AttributedTextSelection()

    var body: some View {
        TextEditor(text: $text, selection: $selection)
            .preference(key: NewIngredientPreferenceKey.self, value: newIngredientSuggestion)
    }

    private var newIngredientSuggestion: IngredientSuggestion {
        let name = text[selection.indices(in: text)] // build error

        return IngredientSuggestion(
            suggestedName: AttributedString())
    }
}

8:53 - Slicing AttributedString with a Range

var text = AttributedString(
  "Hello 👋🏻! Who's ready to get cooking?"
)

guard let cookingRange = text.range(of: "cooking") else {
  fatalError("Unable to find range of cooking")
}

text[cookingRange].foregroundColor = .orange

10:50 - Slicing AttributedString with a RangeSet

var text = AttributedString(
  "Hello 👋🏻! Who's ready to get cooking?"
)

let uppercaseRanges = text.characters
  .indices(where: \.isUppercase)

text[uppercaseRanges].foregroundColor = .blue

11:40 - Build custom controls: Basics (fixed)

import SwiftUI

struct RecipeEditor: View {
    @Binding var text: AttributedString
    @State private var selection = AttributedTextSelection()

    var body: some View {
        TextEditor(text: $text, selection: $selection)
            .preference(key: NewIngredientPreferenceKey.self, value: newIngredientSuggestion)
    }

    private var newIngredientSuggestion: IngredientSuggestion {
        let name = text[selection]

        return IngredientSuggestion(
            suggestedName: AttributedString(name))
    }
}

12:32 - Build custom controls: Recipe attribute

import SwiftUI

struct IngredientAttribute: CodableAttributedStringKey {
    typealias Value = Ingredient.ID

    static let name = "SampleRecipeEditor.IngredientAttribute"
}

extension AttributeScopes {
    /// An attribute scope for custom attributes defined by this app.
    struct CustomAttributes: AttributeScope {
        /// An attribute for marking text as a reference to an recipe's ingredient.
        let ingredient: IngredientAttribute
    }
}

extension AttributeDynamicLookup {
    /// The subscript for pulling custom attributes into the dynamic attribute lookup.
    ///
    /// This makes them available throughout the code using the name they have in the
    /// `AttributeScopes.CustomAttributes` scope.
    subscript<T: AttributedStringKey>(
        dynamicMember keyPath: KeyPath<AttributeScopes.CustomAttributes, T>
    ) -> T {
        self[T.self]
    }
}

12:56 - Build custom controls: Modifying text (initial attempt)

import SwiftUI

struct RecipeEditor: View {
    @Binding var text: AttributedString
    @State private var selection = AttributedTextSelection()

    var body: some View {
        TextEditor(text: $text, selection: $selection)
            .preference(key: NewIngredientPreferenceKey.self, value: newIngredientSuggestion)
    }

    private var newIngredientSuggestion: IngredientSuggestion {
        let name = text[selection]

        return IngredientSuggestion(
            suggestedName: AttributedString(name),
            onApply: { ingredientId in
                let ranges = text.characters.ranges(of: name.characters)

                for range in ranges {
                    // modifying `text` without updating `selection` is invalid and resets the cursor 
                    text[range].ingredient = ingredientId
                }
            })
    }
}

17:40 - AttributedString Character View
```
text.characters[index] // "👋🏻"
```
17:44 - AttributedString Unicode Scalar View
```
text.unicodeScalars[index] // "👋"
```
17:49 - AttributedString Runs View
```
text.runs[index] // "Hello 👋🏻! ..."
```
18:13 - AttributedString UTF-8 View
```
text.utf8[index] // "240"
```
18:17 - AttributedString UTF-16 View
```
text.utf16[index] // "55357"
```

18:59 - Updating Indices during AttributedString Mutations

var text = AttributedString(
  "Hello 👋🏻! Who's ready to get cooking?"
)

guard var cookingRange = text.range(of: "cooking") else {
  fatalError("Unable to find range of cooking")
}

let originalRange = cookingRange
text.transform(updating: &cookingRange) { text in
  text[originalRange].foregroundColor = .orange
  
  let insertionPoint = text
    .index(text.startIndex, offsetByCharacters: 6)
  
  text.characters
    .insert(contentsOf: "chef ", at: insertionPoint)
}

print(text[cookingRange])

20:22 - Build custom controls: Modifying text (fixed)

import SwiftUI

struct RecipeEditor: View {
    @Binding var text: AttributedString
    @State private var selection = AttributedTextSelection()

    var body: some View {
        TextEditor(text: $text, selection: $selection)
            .preference(key: NewIngredientPreferenceKey.self, value: newIngredientSuggestion)
    }

    private var newIngredientSuggestion: IngredientSuggestion {
        let name = text[selection]

        return IngredientSuggestion(
            suggestedName: AttributedString(name),
            onApply: { ingredientId in
                let ranges = RangeSet(text.characters.ranges(of: name.characters))

                text.transform(updating: &selection) { text in
                    text[ranges].ingredient = ingredientId
                }
            })
    }
}

22:03 - Define your text format: RecipeFormattingDefinition Scope

struct RecipeFormattingDefinition: AttributedTextFormattingDefinition {
    struct Scope: AttributeScope {
        let foregroundColor: AttributeScopes.SwiftUIAttributes.ForegroundColorAttribute
        let adaptiveImageGlyph: AttributeScopes.SwiftUIAttributes.AdaptiveImageGlyphAttribute
        let ingredient: IngredientAttribute
    }

    var body: some AttributedTextFormattingDefinition<Scope> {

    }
}

// pass the custom formatting definition to the TextEditor in the updated `RecipeEditor.body`:

        TextEditor(text: $text, selection: $selection)
            .preference(key: NewIngredientPreferenceKey.self, value: newIngredientSuggestion)
            .attributedTextFormattingDefinition(RecipeFormattingDefinition())

23:50 - Define your text format: AttributedTextValueConstraints

struct IngredientsAreGreen: AttributedTextValueConstraint {
    typealias Scope = RecipeFormattingDefinition.Scope
    typealias AttributeKey = AttributeScopes.SwiftUIAttributes.ForegroundColorAttribute

    func constrain(_ container: inout Attributes) {
        if container.ingredient != nil {
            container.foregroundColor = .green
        } else {
            container.foregroundColor = nil
        }
    }
}

// list the value constraint in the recipe formatting definition's body:
    var body: some AttributedTextFormattingDefinition<Scope> {
        IngredientsAreGreen()
    }

29:28 - AttributedStringKey Constraint: Inherited by Added Text
```
static let inheritedByAddedText = false
```

30:12 - AttributedStringKey Constraint: Invalidation Conditions

static let invalidationConditions:
  Set<AttributedString.AttributeInvalidationCondition>? =
  [.textChanged]

31:25 - AttributedStringKey Constraint: Run Boundaries

static let runBoundaries:
  AttributedString.AttributeRunBoundaries? =
  .paragraph

32:46 - Define your text format: AttributedStringKey Constraints

struct IngredientAttribute: CodableAttributedStringKey {
    typealias Value = Ingredient.ID

    static let name = "SampleRecipeEditor.IngredientAttribute"

    static let inheritedByAddedText: Bool = false

    static let invalidationConditions: Set<AttributedString.AttributeInvalidationCondition>? = [.textChanged]
}

関連する章

リソース

関連ビデオ

WWDC25

WWDC22

WWDC21