SwiftUIで創り上げる検索体験

SwiftUIで創り上げる検索体験

Appの中で特定のコンテンツをすばやく見つけられるようにする方法を紹介します。SwiftUIの修飾子.searchableを他のビューと組み合わせて使用し、Appに検索を組み込む方法を確認します。そして、実行可能な検索タイプをユーザーが理解するのに役立つ検索提案を提供することで、実装を向上させる方法をお伝えします。

リソース
- - HDビデオ
  - SDビデオ
関連ビデオ

WWDC21
- SwiftUIの新機能
- watchOS 8の新機能
ダウンロード

♪ ♪ こんにちは SwiftUIチームのエンジニアのHarryです「SwiftUIで創り上げる検索体験」にようこそ今年 SwiftUIの検索を一新しましたこれらの機能の使用開始方法をご紹介しますときに Appの中で特定のものを探したいときもありますが Appの多くは大量のデータを含んでおり探しているAppを正確に見つけるのは難しいものです最新のAppのトレンドや次のお気に入り曲朝の通勤に最適なポッドキャストなどは検索を実装することで見つけられるようになります最適な検索体験は Appの構造や内容によって異なりますしかし一般的に全ての体験には検索クエリを定義する検索フィールドが含まれます SwiftUIでは直接検索が実装できるようになりましたご覧くださいここでは SwiftUIの検索機能の基盤となる新しい searchable修飾子を紹介しますナビゲーションビューがどうやって searchable修飾子と統合するか紹介します最後に検索候補を追加することで searchable修飾子の機能が拡張することを説明します searchable は SwiftUI の新しいビュー修飾子で全てのプラットフォームで利用できます表示されたコンテンツが検索可能だと知らせることができますコンテンツがその意味を明確にしてくれるでしょうこの修飾子の各プラットフォームでの使用例を紹介していきますねさてこの修飾子を理解するために天気について話しましょう！新しいWeather Appで iOS検索の良い例が見つかるでしょう都市のリストを見ながら検索バーに文字を打ち始めるとリストに追加する新しい都市が検索されます Weatherがこの機能を実行するためにどのように searchable修飾子を使用するのか UIの構造を分類して説明します Weatherはナビゲーションビューから始まりナビゲーションバーを提示します Weatherはナビゲーションビューのコンテンツとしてカスタムリストを追加しリスト内のセルに ForEachを追加します最後にWeatherはナビゲーションビューに searchable修飾子を加えます全てのsearchable修飾子の核となるのは検索フィールドの設定です searchable修飾子は設定された検索フィールドを環境を通して各プラットフォームに最適な方法で使用できるように他のビューに渡しますナビゲーションビューは検索フィールドを理解し検索バーとしてレンダリングします設定された検索フィールドを使用するビューがない場合 searchable修飾子は検索フィールドをレンダリングするデフォルトの実装をツールバーに表示します検索フィールドは必ずしも唯一の検索関連の UIというわけではありません検索結果を何らかの形で表示するのが一般的なデザインパターンです Weatherはこのパターンに従い空でない検索クエリを見るたびカスタムリストを最新のクエリの結果を含む別のリストに切り替えて表示します WeatherがUIを実現するため searchable修飾子によって提供される情報をどのように利用するか見てみましょうこれはweatherのカスタムリストです searchable修飾子は isSearchingという新しい環境プロパティを設定します Weatherはそれをユーザーの積極的な検索があるかどうかに基づき表示されたビューを動的に変更するために使用します WeatherはisSearching 環境プロパティと検索テキストをクエリして条件付きで結果ビューを表示します独自の結果をレンダリングする場合ユーザーが検索から戻った後メインUIの状態が変化しないようにオーバーレイの使用を検討してくださいナビゲーションビューと新しいsearchable修飾子がどのように統合されるか詳しく説明しますそのために私が精力的に取り組んでいるApp Colorsを紹介しますこのAppではパレットと呼ばれる好きな色のセットをライブラリーで管理できます例えばルームや Appのテーマを違う色にいじってみたり新しいM1 iMacの色選びに役立ちますどんな望みでも Colorsはあなたをサポートします Colorsの基本構造はダブルカラムのナビゲーションビューでルートビューは iPadOSとmacOSではサイドバー他のプラットフォーム上ではナビゲーションスタックのルートになりますサイドバーが私のカラーパレットのライブラリです詳細表示では現在選択されているカラーパレットとどのように見えるか見え方の違いを確かめることができます Appの使用が始まって気づいたことはみんなカラーが大好きだということですライブラリーには常にカラーが増え続けますしかしライブラリーが大きくなるにつれて全てスクロールしないと特定のカラーパレットを見つけるのが難しくなりますこの時点で検索機能を追加することに決定しました私のAppユーザーがすぐに理解できるように機能はプラットフォームの慣習に従ったものにしますこの機能を実装するためにいかにsearchable修飾子を使用するかご覧ください
これはColor Appの一部として私が構築したナビゲーションビューです検索を実装するためにナビゲーションビューに searchable修飾子を加えます先ほどと同様検索クエリをサポートする階層に searchable修飾子を縛りを設けて加えますそして iOSやiPadOS上では検索バーとしてレンダリングされますナビゲーションビューが searchable修飾子のコンテンツである場合検索フィールドをカラムの１つに紐付けますどのカラムを使用するかはナビゲーションビューに提供されているカラム数によります２カラムのナビゲーションビューの場合 iOSとiPadOS上のどちらも検索バーはサイドバーのカラムに紐付けられます検索フィールドをデフォルト以外のカラムに紐づけたいときは既存のtoolbar修飾子と同じように searchable修飾子を目的のカラムに配置できますこのAppではナビゲーションビューで検索可能にしておきます Weather Appと同様に isSearching環境プロパティを使って検索結果をサイドバーに動的に表示させます macOSでsearchable修飾子を同様に配置するとツールバーの後続スペースに検索フィールドが配置されウィンドウが縮小すると自動的に折り畳まれるなどプラットフォームで期待される動作が行われますここで macOSの典型的な体験として検索結果をAppの詳細ペインに表示してみます WatchOSもiOSと似ておりツールバーのビューの上部に検索フィールドを配置しますここで SwiftUIは検索フィールドを紐付ける最初のカラムを選択します searchable修飾子の配置を変えずにプラットフォーム間で異なる動作をさせたことに注目ですプラットフォーム間で私のApp構造は変わらずナビゲーションビューはダブルカラムのままでした SwiftUIはこの構造や異なるプラットフォームの慣習を理解し代わりに対処してくれます tvOSを見たとき他のプラットフォーム上で App構造はより適切になり得ると気づきます tvOSでは検索はタブビュー内のタブになりますが私のAppにはタブビューがありません Appに少し手を加えると解決できますダブルカラムのナビゲーションビューでなくタブビューをコンテンツとするシングルカラムのナビゲーションビューをレンダリングすることでより典型的なtvOS体験が可能になりますタブビューの中に既存のサイドバービューを配置し新しい検索タブを追加します検索タブはプレースホルダービューを示しており誰かが最初にそのタブに誘導したときに見えるようになります最後にナビゲーションビューをラップする代わりに searchable修飾子を移動して検索タブをラップします空でない検索クエリが入力されたら検索結果を表示するようにビューを移行しますこれで各プラットフォームに検索機能が加わりました SwiftUIの宣言的な性質のおかげで Appのナビゲーション構造が一貫したままなので SwiftUIに頼ることができましたそして特定のナビゲーション構造に適したインターフェースを searchable修飾子の実装に選ばせています tvOSでは Appの構造が変化したので seearchable修飾子について学んだことをその変化した構造に適用しました私が ”searchable”と定義したものだけが構造とともに変化しましたこれであなたは searchable修飾子について理解しましたね最後のトピックである検索候補に移りましょう私のAppで検索を使用したユーザーから検索の新機能は気に入っているが何を検索していいのかわからないことがあると報告を受けました多くのAppが検索候補を使って提供できる検索クエリの種類を案内していますこの候補は完全な検索クエリを示しており macOSのようにメニューで表示されたり iOSのようにリストで表示されたり watchOSのようにリストを表示するボタンになります候補はどんなものを検索すればよいのか発想を与えてくれます SwiftUIはAppに検索候補を加える簡単な方法を提供しますご覧ください私のAppではsearchable修飾子をテキストで設定しています searchable修飾子は候補と呼ばれるオプションのパラメータを提供しておりスタート時に含められます候補パラメータにはビューを提供しますこれは静的なボタンのときもありますが Appのデータベースやサーバーから送られる動的な候補のセットに対する ForEachがふさわしいです SwiftUIはこのビューを見て表示すべき候補の有無に基づいて提示します例えば watchOSでは空でない候補を入力すると検索フィールドにアイコンが表示されます一般的なパターンでは ForEachボタンを提示し操作されるとsearchable修飾子に提供されているテキストバインディングを検索候補のテキスト値に更新しますこのパターンが通常になると予測されるため追加したのが searchCompletion修飾子です searchCompletion修飾子は非対話型ビューで使用できますそのビューをボタンに変換し検索テキストを更新して現在表示されている候補を解除しますユーザーが初めて候補と交流するAppを作成するならば候補に基づいた検索結果の完全なセットをフェッチしいつ検索結果をフェッチしたかわかるよう新しいonSubmit修飾子の利用を検討してください onSubmit修飾子が検索の値を入れるとユーザーが検索クエリを送信するたび提供したクロージャーが呼び出されます通常はユーザーが検索候補を選択したりキーボードでEnterを押したときに起こりますまた新しいonSubmit修飾子はテキストフィールドやセキュリティフィールドなど検索に関係のない分野でも使用できます検索完了修飾子と一緒に候補のパラメータを使うと強力な検索候補機能を Appに簡単に追加できます SwiftUIが提供する検索機能の一部を簡単に紹介しましたがいかがでしたか searchable修飾子によってビューコンテンツを検索可能なものとして記述できますナビゲーションビューは searchable修飾子と統合しナビゲーションビューのコンテンツに基づきプラットフォームに適した体験を提供します環境のisSearching プロパティを使用するとユーザーが検索しているときに AppのUIを動的に調整できます検索完了修飾子と earchable修飾子の候補のパラメータを使用して Appに検索候補を追加しますさああなたのSwiftUI Appに検索を追加してみましょうそれでは素敵なWWDCを [音楽]

