UIKitの新機能

UIKitの新機能

UIKitの最新のアップデート内容と改良点を紹介して、より優れたiPadOS App、iOS App、Mac Catalyst Appを開発する方法について解説します。UIの改良点、生産性向上のためのアップデート内容、APIの拡張点を紹介し、パフォーマンスの向上、セキュリティとプライバシーの機能を検証します。

リソース
関連ビデオ

WWDC21
ダウンロード

iOS 15 の「UIKitの新機能」へようこそ！私の名前はマイケルです後半は同僚のジェイミーがご説明します
iOS 15 には新しい技術や機能が搭載しています新しい機能を導入するために素晴らしい方法でアップデートしました
ジェイミーと私は "生産性の向上" "UI の改良点" "API の強化" "パフォーマンスの向上" "セキュリティーとプライバシー" を説明します
iPadOS では生産性の向上が重要であり今年も例外ではありません "iPad マルチタスキング" "ナビゲーション" "ショートカット" "iPadポインタ"などのアップデートを行いましたまずはマルチタスクに関するアップデートを短いデモで見てみましょうメールでは新しいセンターシーンマルチタスク機能を採用しこれまで以上に簡単に１つのメッセージに集中できるようにしました
メッセージを長押しするとメニューが表示され "新しいウインドウで開く" を選択メッセージの画面中央に UI ウインドウシーンが表示されます手元の作業に集中するには良い方法ですセンターシーンウインドウはドラッグアンドドロップでスプリットビューに移動できますしウインドウの上部にあるマルチタスクメニューでスプリットビューを選択することもできます
またマルチタスクメニューを下にスワイプして新しいウインドウシェルフにシーンをドッキングできます
この機能をAppに追加するにはー新規ウインドウシーンの起動を作成するだけですこのアクションは Appで処理可能なー NSUserActivityで作成された起動設定を返すクロジャーを取りますそれをコンテキストメニューに追加して準備完了です
iPadOS 13.4 ではマジックキーボードとポインタを導入しました iPadOS 15 ではバンド選択を追加してポインタのサポートを改善しました新しい APIを提供するだけでなく複数選択をサポートする UICollection View ではデフォルトでバンド選択を有効にしていますまたポインタのアクセサリが追加されました任意のポインタスタイルに二次的な形状を組合せ追加のコンテキストを伝えて機能を示唆できます一度に複数のアクセサリを表示しポインタの周囲に配置することができますアクセサリはポインタと同じ流動的な性質を持ちシステムが異なるアクセサリの形状や位置をシームレスにアニメーションさせます
iPadOS 15ではキーボードショートカットメニューのデザインを一新しました分類されたショートカットと内蔵の検索機能により探しているショートカットを見つけるのが簡単になりましたまた新しいキーボードショートカットメニューは iPad版とMac Catalyst版の互換性が良くなりました
これらの新機能を最大限に活用するには UIMenuBuilderを採用する必要があります UIApplicationDelegateに buildMenuWithBuilder を実装しますコマンドをViewやFileなどあらかじめ定義されたカテゴリに割り当てるか独自のカスタムカテゴリを作成しますカテゴリを使うにはUIResponderの keyCommandsプロパティが Appで使われているか確認する必要がありますこのプロパティに割り当てられた全てのコマンドを buildMenuWithBuilderに移動させます "マルチタスキング" "iPad ポインタ" "キーボードショートカットメニュー"について iPad Appのレベルを上げるための素晴らしいビデオを用意しています iPadOS 15 ではフォーカスベースのキーボードナビゲーションのサポートが強化されました tvOS フォーカスシステムに慣れている方は iPadOS でフォーカスシステムが使えるようになったことを喜んでいただけると思います実際 tvOS CarPlay iPadOS およびMac Catalyst におけるすべてのフォーカスナビゲーションは UIFocusSystem をベースに構築されています iPad や Mac Catalyst の UIFocusSystemでは矢印キーでフォーカスアイテム間を移動しタブキーでフォーカスグループ間を移動しますこの例ではメールAppがサイドバー付きの UISplitViewControllerを使用していますが標準的な UIKitコンポーネント使用時ーデモのようなキーボードナビゲーションが iPadOS 15 ではデフォルトで有効になります Appでのキーボードナビゲーションのサポートについては「iPadキーボードナビゲーション」を参照してください iOS生産性向上に欠かせないもう一つの機能がマルチタッチによるドラッグ＆ドロップです iOS 11 で導入されたドラッグ＆ドロップは生産性向上に欠かせない機能です簡単なジェスチャー1つで Appのデータをスムーズ移動でき iPadOSでは他のAppへも移動可能です iOS 15ではUIKitによって iPhoneでも App間のドラッグ＆ドロップが可能になり多くのインタラクションが実現しました
例えば時計バンドのアイデアを友人と共有することがーこれまで以上に簡単になりましたジェスチャーひとつで Safari からメッセージに写真をドラッグすることができます
この拡張機能をサポートをするためにードラッグ＆ドロップの API に変更はありません技術的な詳細については 2017年に公開された４つの素晴らしいビデオでドラッグ＆ドロップの活用方法を説明しています次は iOS 15 で洗練された改良版 UI を紹介します UIToolbar と UITabBar を改良しましたこの改良した外観は下までスクロールしたときに視覚的にコンテンツがわかりやすくなります UITabBar では SF Symbolsのサポートを強化しお気に入りのシンボルに良い結果をもたらします UIKitはアピアランスを App内でスムーズにする為最善を尽くしていますがいくつかの問題が発生する可能性がありますコードをチェックしてバーの半透明プロパティを false に設定している箇所がないかまた標準外の edgesForExtendedLayout を持つ UIViewControllers がないか確認する必要がありますこれらの条件はいずれもアピアランスで視覚的な問題を引き起こします
新しいデフォルトの動作が Appに適していない場合はカスタムのアピアランスを作成しそれをバーの scrollEdgeAppearance プロパティに割当てくださいこのプロパティは以前 UINavigationBar でのみ利用可能でしたが現在では UIToolbar と UITabBar でも利用可能ですカスタムアピアランスを設定することで前述の互換性のないAPIに起因する視覚的な問題を回避できます
また新しいscrollEdgeAppearanceの遷移実行時に UIKitが観察のための適切なスクロールビューを推測できない可能性があります scrollView を直接指定するために UIViewController に新しい機能を追加しました ⸺ setContentScrollView for edge すべてのバーを探して想定通りになっているか確認してください何か特別なことをしている場合は必ずチェックしてください特別な注意が必要です
iOS 15ではヘッダーの外観が新しくなりましたプレーンなリストではセクションヘッダーがコンテンツに沿ってシームレスに表示されスクロールダウンして上部に固定されたときにのみ背景素材が見えるようになりましたさらに各セクションヘッダーの上に新しいパディングが挿入されこの新しいデザインでセクションを視覚的に分離します
連絡先Appの例の様にリストコンテンツが長い時はこのプレーンなスタイルをインデックスバーと組合せて使用することで素早くスクラビングできます
UIKit にはグループ化されたスタイルもありますこれは多くのカスタムコンテンツやビジュアルリッチコンテンツを含まないUIで使用されますこれは設定Appに見られるような設定 UI や登録フローに適しています
prominentヘッダースタイルは iPadのサイドバーリストに使用されている既存のサイドバーヘッダースタイルと似ていますプロミネントヘッダはコンパクトサイズクラスで .sidebarリストを .insetGroupedリストに適合させる際に使用するのに最適な選択肢です
時計Appのアラームタブにはこの新しいスタイルが採用されています最後に視覚的に豊かなコンテンツで使用する為にヘッダーが階層を維持して見失わないようにする為の特別に目立つグループ化した新しいスタイルがあります
Watch App の Face Gallery ではこのスタイルが使われていますこのヘッダースタイルにアクセスするには iOS 14で導入された UIListContentConfiguration APIをご使用ください iOS 14.5 ではリスト内のセパレータを完全制御できる UIListSeparatorConfiguration が導入されましたリスト全体の構成を指定することもシステム生成アピアランスを行ごとにオーバーライドもできセパレータを完全に制御できます iOS 15 のシートには画面を半分だけ覆う機能が追加され画面上に自由に表示できるようになりました新しい半分の高さの機能ではオプションでシートの後ろの調光を無効にできシートの中と後ろの両方でインタラクションができるノンモーダルな体験ができます iOS 15で強化されたシートのすべてについては「UIKitのシートのカスタマイズとリサイズ」をご覧下さい
次は UIDatePicker ですそう iOS 15 では再びホイールを復活させますが時間をタップしてキーボードを使った入力も可能になりました iPad の Magic Keyboardを使えば時間を直接編集することもできますもちろん画面をタップしてホイールを表示させることもできますそれでは同僚のジェイミーにお任せしますマイクありがとう！それでは iOS 15 で強化された UIKit API についてご紹介します最初の API の強化は様々な面でされており UI の改良でもあります UIButton に新しい API を追加してボタンの見た目を柔軟に設定できるようにしました
従来の Plain スタイルに加えて背景がGray または Tinted そして完全に不透明な Filled が追加されました
また新しいスタイルに加えて Dynamic Typeと呼ばれるシステムのテキストサイズ設定ーに応じてボタンサイズ変更がより適切にサポートされまた初めて複数行のテキストがサポートされますこれらの変更とそれを可能にする新しい UIButton Configuration APIによってより強力になっただけでなくカスタマイズ性や更新のしやすさも向上しています
iOS 14 でリリースされたボタンへのUIMenuの追加と合わせて UIButtonConfigurationでは初めて UIKit で自然にポップアップボタンやプルダウンボタンを作ることができるようになりました
もちろんMacで UIKit を使用していて Xcode で Optimize Interface For Mac を選択していればこれらのボタンは想定通りの外観と動作になります
API の使いやすさの一例をご紹介しますボタンのコンストラクションを作成しますこのコンストラクタでは Tintedスタイルを指定します
構成のプロパティはボタンのカスタマイズに使用されますコンフィギュレーションを渡しインスタンス化しますここに表示されていませんがアクションを追加してボタンをビューに追加するだけです UIButtonConfigurationにはここでは説明しきれないほど多くの機能があるので機能や UIButton の改良点を説明したビデオがありますボタンの API については「UIKitボタンシステムについて」をご覧ください iOS および iPadOS 上の UIContextMenuInteraction は折畳可能なサブメニューをサポートできますこのメニューの "Sort By"のように > の項目をタップすると表示されます
このための新しい API はありません UIMenu API はすでにサブメニューをサポートしていますが iOS 15以前ではサブメニューをタップするとメニューを完全に置き換えていましたこれについてはビデオ「UIKitボタンシステムについて」でもう少し詳しく説明しています
iOS 13 では SF Symbolsが導入されましたこれはサンフランシスコのフォントの横に置いても違和感のない数百種類のシンボルです iOS 15 ではこれがさらに進化しましたシンボルが追加されただけでなく 3つの新しい方法で色を使うことができます "階層型" "パレット型" "マルチカラー型"ですモノクローム型はすでにおなじみの単色の着色可能なイメージです階層型はランタイム指定の単一の色をグラデーションのようにしますパレット型は複数の色を明示的に指定できますマルチカラー型は以前 AppKit と SwiftUI でしか利用できなかったですが固定のマルチカラー表現が可能になりました
カラフルなモードを使用する為の新しい API が UIKit SwiftUI 及び AppKit で利用可能です
この API はとても簡単に使用できますこのコードではシステムのオレンジを階層的な色合いの基準として使用する UIImageSymbolConfiguration を設定しオレンジ色に階層的に着色された太陽のシンボルのイメージを作成しています
SF Symbols を日常的に使用している方はスタイルバリエーションがあることをご存知でしょう例えば塗りつぶしたもの円上のもの長方形上のもです
以前のリリースで点線の文字列を指定選択できました iOS 15 では UIImage API が用意されておりタイプを事前指定する場合も既存の画像のバリエーションを生成する場合もこれらのバリエーションを簡単に扱えますこれは heart 文字列で表されるシンボルとそのバリエーションの内2つでコード内で選択できます
「SF Symbols 3の詳細」コレクションには SF Symbolsについてのビデオがあるのご覧ください
「UIKitとAppKitにおけるSF Symbols」に UIKit API の説明があります
UIContentSizeCategory の特徴はテキストサイズ設定をコードで表していますーダイナミックタイプサイズラベルテキストフィールドテキストイメージビュー SF Symbols を含む場合もあり自動的に設定値に調整されますこの特性をビュー階層に適用する方法を制限する新しい方法が追加されましたよってサイズの上限や下限を簡単に設定できます Appのテキストや画像がテキストサイズ設定で美しく見えるようにする時に大きな助けとなります Clock Appでは大きなタイムラベルの大きさを制限しています
このAPIを使用しテキストサイズを過度に制限しないで下さいこれらの設定は非常に重要な機能でありテキストサイズが最大設定の人であってもすべてのAppの機能が利用可能で読みやすいことが重要です例えばすでにデフォルトサイズで非常に大きい見出しのさらなる拡大を制限するためにこの設定を使用できます
すべてのプラットフォームでシステムカラーが統一できます UIKit にとってどんな意味があるのでしょうかいくつかの色に微妙な変更があります以前は他のフレームワークでしか利用できなかった色が UIKit でいつでも利用できます UIKit で systemMint や systemBrown を使いたくてウズウズしていた方は今がその時です！
新機能として UIColor. tintColor がありますこれは実行時に解決される色 Appや特徴的な階層の現在の色調に基づいています新しい UIButton.Configuration やカラフルな SF Symbol と一緒に使うのに最適です
UIColorと共に色を混ぜたり選んだりする為の標準的なインターフェイスであるー UIColorPicker ViewController も強化されています iOS 14.5 では colorPickerViewController (didSelect:continue:)という新しいコールバックが追加され色の混合や変更ピッキング完了時に AppのUI を更新できます TextKit 2 は iOS iPadOS tvOS macOS で利用可新しい次世代のテキストレイアウトシステムですテキストでやりたいことを簡単に表現できる強力な新システムで高いパフォーマンスを実現します UIKit はこれを採用し UITextField でも使われますこのシステムはカンナダ語の様な複雑な体系を持つ言語を Appの対応無しでより良いレイアウトにします
TextKit 2 で出来る事 App使用法を知りたい方は「TextKit 2について」をご覧ください
UISceneSession は UI のインスタンスを表し Appスイッチャーのウインドウに対応しますインターフェースの状態は NSUserActivity で表します Appシーンがバックグラウンドに入るとこの NSUserActivity をシステムに提供しシーンが再設定されると NSUserActivity を使用してインターフェースの状態を復元する必要があります iPadOS 15 では効率化の為新しい API がありますテキスト入力ビューの一時的な状態を取得したり設定したりする新しい方法があります UIScene コールバックはストーリーボードがロードされた後に状態を復元する為の場所です Appの起動プロセスを拡張しステートを返す非同期のモデルコードが実装されていれば UI がアクティブになるタイミングを遅らせます我々は UIScene ベースの API に注力しています iPadOS 13 で UISceneが導入される前からの古い UIApplication ベースのライフサイクルをお使いでしたら今こそ UIScene に切り替えるべきですすべての UIKit Appで使えますマルチウィンドウのサポートは必須ではありませんが iPadやMacでは非常に重要です
UIScene の復習や強化された状態復元 API の詳細は「iPad Appを次のレベルに」をご覧くださいシーンといえば iOS 15 の UIKit では各シーンでやり取りされている現在共有可能なコンテンツを Appが表現できる様にする新しい API があります iOS と Mac の新機能である Siri の「Share This」や Mac Catalyst の NSSharingServicePickerToolbarItem で使用されています「ショートカット、Siri、提案のための優れたアクションのデザイン」「優れたMac Catalyst Appの条件」のビデオで詳細をご覧いただけます
最後の API の強化について UICollectionView と UITableView に戻ります iOS 14で新しいAPIを導入しセルの外観を従来よりも遙に簡単で一貫して設定できます
iOS 15 ではクロージャベースの更新でセルの再構成が今までよりも簡単になりました
セルのサブクラスを作成してステートを使い updateConfiguration のオーバーライドは不要ですセルを作成するのと同じ場所でインラインでコードを書くことができますセルが無効の時にテキストをグレーアウトさせています同様のクロージャベースの機能は UIButtonConfiguration API で利用できます
diffable データソースを改良しコレクションビューテーブルビューの更新を容易にしました iOS 15 では差分をアニメーション化するのではなくスナップショット適用時に UI が更新されますアイテムを効率的に再構成する為の新しい API がありアイテムのプロパティ変更時に既存のセルに表示されているコンテンツを更新できます
UIKit が動作するデバイスには複数のプロセッサコアとグラフィックスハードウェアが搭載されています動画やスクロールはスムーズでないといけません iOS 15 ではこのような特徴を持つAppの構築を容易にする機能強化と新しい API がありますでは UIKit に用意されたものの例を紹介しますまず UICollectionView と UITableView に戻ります iOS 15 ではセルのプリフェッチに変更がありこれは iOS 15 構築後自動的に有効になりますこの変更によりAppはスクロールをスムーズに保ちセルを準備するための時間が最大で2倍ビジュアルフレーム約2枚分を確保できます
多くのセルに画像が表示されますメインの UI キューが大きな画像のデコードに追われるとスクロールが一瞬中断されることがありました
Appコードでこれを細かく制御できます画像を準備するための新しい関数が用意されており Appが画像表示する時に画像を準備しますこれらの関数は非同期で簡単に使用でき画像をデコードしている間 UI キューで処理します
多くのAppで大きな画像を小さなサイズで表示していますこのような場合に新しい UIImage API があります画像やディスプレイに関するシステムの知識を利用して効率的に画像のサイズ変更しメモリを節約するものです
コレクションビューとイメージの改良点の詳細それを活用する方法やパフォーマンスの説明は「超高速なリストとコレクションビューの構築」をご覧ください
Swift は非同期コードの記述をこれまで以上に容易にする新機能を導入しました殆どのUIKit APIはメインの UIキューで呼び出す必要があります我々はこれらのAPI を Main Actor としてマークし初めてこれがコンパイル時に強制されるようにしました UIImage の準備機能のような他の分野では UIKit が新しい非同期の Swift 言語機能を使って簡単かつ安全に使用できる APIを調整しました「Swiftのasync/awaitについて」「AsyncSequenceについて」で非同期コードを開発する新しい方法をご確認下さい
さて次は「セキュリティとプライバシー」についてですどのインターフェイスが実際に操作されているかをシステムが確認するための新しい技術があります
これを UIKit にいくつかの場所で統合しました Appに影響を与える可能性を３点お話します
まず位置情報ボタンです新しいAPIが導入され現在地のアクセスを一度だけ許可するボタンを埋め込むことができますこのボタンは多くの警告やプロンプトを出さずにタップされた時にのみアクセスを許可します
柔軟性があり Appの外観に合わせられますが裏ではボタンが常に明確で読みやすいようにしなければ機能しませんこのボタンをどのように Appに組み込むかを「Locationボタンについて」のビデオでご覧下さい
iOS 14 で導入したバナーに気付いているかもしれませんこれは他のAppでペーストボードにコピーしたデータにアクセスするときに表示されます
iOS 15 ではシステムの標準的なペースト機能で意図的に操作した後データにアクセスした事がシステムで確認できる場合はバナーを非表示にします例えば編集メニューのペーストのタップやハードウェアキーボードの Cmd-Vなどです
標準的なペーストメニュー項目の API を追加しましたこれらを使用した場合通知バナーも表示されません "ペースト" "ペーストして移動" "ペーストして検索" "ペーストしてスタイル統一" の新しい指定方法がありますそれぞれについて標準の UIResponderセレクターUIMenuControllerや UICommandで使用と新しい識別子ーUIActionで使用があります
Appがペーストボード上の情報を求める事がありますが全てにアクセスする必要はありません iOS 14でペーストボードに数字 URL 検索用語候補があるかチェックする為に API を導入しました計算機や Safari でこれらを使用しています
iOS 15 はこの API が拡張され全ての標準的なデータ検出タイプを網羅していますこれらはデータ自体へのアクセスを許可していないため通知は表示されませんテキストをパースせずにデータ値を取得する API もありますが標準的な貼り付けインターフェース使用後以外で使用された場合システムはペースト通知を表示します
最後はプライバシー強化 iOS 14.5 の新機能です位置情報貼り付けインターフェース技術ベース UIEventAttribution は WebKit と共同開発しました WebKit の Private Click Measurement は Web-to-Web クリック計測 UIEventAttribution は PCM を UIKit に導入し App-to-Web Click Measurement を提供広告のクリックやタップのプライバシー保護の測定です使い方は簡単で UIEventAttributionViews で広告を覆い広告のタップに反応して開いたURLと一緒に UIEventAttribution オブジェクトを渡すだけです
「プライバシーを保護した広告アトリビューションについて」また WebKit.orgのブログ記事「Introducing Private Click Measurement」でも確認できます盛りだくさんの内容でしたがすべてを網羅できていません次は何でしょう？ iOS 15 SDK でAppをコンパイルしてみてください iPhone で新機能を試してみましょう新しい「ボタン」「バー」「リスト」「シンボル」など iOS 15 の新しい外観を採用してください "マルチタスキング" "キーボード" "トラックパッドサポート"が強化した iPad の新機能を活用することもできます UIKit API を使ってプライバシーを尊重しより速いAppを簡単に作ることができますありがとうございます

