AppKitでコントロールの値を読み書きする方法(アウトレットについて) | macOSアプリの作り方

2022年8月2日2023年10月23日

前回はボタンをクリックしたときにアクションを実行するという処理を実装しました。ボタンによるアクションは一般的なアプリで共通する基本的な事柄の一つです。同様にアプリ開発で共通する事柄の一つに、コントロールの値の読み書きがあります。

コントロールというのは、ボタンやラベル、テキストフィールドなどビューの一種です。今回はテキストフィールドに入力された文字列を読み込み、ラベルに新しい文字列を設定するという機能の実装を通して、AppKitでのコントロールの値の読み書き方法を解説します。

プロジェクトの作成

新しいmacOSアプリ用のプロジェクトを作成してください。プロジェクトの名前はCocoaHelloWorld2とします。プロジェクトの作成方法については、次の記事を参照してください。

ユーザーインターフェイスの作成

プロジェクトを作成したら早速UIを作成します。Main.storyboardのView Controller Sceneを編集し、次のスクリーンキャプチャのような画面を作成します。

ラベルの作成

「Hello World」と書かれている部分は「Label」を配置します。次のように操作して作成します。

(1) 「Library」ボタンをクリックし、「Library」ウインドウから「Label」をドラッグ＆ドロップして追加します。

(2) ラベルの文字列を「Hello World」に変更します。

(3) 「Font」を「Text Style – Large Title」に設定します。

(4) オートレイアウトを以下のようになるように設定します。

項目	設定
X座標	左右中央
Y座標	上から固定
幅	固定
高さ	固定

名前の入力欄

中央に表示された名前の入力欄は「Text Field」を配置します。次のように操作して作成します。

(1) 「Library」ウインドウから「Text Field」をドラッグ＆ドロップします。

(2) 幅を調整します。

(3) 「Attributes」インスペクタの「Placeholder」に「Your Name」と入力します。「Placeholder」はプレイスホルダー文字列を設定します。プレイスホルダー文字列は、テキストフィールドに何も入力されていないときに、テキストフィールドに薄く表示される文字列のことです。

(4) オートレイアウトを次の表のようになるように設定します。

項目	設定
X座標	左右中央
Y座標	上下中央
幅	固定
高さ	固定

「Change Name」ボタン

「Change Name」と書かれているボタンは「Push Button」を配置します。次のように操作します。

(1) 「Library」ウインドウから「Push Button」を配置します。

(2) ボタンをダブルクリックしてタイトルを「Change Name」に変更します。

(3) オートレイアウトの設定を次の表のように設定します。

項目	設定
X座標	左右中央
Y座標	「Text Field」から固定
幅	固定
高さ	固定

アウトレットを作成する

Storyboard内で作成したいビューに配置したオブジェクトをコードから参照するには、アウトレットを作成します。アウトレットはSwiftでは@IBOutletというアトリビュートを付けたプロパティです。

アウトレットとStoryboard内のオブジェクトとの間でコネクションを設定すると、アウトレットにStoryboard上のオブジェクトのインスタンスが代入されます。

名前の入力欄とラベルへのアウトレットを作成する

名前の入力欄とラベルへのアウトレットを作成します。ラベルとテキストフィールドはAppKitでは、NSTextFieldクラスです。コントロールに対応するクラスが何であるかは「Library」ウインドウに表示されています。

ViewController.swiftに次のようにアウトレットを定義します。

import Cocoa

class ViewController: NSViewController {
    
    @IBOutlet var messageLabel: NSTextField!
    @IBOutlet var nameField: NSTextField!

    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.
    }

    override var representedObject: Any? {
        didSet {
        // Update the view, if already loaded.
        }
    }


}

アウトレットとコネクションを接続する

messageLabelプロパティと「Hello World」と書かれたラベル、nameFieldとテキストフィールドとをコネクションで接続します。次のように操作します。

(1) Main.storyboardを開きます。

(2) 「View Controller」からビューに配置した「Hello World」ラベルからまで、コントロールキーを押しながら、または、右マウスボタンでドラッグ＆ドロップして、コネクションを接続します。

(3) 「Outlets」から「messageLabel」を選択します。この操作で、messageLabelと配置したラベルとの間でコネクションが接続され、Main.storyboardが読み込まれたときに、プロパティmessageLabelにラベルのオブジェクトが代入されます。

(4) 手順(2)と(3)と同様に操作して、nameFieldプロパティと名前入力用のテキストフィールドとの間にコネクションを接続します。

ボタンのアクションを作成する

「Change Name」ボタンがクリックされたときに実行するアクションを実装します。ViewController.swiftに処理を実装します。次のようにコードを追加します。

import Cocoa

class ViewController: NSViewController {
    
    @IBOutlet var messageLabel: NSTextField!
    @IBOutlet var nameField: NSTextField!

    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.
    }

    override var representedObject: Any? {
        didSet {
        // Update the view, if already loaded.
        }
    }

    @IBAction func changeName(_ sender: Any?) {
        // 入力された文字列を取得する
        let name = nameField.stringValue
        
        // 新しい文字列を作成する
        let message = "Hello \(name)"
        
        // ラベルを更新する
        messageLabel.stringValue = message
    }
}

アクションや実装したコードをボタンで実行されるように設定する方法については次の記事を参照してください。