iPadキーボードナビゲーション

iPadおよびMacのCatalyst Appでのキーボード操作性を向上させましょう。ハードウェアキーボードを使って主要機能へのアクセスを高速化したり、ビューやビューコントローラを操作したりする方法を紹介します。キーボードで操作可能な要素をカスタマイズする方法や、タブループをカスタマイズする方法についても確認します。

リソース

関連ビデオ

WWDC21

WWDC20

モダンなセルの構成

ダウンロード

明るい音楽

マイケル･オクスです UIKitチームのエンジニアです iPadキーボードのナビゲーションへようこそハードウェアキーボードと iPadの組み合わせは人気です Mac CatalystとiPadOS 15がパワフルなAPIを導入してあなたのAppでキーボードナビゲーションをサポートします iPadOS上であらゆるAppをキーボードで操作する事にーユーザーはとても慣れていますタブキーがApp内のエリア間の移動を担当 Arrowキーはエリア内を移動アイテムの選択は iPadOS上ではReturnキー Mac Catalystではスペースバーもしこれらのキーコマンドをカスタムして使用している場合これらは使用できなくなります解決方法は後でまずキーボードナビゲーションから "Photos"ではタブキーを押してサイドバーのLibraryからフォーカスを移動右側のグリッドへ移動しますここでArrowキーを使いグリッドの中で写真をナビゲートできます必要な写真を見つけたらー Returnキーで選択

iOS 15 SDKでコンパイルすればこの動作は自動的に有効化されますテキストフィールドやテキストビューそしてサイドバーで有効ですまた他のコレクションテーブルやカスタムビューでも優れた体験のためにオプトインすべきです使い方を今から紹介しますこれは素晴らしい機能ですが Appの全てのエレメントをキーボードで制御可能にするわけではありませんキーボード操作は元々ー Appの主要な機能へのアクセスを目的としていますテキスト入力やリスト作成コレクション閲覧などボタンやセグメントコントロールはー一旦おいておきますフルキーボードアクセスがーすでにこういった機能を提供していますフルキーボードアクセスについては以下を参照してください "iOS Appにおけるフルキーボードアクセスのサポート" iPadOSのキーボードナビゲーションはtvOSとー同じフォーカスシステムを使います tvOS Appを書いたことがあるならー多くのAPIに既視感を持つでしょうただし新しいAPIやー動作の違いも気づくでしょうフォーカスシステムについては "Focus Interaction in tvOS"をみてください

このビデオでは Appのコンテンツをこれまで以上にー Focusable = フォーカス可能にする方法とその見た目のカスタマイズについてお話します知っておくべきサイドバーの特別な動作をご覧いただきその次にAppの構造を定義する新しい方法であるフォーカスグループについてもお話しします最後に重要な変更について話します Responder Chain についてですでは今から UIのエレメンツをフォーカス可能にする方法を見てみます canBecomeFocusedは「信頼できる唯一の情報源」で UIFocusItemの読み出し専用プロパティですオーバーライドしてtrueを返しフォーカス可能にします Focusアイテムとは何でしょう？フォーカスシステムの根幹は２つのプロトコル UIFocusItem と UIFocusEnvironment で FocusItems は文字通りフォーカスを当てることができる物 FocusEnvironmentsはフォーカス可能アイテムのー階層を定義します UIViewは両方のプロトコルに準拠しておりどのビューもそれ自身がフォーカス可能でさらにフォーカス可能なサブビューも内包可能です一方 UIViewControllerはそれ自体はビジュアルと連携しないので UIFocusEnvironment のみに準拠していますあなたのオブジェクトをこの２つのプロトコルに準拠させる事もできますそうすれば Metalのような他の技術でレンダリングされたコンテンツもフォーカス可能にできますキーボードナビゲーションで最も有力な候補はテーブルのセルやビューのコレクションです UIKitが便利なAPIを提供します Subclassの必要はありませんテーブルまたはコレクションビューで allowsFocus を true にすると全ての cell がフォーカス可能となrますサイドバーでの allowsFocus は true が初期値です

