Appで外部キーボードをサポートする

あなたのAppで外部キーボードが使えると、より体感的で馴染みのあるタイピング体験を提供できるだけでなく、素早いナビゲーションやキーボードショートカットを利用することもできるようになります。あなたのiPadOSやMac Catalyst Appで、外部キーボードをサポートする最適な方法を学びましょう：レスポンダチェーンへの理解を深め、カスタムキーボードショートカットを実装する際のベストプラクティスをご紹介します。一般的なシステムキーボードショートカットを導入・実行し、ジェスチャ認識でモディファイアを利用、未処理のキーボードイベントAPIを活用、key downとkey upイベントに容易に対応する方法についても説明します。

リソース

関連ビデオ

WWDC22

iOS AppをMacへ

WWDC21

iPad Appを次のレベルに

WWDC20

WWDC19

ダウンロード

こんにちは WWDCへようこそ “アプリケーションで外部キーボードをサポートする” iOS Keyboardsチームのジェームズ･メガハンですハードウェアキーボードを備えたデバイスでアプリケーションを最高のものにする方法を簡単に説明します

iOSアプリケーションはタッチに万能に設計したUIを常に採用してきましたこれはコンテンツと対話するための本当に優れた方法ですアプリケーションでUIを見つけることは画面に何かを表示するのと同じくらい簡単ですしかしハードウェアキーボードを接続したiPadユーザーがかなり一般的になってきましたアプリケーションにハードウェアキーボードを埋め込むことでユーザーはより生産的になり UIをより迅速に人間工学的に操作できるようになります考えることなく反射的に機能を実行できますまた標準システムのショートカットの実装により初心者ユーザーが期待していて Macからもたらされるなじみのある一貫したインターフェイスでアプリケーションにアプローチできます iPadのような次世代コンピューティングプラットフォームで最高のアプリケーションとするにはタッチ操作とハードウェアキーボード操作の両方で優れている必要があります

これが今日お話しする内容ですキーボードショートカットからはじめましょう iOSでキーボードショートカットがどのように機能するか説明するために UIKeyCommandについてお話しします UIKeyCommandはカスタムキーボードショートカットを表すオブジェクトです期待するすべてのプロパティを備えています例えばユーザーに表示される discoverbilityTitle オブジェクトを呼び出すために必要なキーボード入力またオプションで押される修飾キーを定義する― modifierFlagsのセットなどですこれはUIResponderのkeyCommandsと呼ばれるオーバーライド可能なプロパティを介してキーコマンドの配列を返すことで UIと連携して機能しますその特定のレスポンダのすべてのコマンドの配列を返すようにしますほとんどの一般的なUIKitウィジェットはすでにUIResponderのサブクラスですそのためこれらのキーコマンドを含めるためにアプリケーションを拡張するのはこの１つのプロパティをオーバーライドし UIの特定の部分に関連するキーコマンドを返すだけの簡単なものですアプリケーションですべてを機能させる方法はレスポンダチェーンを介して行われますレスポンダチェーンはアプリケーションのビュー階層に緩やかに従います UIApplicationインスタンスが最後にありユーザーが対話しているレスポンダが最初にありますアプリケーションの最初のレスポンダは UIResponderオブジェクトですべてのキーボードイベントが最初に到達しますチェーンでレスポンダが特定のイベントを処理できない場合そのイベントはチェーンのさらに上へいきます例えば UIViewsはチェーン内の指定された次のレスポンダをビューのスーパービューとして持っています

