AppKitの新機能

Macアプリ開発における最新の進化を確認しましょう。macOS Sequoiaの新機能の概要、およびそれらをアプリに導入する方法をご紹介します。SwiftUIを使用して既存のコードを統合する新しい方法も学ぶことができます。ツールバー、メニュー、テキスト入力など、AppKitのコントロールのさまざまな機能強化も確認します。

リソース

関連ビデオ

WWDC24

WWDC23

アプリでシンボルをアニメーションする

ダウンロード

こんにちは AppKitチームのエンジニアの Matt Zanchelliです「AppKitの新機能」へようこそ私と同じくらいAppKitとMacが好きな方に最適なセッションです今日は皆さんに macOS Sequoiaの様々な改善点と素晴らしいAppKitアプリを開発する方法をご紹介しますこのセッションでは幅広いトピックを取り上げますまずシステム全体の新機能とこれらの機能をアプリで実装する方法次に SwiftUIを使う際に役立つ AppKitの変更点最後にフレームワークにおける新しいAPIの改良点を紹介します

macOSの新機能から見ていきましょう Writing Toolsにより macOSがスペルや文法だけではなく構成や明確さトーンなどのより高度な作文の概念に対応しました Writing Toolsはシステム全体に組み込まれていてインテリジェンス機能をアプリで自動的に使えます最高の作文体験を実現するにはアプリで行われる操作を考えましょうテキスト入力が多い場合やテキスト表示で高度な操作を行う場合は「Get started with Writing Tools」をご覧ください私はずっと欲しかった絵文字をいろいろ作って楽しんでいます具体的な感情や物場面を表現してメッセージやメモなどのアプリで友だちと共有できます新しく作成した絵文字はアプリでも使えます新しい絵文字はUnicode文字ではなく画像で表されるので導入が簡単でテキストと一緒にインラインで表示してアプリに保存できます

カスタム絵文字をアプリに導入する方法については「Bring expression to your app with Genmoji」をご覧ください

カスタム絵文字に加え新しいImage Playgroundアプリで完全な画像を作成できます新しいImage Playgroundを導入することでアプリで魔法のように画像を作成できます Image Playgroundをアプリに追加する方法を説明しますまず Image Playgroundのビューコントローラインスタンスを初期化してデリゲートに割り当てますデリゲートは画像作成の完了やキャンセルなど重要なライフサイクルイベントの情報を取得しますアプリ内で特定のコンテキストで Image Playgroundを開始する場合はビューコントローラに最初のコンセプトとソース画像を設定することもできます conceptsで出力画像の内容を説明します sourceImageは作成した画像をグラフィックで表したものですこの2つのプロパティを使うことでシートを見ればすぐに画像を作成できます画像作成シートで異なる画像やコンセプトを選択することもできます次にビューコントローラを作成対象のシートとして提示します

画像が作成されるとビューコントローラのデリゲートがコールバックを受けて画像のファイルURLを受け取りますファイルURLはサンドボックス化されたアプリの一時ディレクトリに入っていますこのファイルURLを使って画像をユーザーインターフェイスに挿入したら PlaygroundシートをdismissしますフォトライブラリやFinder または連係カメラから画像をアプリに挿入できる場合は Image Playgroundからも画像を追加できるようにするとよいでしょうこのようにImage Playgroundは簡単にアプリに統合できます次にご紹介するのは macOS Sequoiaの新機能の中でも私が特に気に入っている「ウインドウのタイル表示」です早速ご覧いただきましょう

ウインドウを素早く動かして一般的なレイアウトにできますまずこのウインドウを動かしてみましょうカーソルを画面の右端に置いて

この位置でウインドウをドロップすると片側いっぱいに表示されます

タイル表示していた場所からウインドウを動かすと元のサイズに戻ります

ウインドウを大きくして作業したいときに便利ですそして作業が終わったら元のサイズに戻せます画面の端にカーソルを移動しなくてもタイル表示にできます Optionを押しながらドラッグし一番近いタイルのプレビューを表示してドロップできますタイル表示のオプションはメニューのにもあります

キーボードショートカットもありますキーボードショートカットを使えばウインドウを素早く動かせます

ほらさっとこの通り

2つのウインドウを並べて配置したい場合もレイアウトを活用できます

メニューからもウインドウのタイトルバーからもアクセスできるので便利です

ご覧のように2つのウインドウを左右に並べているときは両方の大きさを同時に変更してちょうどよいサイズにすることができます

この状態でウインドウをもう1つ開くと元のサイズで表示されます