1:41 - Building an "Open in New Window" action

// Building an "Open in New Window" action

let newSceneAction = UIWindowScene.ActivationAction({ _ in

    // Create the user activity that represents the new scene content
    let userActivity = NSUserActivity(activityType: "com.myapp.detailscene")

    // Return the activation configuration
    return UIWindowScene.ActivationConfiguration(userActivity: userActivity)

})

3:06 - UIMenuBuilder

class AppDelegate: UIResponder, UIApplicationDelegate {

    override func buildMenu(with builder: UIMenuBuilder) {
      
        // Use the builder to modify the main menu...
    }
}

6:26 - UIBarAppearance

let appearance = UITabBarAppearance()
appearance.backgroundEffect = nil
appearance.backgroundColor = .blue

tabBar.scrollEdgeAppearance = appearance


let scrollView = ... // Content scroll view in your app
viewController.setContentScrollView(scrollView, for: .bottom)

11:31 - Creating a button with UIButton.Configuration

// Creating a button with UIButton.Configuration

var config = UIButton.Configuration.tinted()

config.title = "Add to Cart"
config.image = UIImage(systemName: "cart.badge.plus")
config.imagePlacement = .trailing
config.buttonSize = .large
config.cornerStyle = .capsule

self.addToCartButton = UIButton(configuration: config)