つぎにアプリケーションによりキーコマンドが各レスポンダからオーバーライドしたkeyCommandsを介して収集されますアプリケーションの最初のレスポンダから始まり最上位の UIApplicationインスタンスで終了しますシステムによりすべてのキーコマンドが収集されるとユーザーは見つけやすいHUDでそれらを発見できます HUDはシステム内の任意の場所でコマンドキーを長押しすることでアクセスできますこれはユーザーがキーボードショートカットを発見できるだけでなく開発中にすべてを１ヵ所でテストおよび検査するのに便利ですそれでは実際にこれらをどのように組み合わせるか見てみましょうミュージックアプリケーションを例にあげますアプリケーションが最前面にあるときユーザーはスペースバーを押して再生中の音楽を簡単に切り替えることができますこれはメディア再生を行うすべてのアプリケーションで一貫して機能します写真アプリケーションでのビデオ再生や SafariのQuickTimeビデオなどです Model-View-Controllerパターンに従いこの動作を定義するための理想的な場所はカスタムビューコントローラのサブクラスですこの例では UIViewControllerの PlayerViewController サブクラスがありますこれはアプリケーションで再生を管理しビューには再生ボタンなどが含まれていますすべてのUIViewControllersは UIRespondersのためここではいくつかのメソッドをオーバーライドするだけでキーボードショートカットの受け入れを開始できますまずcanBecomeFirstResponderをオーバーライドしてtrueを返します次に viewDidAppearをオーバーライドし becomeFirstResponderを呼び出してこのビューコントローラが最初に表示されるとき最初のレスポンダになるようにします最後にkeyCommandsプロパティをオーバーライドしカスタムのスペースバーキーボードショートカットを返しますここではセレクターで指定した呼び出されたときに実行するactionと必要なinputを HUDに表示するためのローカライズされた文字列を提供していますこの場合スペースのみを含む文字列でスペースバー用であることを示しますワクワクしてきたでしょうユーザーが期待しているよく使用されるキーボードショートカットをアプリケーションに追加することを考えると例えばミュージックライブラリで作業している場合全選択やコピーペーストのようないくつかのショートカットを加え音楽とプレイリストの操作をより簡単にしますまたはイラストレーションで作業していれば Command + で拡大し Command - で縮小するようなショートカットを加えるでしょう幸いなことにこれらの一般的なキーボードショートカットの多くは単一のUIKeyCommandを作成する必要がありませんいくつかのメソッドをオーバーライドするだけでよいのですすべてのUIResponderサブクラスは UIResponderStandardEditActionsと呼ばれるプロトコルに準拠しておりそれはここにリストされている任意のメソッドに応えます関連するメソッドをオーバーライドするだけです単一のUIKeyCommandの作成は不要ですこれは簡単な例です UIResponderサブクラスには UITableViewControllerサブクラスがあります前に行ったのと同じ２つのメソッドをオーバーライドしそれが最初のレスポンダになることを確認しますいつものようにこれをビューコントローラサブクラスの内部に実装する場合必要になりますそして前に述べた任意のメソッドをオーバーライドできます全選択やコピーペーストなどいずれにも単一のUIKeyCommandの作成は不要です UIResponderStandardEditActionsのドキュメントでより多くのコマンドと詳細を調べてみてください UIKeyCommandはCatalystを念頭に設計されましたこれらの新しいキーコマンドは非常に簡単に macOSのメニューバーで機能させられます前に説明した UIResponderStandardEditActionsは無料で入手できますしかしカスタムUIKeyCommandsの場合 UIKeyCommandはUICommandのサブクラスですつまりこれは macOS Catalinaに導入した command builder APIに簡単に統合できます command builder APIについてより深く詳しい情報を知るには WWDC 2019のセッション “Taking iPad Apps for Mac to the Next Level”をご覧ください

次にお話ししたいことはハードウェアキーボードがテーブルビューおよびコレクションビューと作用する方法ですファイルのリストがある場合ユーザーはMacの一般的なショートカットが iPadでも機能することを期待します例えばシフトキーを押しながら２つのリスト項目をクリックして連続するファイルのリストを選択できる機能です次にコマンドキーを押しながらリストの複数の項目をタップすると最初に編集モードに入る必要なくユーザーの選択を拡張できます UITableViewかUICollectionViewを使用している場合ユーザーが期待するこの動作を非常に簡単に実装できます shouldBeginMultipleSelectionInteractionAt indexPathを実装し trueを返すことだけですそれによりシステムは自動的にテーブルビューを編集モードにするかコレクションビューを複数選択モードにし押されている修飾キーに基づきユーザーが現在選択している― インデックスパスのセットを拡張します同様に didBeginMultipleSelectionInteractionAt indexPathを実装し周囲のUIを自動的に編集モードに対応させます複数選択のAPIが他に提供できることは 2019年のセッション“Modernizing Your UI for iOS 13”で確認できますつぎは iOS14の新しい機能についてですジェスチャ認識に追加したことについてお話しします Numbersで別の例を見ていきましょう NumbersがiPadのハードウェアキーボードを活用し高度な機能を提供する方法の１つはユーザーがシフトキーを押しながら指かトラックパッドで図形のサイズを変更しながら選択した図形のスケールをアスペクト比に制限できるようにすることですさらに Numbersではユーザーはコマンドキーを押したまま複数のオブジェクトをタップして選択できるためオブジェクトを一度に動かすことができますこのすべては iOS 13.4で新しいMagic Keyboardを導入した際― UIGestureRecognizerにmodifierFlagsというプロパティを追加したことで可能になりましたこれによりどのアプリケーションでもこのような動作を実装できますこのプロパティはジェスチャ認識のステータスが変化する際― ユーザーが押している修飾キーに設定されますこの例でNumbersが行ったようなことを実装する場合に必要なのはジェスチャ認識のコールバックが発生したときにこのプロパティを調べ押された修飾キーに基づき適切なアクションを実行することですイベントとジェスチャ認識の新機能の詳細については “Handle Trackpad and Mouse Input” セッションをご覧ください最後にAPIについてお話しします Rawキーボードイベントに応答するものですアプリケーション内でハードウェアとキーボードの操作を利用するとユーザーはアプリケーションを特定の場面でより正確に制御できます Numbersの例に戻りましょう Numbersはハードウェアキーボードの精度を活用しユーザーが矢印キーを使用して図形やレイヤーを微調整したいという期待に応えますこれには key downイベントでオブジェクトを動かし始め key upイベントでオブジェクトを停止する必要がありますどちらもUIKeyCommandsでは実行できずユーザーに呼び出されたときにのみ発生します iOSの新機能として接続されたハードウェアキーボードからのすべてのkey downおよびkey upイベントに応答する機能を追加しましたレスポンダチェーンに戻りますすべてはpressesBeganおよびpressesEndedという UIResponderメソッドを介し実行されます２つのメソッドをビューかビューコントローラでオーバーライドするだけでキーが押されたときや離されたときに通知を受け取ります繰り返しますが Model-View-Controllerパターンを使用しキャンバスビューコントローラのようなもので pressesBeganとpressesEndedをオーバーライドします pressesBeganはハードウェアキーボードでキーが押されると呼び出されキーコードをチェックして押された矢印キーを確認しアプリケーションで適切なアクションを実行しキーが押されている間図形の移動を続けることができますそれからpressesEndedでアプリケーションでアクションを実行するだけで図形の移動が停止します同じくらい簡単です同様にジェスチャ認識に追加したものと同じくすべてのキーイベントのmodifierFlagsを確認し必要に応じた調整も可能です例えばユーザーがシフトキーを押したまま何かを移動しながら選択できるようにしますさらに修飾キーだけで key downとkey upイベントについて通知します最後に次にすべきことをお話ししますあなたのアプリケーションで― 一般的なキーボードショートカットが機能することを確認してください完全にカスタマイズされたキーボードショートカットを使用することでアプリケーションの機能を強化しユーザーの生産性を高めましょうアプリケーションがmacOSに馴染むようにメニュー項目を作成してください最後に新しい Hardware Keyboard APIを使って素晴らしいキーボード体験を完成してくださいありがとうございましたチャンネル登録をお願いします