この3つをすべてタイル表示にするには 3つのウインドウ用のレイアウトを選択します素晴らしいでしょう？ macOS Sequoiaではあらゆるアプリのウインドウをタイル表示にできますアプリを「ウインドウのタイル表示」対応にするにはいくつかのポイントがありますまずはウインドウの最小／最大サイズですウインドウは画面の半分または4分の1のサイズで表示できますウインドウのサイズを自由に変更できるアプリなら複数のウインドウが重なることはありません最小サイズが制限される場合があるためウインドウレイアウトの制約に注意しましょう

ウインドウを固定の幅と高さの増分でのみ変更できるようにするには resizeIncrementsプロパティを使いますこのプロパティを使うとターミナルと同様にウインドウの幅や高さを 1文字分ずつ変更できます新しいウインドウを開いたときにすでに開いているウインドウに対してどう配置されるかを考えましょう新しいcascadingReferenceFrame プロパティを使ってタイル表示されていない既存ウインドウのフレームを確認し新しいウインドウのカスケード位置をこのフレームを基準に決めます NSWindowControllerなら macOS Sequoiaではデフォルトで処理されます SwiftUIを使えば Mac用のアプリで優れたユーザーインターフェイスを簡単に構築できます AppKitとスムーズに連係するように最初から設計されていて段階的に導入できます連係の度合いは年々深まり macOS Sequoiaではより強固になっています AppKit内でSwiftUIビューを使えるだけでなく NSHostingViewにより SwiftUIメニューも使えるようになりましたアプリ内でAppKitを使う部分と SwiftUIを使う部分でメニューの定義を共有できるということです AppKitのコンテキストでSwiftUIメニューを使う場合は NSHostingMenuを利用しますこれはNSMenuの新しいサブクラスです操作は簡単です

SwiftUIビューを使ってメニューの定義を作成します本文ではデータの関係を最も適切に示している SwiftUIビューを使います値のオンとオフを切り替える場合はToggle リストから値を選択する場合はPicker アクションにはButtonを選択します

このSwiftUIビューで NSHostingMenuを初期化して NSMenuに対応する AppKitの任意のコンテキストで使います例えばプルダウンメニューパラメータがある NSPopUpButtonイニシャライザです macOS Sequoiaでは SwiftUIでAppKitをアニメーション化できます SwiftUIアニメーションを使って NSViewsをアニメーション化できます強力なSwiftUIアニメーションをすべて使えます SwiftUI CustomAnimationsもその1つです

NSViewsをアニメーション化するには NSAnimationContextを使用し SwiftUIアニメーションタイプに渡してレイアウトや描画を調整します SwiftUIアニメーションは中断可能かつリターゲット可能です

UIKitやAppKitを使った SwiftUIアニメーションの詳細については「Enhance your UI animations and transitions」をご覧ください次にAppKit APIの改善点をいくつかご紹介しましょう

コンテキストメニューの新しい表示方法テキストシステムとSF Symbolsの新機能ドキュメントの便利な保存方法新しいカーソルやツールバーの細かいコントロール新しいAPIによるテキスト入力支援などです macOS Sequoiaの新機能として選択中のUI要素のコンテキストメニューをキーボードを使って表示できるようになりましたこの機能を使えばもっと素早く快適にアプリの機能にアクセスできますこのショートカットはデフォルトで Control + Returnキーですがシステム設定でカスタマイズ可能ですコンテキストメニューをマウスではなくキーボードで表示する場合メニューはどこに表示されるのでしょうか？コンテキストメニューの位置の決め方を説明します

メニュープロパティの値をビューで指定してある場合メニューは自動的にそのビューの範囲内に配置されます

独自の選択方法をビューに表示するには新しいNSViewContentSelectionInfo プロトコルを実装して選択インジケータの配置情報を設定するとインジケータのそばにビューのメニューが配置されますこのようにコンテキストメニューの位置はキーボードでコントロールできます次に紹介するAPIの改善点はテキストのハイライトです

ハイライトでテキストを強調すると背景色と前景色にコントラストが生まれますハイライトはリッチテキストに対応するあらゆるNSTextViewで使えますまず一定範囲のテキストを選択したら右クリックしてメニューでサブメニューのを選択しますハイライト用の様々な配色から選ぶこともアプリのアクセントカラーを使うこともできます TextEditの場合は青ですリッチテキストのビューでは自動的にハイライトが使えますがアプリで独自のテキスト属性コントロールがある場合はこの新機能を実装することをおすすめします

テキストのハイライトは属性付きの文字列属性で制御します新しい.textHighlight属性でハイライトのスタイルを指定しますこれを.systemDefaultに設定すると一定範囲のテキストをハイライトできますハイライトの色はアプリのアクセントカラーに基づきます色を制御するには新しい.textHighlightColorScheme属性でシステムに用意されているピンクなどの色を指定します macOS SequoiaのSF Symbols 6には広範な題材を網羅した新しいシンボルが800以上そろっています

