自分だけのクイズ作成 - Quipha公開中

【SwiftUI】Mac向けアプリを作ろう

Swift
スポンサーリンク

はじめに

今回はSwiftUIを使って、Mac向けのネイティブアプリを作成する手順をまとめました。

使用するバージョン
  • macOS Monterey (M1)
  • Xcode 13
  • Swift 5
  • SwiftUI
スポンサーリンク

【紹介】個人開発

Mac向けの、定型文の挿入も可能なクリップボード履歴管理アプリです。
Windows版は以前からありましたが、基本的な使い方はMac版も同じですので、もしよかったらダウンロードしてみてください。

  • Xcode
  • Swift 5
  • SwiftUI
  • Realm Database
  • Appleによる公証済み

SwiftUIとは

SwiftUIとは、Appleが開発したUIを実装するためのフレームワークです。

宣言型シンタックスが使用でき、UIの動作をシンプルに記述することができます。
iOS向けやMacアプリ向けで、単一のコードベースで実装できるようになります。

SwiftUIの概要 - Xcode - Apple Developer
SwiftUIでは、Swiftを利用してすべてのAppleプラットフォーム向けのユーザーインターフェイスを、革新的かつ極めてシンプルに構築することができます。

チュートリアルが充実していますので、一度試してみると概要を把握できると思います。
(iOSの実装から、Mac向けアプリの実装まで)

Apple Developer Documentation

Storyboardと比較

先日、Mac版Cliborを公開しましたが、私は初めてSwfitUIを使用しました。
以前、iOSの開発を仕事で携わったことがありますが、その時はStoryboardでした。

Storyboardは、ボタンなどをドラッグ・アンド・ドロップで配置したり画面遷移など、直感的に分かりやすいメリットはありますが、個人的には、UIをコードで書けるSwiftUIは良いと思いました。

Gitでの差分管理も分かりやすいですし、シンプルなコードで書け、プレビューもできます。

Cliborのメイン画面のような、動的に変更する場合でも対応できました。
宣言的UIが良く、状態によって変わるように実装できたのが楽でした。

SwiftUIのデメリットと思った点は、比較的情報が入手しづらいところでしょうか。
SwiftUIのみでUIを構築するのが難しく、AppKitを使って対応が必要な場合もありました。

また、SwiftUIについて分からないことを調べると、iOS向けの記事が多く、Mac向けアプリの情報がやや探しづらかったです。
そういった部分が開発する際に苦労しました。

私自身、SwiftUIについてはCliborの実装で使っただけでそれほど詳しくなく、iOS向けの実装についてはチュートリアル程度しか経験がありませんので、あくまでも個人的な意見とさせていただきます。

Xcodeのインストール

App StoreからXcodeをインストールします。

プロジェクトの作成

それでは早速、Macアプリを作ってみましょう。

Xcodeを起動してプロジェクトを作成します。
「Create a new Xcode project」をクリックします。

プロジェクトのテンプレートを選択します。

iOSやwatchOS、tvOSなどの開発も行うことができます。

今回は、macOSを選択し、Appをクリックします。

プロジェクトの情報を入力します。

Product Nameアプリ名ですが、任意で入力します。
TeamNoneのままで大丈夫です。
Apple Developer Programに登録している場合、開発アカウントなどを指定できます。
Organization Identifier個人、または組織を特定できる情報です。
アプリを公開する場合、他のアプリと重複がないようにする必要があります。
ドメインを反対にしたものを指定するのが一般的だと思います。
Interface今回はSwiftUIを選択します。
他に、Storyboard、XIB(Interface Builder)の指定もできます。
LanguageSwiftUIを選択した場合、もちろん言語はSwiftになります。
Use Core DataCore Dataはデータを管理するためのフレームワークです。
今回は使いませんので、チェックをオフにしました。
Include Testsテストを含めるかどうかです。
デフォルトのままチェックを入れます。

Nextボタンクリック後、プロジェクトの保存先を選択します。
Gitリポジトリをローカルに作成するかは任意で選択します。

XcodeでSwiftUIの実装ができる状態になりました。

アプリの実行

実行

とりあえずアプリを実行してみましょう。
三角のボタンをクリックします。

少し時間がかかりますが、Macアプリが起動されます。
「Hello, world!」というウィンドウが表示されました。

ContentView.swiftのソースコードを見てみましょう。
テキストで「Hello, world!」が表示されるようにコーディングされています。
既述はたったこれだけです。

struct ContentView: View {
    var body: some View {
        Text("Hello, world!")
            .padding()
    }
}

Canvas画面では、実行しなくてもウィンドウのプレビューが確認できます。
Resumeボタンをクリックします。

プレビューが表示されました。
コードを修正しながら確認することができます。

実装

SwiftUIは少ないコードでUIを実装することができます。
例えば以下のように、テキストフィールドやボタンを配置することができます。

struct ContentView: View {

    @State var nickName = ""

    var body: some View {

        VStack {
            Text("Hello, world!")

            // テキスト入力エリア
            TextField("ニックネーム", text: $nickName)
                .frame(width: 90)

            // ボタン
            Button(action: {
                // ボタンイベント
                print(nickName)
            }) {
                Text("確定")
            }
        }
        .padding()

    }
}

簡単に配置することができました。
また、ボタンのクリックイベントなども記述できます。

参考

CocoaPodsを利用して便利なライブラリを追加しましょう。

データベースはRealmが便利です。

SwiftUIでは設定画面を簡単に作成できます。

さいごに

今回はSwiftUIを使い、簡単にですがMacアプリを作成してみました。

今後、少しずつアプリの作成方法をまとめていきたいと思います。

\オススメ/

コメント

タイトルとURLをコピーしました