更に細かな制御には delegate で canFocusItemAtindexPath を使ってセルごとにフォーカス可能かを制御しますこれらの方法は canBecomeFocused をー上書きしないセルにのみ影響します

フォーカスアイテムが想定通りの挙動をしない場合デバッグ用のツールもあり lldb で UIFocusDebugger. CheckFocusability(for item:) をデバッグするアイテムを指定して call します例えばフォーカス可能としたいビューを渡しますフォーカスシステムがこのアイテムをーフォーカスしないと判断した理由が示されます

あなたのUIをフォーカス可能とする方法について話しましたフォーカスしたアイテムの見た目について詳しく見てみましょうシステムを通じてよく使われるのはー２つのスタイルまずHalo Effectについて macOSのフォーカスリングと似ています実際これはMac CatalystのデフォルトエフェクトですそしてiPadOSでも使用可能 focusEffect に UIFocusHaloEffect を設定します引数なしで初期化した場合システムはhaloの形状を推定しますコンテンツに合わせる為に形状のカスタマイズもできます画像の四角が丸い場合ー haloもそれに合わせて角丸にすべきです

UIFocusHaloEffectには複数のイニシャライザーがあり角丸を含む他の形状も描画できますこのイニシャライザーで haloの形状をービューのコンテンツに合わせたアウトラインで作成します Halo Effectはビュー階層の中のレイヤーの制御も可能です haloが画像のバッジの上にレンダリングされていますでも画像とーバッジの間ならもっと見栄えが良いですね画像のビューを referenceViewに指定すると UIKitはhaloを画像の上でバッジの下にレンダリングします referenceViewはビュー階層の中の haloの相対的順番を定義しますまたcontainerViewを指定して halo effectの superviewを定義する事もできますフォーカスされたアイテムの直接のsuperviewがコンテンツをクリップしている時に便利です

いずれもオプションですが結果が想定通りでないー場合のみこれを適用します

完全に不透過な画像のようなコンテンツを表示時するーコレクションビューとテーブルビューのセルは haloを表示すべきですその他の全てのケースでセルにフォーカスが当たる時は強調表示としましょうつまりバックグランドをあなたのAppのTint colorにするということですそしてテキストやアイコンのフォアグラウンドカラーとのコントラストを調整しますこのハイライト表示は UIFocusEffectでは入手不可でその代わり iOS 14で登場した backgroundと content configurations でこの外観が自動的に得られます詳しくは "Modern cell configuration" をご覧ください content configurationsや background不使用の場合サンプルAppで全てのケースで必ず正しい色の取得方法を提示します必ず確認して下さい

custom appearanceを適用の場合まず focusEffect を nil に設定しシステムスタイリングを無効にします次はoverride didUpdateFocus (in: context withAnimationCoordinator :) あなたのフォーカスアイテムに適用します nextFfocusedItemが selfの場合フォーカスを表示するスタイリングを previousFocusedItemが selfだった場合フォーカスされていない外観を表示します次または前回の focused itemがこの状況に合っている場合のみ didUpdateFocus(in: context)で変更する必要があります previousFocusedItemのー過去の状況に起因します nextFfocusedItemも同様です親子の呼出関係にある全てのビューコントローラーで didUpdateFocus(in: context)が呼ばれるためです子のフォーカスの変更に親も影響されるため非常に柔軟な実装が可能になりますここからサイドバーや類似したコンテキストが変化するUIを詳しく見ていきましょう SelectionとFocusはそれぞれ別のコンセプトですただしサイドバーではフォーカスを移動すると selectionが続きます

タップして新しいセルを選択すればフォーカスもそのセルへ移動します

これを "selection follows focus" と呼びますこの動きをしてほしいセルが大部分を占めるテーブルやコレクションビューのプロパティーに設定します特定のセルの挙動を変更する場合 selectionFollowsFocus ForItemAtIndexPath をー delegateで実装して selectionFollowsFocus を無効にすると破壊的動作を行うセルを選択したときに便利です同じカラムで新しくビューコントローラをプッシュしたりアラートを表示する時などです

例えばPhotosでは "new album"のセルが選択されるとアルバム名を決めるダイアログが表示されます