エフェクトも増えて小刻みな揺れ回転呼吸が追加されました

シンボルのエフェクトを再生する新しいオプションも追加され特定の回数エフェクトを繰り返したりアニメーションを連続ループで再生したりできます

私のお気に入りはシンボルのバッジやスラッシュを魔法のように置き換えられることです新しいシンボルエフェクトは素晴らしいですねこれらの詳細やカスタムシンボルのオーサリング方法については「What’s new in SF Symbols 6」をご覧ください「Animate symbols in your app」では表現力豊かなアニメーションを使う方法を詳しく紹介しています次はSaveパネルの機能強化についてです

ドキュメントを保存する際に保存したいファイルフォーマットを Saveパネルで選択できたら便利ですよね macOS Sequoiaにはファイルフォーマットのピッカーが標準装備され独自のアクセサリビューを作成する必要がありません標準のファイルフォーマットピッカーはとても使いやすく SaveパネルのshowsContentTypesプロパティを trueに設定するだけですピッカーにはSaveパネルで選択可能なコンテンツタイプのオプションが表示されますこれはallowedContentTypes プロパティで指定しますデフォルトではローカライズされたコンテンツタイプの説明が表示されますがメニューの項目名を独自の表示名にするには panel(_ displayNameFor type:) デリゲート関数を実装しますこの関数はアプリのコンテキストに応じて適切なコンテンツタイプの名前を返します

Saveパネルの機能強化で開発時間が短縮されれば幸いです次は macOS SDKに初登場のAPIを紹介します長年にわたってマウスの後をずっと追いかけてきたそうカーソルですシステムカーソルがmacOS Sequoia SDKで利用できるようになりましたまず frameResizeカーソルを見てみましょう

要素の縁や隅に置いてサイズを変更する際に使いますパラメータは2つ必要です 1つ目はpositionです縁や隅でカーソルが反応するようにします 2つ目はdirectionsはサイズ変更の方向です要素は最小サイズにも最大サイズにもできます frameResizeカーソルでサイズを変更できるのは1つの要素です 2つの要素間のセパレータを移動するには columnResizeカーソルと rowResizeカーソルを使いますカーソルアートワークの矢印に対して垂直に描かれているバーがサイズを変更するセパレータを示していますこの種類のカーソルはスプレッドシートで表の列幅や行の高さを変更する際に便利ですセパレータをこれ以上移動できない場合は移動可能な方向が示されます

拡大と縮小は新しいzoomInカーソルと zoomOutカーソルで行いますこれらのカーソルを使うとアプリのコンテンツをクリックしたときに拡大または縮小できます AppKitではご覧のシステムカーソルが新たに使えるようになりましたシステムカーソルを使うことでアプリ全体で統一感のある標準的な外観になりますアプリ用のカスタムカーソルでうまくできない操作がシステムカーソルでもできない場合はカスタムカーソルが本当に必要かよく考えてみましょう標準のカーソルを使った方が簡単で自分で描く必要もありませんシステム設定のセクションでアクセシビリティ向けに大きなサイズに変更できますまたポインタの色を調整してユニークな色にすればカーソルの位置が見つけやすくなります次に NSToolbarの機能強化は表示モード表示項目項目の表示／非表示の3点です NSToolbarでは項目を表示する際にテキストラベルの有無を選べますアプリの推奨スタイルとしてアイコンのみを採用していてもユーザーによってはテキストラベルがあった方が項目を見つけやすい場合があるためこのような選択肢を提供するとよいでしょう macOS Sequoiaではツールバーの内容をほかの方法でカスタマイズできない場合でもスタイルの選択肢を提供することができるようになりました allowsDisplayModeCustomization プロパティを使用しますこれはデフォルトで有効になっていますツールバーに識別子が割り当てられていて AppKitにスタイル設定を保存できるようになっているかすべての項目に適切なラベルが付いているかよく確認しましょう NSToolbarの従来の項目プロパティよりもさらに便利なプロパティとして新しいitemIdentifiersプロパティが用意されていますツールバーのitemIdentifiersを設定すると最小限の追加や削除が自動的に実行されます allowsUserCustomizationが有効の場合この部分で変更した値によってすべてのカスタム設定が上書きされるので注意してくださいこれはカスタマイズできないダイナミックツールバーでのみ使用してください現在の選択に無関係な項目は無効にしておきツールバーからプログラムで項目を削除するのはドキュメントの編集モードと表示モードの変更などウインドウのモードが変更された場合に限ります