13:30 - Using a hierarchical color symbol

// Using a hierarchical color symbol

let configuration = UIImage.SymbolConfiguration(
    hierarchicalColor: UIColor.systemOrange
)

let image = UIImage(
    systemName: "sun.max.circle.fill",
    withConfiguration: configuration
)

19:30 - New UICollectionViewCell.configurationUpdateHandler closures

// New UICollectionViewCell.configurationUpdateHandler closures

let cell: UICollectionViewCell = ...

cell.configurationUpdateHandler = { cell, state in
    var content = UIListContentConfiguration.cell().updated(for: state)
    content.text = "Hello world!"
    if state.isDisabled {
        content.textProperties.color = .systemGray
    }
    cell.contentConfiguration = content
}

21:01 - Image display preparation

// Image display preparation

if let image = UIImage(contentsOfFile: pathToImage) {
    // Prepare the image for display asynchronously.
    Task {
        let preparedImage = await image.byPreparingForDisplay()

        imageView.image = preparedImage
    }
}

21:29 - Image thumbnailing

// Image thumbnailing

if let bigImage = UIImage(contentsOfFile: pathToBigImage) {
    // Prepare the thumbnail asynchronously.
    Task {
        let smallImage = await bigImage.byPreparingThumbnail(ofSize: smallSize)

        imageView.image = smallImage
    }
}

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

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

リソース

関連ビデオ

WWDC21