デスクトップクラスのiPad Appを構築する

デスクトップクラスの機能を活用するiPad Appの作成方法をご覧ください。UIKitチームのMohammedより、最新のナビゲーション、コレクションビュー、メニュー、編集APIを解説します。強力な iPad Appを構築するベストプラクティスも紹介しますので、是非ご覧ください。このセッションに合わせて同時にコーディングしたり、サンプルAppをダウンロードして、自分のコードを更新する際の参照用として使用してください。

リソース

関連ビデオ

WWDC23

より優れたドキュメントベースのアプリを構築

WWDC22

ダウンロード

♪ ♪

こんにちは UIKit チームの Mohammed ですデスクトップクラスの iPad App を構築するための詳細に関するセッションにご参加ありがとうございますここでは iPadOS 16 の API を使って既存の iPad App をデスクトップクラスの体験にアップデートしますまずは新しいナビゲーションバー API で強力な機能を表示し UIの密度を高めカスタマイズ性の提供を目指します

そして新しい UICollectionView とメニュー API を採用し複雑なワークフローと複数選択時のクイックアクションを実現します新しい検索と置換を有効にし新しい編集メニューでテキスト編集を強化しますアップデートするのは iPadOS 15 向けの Markdown エディタですモダナイゼーションプロセスの各ステップを通じてベストプラクティスとその選択の背景となる動機について説明します

初めての方は UIKit の新しい iPadOS の API を網羅した「デスクトップクラスのiPadの紹介」や最高のデスクトップクラスの iPad App をデザインするヒントを紹介している「iPad App設計の最新情報」を先にご覧くださいでは早速始めましょうまず始めに App の操作系を考えてみましょうこの App は iPadOS 15 向けに設計されているためすでに最も重要なコントロールがナビゲーションバーに表示され副次的なコントロールはさまざまなメニューやポップオーバーに配置されています

iPadOS 16では UIKit は既存のナビゲーションスタイルを正式なものとしより密でカスタマイズ可能なレイアウトを持つ 2つの新しいものを導入していますこれにより App はより多くの機能を UI の前面に押し出しながらコンテンツに最も適したレイアウトを表現することができます

ナビゲーター App はおなじみの Push/Popナビゲーションモデルで一般的に「設定 App」のような階層的なデータを表示するのに適しています

Safari やファイル App のようなブラウザは複数のドキュメントやフォルダ構造に目を通したりその間を行き来したりするのに理想的です

エディタは個々のドキュメントを集中的に表示または編集するのに適しています

Markdownエディタである私たちの App にはこのスタイルは最適な選択です

エディタースタイルではタイトルをバーの先端に配置し中央を新しいアイテム用に開放していますこれにより他のビューやメニューで隠されていた機能を表に出す事ができるようになりますデザインを生かすためいくつか工夫をしていますまずビルトインされている「戻る」をカスタマイズします次にタイトルメニューにドキュメント情報と一般的なドキュメントアクションを追加します新しいリネーム UI のサポートも追加します最後にこれまで埋もれていた機能をバーの中心に持ってきてアクセスを容易にしますまず navigationItem の style プロパティを .editorにしてエディタスタイルを選択します

すぐにタイトルが先頭揃えとなり中央の領域が開放されます

末尾の done ボタンを削除して新しい backAction APIで置き換えますこのビューを閉じてドキュメントピッカーに戻るアクションが標準的なものになります

App にタイトルメニューは必要かどうかを考えてみましょうタイトルメニューはナビゲーションバーのタイトルビューから表示されますドキュメントのメタデータやドキュメント全体に適用するアクションの表示に適しています App がドキュメントベースでない場合はビュー全体に適用されるアクションを表示すると良いでしょうドキュメントメニューのヘッダーを使用してドキュメントに関する情報を表示するのは理にかなっていますまたドキュメントはドラッグ可能なので共有機能を簡単に利用できますいよいよコードを書く時がきました

