【Swift/SwiftUI】 シンプルなカウントダウンタイマー作ってみた。(for MacOS)

Swiftで何か作る、ってなるとiPhoneをターゲットにすることを前提に考えちゃうんですけど、
macで使える（もしくはどっちからでも同じ機能が使える)、っていう方がいいものもあって、
実際Swift(SwiftUI)でmacOS向けにアプリ作るのって難しいんだろうか、、、

ていうのを実際に作って試してみました。

作ってみたものはこちら↓のmacOS版です。
（同じものを作ってみた方がどこに差があるかとかわかりやすいと思ったので）

開発環境

MacOS Monterey 12.2.1
Xcode Version 13.4.1
Swift Version 5

画面イメージ

タイマー開始前

タイマー作動中

コード

結論

機能的な部分の実装については、ほぼ変わっていません。
当たり前といえば当たり前かもしれませんが、
SwiftUIのViewって、iOS端末向けと同じように表示・動作するんだ・・・
ってちょっと感動しました。。

以下でmacOS向けに追加・変更した点について記載します。

追加・変更点

macOS向けアプリのプロジェクト作成

まずはアプリのプロジェクト作成時にmacOS向けを選択します。

エントリーポイントにWindowタイトルを設定

.navigationTiltle()を付与することでWindowのタイトルを設定しています。

import SwiftUI

@main
struct helloWorldOnMacApp: App {
  let windowTitle: String = "INTERVAL TIMER"
  var body: some Scene {
    WindowGroup {
      ContentView().navigationTitle(windowTitle)
    }
  }
}

ウィンドウサイズの設定

macOS向けに作ると、ウィンドウサイズが自由なためどの程度の大きさで表示するのか決める必要があります。
何かしらうまいやり方がありそうな感じはしますが、
今回は部品を配置しながらちょうど良さそうなサイズをframe(width, height)で設定しました。

    .frame(width: 600, height: 500)

タイマー時間切れになった際にアラート表示

「macOS向けのアプリでのアラートってどんな風に表示されるんだろ？？」っていうのが気になったので、最低限の設定ですが表示してみました。
(筋トレ中のインターバル管理を目的として作ってみたので、表示文言にちょっと圧があります。）

    .alert(isPresented: $timerController.showingAlert) {
      Alert(
        title: Text("JUST DO IT!!"),
        message: Text("とっとと次やれ！！"),
        dismissButton: .default(Text("OK"), action: { timerController.stop() })
      )
    }

で表示イメージはこんな感じでした。

プログレスバーの表示設定

画面イメージを見て貰えばわかる通り、
プログレスバーの高さ(細さ)がデフォルト状態でちょっとボリュームがもの足りませんが、
macOS向けでは.scaleEffect()で高さを引き伸ばすという書き方が機能しなかったので
現状デフォルト状態での表示にしています。
（ちょっと調べた限り、もうプログレスバーに関しては自作した方が早そう）

  ProgressView(
    value: timerController.remaining,
    total: Double(intervalSecond)
  )
  // macOS版では機能しなかったので削除
  // .scaleEffect(x: 1, y: 15, anchor: .center)

その他細かいバグや書き方の見直しをしたりはしていますが、
「macOS向けに作る上での修正点」という意味合いでは以上です。

コード全文(Github)

コード全文はこちらを参照下さい。

今回は以上です。