新しいisHiddenプロパティでは条件に基づいてツールバーの項目を非表示または表示することもできます非表示になっている項目も引き続きカスタマイズに表示されるのでこのような項目を表示する場所や条件を選択できますこれを使うのは項目が無関係な場合でウインドウに表示されている選択インジケータは問いません

例えばダウンロードを示す項目は最初のダウンロードが始まるまでアプリで非表示にしておくことができます

次に紹介するのはまったく新しい APIであるテキスト入力候補ですアプリで入力し始めるとシステム標準の候補メニューに独自の入力候補を表示できますこのパターンは多くのアプリでよく目にしますが macOS Sequoiaでは AppKitの標準になっています NSSearchFieldのようなサブクラスを含めどのNSTextFieldでも使えますまずテキストフィールドで suggestionsDelegateプロパティを設定しますテキストの入力が始まると変換候補を表示するようデリゲートが依頼を受け同期または非同期で結果を返します候補をハイライトまたは選択したときにすべてのテキストが入力されるようカスタマイズすることもできますテキスト入力候補を使う際のデザイン上のヒントを紹介しますユーザーによるテキストの入力に合わせて適切な変換候補がタイミングよく表示されるようにしましょうユーザーは入力速度に合わせてスムーズにインターフェイスが反応することを期待します一貫性があり予測可能な変換候補が表示されるようにしましょうそうすることでマッスルメモリが鍛えられ表示される結果を信頼してもらえます変換候補を非同期で表示する場合は即時的な候補を先に表示しましょうシンプルさを保ち最も重要な情報と詳細以外は表示しないようにしますそうすることで正しい結果が素早く見つかりますこれらはmacOS Sequoiaの AppKitの機能強化のほんの一部ですほかにもたくさんあります詳しくは developer.apple.comでリリースノートをご覧ください

新しいインテリジェンス機能を活用しアプリにAPIを導入してシームレスに統合してください

ウインドウのパネルをいくつも表示せずにタイル表示にしましょうアプリのウインドウをすっきりと整理するための準備をしましょう新しいメニューとアニメーションのAPIで SwiftUIを段階的に実装しましょうコンテンツタイプのピッカーやカーソルテキスト入力候補などの新しいシステム標準コンポーネントを実装してくださいコンテキストメニューをキーボード対応にしてアプリをスムーズに操作できるようにしツールバーがすべての表示モードに対応しているか確認してください

Mac向けの素晴らしいアプリを開発してくださる皆さんに感謝します APIが絵の具なら Xcodeは絵筆そしてMacはキャンバスです世界に向けてあなたの作品を披露しましょう

2:09 - Adding the Image Playground experience

extension DocumentCanvasViewController {

    @IBAction
    func importFromImagePlayground(_ sender: Any?) {
        // Initialize the playground, get set up to be notified of lifecycle events.
        let playground = ImagePlaygroundViewController()
        playground.delegate = self
    
        // Seed the playground with concepts and source imagery. (Optional)
        playground.concepts = [.text("birthday card")]
        playground.sourceImage = NSImage(named: "balloons")

        presentAsSheet(playground)
    }

}

extension DocumentCanvasViewController: ImagePlaygroundViewController.Delegate {

    func imagePlaygroundViewController(
        _ imagePlaygroundViewController: ImagePlaygroundViewController,
        didCreateImageAt resultingImageURL: URL
    ) {
        if let image = NSImage(contentsOf: resultingImageURL) {
            imageView.image = image
        } else {
            logger.error("Could not read image at \(resultingImageURL)")
        }
        dismiss(imagePlaygroundViewController)
    }

}

5:50 - Using window resize increments

window.resizeIncrements = NSSize(width: characterWidth, height: characterHeight)

7:05 - Build menus with SwiftUI

struct ActionMenu: View {

    var body: some View {
        Toggle("Use Groups", isOn: $useGroups)
        Picker("Sort By", selection: $sortOrder) {
            ForEach(SortOrder.allCases) { Text($0.title) }
        }.pickerStyle(.inline)
        Button("Customize View…") { <#Action#> }
    }

}

let menu = NSHostingMenu(rootView: ActionMenu())

let pullDown = NSPopUpButton(image: image, pullDownMenu: menu)

7:43 - Get animated with SwiftUI

NSAnimationContext.animate(with: .spring(duration: 0.3)) {
    drawer.isExpanded.toggle()
}

7:55 - Get animated with SwiftUI

class PaletteView: NSView {

    @Invalidating(.layout)    
    var isExpanded: Bool = false