App は UIDocument に対応しているので UIDocument の fileURL で UIDocumentProperties オブジェクトがインスタンス化できます

次に同じ URL を使って NSItemProvider を作成します

itemProvider で UIDragItem を作成し properties の dragItemsProvider に設定

UIActivityViewController も作って properties の activityViewControllerProvider に設定 properties オブジェクトをエディタビューコントローラの navigationItem の documentProperties に設定しますこのヘッダーにはドキュメントの名前やサイズアイコンが表示されドキュメントの概要が一目でわかりますドラッグアイテムとアクティビティビューコントローラーのプロバイダを指定したのでアイコンをドラッグしてドキュメントを App の外にコピーしたりシェアボタンをタップしてアクティビティビューコントローラーを表示できます

タイトルメニューはドキュメントヘッダーの表示だけでなくドキュメント全体に適用する機能の提供に適していますメニューに表示できるアクションは2種類でローカライズされたタイトルやシンボル画像をあらかじめ定義したシステムが提供するものと App 提供の完全なカスタムなものです

いくつかの追加アクションが付属しているので renameアクションから見てみましょう rename delegateプロトコルに準拠することでこのアクションをメニューに追加できますトリガーするとバー内蔵のリネーム UI を表示します

ビューコントローラをナビゲーションアイテムの

renameDelegate とし表示中の名前を変更するため navigationItemDidEndRenamingWithTitle を実装します

この関数はリネームアクションがコミットされると呼び出され実際のリネームとその処理は App 側の責任となります API は意図的にオープンエンドになっており App のあらゆるデータモデルをサポートしますシステムが提供する他のアクションを見てみましょうエディタビューコントローラでそれらの関数をオーバーライドしますここでは duplicate と move の関数を実装しました UIKitは navigationItem の titleMenuProvider に rename アクションを含むシステム提供のアクションを提案された UIMenuElements の配列として自動的に表示しますタイトルメニューに含めるには返されたメニューの子メニューに追加します

システムが用意したアクションに加えて完全にカスタム化されたアクションやメニュー階層全体の追加も可能ですここでは HTMLとPDFとしてエクスポートするサブアクションを持つエクスポートのサブメニューを追加しました

タイトル表示をタップするとドキュメントのヘッダーと追加したすべてのアクションを含むメニューが表示されます名称変更を選択すると組み込みの名前変更 UI が起動しドキュメントの名前が変更できます

App の基本構造ができてきたので Mac catalyst で Appをビルドしたときの見え方を確認しておきましょう Mac で実行するとタイトルを先頭に寄せたエディタースタイルがきれいに翻訳されています

「戻る」も引き継がれクリックするとファイルブラウザが表示されます

システムが提供するアクションとリネーム機能は App のファイルメニューに自動的に表示されます Mac Catalyst では titleMenuProvider は呼ばれないのでカスタムアクションは Fileメニューに含まれませんアクションを公開するには UIMenuSystem を使って App のメインメニューに手動で追加します

モダナイゼーションを続けましょう目標に向かっているMacにこれからも注目しましょうバーのセンターエリアについて考えてみます iOS 15版では多くの副操作やツール保持のメニューが用意されておりセンターアイテムが発見し易くしています

中央エリアはカスタマイズ可能で使用頻度の低いコントロールで埋まる心配はありませんワークフローに合わせてバーの内容を調整できますカスタマイズを有効にする最初のステップとしてナビゲーションアイテムに customizationIdentifier を指定し

センターアイテムを UIBarButtonItemGroups で定義しますグループは前からありますが iOS 16 では UINavigationBar に導入しカスタマイズのサポートを強化していますこれはデフォルトで表示したいセンターアイテムのセットです左側のスクロール同期ボタンはこの App で必須の機能を提供していますので UIBarButtonItem の新しい関数である creatingFixedGroup() を使って固定グループへ配置しましょう固定グループは移動やカスタマイズはできません