delegateを使用する時このproperty値は重要です selectionFollowsFocusをコレクションビューに設定して大部分のセルの動作を決定し delegateで特定のセルに独自の挙動を設定しますシステムは選択時に両方の値を見て正しい挙動を選択します

ではフォーカスグループを見てみましょう Appの構造を表現するキーボードナビゲーションの新機能です UIKitは階層構造から自動的にフォーカスグループを推測しますしかし同時にタブキーで移動するフォーカスのーカスタマイズも可能です directional focusは tvOSのみで可能です Siri Remoteのスワイプまたはキーボードのarrowキーで全てのエレメントに到達可能です一方iPadOSや Mac Catalystではキーボードでのナビゲートに２つの方法があり arrowキーとタブキーを使います tvOSと異なり arrowキーはApp内の定義したエリア内でのフォーカスの移動に使いますこれらをフォーカスグループと呼びます例えばリマインダ内のナビゲートに上下のarrowキーを使用い

リストのナビゲートにはタブキーを押してサーチフィールドにフォーカスしそして再度タブキーでリストに移動しますもう一度タブキーを押すとフォーカスはリマインダーに戻ります

リマインダーやサーチフィールドそしてリストこれらはそれぞれがフォーカスグループでそしてタブキーでフォーカスが相互に移動します

フォーカスがグループ間を移動した時グループ内のアイテムが選択されこれをグループのプライマリアイテムと呼びます

グループのプライマリアイテムは変化します例えばここで２番目のリマインダーをフォーカスしましたフォーカスシステムはグループを切り替えた時フォーカスアイテムを記憶しますそしてリマインダーに戻る時２番目のアイテムにフォーカスしこのアイテムがグループのプライマリアイテムとなりますタブキーが各グループのプライマリアイテムに接続そして相互に移動しますこれをtab loopと呼びます

一部の環境では独自のフォーカスグループが初期設定として定義されていますコレクション同様にスクロールビューテーブルビューを含むテキスト入力クラスやテキストビューも明示的にグループが定義されていない場合親環境のグループを継承します大体の場合superview またはビューコントローラです例えば初期設定として全てのセルは自動的にコレクションビューのグループに属しますそのグループの中でセル間をarrowキーで移動できます独自にフォーカスグループを定義する場合 focusGroupIdentifierをビューやビューコントローラに設定し２つの環境が明示的あるいは継承によって同じidentifierを共有する場合同じグループの一部となりますグループのプライマリアイテムのカスタマイズにはそのアイテムに FocusGroupPriorityを設定してグループ内の重要度を指定します最高の優先値を持つ可視化したアイテムはグループのプライマリアイテムでシステムは事前に設定された優先順位を割り当てますデフォルトは ignored で previouslyFocused prioritized の順でアイテムの優先度が上がっていき現在フォーカスされているセルが currentlyFocused で最も優先度の高いものですシステムが提供する優先値より低い値を設定することはできません代わりの他のアイテムの優先値を上げます

例えばセルに .previouslyFocused より高い優先値を設定してカスタムセルにするとこのセルはこれまでのグループのフォーカスアイテム以上に優先度が上がるのでカスタムセルと以前のフォーカスセルが共に可視化してもカスタマイズしたセルはプライオリティが高い為プライマリアイテムとなりますアイテムのグループ化について話しました今からグループの分類について話します再びRemindersです説明した通りそれぞれのテーブルとコレクションビューそして各text fieldが自身のグループを定義します

前のようにタブキーを繰り返し押せばフォーカスはサーチフィールドからサイドバーのリストへそして右側のremindersへ移動します

これはUIKitの初期設定です自身でこうしたコンテナビューを作成する場合フォーカスはサーチフィールドから remindersへ直接移動します全groupsは読み出し順に並び文頭から文末上から下へ続くからですフォーカスシステムはサイドバーが独自のカラムだとは認識しません

サーチフィールドとリストが同じブロックで連続である事を示すために共通の親グループを指定しますサイドバーのコンテナビューに focusGroupIdentifierを設定しますこの新グループは直接 focusable itemsを含みませんがしかしタブループは検索フィールドグループからリマインダーへ移動する前にリストグループに移動します