struct ColorsContentView: View {
    @State var text = ""
    
    var body: some View {
        NavigationView {
            Sidebar()
            DetailView()
        }
        .searchable(text: $text) {
           ForEach(suggestions) { suggestion in
                Button {
                    text = suggestion.text
                } label: {
                    ColorsSuggestionLabel(suggestion)
                }
            }
        }
    }
}

1:17 - New Searchable Modifier
```
ContentView()
    .searchable(text: $text)
```

1:58 - Weather Search

NavigationView {
    WeatherList(text: $text) {
        ForEach(data) { item in
            WeatherCell(item)
        }
    }
}
.searchable(text: $text)

3:11 - Weather List

struct WeatherList: View {
    @Binding var text: String
    
    @Environment(\.isSearching)
    private var isSearching: Bool
    
    var body: some View {
        WeatherCitiesList()
            .overlay {
                if isSearching && !text.isEmpty {
                    WeatherSearchResults()
                }
            }
    }
}

5:07 - Colors Search

struct ColorsContentView: View {
    @State var text = ""
    
    var body: some View {
        NavigationView {
            Sidebar()
            DetailView()
        }
        .searchable(text: $text)
    }
}

7:15 - Colors Search with TV

struct ColorsContentView: View {
    @State var text = ""
    
    var body: some View {
        NavigationView {
            #if os(tvOS)
            TabView {
                Sidebar()
                ColorsSearch()
                    .searchable(text: $text)
            }
            #else
            Sidebar()
            DetailView()
            #endif
        }
        #if !os(tvOS)
        .searchable(text: $text)
        #endif
    }
}

9:09 - Colors Search Completions

struct ColorsContentView: View {
    @State var text = ""
    
    var body: some View {
        NavigationView {
            Sidebar()
            DetailView()
        }
        .searchable(text: $text) {
           ForEach(suggestions) { suggestion in
                ColorsSuggestionLabel(suggestion)
                    .searchCompletion(suggestion.text)
            }
        }
    }
}

10:21 - On Submit

ContentView()
    .searchable(text: $text) {
        MySearchSuggestions()
    }
    .onSubmit(of: .search) {
        fetchResults()
    }

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

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

リソース

関連ビデオ

WWDC21