進化するキーボードの最新情報

進化するキーボードの最新情報

キーボードは毎年進化し、サポートする言語、サイズ、対応機能の範囲も拡大しています。デバイス上でどのように表示されるかに関係なく、キーボードに合わせてアプリをデザインする方法を紹介します。スムーズなテキスト入力を提供する方法と、システム内でキーボードがどのように機能するかを理解するのに役立つ、重要なアーキテクチャ上の変更も共有します。

関連する章
- 0:00 - Introduction
- 1:29 - Out of process keyboard
- 3:47 - Design for the keyboard
- 14:06 - New text entry APIs
- 15:06 - Key takeaways
リソース
関連ビデオ

WWDC23
- テキストとテキストインタラクションに関する最新情報
WWDC21
- キーボードレイアウトのガイド
ダウンロード

♪ ♪
みなさんこんにちは Spencer Lewsonです今日はここ数年でキーボードがどのように進化したかについてお話したいと思いますそしてこれらの進化にあったアプリのデザイン方法についても説明します
ご存知の通りiPhoneのキーボードは 2007年に初めて導入されそれ以来大幅に進化しています現在多くの異なる言語がサポートされておりそれぞれの言語でレイアウトのサイズが異なる場合がありますそしてもちろんキーボードは様々なデバイスにも搭載されていますキーボードと同じようにシステムも進化しマルチタスクやフローティングキーボード等エキサイティングな新機能が追加されキーボードがアプリの境界を超えることができるようになりました
昨年iPadでまったく新しいレベルの生産性を実現するステージマネージャを導入しました複数のシーンが複数のディスプレイで実行されるようになったことでハードウェアキーボードとマウスの使用がこれまで以上に魅力的になりました今日はキーボードの再構築によって様々なキーボードのシナリオをどのように可能にするかとそれがアプリに与える影響について説明しますまたキーボードとシームレスに動作するようにできるだけ少ない労力でアプリをデザインするヒントやテクニックもいくつか共有したいと思います最後にテキスト入力の世界でいくつかのエキサイティングな新機能を紹介したいと思いますでは新しいアウトプロセスのキーボードについて話しましょう
アプリからキーボードを取り除くことでセキュリティを向上させユーザーが入力した内容のプライバシーを確保できますキーボードが単一になったことで複数のアプリで複数のインスタンスを実行する必要がなくなりアプリとシステム全体のメモリが解放されますこの新しい構造により未来思考のデザインとエキサイティングな新機能の実装が可能になりますではどのように機能するか少し説明しましょう iOS17以前はキーボードのビューとロジックはアプリのプロセス内で実行されていました iOS17のiPhoneではキーボードが独自のプロセスに移動されほぼ完全にアプリの外部で実行されますこれらがどのように機能するか説明することに興奮していますが最初に違いがわかるようにプロセスがどう機能するかについて話します
進行中のアプリはタッチに応じて becomeFirstResponderを呼び出すなど最初に入力を要求しますこれによりすべてのビューを初期化するための一連の作業が開始されますそれが完了するとシステムはアニメーションを実行して入力画面を表示しますそのあとアプリはタッチイベントが受信されるまでアイドル状態になるかアプリ側の作業を実行しテキスト挿入が作られます
アウトプロセスでは少し異なる動作をしますアプリが becomeFirstResponderを呼び出すなど再度入力を要求するとアプリはいくつかの初期計算を実行しそのあとキーボードプロセスが UIを非同期に初期化しますこの間アプリはアイドル状態になるかアプリ側の作業を実行します準備が完了すると入力画面が表示され２つのプロセス間のアニメーションが調整されますキーボードUIが起動したのでキーボードの境界内で発生するタッチイベントを待ちますそれらをアプリのテキスト挿入に変換しますほとんどのアプリではこれらの変更は完全に透過的でありユーザーが選択する必要はありませんただしこの新しい非同期アプローチの側面は入力全体にありタイミングにわずかな違いが生じる可能性がありますアプリがテキスト入力選択範囲の変更かその他のテキスト操作のタイミングに特に敏感な場合はこの新しい構造を念頭に置いておく必要があります iOS入力の多様性について説明したところでアプリをデザインする時に考慮すべき比較的新しいシナリオのいくつかについて話しましょうもちろん最も一般的な使用例つまりキーボードを備えた全画面アプリは誰もがよく知っていますこれはアプリとキーボードの両方が全画面表示である比較的単純な使用例ですキーボードの調整はキーボードの高さの値だけビューを上に移動するだけで簡単ですしかしステージマネージャではシステムはそのモデルから離れつつあります高度なマルチタスクでアプリは必ずしも全画面で表示されませんつまりキーボードが起動する時アプリのビューを正しく調整するには特別な注意が必要ですそれはキーボードとアプリのシーンが一致しなくなったためですまたアプリをコンテキストに合わせて適切に調整するにはいくつかの追加の変換を行う必要があります例えばこのシナリオでアプリの調整は実際はキーボードの高さのＹではなく Y'として示されるキーボードとアプリの交差部分によって調整する必要があります画面上に複数のシーンがあるため計算の調整は１つもない場合がありますというのもそれぞれ異なる計算と調整が必要になる可能性があるからです最近導入されたハードウェアキーボードを使用したシナリオもいくつかありますハードウェアキーボードを接続するとシステムは画面の中央にアシスタントツールバーを表示しますこのフルサイズのツールバーが表示されるとキーボードの一部として機能し邪魔にならないようにビューを調整する必要がありますフリッジェスチャを使用してこのツールバーを最小化することもできますステージマネージャの外では既存の動作を維持していますこのミニツールバーはキーボードの一部として機能せずビューと重なって表示されますユーザーはツールバーを画面の反対側にドラッグすることでその下のコンテンツにアクセスできますただしステージマネージャではミニツールバーはキーボードの一部として機能します使用例に応じてスクロールオフセットを更新したり入力アクセサリビューを押し上げることもでき必要に応じてその他のレイアウト調整を行いますここで説明すべきシナリオやニュアンスがたくさんあることはわかっていますが嬉しいことに適切なAPIを使用するとシステムがほとんどの作業を行ってくれますではキーボードレイアウトガイドについて話しましょう iOS15で導入されたキーボードレイアウトガイドはご存知かもしれませんキーボードに合わせて自動的に調整される簡単な自動レイアウトガイドを提供し昨年さらに機能を追加しました実際これは現在「Spotlight」や「メッセージ」などいくつかの複雑なAppleアプリで使用されていますこれはビューとガイドの間に制約を１行追加するだけで簡単に導入できるため推奨されるアプローチですではこれで何が得られるのかを正確に説明しましょう既存のデフォルトの動作は次の通りですキーボードレイアウトガイドはキーボードが画面上に表示されドッキングしている場合つまりキーボードが画面の下部に触れている時です iPad上でキーボードがフローティングされてドッキングされていない場合などガイドの高さはビューの下部のセーフエリアと一致します最後にタッチポイントがガイドと交差するとガイドはキーボードを閉じる表示を追跡します iOS17ではカスタマイズオプションが拡張され
必要な動作を正確に得るために UIKeyboardLayoutGuideには３つのプロパティが追加されましたまずUndockedKeyboardに従いますデフォルトでガイドはフローティングキーボードまたはミニツールバーをオフスクリーンキーボードと同様に扱いますただしtrueに設定するとガイドがアプリのウインドウの上にある限りフローティング状態でもキーボードに従い続けます次は BottomSafe領域を使用しますデフォルトではキーボードレイアウトガイドはキーボードが閉じられた時のセーフエリアの高さを追跡しますただし falseに設定すると usesBottomSafeAreaは代わりにビューの下部を追跡しますこの場合は画面の下部ですこれはいつ役立つでしょうか？これでキーボードを閉じた時に背景を拡張して画面の下部をカバーできるようになりキーボードが表示された時の調整も行い InputAccessoriesView と同様に動作します実際これはこのプロパティの非常に興味深い使用例なのでどのように機能するか話しましょう以下のコードは下部のセーフエリアの上にあるテキストフィールドとキーボードが閉じられた時にのみビューの下部まで広がる背景を備えた単純な入力アクセサリのようなビューを取得するコードですこの場合垂直方向の制約が興味深いためここではこの制約のみを扱っていますまず useBottomSafeAreaを false に設定しましょう次にテキストフィールドの上部を背景の上部に結び付けますこの時２つの間のシステムスペースを使用しテキストフィールドにパディングを加えます次にガイドの上部をテキストフィールドの下部に固定して少なくともシステム間隔をあけてテキストフィールドが常にキーボードの上にあることを確認しますここでは「より大きい」ことが重要ですキーボードが画面外にある場合下部のセーフエリアインセットの上に留まるように十分な柔軟性が必要になりますまたガイド上部のアンカーを背景の下部に結び付けましょうこれでガイドが画面外にある時背景が必ず一番下まで表示されますこれは usesBottomSafeAreaを false に設定したためです最後に下部のセーフエリアをテキストフィールドの下部とシステムの間隔に制限しますここでもキーボードの起動時に追従するのに十分な柔軟性を確保するため大なり小なり制約を使用していますこれでビューの下部まで広がる背景を持つアダプティブビューが完成しましたただしキーボード上のテキストフィールドシステムの間を保ち背景をキーボードの上部に維持するように調整され入力アクセサリが表示される場合があります
３番目に keyboardDismissPaddingがありますこれによりスクロールのパラメータが調整され表示が解除されます過去にInput Accessoriesのようなビューを作成しようとした場合キーボードレイアウトガイドを使用するとキーボードの閉じる表示が開始されないことに気づいたかもしれませんタッチがキーボードと交差するまでこの新しいプロパティを使用してそれを修正しましょう
KeyboardDismissPaddingプロパティを使用するとキーボードの閉じる表示に応答するキーボード上のパディングを指定できますこれは比較的簡単です必要に応じてビューの高さを取得しプロパティを設定します終わりましたこれでタッチがビューと交差した時にキーボードの閉じる表示が開始されますアプリの構築に使用されるフレームワークは UIKit だけではありません SwiftUIもあります SwiftUIは一般的なケースを自動的に処理します SwiftUIではキーボードはセーフエリアの一部として含まれておりキーボードが閉じられると画面の下部にある小さなホームアフォーダンスを追跡しますキーボードを起動するとシステムがアニメーション化してセーフエリアを調整しビューのサイズを自動的に変更しますそのため実際にキーボードコードを記述する必要はありませんがビューのサイズ変更や位置変更を希望通りに行うにはレイアウトに何らかの作業が必要な場合があります SwiftUIには素晴らしいリソースが多くありますリストに書ききれないほど多くの機能があるため詳細は以下のリンク先のドキュメントを参照してくださいここでキーボードを統合するための追加の手動方法であるキーボード通知について説明します SwiftUI とキーボードレイアウトガイドが登場する前はキーボードをアプリケーションに統合する唯一の方法は一連のキーボード通知「willShow」「didShow」「willHide」「didHide」を理解し通知内のフレームとアニメーションの情報に基づいてレイアウトを手動で調整することでしたこれらはまだ存在しますがシステムが代わりに作業するわけではなく慎重な取り扱いが必要ですステージマネージャの導入によりその処理が100％の確率で機能しなくなる一般的に使用されるパターンが増加してることに気づきましたこのパターンは通常キーボード通知を受信しキーボードの高さからの未加工の値を直接使用することに重点を置いています
さて以前キーボードの高さと画面上のアプリの位置がどう相互作用するか微妙な違いについて議論した時のことを思い出してくださいこの通知がどのように機能するかについて説明します各通知は画面座標に対するキーボードの予想されるフレームを指定しますアプリがフルスクリーンの場合など画面の座標空間とアプリの座標空間が一致する場合通知に含まれる未加工の高さの値によりビューが予想どおりに調整されることになりますただし画面の座標空間とアプリの座標空間が異なる場合この高さの値はビューを調整するための正しい値ではなくなりますこれによりビューが上に押し上げられすぎて間違った場所に表示される可能性があります幸いなことに通知処理にいくつかの変更を加えることで再びスムーズに動作するようになります iOS 16.1 ではキーボード通知に対応するUIScreenが通知のオブジェクトとして含まれるようになりましたこれを使用してキーボードがアプリと同じ画面に表示されることを確認しましょうそれ以外の場合は調整は必要ありません次にビューを基準としたキーボードの配置を表す四角形を計算しますこれはキーボードの予期される終了フレーム通知によって提供される座標空間およびビューを取得することで実行できますそしてそれらを使用して keyboardFrameEndを座標空間に変換しますこの新しい四角形を使用するとビューとConvertedKeyboardFrameEndの交差を計算し必要なオフセットが決定しますビューとキーボードが重なっている場合必要なオフセットはビューとキーボードの交差点の高さになりますこれにより制約やレイアウトを自由に調整できます新しいアウトプロセス構造により通知の動作に若干の変更が生じる可能性があるため知っておく必要がありますそれについて少しお話しましょうキーボードプロセスのライフサイクルを概説したこの図を覚えていますか？ここで「アニメーションの起動」と呼ばれるアニメーションフェーズを拡大しましょうインプロセス構造でアプリがキーボードを要求する時にシステムはキーボードUIを同期的に初期化し通知を送信してアニメーションを実行しますただし新しいアウトプロセス構造ではアプリがキーボードを要求するとシステムはキーボードUIを非同期的に初期化し非同期的に通知を送信しアニメーションを実行しますこれによりタイミングに若干の違いが生じるためアプリがbecomeFirstResponderの呼び出しから何らかの「コールバック」で通知のタイミングに依存やメインスレッドで重要な作業を実行中の場合通知の処理が中断される可能性があり遅れた場合はアプリに影響を与える可能性があるためこの新しいモデルに留意する必要がありますユーザーがアプリに簡単に入力できるようにするためのヒントとテクニックをすべて確認しましたテキスト入力をさらに高速化する新機能と APIを導入できることを嬉しく思いますそれがインライン予測です iOS17では英語キーボードでテキストフィールドにインラインで次のいくつかの単語の予測が表示されるようになりましたこれらの予測はデバイス上で安全に生成されフォーカスされたテキストフィールドで提供されるコンテキスト情報のみ使用しますこれらの予測を採用するのも非常に簡単ですここには UITextInputTraits プロトコルがありご覧の通り新しいinlinePredictionTypeプロパティが追加されいくつかのオプションが付属していますデフォルトでインライン予測はほとんどのテキスト入力フィールドで有効になりますが検索フィールドやパスワードフィールドなど予測が適切ではないフィールドでは自動的に無効になりますもちろんプロパティを明示的に「yes」または「no」に設定することでアプリの動作をカスタマイズすることもできますそれでは重要なポイントをいくつかまとめてみましょう必ず次のことを行ってください見た目に関係なくキーボードとシームレスに連携するようにアプリをデザインします時間に敏感なコードを作成する時は新しいプロセス外キーボードモデルを念頭に置いてくださいテキスト入力を高速化するAPIの採用でアプリのエクスペリエンスを向上させますキーボードについてお付き合いいただきありがとうございます ♪ ♪

view.keyboardLayoutGuide.topAnchor.constraint(equalTo: textView.bottomAnchor).isActive = true

7:56 - usesBottomSafeArea

// Example of using usesBottomSafeArea to create keyboard and text view aligned with safe area

view.keyboardLayoutGuide.usesBottomSafeArea = false

textField.topAnchor.constraint(equalToSystemSpacingBelow: backdrop.topAnchor, multiplier: 1.0).isActive = true

view.keyboardLayoutGuide.topAnchor.constraint(greaterThanOrEqualToSystemSpacingBelow: textField.bottomAnchor, multiplier: 1.0).isActive = true

view.keyboardLayoutGuide.topAnchor.constraint(equalTo: backdrop.bottomAnchor).isActive = true

view.safeAreaLayoutGuide.bottomAnchor.constraint(greaterThanOrEqualTo: textField.bottomAnchor).isActive = true

9:40 - Keyboard dismiss padding

var dismissPadding = aboveKeyboardView.bounds.size.height

view.keyboardLayoutGuide.keyboardDismissPadding = dismissPadding

12:11 - Handle willShow or hideKeyboard notifications

func handleWillShowOrHideKeyboardNotification(notification: NSNotification) {
    // Retrieve the UIScreen object from the notification (Added iOS 16.1)
    guard let screen = notification.object as? UIScreen else { return }

    // Determine if the notification’s screen corresponds to your view’s screen
    guard(screen.isEqual(view.window?.screen)) else { return }

    // Calculate intersection with keyboard
    let endFrameKey = UIResponder.keyboardFrameEndUserInfoKey

    // Get the ending screen position of the keyboard
    guard let keyboardFrameEnd = userInfo[endFrameKey] as? CGRect else { return }

    let fromCoordinateSpace: UICoordinateSpace = screen.coordinateSpace
    let toCoordinateSpace: UICoordinateSpace = view

    // Convert from the screen coordinate space to your local coordinate space
    let convertedKeyboardFrameEnd = fromCoordinateSpace.convert(keyboardFrameEnd, to: toCoordinateSpace)

    // Calculate offset for view adjustment
    var bottomOffset = view.safeAreaInsets.bottom
            
    // Get the intersection between the keyboard's frame and the view's bounds
    let viewIntersection = view.bounds.intersection(convertedKeyboardFrameEnd)
            
    // Check whether the keyboard intersects your view before adjusting your offset.
    if !viewIntersection.isEmpty {
        // Set the offset to the height of the intersection
        bottomOffset = viewIntersection.size.height
    }

    // Use the new offset to adjust your UI
    movingBottomConstraint.constant = bottomOffset
  
    // Adjust view layouts and animate using information in notification
  
    ...
  
}

14:38 - Inline predictions

@MainActor public protocol UITextInputTraits : NSObjectProtocol {
    // Controls whether inline text prediction is enabled or disabled during typing
    @available(iOS, introduced: 17.0)
    optional var inlinePredictionType: UITextInlinePredictionType { get set }
}

public enum UITextInlinePredictionType : Int, @unchecked Sendable {
    case `default` = 0
    case no = 1
    case yes = 2
}

let textView = UITextView(frame: frame)
textView.inlinePredictionType = .yes

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

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

関連する章

リソース

関連ビデオ

WWDC23

WWDC21