一瞬頭が真っ白に

0:01 - PlayerViewController

class PlayerViewController: UIViewController {

    override var canBecomeFirstResponder: Bool {
        return true 
    }

    override func viewDidAppear(_ animated: Bool) {
        becomeFirstResponder()
    }

    override var keyCommands: [UIKeyCommand]? {
        return [
            UIKeyCommand(title: NSLocalizedString("PLAY_PAUSE", comment: "…"),
                        action: #selector(playPause),
                         input: " ")
        ]
    }
}

0:02 - SongListTableViewController

class SongListTableViewController: UITableViewController {

    override var canBecomeFirstResponder: Bool {
        return true
    }
    
    override func viewDidAppear(_ animated: Bool) {
        becomeFirstResponder()
    }
    
    /* UIResponderStandardEditActions */

    override func selectAll(_ sender: Any?) { … }

    override func copy(_ sender: Any?) { … }

    override func paste(_ sender: Any?) { … }

}

0:03 - UIKeyCommand

class UIKeyCommand : UICommand {
    ...
}

override func buildMenu(with builder: UIMenuBuilder) {
    builder.replaceChildren(ofMenu: .file) { children in
        return [ UIKeyCommand() ] + children
    }
}

0:04 - Extending selection with keyboard

optional func tableView(_ tableView: UITableView,
       shouldBeginMultipleSelectionInteractionAt indexPath: IndexPath) -> Bool

optional func tableView(_ tableView: UITableView,
       didBeginMultipleSelectionInteractionAt indexPath: IndexPath)

0:05 - recognizedDragGesture

func recognizedDragGesture(_ panGesture: UIPanGestureRecognizer) {

    if panGesture.modifierFlags.contains(.command) {
        snapToGrid = true
    } else if panGesture.modifierFlags.contains(.shift) {
        constrainAspectRatio = true
    }
    
    ...
}

0:06 - Responding to raw keyboard events

class UIResponder: NSObject {
    func pressesBegan(_ presses: Set<UIPress>,
                     with event: UIPressesEvent)
    
    func pressesEnded(_ presses: Set<UIPress>,
                     with event: UIPressesEvent)
}

0:07 - CanvasViewController

class CanvasViewController: UIViewController {
     
     override func pressesBegan(_ presses: Set<UIPress>, with event: UIPressesEvent?) {
         for press in presses {
             guard let key = press.key else { continue }
             switch key.keyCode {
             case .keyboardUpArrow: startMoveUp()
             case .keyboardDownArrow: startMoveDown()
                 …
             }
     }
     }

     override func pressesEnded(_ presses: Set<UIPress>, with event: UIPressesEvent?) {
         stopMoving()
     }

}

0:08 - CanvasViewController modifier flags

class CanvasViewController: UIViewController {

    override func pressesBegan(_ presses: Set<UIPress>, with event: UIPressesEvent?) {
        var selectWhileMoving = false
        for press in presses {
            guard let key = press.key else { continue }
            if key.modifierFlags.contains(.shift) {
                selectWhileMoving = true
            }
                
            switch key.keyCode {
            case .keyboardUpArrow: startMoveUp()
                    
            }
        }
    }
}

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