多くのスタンダードUIKit プレゼンテーションはーこうした中間グループを既に提供してきましたカスタムコンテナビューの場合は共通の親で独自の focusGroupIdentifierを宣言しますフォーカスグループは Appの視覚的構造を定義する簡単な方法ですタブループの固定順序を定義する必要はありません代わりにシステムはフォーカスグループを利用し読み取り方向、レイアウト、および可視性を考慮したタブループの順序を導き出し一貫したエクスペリエンスを提供します App内でフォーカスグループをカスタマイズする際 UIFocusDebuggerが味方になります checkFocusGroupTree (for environment:) を呼出した時に渡された環境から始まるフォーカスグループの構造を出力しますまたフォーカスシステムそのものを渡して現在の全てのグループを見る事もできます

テキスト化された構造も役に立ちますがもう１つのデバッグツールがあります先ほどお見せしたフォーカスグループと Remindersのスクリーンショットを覚えていますか？実際のAppを操作して確認できます focus loop debuggerを有効にすると App上でoption keyを押している間タブループの順番を可視化します

optionとcontrolをクリックすればフォーカスグループを可視化しますこのモードではグループのプライマリアイテムは点線で強調されます

有効化は Scheme settingsで Xcodeで"Run"を選択続いて"Arguments" UIFocusLoopDebuggerEnabled を起動引数に追加これをYESにしチェックボックスで有効にします XcodeでAppを起動するとこのデバッグ画面があなたのAppに表示されますこれがiPadOSとMac Catalystでのフォーカスの基本キーボードナビゲーションについてもう１つ responder chainについてです responder chainとフォーカスシステムの両方がキーボード入力に係っており UIKitはこれらのシステムと可能な限り同期してフォーカスされたアイテムが常にファーストレスポンダー内にあるかファーストレスポンダー自体とします

テキストフィールドとコレクションビューセルを備えた簡略化されたビュー階層を見てみましょう現在テキストフィールドがフォーカスされており実線のリングで示されています破線のリングで示されているファーストレスポンダーでもありますフォーカスがこのコレクションビューセルに移動すると UIKitはファーストレスポンダーもこのセルに移動しようとします canBecomeFirstResponderでこのセルがfalseを返す場合システムはレスポンダーチェーンをさかのぼって trueを返すレスポンダーを見つけますこの場合そのレスポンダーはセルのビューコントローラーです

逆もまた真であることに注意してくださいファーストレスポンダーが変更されるとフォーカスシステムはそのレスポンダー内の新しいフォーカス可能なアイテムを見つけようとしますファーストレスポンダーとフォーカスアイテムの関係によりキーイベントは常にフォーカスアイテムに配信されそこからレスポンダーチェーンを上に移動しますこれによりいくつかの興味深い新しい動作が可能になります例えばセルがキーコマンドに応答してフォーカスされるとキーコマンドがそのセルに配信されますこれを使用する方法についてはサンプルAppをご覧ください iPadOS 15向けに Appを更新するときは becomeFirstResponderを呼び出す場所に注意してくださいレスポンダーチェーンとフォーカスは同期されているためファーストレスポンダーを変更するとフォーカスが強制的に更新されますこれはユーザーにとって非常に混乱を招く可能性があります通常特にフォーカスの更新に応じて becomeFirstResponderを呼び出さないようにするのが最善です

フォーカスシステムはすべてのAppで一貫したエクスペリエンスを提供しますこれを行うには特定のキーコマンドの優先順位が必要です Appがタブや下向き矢印などのキーコマンドを使用している場合 iOS 15 SDKでコンパイルするとそのキーコマンドは機能しなくなりますこのキーコマンドを使用して独自のカスタムキーボードナビゲーションを作成する場合はそのままにしておくことができます以前のバージョンで動作し iPadOS15ではフォーカスシステムが引き継ぎますそれ以外の場合はこのキーコマンドを再マップしますこのキーコマンドを本当に使い続けたい場合はキーボードナビゲーションが壊れないことを確認してから wantsPriorityOverSystemBehaviorを trueに設定してくださいキーボードショートカットの改善について詳しく知りたい場合は「iPad Appを次のレベルに」をご覧ください pressesBegan、pressesChanged、 pressesEnded、pressesCancelledを実装してマニュアルでプレスイベントを処理する場合はこれらすべてのメソッドを実装し処理しないプレスイベントは確実にsuperを呼び出してください iPadOS 15とMac Catalystのキーボードナビゲーションはユーザーにとって強力なツールですコレクションビューとテーブルビューをフォーカス可能にして優れたユーザーエクスペリエンスを提供しますキーコマンドを更新してキーボードナビゲーションと衝突しないようにしますサンプルAppもチェックしてくださいこのAppには優れた検索エクスペリエンスの構築カスタム選択フォーカスガイドなどさらにいくつかの機能が示されています iPadOS 15でキーボードナビゲーションを用いたあなたの作品を楽しみにしていますありがとう明るい音楽

3:01 - canBecomeFocused

override var canBecomeFocused: Bool { true }

4:00 - allowsFocus

class MyViewController: UICollectionViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        self.collectionView.allowsFocus = true
    }
}

4:23 - canFocusItemAtIndexPath

class MyCollectionViewDelegate: NSObject, UICollectionViewDelegate {
    func collectionView(_ collectionView: UICollectionView,
                canFocusItemAt indexPath: IndexPath) -> Bool {
        return true
    }
}

4:40 - UIFocusDebugger checkFocusability(for:)
```
po UIFocusDebugger.checkFocusability(for:)
```

5:48 - UIFocusHaloEffect

let focusEffect = UIFocusHaloEffect(roundedRect: self.bounds, cornerRadius: self.layer.cornerRadius, curve: .continuous)
self.focusEffect = focusEffect

6:03 - ReferenceView and ContainerView

let focusEffect = UIFocusHaloEffect(roundedRect: self.bounds, cornerRadius: self.layer.cornerRadius, curve: .continuous)

// make sure the effect is added right above the image view
focusEffect.referenceView = self.imageView

// make sure the effect is added to our scroll view
focusEffect.containerView = self.scrollView

self.focusEffect = focusEffect

7:43 - Custom focus effects

init(frame: CGRect) {
   super.init(frame: frame)
   self.focusEffect = nil
}

func didUpdateFocus(in context: UIFocusUpdateContext, withAnimationCoordinator coordinator: UIFocusAnimationCoordinator) {
    if context.nextFocusedItem == self {
        // This view is focused. Customize its appearance.
    }
    else if context.previouslyFocusedItem == self {
        // This view was focused.
    }
}

9:08 - Selection Follows Focus
```
var selectionFollowsFocus: Bool
```

9:16 - Selection Follows Focus for Item at Index Path

func collectionView(_ collectionView: UICollectionView, selectionFollowsFocusForItemAt indexPath: IndexPath) -> Bool {
    return self.action(for: indexPath).type != .showAlert
}

12:12 - Focus Group Identifier

self.focusGroupIdentifier = "com.myapp.groups.sidebar"

12:52 - UIFocusGroupPriority

extension UIFocusGroupPriority {
    public static let ignored: UIFocusGroupPriority // 0
    public static let previouslyFocused: UIFocusGroupPriority // 1000
    public static let prioritized: UIFocusGroupPriority // 2000
    public static let currentlyFocused: UIFocusGroupPriority // NSIntegerMax
}

13:40 - Focus Group Priority on a cell

// Customizing an item’s focus group priority

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = ...
    if self.isCallToActionCell(at: indexPath) {
        // This cell is not as important as a selected cell but should
        // be chosen over the last focused cell in this group.
        cell.focusGroupPriority = .previouslyFocused + 10
    }
    return cell
}

15:46 - UIFocusDebugger checkFocusGroupTree(for:)
```
po UIFocusDebugger.checkFocusGroupTree(for:)
```
19:16 - wantsPriorityOverSystemBehavior
```
keyCommand.wantsPriorityOverSystemBehavior = true
```

19:36 - pressesBegan

override func pressesBegan(_ presses: Set<UIPress>, with event: UIPressesEvent?) {
    if (/* check presses of interest */) {
        // handle the press
    }
    else {
        super.pressesBegan(presses, with: event)
    }
}

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