[AppKit] 選択できる NSSavePanel の作り方

複数の保存フォーマットをサポートする NSSavePanel の作り方を説明します

Sponsor Link

環境＆対象
概要
保存フォーマットの選択
- accessoryView
- accessoryView の実装
保存ファイル名へのファイル拡張子の設定
全コード
まとめ：NSSavePanel でフォーマット選択できるようにする拡張

環境＆対象

以下の環境で動作確認を行なっています。

macOS Big Sur 11.2
Xcode 12.4

概要

AppKit が提供する NSSavePanel は、そのままでもフォルダ作成等の機能が使えますが、複数フォーマットをサポートしようとすると追加実装が必要になります。

Apple のドキュメントは、こちら。

具体的には以下の点について不足を感じると思います。

保存フォーマットの選択
保存ファイル名へのファイル拡張子の設定

NSSavePanel で上記の対応を行うための追加実装を説明します。

保存フォーマットの選択

デフォルトの NSSavePanel には、保存フォーマットを選択するような機能はついていません。
ユーザーの入力したファイル名の拡張子から判断するという手もありますが、あまりスマートではありません。

NSSavePanel に保存フォーマットを選択できるようなプルダウンメニューを追加するのが一般的です。

accessoryView

NSSavePanel の accessoryView にビューを設定すると以下の場所に追加でビューを表示させることができます。

このアクセサリビューを使って、フォーマット選択を行えるようにします。

accessoryView の実装

画像を保存するという設定で、JPG ファイル/ PNG ファイルを選択できるようにしてみます。

NSSavePanel#accessoryView


//
//  ContentView.swift
//
//  Created by : Tomoaki Yagishita on 2021/02/04
//  © 2021  SmallDeskSoftware
//

import SwiftUI

struct ContentView: View {
    @StateObject private var appModel: MyAppModel = MyAppModel()
    