リンクの追加ボタンはエディタでリンクタグを入力すると同じ機能を実現できるので OptionalGroup を使用してカスタマイズ可能なアイテムとして作成し Appを再起動しても変わらないように固有のcustomization Identifier を与えます

同様の手順でデフォルトセットの残りの項目を定義しデフォルトで使用する必要のない優先度の低い項目に移動しますそのひとつが太字斜体下線などの項目を含むテキストフォーマットグループです

カスタマイズのポップオーバーにのみ表示してバーにドラッグできるようにします

UIBarButtonItemGroup の optionalGroup イニシャライザで isInDefaultCustomization を false に設定します

またグループに代表的なアイテムを設定してポップオーバーでタイトルを表示しバーのスペースが足りない時に折りたためるようにします

iPad に戻ると定義した中央の項目がバーの中央に表示されます追加した More ボタンをクリックするとツールバーのカスタマイズアクションがメニューと一緒に表示されますクリックするとカスタマイズモードになります

固定とした「同期スクロールボタン」は止まっていますが他の項目は揺れてカスタマイズ可能になります

書式グループなどのオプション項目はポップオーバーに表示されバーにドラッグできます

Mac で実行すると中央の項目がカスタマイズ可能な macOSのツールバーボタンに変換されています

iPad に戻り Appのサイズを変更してみましょうツールバーの空きスペースが少なくなったので中央の項目は表示されなくなりました UIKit は利用可能なスペースに応じてセンターアイテムの表示と非表示を自動的に処理しますサイズが合わない項目はオーバーフローメニューに表示されます標準のバーボタン項目は自動的にメニュー表現に変換されますが好みに応じてカスタムメニューを提供できます UIKit はカスタムビューアイテムの目的を理解できないのでスライダーは自動的に変換されませんメニューをカスタマイズする必要があります

私たちのスライダーのアイテムを紹介しますカスタムビューを持つ単一のバーボタン項目でオプションのバーボタングループに含まれますスライダーのコア機能を提供するために減少リセット増加のアクションを持つ UIMenu として定義することにします

UIMenu の新しい preferredElementSize プロパティを使用するとコンパクトなサイドバイサイドの外観にすることができ

新しい keepMenuPresented プロパティを使用すると各アクションの実行後もメニューの表示を閉じずにフォントサイズを何回でも変更できますもう一度 iPad で実行してみましょうオーバーフローメニューを表示するとスライダーがインラインメニューとして表示され 3つのアクションが横並となりスライダーの全機能をカバーします

Mac ではスモールエレメントサイズが存在しないためアクションは macOS の標準的なメニュー項目として表示されます UI の構成とカスタマイズは以上です次に新しいコレクションビューとメニュー API で App 内のワークフローの高速化を検討しますこの App のサイドバーは目次になっておりドキュメントの素早いナビゲートやトップレベルのタグにアクションを起こせます iOS 16 以前は複数の項目の編集機能を追加する場合個別の編集モードを実装し一括操作はツールバーのボタンに委ねていました

iOS 16 では複数アイテムのメニューに新しいデザインが導入されメニューがどのアイテムに影響するのか明確になり複数アイテムのドラッグが行えるようにアイテムの集合が表示されるようになりましたデスクトップクラスの iPad App では新しいメニューデザインは軽量な選択スタイルとの組み合わせが最適です「軽量」とはコレクションビューを編集モードにしたり App の UI に大きな変更を加えずに複数のアイテムが選択できることですまず既存の API でキーボードフォーカスを有効にします allowsMultipleSelection を true に設定してから

allowFocus を true にして有効にします

selectionFollowsFocus を true にして

選択範囲にフォーカスが移動するようにします iPad でこれを実行すると各アイテムが選択範囲に追加されても選択アクションが実行されエディタビューがスクロールすることに気づきますコードに戻り何が起きたか見てみましょう

この通りです didSelectItemAtIndexPath のコードは collectionViewの isEditingプロパティを見て編集モード中のスクロールを無効にしています編集モード以外でも複数選択が可能になったのでこのコードは選択されるたび実行されますこれは UICollectionViewDelegate メソッドで解決できます performPrimaryActionForItemAtIndexPath を実装してスクロールのコードをこの新しい関数に移動しますこの関数は単一のアイテムがタップされたときにだけ呼び出されコレクションビューは編集中ではないので編集モードの確認は不要です

選択に関する動作もないので indexPath での select item の実装も削除できます

iPad に戻り複数の項目を選択してもエディタビューで対応するテキストにスクロールしなくなりました実際にメニューのサポートを追加してみます

iPadOS 16 では UICollectionViewDelegate の既存の単一アイテムメニューメソッドは非推奨です代わりに 0から多数のメニュー表示に対応します indexPaths 配列に含まれる項目の数は選択された項目の数とメニューが呼び出された場所に依存します

配列が空の場合はセル間の空白部分にメニューが呼び出されており

indexPathが1つであれば非選択項目か唯一の選択項目に対して起動されたことになります

複数の項目がある場合は複数選択されている項目に対してメニューを起動しています

iPad に戻り再び上位4項目を選択し選択した項目のひとつを 2本指でクリックすると新しい複数項目メニューが表示されます

Mac で同じことを行うと選択したセルの周りにリングが描かれハイライトされます

複数項目のメニューができたので新しい検索と置換編集メニューの機能を使ってテキスト編集の体験を向上させましょうこのApp はエディタに UITextView を使用しておりカスタム検索と置換のアクションは不要なのでデフォルト機能を有効にするためにテキストビューの isFindInteractionEnabled プロパティを true にしますこの状態でテキスト編集中に Command+F を押すと検索と置換のUIが表示されます

テキストビューの編集メニューにカスタムアクションを追加することで簡単に素晴らしい編集機能が実現できます UITextViewDelegate メソッドの editMenuForTextIn: suggestedActions: の実装だけです実装ではこのHideアクションのようなカスタムアクションとシステムメニューと組み合わせた UIMenu を構築して返すことができます

これがその結果ですテキストを選択して編集メニューを出すと弊社独自のアクションとシステム提供のアクションの両方が表示されます検索と置換や編集メニューの詳細は「デスクトップクラスの編集操作を取り入れる」のセッションをご覧ください　これで全てです！これらの変更で App をデスクトップクラスにして Mac にシームレスに翻訳するための素晴らしい基本的なステップを踏み出しました iPadOS 16で提供されるAPIで自分のAppを同様のプロセスで動かせます App に合うナビゲーションスタイルを選択したらプロパティとタイトルメニューでワークフローを強化しますセンターアイテムに重要な機能を配置しカスタマイズを提供しますマルチアイテムメニューで複数のアイテムに対応します検索と置換や新しい編集メニューを使って App のテキスト編集の体験を向上させます新しい App の作成にしても既存の App のアップデートにしても新しいツールを使ったあなたの App を使うのが待ちきれませんご視聴ありがとうございました

3:36 - Enable UINavigationBar editor style.
```
navigationItem.style = .editor
```
3:52 - Set a back action.
```
navigationItem.backAction = UIAction(…)
```

4:48 - Create a document properties header.

let properties = UIDocumentProperties(url: document.fileURL)

if let itemProvider = NSItemProvider(contentsOf: document.fileURL) {
    properties.dragItemsProvider = { _ in
        [UIDragItem(itemProvider: itemProvider)]
    }
    properties.activityViewControllerProvider = {
        UIActivityViewController(activityItems: [itemProvider], applicationActivities: nil)
    }
}

navigationItem.documentProperties = properties

6:36 - Adopt rename title menu action and rename UI

override func viewDidLoad() {
    navigationItem.renameDelegate = self
}

func navigationItem(_ navigationItem: UINavigationItem, didEndRenamingWith title: String) {
    // Rename document using methods appropriate to the app’s data model
}

7:09 - Adopt system provided title menu actions.

override func duplicate(_ sender: Any?) {
    // Duplicate document
}

override func move(_ sender: Any?) {
    // Move document
}

func didOpenDocument() {
    ...
    navigationItem.titleMenuProvider = { [unowned self] suggested in
        var children = suggested

        ...

        return UIMenu(children: children)
    }
}

7:10 - Add custom title menu actions

func didOpenDocument() {
    ...
    navigationItem.titleMenuProvider = { [unowned self] suggested in
        var children = suggested
        children += [
            UIMenu(title: "Export…", 
                   image: UIImage(systemName: "arrow.up.forward.square"), 
                   children: [
                UIAction(title: "HTML", image: UIImage(systemName: "safari")) { ... },
                UIAction(title: "PDF", image: UIImage(systemName: "doc")) { ... }
            ])
        ]
        return UIMenu(children: children)
    }
}

9:35 - Enable customization for center items
```
navigationItem.customizationIdentifier = "editorView"
```

10:00 - Define a fixed center item group.

UIBarButtonItem(title: "Sync Scrolling", ...).creatingFixedGroup()

10:23 - Define an optional (customizable) center item group.

UIBarButtonItem(title: "Add Link", ...).creatingOptionalGroup(customizationIdentifier: "addLink")

10:56 - Define a non-default optional center item group.

UIBarButtonItemGroup.optionalGroup(customizationIdentifier: "textFormat",
																	 isInDefaultCustomization: false,
																	 representativeItem: UIBarButtonItem(title: "Format", ...)
																	 items: [
																	      UIBarButtonItem(title: "Bold", ...),
																	      UIBarButtonItem(title: "Italics", ...),
																	      UIBarButtonItem(title: "Underline", ...),
																	 ])

13:16 - Define a custom menu representation for a bar button item group.

sliderGroup.menuRepresentation = UIMenu(title: "Text Size",
                                        preferredElementSize: .small,
                                        children: [
    UIAction(title: "Decrease",
             image: UIImage(systemName: "minus.magnifyingglass"),
             attributes: .keepsMenuPresented) { ... },
    UIAction(title: "Reset",
             image: UIImage(systemName: "1.magnifyingglass"),
             attributes: .keepsMenuPresented) { ... },
    UIAction(title: "Increase",
             image: UIImage(systemName: "plus.magnifyingglass"),
             attributes: .keepsMenuPresented) { ... },
])

15:10 - Enable multiple selection and keyboard focus in a UICollectionView.

// Enable multiple selection
collectionView.allowsMultipleSelection = true

// Enable keyboard focus
collectionView.allowsFocus = true

// Allow keyboard focus to drive selection 
collectionView.selectionFollowsFocus = true

16:11 - Add a primary action to UICollectionView items.

func collectionView(_ collectionView: UICollectionView, 
                    performPrimaryActionForItemAt indexPath: IndexPath) {
  
    // Scroll to the tapped element
    if let element = dataSource.itemIdentifier(for: indexPath) {
        delegate?.outline(self, didChoose: element)
    }
}

16:56 - Add a multi-item menu to UICollectionView.

func collectionView(_ collectionView: UICollectionView, 
                      contextMenuConfigurationForItemsAt indexPaths: [IndexPath], 
                      point: CGPoint) -> UIContextMenuConfiguration? {

    if indexPaths.count == 0 {
        // Construct an empty space menu
    } 
    else if indexPaths.count == 1 {
        // Construct a single item menu
    } 
    else {
        // Construct a multi-item menu
    }
}

18:12 - Enable Find and Replace in UITextView.
```
textView.isFindInteractionEnabled = true
```

18:34 - Add custom actions to UITextView's edit menu.

func textView(_ textView: UITextView,
              editMenuForTextIn range: NSRange,
              suggestedActions: [UIMenuElement]) -> UIMenu? {
    
    if textView.selectedRange.length > 0 {
        let customActions = [ UIAction(title: "Hide", ... ) { ... } ]
        return UIMenu(children: customActions + suggestedActions)
    }
    
    return nil
}

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