    private func onHover(_ isHovered: Bool) {
        NSAnimationContext.animate(with: .spring) {
            isExpanded = isHovered
            layoutSubtreeIfNeeded()
        }
    }

}

10:31 - Text highlighting

let attributes: [NSAttributedString.Key: Any] = [
    .textHighlight: NSAttributedString.TextHighlightStyle.systemDefault,
    .textHighlightColorScheme: NSAttributedString.TextHighlightColorScheme.pink,
]

11:11 - SF Symbols effects

imageView.addSymbolEffect(.wiggle)
imageView.addSymbolEffect(.rotate)
imageView.addSymbolEffect(.breathe)

11:24 - SF Symbols playback (periodic)

imageView.addSymbolEffect(.wiggle, options: .repeat(.periodic(3, delay: 0.5)))

11:30 - SF Symbols playback (continuous)

imageView.addSymbolEffect(.wiggle, options: .repeat(.continuous))

11:37 - SF Symbols magic replace

imageView.setSymbolImage(badgedSymbolImage, contentTransition: .replace)

12:19 - Save panel content types

extension ImageViewController: NSOpenSavePanelDelegate {
    
    @MainActor
    @IBAction
    internal func saveDocument(_ sender: Any?) {
        Task {
            let savePanel = NSSavePanel()
            savePanel.delegate = self
            savePanel.identifier = NSUserInterfaceItemIdentifier("ImageExport")
            savePanel.showsContentTypes = true
            savePanel.allowedContentTypes = [.png, .jpeg]
            let result = await savePanel.beginSheetModal(for: window)
            switch result {
                case .OK:
                    let url = savePanel.url
                    // Save the document to 'url'. It already has the appropriate extension.
                case .cancel: break
                default: break
            }
        }
    }
    
    func panel(_ panel: Any, displayNameFor type: UTType) -> String? {
        switch type {
            case .png:
                NSLocalizedString("PNG (Greater Quality)", comment: <#Comment#>)
            case .jpeg:
                NSLocalizedString("JPG (Smaller File Size)", comment: <#Comment#>)
            default:
                nil
        }
    }
    
}

13:34 - Frame-resize cursors

let cursor = NSCursor.frameResize(position: .bottomRight, directions: .all)

14:20 - Column and row resize cursors

let cursor = NSCursor.columnResize(directions: .left)
let cursor = NSCursor.rowResize(directions: .up)

14:29 - Zoom in and out cursors

let cursor = NSCusor.zoomIn
let cursor = NSCusor.zoomOut

15:57 - Display mode customizable toolbar

let toolbar = NSToolbar(identifier: NSToolbar.Identifier("ViewerWindow"))
toolbar.allowsDisplayModeCustomization // Defaults to `true`.

16:57 - Hidden toolbar items

let downloadsToolbarItem: NSToolbarItem
downloadsToolbarItem.isHidden = downloadsManager.downloads.isEmpty

17:49 - Text entry suggestions

class MYViewController: NSViewController {
    
    let museumTextField = NSTextField(string: "")
    
    let museumTextSuggestionsController = MuseumTextSuggestionsController()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        self.museumTextField.suggestionsDelegate = self.museumTextSuggestionsController
    }
    
}

class MuseumTextSuggestionsController: NSTextSuggestionsDelegate {
    
    typealias SuggestionItemType = Museum
    
    func textField(
        _ textField: NSTextField,
        provideUpdatedSuggestions responseHandler: @escaping ((ItemResponse) -> Void)
    ) {
        let searchString = textField.stringValue
        
        func museumItem(_ museum: Museum) -> Item {
            var item = NSSuggestionItem(representedValue: museum, title: museum.name)
            item.secondaryTitle = museum.address
            return item
        }
        
        let favoriteMuseums = Museum.favorites.filter({
            $0.matches(searchString)
        })
        
        let favorites = NSSuggestionItemSection(
            title: NSLocalizedString("Favorites", comment: "The title of suggestion results section containing favorite museums."),
            items: favoriteMuseums.map(museumItem(_:))
        )
        var response = NSSuggestionItemResponse(itemSections: [favorites])
        response.phase = .intermediate
        responseHandler(response)
        
        Task {
            let otherMuseums = await Museum.allMatching(searchString)
            let nonFavorites = NSSuggestionItemSection(items: otherMuseums.map(museumItem(_:)))
            
            var response = NSSuggestionItemResponse(itemSections: [
                favorites,
                nonFavorites,
            ])
            response.phase = .final
            responseHandler(response)
        }
    }
    
}

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

AppKitの新機能

関連する章

リソース

関連ビデオ

WWDC24

WWDC23