    var body: some View {
        VStack {
            Text("Hello, world!")
            Button(action: {
                self.appModel.savePanel()
            }, label: {
                Text("SavePanel")
            })
        }
                .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

class MyAppModel: ObservableObject{
    var nsSavePanel: NSSavePanel? = nil
    
    func savePanel() {
        let label = NSTextField(frame: CGRect(x: 20, y: 15, width: 80, height: 18))
        label.stringValue = "type: "
        label.alignment = .right
        label.isBordered = false
        label.isSelectable = false
        label.isEditable = false
        label.backgroundColor = .clear

        let popup = NSPopUpButton(frame: CGRect(x: 100, y: 10, width: 80, height: 25))
        popup.addItems(withTitles: ["JPG", "PNG"])

        let accessoryView = NSView(frame: CGRect(x: 0, y: 0, width: 200, height: 50))
        accessoryView.addSubview(popup)
        accessoryView.addSubview(label)
        
        self.nsSavePanel = NSSavePanel()
        guard let nsSavePanel = self.nsSavePanel else { return }
        nsSavePanel.canCreateDirectories = true
        nsSavePanel.showsTagField = false
        nsSavePanel.isExtensionHidden = false
        nsSavePanel.allowedFileTypes = ["jpg", "png"]
        nsSavePanel.nameFieldStringValue = "FileNameBase"
        nsSavePanel.accessoryView = accessoryView
        nsSavePanel.level = NSWindow.Level.modalPanel
        nsSavePanel.beginSheetModal(for: NSApp.mainWindow!) { (result) in
            if result == .OK {
                guard let saveFileURL = nsSavePanel.url else { return }
                let selected = popup.selectedItem?.title ?? "JPG"
                if selected == "JPG" {
                    print("you tried to save file: \(saveFileURL)")
                } else if selected == "PNG" {
                    print("you tried to save file: \(saveFileURL)")
                }
            }
        }
    }
}

// ContentView.swift

// Created by : Tomoaki Yagishita on 2021/02/04

import SwiftUI

struct ContentView: View {

@StateObject private var appModel: MyAppModel = MyAppModel()

var body: some View {

VStack {

Text("Hello, world!")

Button(action: {

self.appModel.savePanel()

}, label: {

Text("SavePanel")

})

}

.padding()

}

struct ContentView_Previews: PreviewProvider {

static var previews: some View {

ContentView()

}

class MyAppModel: ObservableObject{

var nsSavePanel: NSSavePanel? = nil

func savePanel() {

let label = NSTextField(frame: CGRect(x: 20, y: 15, width: 80, height: 18))

label.stringValue = "type: "

label.alignment = .right

label.isBordered = false

label.isSelectable = false

label.isEditable = false

label.backgroundColor = .clear

let popup = NSPopUpButton(frame: CGRect(x: 100, y: 10, width: 80, height: 25))

popup.addItems(withTitles: ["JPG", "PNG"])

let accessoryView = NSView(frame: CGRect(x: 0, y: 0, width: 200, height: 50))

accessoryView.addSubview(popup)

accessoryView.addSubview(label)

self.nsSavePanel = NSSavePanel()

guard let nsSavePanel = self.nsSavePanel else { return }

nsSavePanel.canCreateDirectories = true

nsSavePanel.showsTagField = false

nsSavePanel.isExtensionHidden = false

nsSavePanel.allowedFileTypes = ["jpg", "png"]

nsSavePanel.nameFieldStringValue = "FileNameBase"

nsSavePanel.accessoryView = accessoryView

nsSavePanel.level = NSWindow.Level.modalPanel

nsSavePanel.beginSheetModal(for: NSApp.mainWindow!) { (result) in

if result == .OK {

guard let saveFileURL = nsSavePanel.url else { return }

let selected = popup.selectedItem?.title ?? "JPG"

if selected == "JPG" {

print("you tried to save file: \(saveFileURL)")

} else if selected == "PNG" {

print("you tried to save file: \(saveFileURL)")

}

上記アプリを起動すると以下のような動作になります。

保存ファイル名へのファイル拡張子の設定

NSSavePanel を開いたときに、保存ファイル名を設定しておくことができます。表示された後に、ユーザーが自分で変更することもできますが、ある程度自動で設定してくれると便利です。

複数フォーマットを選択できるようにしているときには、フォーマットに応じた拡張子を自動でつけてくれると便利です。

保存ファイル名の設定

NSSavePanel の nameFieldStringValue を設定することで、NSSavePanel が開かれたときに入力されている値を設定することができます。

先の例では、nameFieldStringValue に設定している “FileNameBase” という値と、allowedFileTypes で最初に設定されている jpg が組み合わされて、”FileNameBase.jpg” という値が表示されています。

選択されたフォーマットの検知

ユーザーが保存ファイルフォーマットを変更したことは、NSPopupButton の Target/Action を通じて取得することができます。

Target/Action を用いて、以下のような形になります。

NSPopUpButton に target/action 設定(1)


        popup.target = self
        popup.action = #selector(saveTypeIsChanged)

    // target/action で呼ばれる関数
    @objc
    func saveTypeIsChanged(_ any:Any) {
        guard let popupButton = any as? NSPopUpButton else { return }
        guard let selected = popupButton.selectedItem?.title else { return }
        ...
     }

popup.target = self

popup.action = #selector(saveTypeIsChanged)

// target/action で呼ばれる関数

@objc

func saveTypeIsChanged(_ any:Any) {

guard let popupButton = any as? NSPopUpButton else { return }

guard let selected = popupButton.selectedItem?.title else { return }

...

}

上記コードで何を選択されたかという情報を取得することはできるのですが、それを NSSavePanel に反映しようとすると問題が発生します。

具体的には、nameFieldStringValue を更新しても、すでに開かれている NSSavePanel で表示されているファイル名は、更新されません。

選択されたフォーマットのファイル名への反映

allowedFileTypes をうまく使うことで、保存ファイル名の拡張子をアップデートすることができました。

allowedFileType を更新すると NSSavePanel は更新されます

allowedFileType を変更すると、表示されているファイル名の拡張子も更新されるようです。
”ようです”と書いているのはこの辺りの動作についてはドキュメントには記載されておらず、実際の動作から推測しているためです。

先ほどの target/action で呼ばれる関数を以下のようにすると期待の動作になります。

NSPopUpButton に target/action 設定(2)


    @objc
    func saveTypeIsChanged(_ any:Any) {
        guard let popupButton = any as? NSPopUpButton else { return }
        guard let selected = popupButton.selectedItem?.title else { return }
        if selected == "JPG" {
            self.nsSavePanel?.allowedFileTypes = ["jpg"]
        } else if selected == "PNG" {
            self.nsSavePanel?.allowedFileTypes = ["png"]
        }
    }

@objc

func saveTypeIsChanged(_ any:Any) {

guard let popupButton = any as? NSPopUpButton else { return }

guard let selected = popupButton.selectedItem?.title else { return }

if selected == "JPG" {

self.nsSavePanel?.allowedFileTypes = ["jpg"]

} else if selected == "PNG" {

self.nsSavePanel?.allowedFileTypes = ["png"]

}

以下のような動作になります。

全コード

NSSavePanel example


//
//  ContentView.swift
//
//  Created by : Tomoaki Yagishita on 2021/02/04
//  © 2021  SmallDeskSoftware
//

import SwiftUI

struct ContentView: View {
    @StateObject private var appModel: MyAppModel = MyAppModel()
    
    var body: some View {
        VStack {
            Text("Hello, world!")
            Button(action: {
                self.appModel.savePanel()
            }, label: {
                Text("SavePanel")
            })
        }
                .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

class MyAppModel: ObservableObject{
    var nsSavePanel: NSSavePanel? = nil
    
    func savePanel() {
        let label = NSTextField(frame: CGRect(x: 20, y: 15, width: 80, height: 18))
        label.stringValue = "type: "
        label.alignment = .right
        label.isBordered = false
        label.isSelectable = false
        label.isEditable = false
        label.backgroundColor = .clear

        let popup = NSPopUpButton(frame: CGRect(x: 100, y: 10, width: 80, height: 25))
        popup.addItems(withTitles: ["JPG", "PNG"])

        let accessoryView = NSView(frame: CGRect(x: 0, y: 0, width: 200, height: 50))
        accessoryView.addSubview(popup)
        accessoryView.addSubview(label)
        
        popup.target = self
        popup.action = #selector(saveTypeIsChanged)

        self.nsSavePanel = NSSavePanel()
        guard let nsSavePanel = self.nsSavePanel else { return }
        nsSavePanel.canCreateDirectories = true
        nsSavePanel.showsTagField = false
        nsSavePanel.isExtensionHidden = false
        nsSavePanel.allowedFileTypes = ["jpg"]
        nsSavePanel.nameFieldStringValue = "FileNameBase"
        nsSavePanel.accessoryView = accessoryView
        nsSavePanel.level = NSWindow.Level.modalPanel
        nsSavePanel.beginSheetModal(for: NSApp.mainWindow!) { (result) in
            if result == .OK {
                guard let saveFileURL = nsSavePanel.url else { return }
                let selected = popup.selectedItem?.title ?? "JPG"
                if selected == "JPG" {
                    print("you tried to save file: \(saveFileURL)")
                } else if selected == "PNG" {
                    print("you tried to save file: \(saveFileURL)")
                }
            }
        }
    }
    @objc
    func saveTypeIsChanged(_ any:Any) {
        guard let popupButton = any as? NSPopUpButton else { return }
        guard let selected = popupButton.selectedItem?.title else { return }
        if selected == "JPG" {
            self.nsSavePanel?.allowedFileTypes = ["jpg"]
        } else if selected == "PNG" {
            self.nsSavePanel?.allowedFileTypes = ["png"]
        }
    }
}

// ContentView.swift

// Created by : Tomoaki Yagishita on 2021/02/04

import SwiftUI

struct ContentView: View {

@StateObject private var appModel: MyAppModel = MyAppModel()

var body: some View {

VStack {

Text("Hello, world!")

Button(action: {

self.appModel.savePanel()

}, label: {

Text("SavePanel")

})

}

.padding()

}

struct ContentView_Previews: PreviewProvider {

static var previews: some View {

ContentView()

}

class MyAppModel: ObservableObject{

var nsSavePanel: NSSavePanel? = nil

func savePanel() {

let label = NSTextField(frame: CGRect(x: 20, y: 15, width: 80, height: 18))

label.stringValue = "type: "

label.alignment = .right

label.isBordered = false

label.isSelectable = false

label.isEditable = false

label.backgroundColor = .clear

let popup = NSPopUpButton(frame: CGRect(x: 100, y: 10, width: 80, height: 25))

popup.addItems(withTitles: ["JPG", "PNG"])

let accessoryView = NSView(frame: CGRect(x: 0, y: 0, width: 200, height: 50))

accessoryView.addSubview(popup)

accessoryView.addSubview(label)

popup.target = self

popup.action = #selector(saveTypeIsChanged)

self.nsSavePanel = NSSavePanel()

guard let nsSavePanel = self.nsSavePanel else { return }

nsSavePanel.canCreateDirectories = true

nsSavePanel.showsTagField = false

nsSavePanel.isExtensionHidden = false

nsSavePanel.allowedFileTypes = ["jpg"]

nsSavePanel.nameFieldStringValue = "FileNameBase"

nsSavePanel.accessoryView = accessoryView

nsSavePanel.level = NSWindow.Level.modalPanel

nsSavePanel.beginSheetModal(for: NSApp.mainWindow!) { (result) in

if result == .OK {

guard let saveFileURL = nsSavePanel.url else { return }

let selected = popup.selectedItem?.title ?? "JPG"

if selected == "JPG" {

print("you tried to save file: \(saveFileURL)")

} else if selected == "PNG" {

print("you tried to save file: \(saveFileURL)")

}

@objc

func saveTypeIsChanged(_ any:Any) {

guard let popupButton = any as? NSPopUpButton else { return }

guard let selected = popupButton.selectedItem?.title else { return }

if selected == "JPG" {

self.nsSavePanel?.allowedFileTypes = ["jpg"]

} else if selected == "PNG" {

self.nsSavePanel?.allowedFileTypes = ["png"]

}

まとめ：NSSavePanel でフォーマット選択できるようにする拡張

NSSavePanel の拡張

accessoryView を使うと、追加 UI を表示できる
allowedFileTypes を使うと、表示されているファイル名の拡張子も更新される

説明は以上です。
不明な点やおかしな点ありましたら、こちらまで。

Sponsor Link

環境＆対象

概要

保存フォーマットの選択

accessoryView

accessoryView の実装

保存ファイル名へのファイル拡張子の設定

保存ファイル名の設定

選択されたフォーマットの検知

選択されたフォーマットのファイル名への反映

全コード

まとめ：NSSavePanel でフォーマット選択できるようにする拡張

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル