はじめに
今回はSwiftUIを使って、Mac向けのネイティブアプリを作成する手順をまとめました。
【紹介】個人開発
Mac向けの、定型文の挿入も可能なクリップボード履歴管理アプリです。
Windows版は以前からありましたが、基本的な使い方はMac版も同じですので、もしよかったらダウンロードしてみてください。
SwiftUIとは
SwiftUIとは、Appleが開発したUIを実装するためのフレームワークです。
宣言型シンタックスが使用でき、UIの動作をシンプルに記述することができます。
iOS向けやMacアプリ向けで、単一のコードベースで実装できるようになります。
![](https://developer.apple.com/news/images/og/swiftui-og.png)
チュートリアルが充実していますので、一度試してみると概要を把握できると思います。
(iOSの実装から、Mac向けアプリの実装まで)
![](https://docs.developer.apple.com/tutorials/developer-og.jpg)
Storyboardと比較
先日、Mac版Cliborを公開しましたが、私は初めてSwfitUIを使用しました。
以前、iOSの開発を仕事で携わったことがありますが、その時はStoryboardでした。
Storyboardは、ボタンなどをドラッグ・アンド・ドロップで配置したり画面遷移など、直感的に分かりやすいメリットはありますが、個人的には、UIをコードで書けるSwiftUIは良いと思いました。
Gitでの差分管理も分かりやすいですし、シンプルなコードで書け、プレビューもできます。
SwiftUIのデメリットと思った点は、比較的情報が入手しづらいところでしょうか。
SwiftUIのみでUIを構築するのが難しく、AppKitを使って対応が必要な場合もありました。
また、SwiftUIについて分からないことを調べると、iOS向けの記事が多く、Mac向けアプリの情報がやや探しづらかったです。
そういった部分が開発する際に苦労しました。
Xcodeのインストール
App StoreからXcodeをインストールします。
![](https://chigusa-web.com/wp-content/uploads/2022/04/ScreenShot-2022-04-24-17.07.13.png)
プロジェクトの作成
それでは早速、Macアプリを作ってみましょう。
Xcodeを起動してプロジェクトを作成します。
「Create a new Xcode project」をクリックします。
![](https://chigusa-web.com/wp-content/uploads/2022/08/ScreenShot-2022-08-02-22.00.16-500x469.png)
プロジェクトのテンプレートを選択します。
今回は、macOSを選択し、Appをクリックします。
![](https://chigusa-web.com/wp-content/uploads/2022/08/ScreenShot-2022-08-02-22.01.55-1024x376.png)
プロジェクトの情報を入力します。
Product Name | アプリ名ですが、任意で入力します。 |
Team | Noneのままで大丈夫です。 Apple Developer Programに登録している場合、開発アカウントなどを指定できます。 |
Organization Identifier | 個人、または組織を特定できる情報です。 アプリを公開する場合、他のアプリと重複がないようにする必要があります。 ドメインを反対にしたものを指定するのが一般的だと思います。 |
Interface | 今回はSwiftUIを選択します。 他に、Storyboard、XIB(Interface Builder)の指定もできます。 |
Language | SwiftUIを選択した場合、もちろん言語はSwiftになります。 |
Use Core Data | Core Dataはデータを管理するためのフレームワークです。 今回は使いませんので、チェックをオフにしました。 |
Include Tests | テストを含めるかどうかです。 デフォルトのままチェックを入れます。 |
![](https://chigusa-web.com/wp-content/uploads/2022/08/ScreenShot-2022-08-02-22.04.29-500x356.png)
XcodeでSwiftUIの実装ができる状態になりました。
![](https://chigusa-web.com/wp-content/uploads/2022/08/ScreenShot-2022-08-02-22.19.12-1024x433.png)
アプリの実行
実行
とりあえずアプリを実行してみましょう。
三角のボタンをクリックします。
![](https://chigusa-web.com/wp-content/uploads/2022/08/ScreenShot-2022-08-02-22.22.17.png)
少し時間がかかりますが、Macアプリが起動されます。
「Hello, world!」というウィンドウが表示されました。
![](https://chigusa-web.com/wp-content/uploads/2022/08/ScreenShot-2022-08-02-22.22.07.png)
ContentView.swiftのソースコードを見てみましょう。
テキストで「Hello, world!」が表示されるようにコーディングされています。
既述はたったこれだけです。
struct ContentView: View {
var body: some View {
Text("Hello, world!")
.padding()
}
}
Canvas画面では、実行しなくてもウィンドウのプレビューが確認できます。
Resumeボタンをクリックします。
![](https://chigusa-web.com/wp-content/uploads/2022/08/ScreenShot-2022-08-02-22.27.24-500x208.png)
プレビューが表示されました。
コードを修正しながら確認することができます。
![](https://chigusa-web.com/wp-content/uploads/2022/08/ScreenShot-2022-08-02-22.28.31.png)
実装
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()
}
}
簡単に配置することができました。
また、ボタンのクリックイベントなども記述できます。
![](https://chigusa-web.com/wp-content/uploads/2022/08/ScreenShot-2022-08-02-22.38.45.png)
参考
CocoaPodsを利用して便利なライブラリを追加しましょう。
データベースはRealmが便利です。
SwiftUIでは設定画面を簡単に作成できます。
さいごに
今回はSwiftUIを使い、簡単にですがMacアプリを作成してみました。
今後、少しずつアプリの作成方法をまとめていきたいと思います。
他にも私のブログで、Swiftについて解説している記事がありますのでご覧ください。
コメント