デスクトップクラスの編集操作を取り入れる

デスクトップクラスの編集操作を取り入れる

デスクトップクラスの高度な編集機能は、Appの生産性を向上させます。Mac Catalyst を使用して、編集機能にすばやくアクセスし、iPadOS アプリケーションを macOS で快適に動作させるために、UI にインラインでより多くのインタラクションを提供する方法について説明します。また、高度にカスタマイズ可能な検索インタラクションを紹介し、システムUIを使用してApp内のコンテンツをまとめて検索する方法についても学びます。

リソース
関連ビデオ

WWDC22
WWDC19
- iOS 13向けにUIをモダナイズする
- iPad Apps for Macを次のレベルに高める
ダウンロード

こんにちは「デスクトップクラスの編集操作を取り入れる」へようこそ私AndyはUIKitフレームワークのエンジニアで同僚のJamesと参加します iPadはシンプルで使いやすいインタラクションを損なうことなく常に進化を続けていますこのセッションでは Appをデスクトップクラスに変える新しい編集インタラクションについて学びますまずは iOS 16で進化した新しい編集メニューについて
その後新しいシステムの検索と置換をご紹介します iOS 16では編集メニューのデザインが一新され親しみやすさはそのままによりインタラクティブでアクションが発見しやすくなっています編集メニューは現在使っているインプットメソッドに応じて代替表示されますタッチ操作では編集メニューは従来通りコンパクトな外観ですがページング動作が改善されてアクションがより発見しやすくなっています
Magic Keyboardやトラックパッドではセカンダリまたは右クリックでコンテキストメニューが表示されよりデスクトップクラスに近い操作性を実現します iPhoneでタッチ操作すると新しい編集メニューが出ます
Mac Catalyst Appでは Macユーザーに馴染みのあるコンテキストメニューを表示します iOS 16では新しいデータ検出器の統合によりテキスト編集メニューを大幅に改善しましたインラインでの単位や通貨の変換ほか選択テキストによって文脈に応じたアクションを表示するスマートルックアップを含みます例えば Safariで住所を選択すると既存の編集メニューの操作に加えて「経路を検索」「マップで開く」といった地図ベースのアクションが表示されます一番の特徴はわざわざ導入する必要がないこと！テキストインタラクションビュー PDFKitやWebKit Safariなどすべてのテキスト編集メニューで使えます
テキストビューのメニューにアクションを挿入するには新しいTextViewDelegateメソッドを実装して選択範囲のテキストに対して表示される項目をカスタマイズしてシステム提供のアクションと共に表示しますカスタマイズが必要なければ nilを返すと標準のシステムメニューになります UITextFieldDelegateやUITextInputにも同様のメソッドがありそちらでもカスタマイズ可能です iOS 16ではUIMenuControllerを使ったメニュー項目の挿入は非推奨となったので代わりに新しいメソッドでテキスト編集メニューにメニュー要素を追加する必要がありますなぜならメニューコントローラは必要なくなるからです！これはカスタムアクションを持つテキストビューの例ですテキスト選択時にメニューが表示された時にカスタムの「Hilight」と「Insert Photo」を表示するようにしましたハイライトアクションを選ぶと実行されますハイライトするものがない状態でテキストを選択せずにメニューを表示するとシステムが提案するアクションの後に「Insert Photo」だけが表示されます新しいAPIを使ったアクションの追加方法を紹介しますプレゼンテーション時に動的にメニューにアクションを挿入するには UITextViewDelegateメソッド textView:editMenuForText InRange:suggestedActionsを実装しますここでは選択テキストがあるときだけ「Hilight」を追加したいのでこのメソッドで追加します
「Insert Photo」は常に有効なので配列に追加し常にメニューにアクションを表示させられますカットコピーペーストの項目を含むシステム提案のアクションに自分のアクションを追加してメニューを返しますこれで終わりです！ UIEditMenuInteractionは新しい編集メニューを強化するUIInteraction APIで
これを使うと独自のジェスチャーに基づいてテキストビューの外側に軽量な編集メニューが表示でき右クリックでコンテキストメニューを表示するネイティブサポートが用意されています iOS 16ではUIMenuControllerと関連APIは新しい編集メニューインタラクションに置き換えられます
ゼロから編集メニューを提示するにはまずインタラクションを作成してビューに追加してから次にジェスチャーリコグナイザーでメニューを提示するように設定しますポインタの間接的なクリックではなく直接タッチしたときのみメニューを表示するにはジェスチャー認識機能の allowedTouchTypesプロパティを直接タッチのみに設定してください次にジェスチャー認識機能をビューに追加します最後にジェスチャーリコグナイザーが起動したらジェスチャーの位置にメニューを表示できるコンテンツがあるかを判断します次にジェスチャーの位置にソースポイントを持つ編集メニューのコンフィグを作成しますソースポイントはメニューに表示するインタラクションのビューで実行可能なアクションを決定します
設定後 presentEditMenu WithConfigurationを呼び出してメニューを表示します
選択した「Jello there！」ビュー内で右クリックすると Appのコンテンツに対して実行可能なシステムアクションをコンテキストメニューに表示しますさらに選択したビューをタップするとタッチした場所に編集メニューが表示されコンテキストメニューと同じアクションを表示しますこれでもいいですがもっと良くなりますよタッチした場所にメニューが表示される一方で選択したビューのコンテンツがブロックされていますさらにシステムのデフォルトアクションでない「複製」をメニューに挿入したいのです戻ってこれを変更しましょう選択されたビューの周囲にメニュー表示するにはデリゲートメソッドを実装します editMenuInteraction: targetRectForConfiguration ですこれはメニューを表示する場所を決めるCGRectを返しインタラクションのビューの座標空間内にあるものです実装していないまたはCGRectがnullの場合はメニューはコンフィグのソースポイントから表示されますこの場合メニューが選択したビューにかぶらないようにそのフレームを返します「複製」を追加するには editMenuInteraction:menuForConfiguration: suggestedActions: を実装しテキストビューのメニューにアクションを挿入したのと同様にシステム提案アクションの後にカスタムアクションを追加します
選択したビューをタップすると「Jello there!」の周りを囲むように表示されるようになりました新しい「複製」もメニュー表示時に含みこれらをわずか数行のコードで実現しています見事ですね！
Mac Catalyst Appでは編集メニューはユーザーがインタラクションのビューで右クリックしたときに Macで期待されるおなじみのコンテキストメニューに橋渡しされます iPadイディオムMac Catalyst Appではプログラムで用意した編集メニューがコンテキストメニューに橋渡しされます MacのイディオムAppではプログラムによる編集メニューの表示はサポートされていませんシームレスな橋渡しのため UIEditMenuInteractionは UIMenuElementファミリーのAPIがベースになっていますこれらはサブメニューや画像のサポートなどさらに柔軟でカスタマイズ性の高い機能を提供します UIMenusが初めての方は「iOS 13向けにUIをモダナイズする」でメニューとアクションについて詳しく学びましょう UIMenuElement上に構築することは編集メニューがUIMenuSystemのようなすでにメニューをサポートしている他のAPIにアクセスできるということです編集メニューは既存の UIMenuSystem.contextシステムを使用してメニューを構築しますメニュービルダレスポンダチェーントラバーサルコマンドバリデーションについて詳しくは「iPad Appを次のレベルに」をご覧ください
iOS 16では UIMenuに新しい機能強化を施しました UIMenuに優先要素サイズプロパティを追加してコンテキストメニューで異なるレイアウトが選択できメニューをよりコンパクトな横並び表示にすることで一列でより多くのアクションが並べられるようにもなりましたミドルサイズもアクションを横並びで表示しますがもう少し細かく表示しますテキスト編集メニューで標準の編集メニュー表示のために使用します最後に要素サイズを大きくすることでメニューがデフォルトの全幅で表示できます UIMenuElementに新しい .keepsMenuPresented属性を追加しアクションの実行後もメニュー表示が維持できるようになりましたこの属性を使用するとメニューを再表示せずにアクションが複数回実行できますこれはまだ新しい編集メニューの氷山の一角ですカスタマイズしてテキスト編集機能を拡張しましょうアクションにはタイトルと画像を付けてさまざまな表示スタイルでメニューが完成するようにしましょう最も重要なことは新しいUIEditMenuInteractionでカスタマイズ性を高めプラットフォームや異なる入力メソッド間の一貫性を向上させることです新しい編集メニューの追加は素晴らしい最初の一歩ですデスクトップクラスの編集体験を完成させるため Jamesと交代して新しいシステムの検索と置換について説明します
あああった！どうも UIKitエンジニアのJames Magahernです検索と置換についてお話しします iOS 16の新機能として新しいUIコンポーネントを導入しましたシステム全体に標準装備され多くの内蔵Appに含まれるためユーザーは頻繁に使用する編集ショートカットで指の記憶を鍛えることができます iPad上で動作する新しい検索パネルですハードウェアキーボードの装着時はショートカットバーをインラインでフローティング表示しソフトウェアキーボード使用時はその上部に自動的に移動します iPhoneの場合は画面サイズに合わせてよりコンパクトなレイアウトで表示します自動解除最小化キーボード回避はすべてシステムで対応します MacでAppを実行する場合 AppKit の検索バーと同じように動作しユーザーが Macで期待する使い慣れたレイアウトでコンテンツにインラインで検索パネルを表示します
UITextViewやWKWebView PDFViewsを使って Appにテキストコンテンツを表示している場合ビルトインの検索インタラクションで「isFindInteractionEnabled」をtrueにすると始められます簡単でしょう！ QuickLookでテキストコンテンツを表示している場合は何もせずとも既に利用可能です
ハードウェアキーボードでは command+Fで検索 command+Gで次を検索 command+shift+Gで前を検索など標準的なシステムショートカットはすべて期待通り機能します Macで実行する場合はメニューバーからアクセスできますコンテンツを表示するビューをファーストレスポンダーにするだけですハードウェアキーボードを使用しないユーザーには findInteractionプロパティの presentFindNavigatorでプログラムから検索機能が呼び出せますナビゲーションバーアイテムから利用できるようにするといいかもしれません
Macで実行する場合他にも注意点があります iOSの場合検索パネルはソフトウェアキーボードまたはショートカットバーの一部として表示されます Macではコンテンツにインラインで表示しますスクロールビューに検索インタラクションをインストールする場合自動的にコンテンツのインセットを調整してトレイトコレクションの変更に対応しますそれ以外の場合はmacOSのUIで検索パネルをホストするためのスペースの確保が必要です
さらに虫眼鏡のアイコンをタップすると標準的な検索オプションを含むメニューが表示されます UIFindInteractionのoptionsMenuProviderでメニュー内容がカスタマイズできますこれはカスタム実装でより重要になってきます先ほど紹介したビルトインのビューを使用している場合はこれだけで大丈夫です Appがテキストコンテンツを完全にカスタム化されたビューやリストビューなどで表示している場合でも検索インタラクションをAppに追加できますその方法をご紹介します
検索インタラクションの良いところは任意のビューにインストールできることです既存のAppに検索と置換の実装がある場合 UIFindInteractionに橋渡ししてシステムのUIを利用するのは簡単ですカスタムビューに既存の検索の実装がない場合でも特にシステムキーボードと連携するために UITextInputプロトコルを既に実装していれば非常に簡単に始められます UIFindInteractionのカスタムビューでの動作について説明しますインストール後findインタラクションのデリゲートをセットアップします findインタラクションデリゲートは findセッションの開始と終了の通知だけでなく UIFindSessionsを処理する責任を負います UIFindSessionは現在ハイライトされている結果などセッションのすべての状態をカプセル化する抽象的な基本クラスです「次の結果に進む」「この文字列を検索する」など UIが要求するすべてのアクションをサービスとして提供します自分で管理する場合は findインタラクションデリゲートで提供するUIFindSessionのサブクラスを選択することができます
すでにAppに既存の検索と置換の実装がありそれをシステムUIに橋渡ししたい場合に有効なオプションですそうでない場合はシステムに状態を任せて表示されるドキュメントのコンテンツをカプセル化したクラスに UITextSearchingプロトコルを採用するのがよいでしょうそのためには UITextSearchingFindSessionを返してそれをドキュメントクラスと接続しますこのオプションはカスタムビューにまだ findの実装がない場合に最適ですその方法をコードで説明します
この例にはカスタムドキュメントクラスとこのドキュメントを表示するカスタムビューがありますこのビューにUIFindInteractionがインストールされて UITextSearchingFindSessionがドキュメントに検索対象として提供されますキーボードショートカットが動作するためにビューコントローラやカスタムビューがファーストレスポンダになれることを確認してください
findインタラクションを作りセッションデリゲートを提供して処理します今はビューコントローラがセッションデリゲートです検索セッションについては検索可能なオブジェクトとしてあなたのドキュメントを提供する新しいUITextSearchingFindSessionを返しますドキュメントクラスが UITextSearchingプロトコルに準拠していることを確認してください
UITextSearchingプロトコルを実装したクラスはドキュメント内のテキストを検索しますシステムはperformTextSearchを呼び出しアグリゲータオブジェクトで結果を渡しますその際アグリゲーターは UITextRangeと連携しますこれも抽象クラスでテキストを保存するのに適したデータをカプセル化するために使用できます例えば WebKitでテキストをレンダリングするクライアントは DOMの範囲を表すことができますアグリゲーターはスレッドセーフなのでバックグラウンドスレッドで結果を提供できます findインタラクションはカスタムビューで結果を表示する方法を知らないので decorate()が呼ばれた際に指定されたスタイルで検索結果の装飾が必要でしょう UITextSearchingの検索セッションとプロトコルは同じインタラクションを使って複数のドキュメントにまたがる検索もサポートします Appがメールの会話ビューのようにコンテンツを表示し各「ドキュメント」がメールメッセージの場合ルートレベルのコレクションビューに単一の検索インタラクションをインストールしてすべてのドキュメントを同時に検索して異なるドキュメント内の検索結果をユーザーは簡単に行き来できますこれでiOS 16の新しい検索インタラクションが使えます多くのテキストコンテンツを表示するシステムビューでは isFindInteractionEnabledを必ず有効にしてください既存の検索の実装を UIFindInteractionに移行します UITextSearchingを実装し検索をまだ実装していない場合は UITextSearchingFindSessionを使用します最後に App内でキーボードショートカットが競合していないことを確認してください iOS 16用に Appの編集インタラクションをリフレッシュし真のデスクトップクラスにします新しいテキスト編集メニューを Appで試してカスタムUIを編集メニューのインタラクションに対応させましょうテキストを検索可能にして生産性を向上させましょう Appに素晴らしい新機能が導入されるのが楽しみですありがとうございましたいいね！コメント購読をよろしくお願いします

2:42 - Adding items into text edit menus

func textView(
    _ textView: UITextView, 
    editMenuForTextIn range: NSRange, 
    suggestedActions: [UIMenuElement]) -> UIMenu?

4:03 - Adding actions into a text view's menu

func textView(
    _ textView: UITextView,
    editMenuForTextIn range: NSRange,
    suggestedActions: [UIMenuElement]
) -> UIMenu? {
    var additionalActions: [UIMenuElement] = []
    if range.length > 0 {
        let highlightAction = UIAction(title: "Highlight", ...)
        additionalActions.append(highlightAction)
    }
    let insertPhotoAction = UIAction(title: "Insert Photo", ...)
    additionalActions.append(insertPhotoAction)
    return UIMenu(children: suggestedActions + additionalActions)
}

5:24 - Presenting an edit menu with a custom gesture

let editMenuInteraction = UIEditMenuInteraction(delegate: self)
view.addInteraction(editMenuInteraction)

let tapRecognizer = UITapGestureRecognizer(target: self, action: #selector(didTap(_:)))
tapRecognizer.allowedTouchTypes = [UITouch.TouchType.direct.rawValue as NSNumber]
view.addGestureRecognizer(tapRecognizer)

@objc func didTap(_ recognizer: UITapGestureRecognizer) {
    let location = recognizer.location(in: self.view)
    if self.hasSelectedObjectView(at: location) {
        let configuration = UIEditMenuConfiguration(identifier: nil, sourcePoint: location)
        editMenuInteraction.presentEditMenu(with: configuration)
    }
}

7:13 - Implementing UIEditMenuInteractionDelegate

func editMenuInteraction(
    _ interaction: UIEditMenuInteraction,
    targetRectFor configuration: UIEditMenuConfiguration
) -> CGRect {
    guard let selectedView = objectView(at: configuration.sourcePoint) else { return .null }
    return selectedView.frame
}

func editMenuInteraction(
    _ interaction: UIEditMenuInteraction,
    menuFor configuration: UIEditMenuConfiguration,
    suggestedActions: [UIMenuElement]
) -> UIMenu? {
    let duplicateAction = UIAction(title: "Duplicate") { ... }
    return UIMenu(children: suggestedActions + [duplicateAction])
}

10:34 - Using the "keeps menu presented" attribute

UIAction(title: "Increase",
         image: UIImage(systemName: "increase.indent"),
         attributes: .keepsMenuPresented) { ... }

UIAction(title: "Decrease",
         image: UIImage(systemName: "decrease.indent"),
         attributes: .keepsMenuPresented) { ... }

12:46 - Find with system views

open var findInteraction: UIFindInteraction? { get }
textView.isFindInteractionEnabled = true

17:22 - Installing a UIFindInteraction on a custom view

let customDocument = MyDocument(string: "")
lazy var customView = MyTextView(document: customDocument)

lazy var findInteraction = UIFindInteraction(sessionDelegate: self)

override var canBecomeFirstResponder: Bool { true }

override func viewDidLoad() {
    customView.addInteraction(findInteraction)
}

func findInteraction(_ interaction: UIFindInteraction, sessionFor view: UIView) -> UIFindSession? {
    return UITextSearchingFindSession(searchableObject: customDocument)
}

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

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

リソース

関連ビデオ

WWDC22

WWDC19