AppleWatchアプリを作ってみる(1)ボタンをタップするとテキストが変化
AppleWatchアプリを作りたくてMacBookAirを買ってしまってからはや1週間。まだデフォルトアプリしか作っていません。
そこで、1個くらい超簡単なアプリを作ってみることにしました。SwiftUIによるAppleWatchアプリの作成は、おそらく、iOSアプリ作成と多くの違いはないと思われますので、以下の本を参考にしました。2021年時点で、たぶん、この本がiOSアプリ入門本として一番わかり易いと思います。
ソースコード
https://github.com/adash333/AppleWatchButton
AppleWatchアプリを作ってみる 目次
- (0)XcodeインストールとiOSとwatchOSのアップデートに合計10時間かけてAppleWatch実機で”HelloWorld”
- (1)ボタンをタップするとテキストが変化
- (2)複数ページからなるアプリ
- (3)実機テストで”Your maximum App ID limit has been reached. You may create up to 10 App IDs every 7 days”が出たら2個目のAppleIDを新規作成してそのIDでwatchOSアプリを作成し実機テストを行う
- (4)じゃんけんアプリ
- (5)作曲アプリGarageBandでmp3ファイルを作成
- (6)音を出すアプリを作ってみる
- (7)HealthKitを設定して心拍数を表示するアプリを実機で動かす
開発環境
MacBookAir (M1, 2020)
macOS Big Sur 11.6
git version 2.30.1 (Apple Git-130) (最初から入っていたもの)
xcode-select version 2384.
Homebrew 3.2.13
VisualStudioCode 1.60.2
iPhone12mini, iOS 15.0
AppleWatch Series 6, watchOS 8.0
新規watchOSアプリの作成
Xcodeを起動し、「Create a new Xcode project」をクリックします。
![](https://i-doctor.sakura.ne.jp/font/wp-content/uploads/2021/10/3119b91637d9770025c0d8299dff82c2.png)
watchOS > Watch App > Next の順にクリックします
![](https://i-doctor.sakura.ne.jp/font/wp-content/uploads/2021/10/0fdbc1be88fbd0f80057e3248e6f16eb.png)
プロジェクト名を入力して、Next をクリックします。
![](https://i-doctor.sakura.ne.jp/font/wp-content/uploads/2021/10/e8b49716166836d743ab58db80d7f780.png)
保存場所を選択する画面が出てくるので、
Users > {ユーザ名} > src フォルダを選択(src フォルダを、Documentsと同じ階層に新規作成しておきます)して、Create をクリックします。
場所は、デスクトップでもかまいませんが、あとでデスクトップにたくさんフォルダができるのは見栄えが悪いので、このようにしました。
![](https://i-doctor.sakura.ne.jp/font/wp-content/uploads/2021/10/14e56e348020eda9c870ab542860feca.png)
以下のような画面になるので、とりあえず、Resume を押して、Previewを表示します。
![](https://i-doctor.sakura.ne.jp/font/wp-content/uploads/2021/10/613877e9cd8751b1b466be163c087b0c-1.png)
以下のように、Preview画面が表示されます。
![](https://i-doctor.sakura.ne.jp/font/wp-content/uploads/2021/10/53ef4fed3a281a5a4cce8919ec1a7cad.png)
View > Show LibraryでButtonを追加
ボタンを追加します。
下図のように、13行目の最後でreturnを押して改行し、ボタンを挿入したい部分のコードの部分に、カーソルをあわせます。
![](https://i-doctor.sakura.ne.jp/font/wp-content/uploads/2021/10/image-5.png)
View > Show Library の順にクリックして、
![](https://i-doctor.sakura.ne.jp/font/wp-content/uploads/2021/10/image-6.png)
Viewsのウィンドウが出てくるので、Buttonをクリックします。
![](https://i-doctor.sakura.ne.jp/font/wp-content/uploads/2021/10/db377e343444c6764b9e2fc45a2a455e.png)
![](https://i-doctor.sakura.ne.jp/font/wp-content/uploads/2021/10/fb7ea39fa9a1085d010da6f40c168076.png)
すると、ボタンのコードがContentView.swiftの14行目に挿入され、Preview画面にも、Buttonが表示されます。
![](https://i-doctor.sakura.ne.jp/font/wp-content/uploads/2021/10/1c479645d4d98b6d1b7f6cce5be4564c.png)
VStackを用いてテキストとボタンを縦に並べる
![](https://i-doctor.sakura.ne.jp/font/wp-content/uploads/2021/10/image-7.png)
VStackで、テキストやボタンを縦に並べることができます。
VStack(alignment: .center) {
Text("Hello, world!")
.padding()
Text("Apple Watch")
.padding()
}
今回は、以下のようにします。
VStack() {
Text("Hello, World!")
.padding()
Button(action: {}) {
Text("Button")
}
すると、一つの画面に、テキストとボタンが縦に並びました。
![](https://i-doctor.sakura.ne.jp/font/wp-content/uploads/2021/10/image-8.png)
参考:https://swiftui.i-app-tec.com/ios/vstack.html
[SwiftUI] VStackの配置、余白、背景色等の設定 2021/3/9
ボタンを押すとテキスト表示が変更されるようにする
“state”というものを利用するそうです。
![](https://i-doctor.sakura.ne.jp/font/wp-content/uploads/2021/10/image-9.png)
具体的には、以下のようにコードを変更します。
struct ContentView: View {
@State var outputText = "Hello, World2!"
var body: some View {
VStack() {
Text(outputText)
.padding()
Button(action: {
outputText = "Hi Swift!"
print("デバッグテスト")
print(outputText)
}) {
/*@START_MENU_TOKEN@*/Text("切り替えボタン")/*@END_MENU_TOKEN@*/
}
}
}
}
上記コードを変更した後、Preview画面の右上の”Resume”をクリックすると、しばらくすると、以下のような画面になります。
![](https://i-doctor.sakura.ne.jp/font/wp-content/uploads/2021/10/image-10.png)
Preview画面で実行(三角のボタン)をクリックした後、画面内の「切り替えボタン」を押すと、上のテキストが、ちゃんと”Hi Swift!”に変わるのが確認できます。
![](https://i-doctor.sakura.ne.jp/font/wp-content/uploads/2021/10/59b217308ee90a43a82fac773096a84b.png)
Buttonの色を変える
Canvasエリアでボタンをクリックした状態で、Inspectorsエリアの下の方の、”Add Modifier”の中にtint と入れて、tintを選択し、blueを選択します。(または、その左側のEditor Areaにコードを以下のように書き込みます。)
.tint(.blue)
.buttonStyle(.bordered)
![](https://i-doctor.sakura.ne.jp/font/wp-content/uploads/2021/10/21763140fc24199e98c696bde7784aef.png)
![](https://i-doctor.sakura.ne.jp/font/wp-content/uploads/2021/10/image-11.png)
最終的なContentView.swiftは以下のようになります。
import SwiftUI
struct ContentView: View {
@State var outputText = "Hello, World2!"
var body: some View {
VStack() {
Text(outputText)
.padding()
Button(action: {
outputText = "Hi Swift!"
print("デバッグテスト")
print(outputText)
}) {
/*@START_MENU_TOKEN@*/Text("切り替えボタン")/*@END_MENU_TOKEN@*/
}
.tint(.blue)
.buttonStyle(.bordered)
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
Group {
ContentView()
}
}
}
参考:[SwiftUI] Button を簡単に作成する(2021/3/9)
https://stackoverflow.com/questions/58928774/button-border-with-corner-radius-in-swift-ui
実機での確認
ToolBarのところをクリックして、「Button2 WatchKit App」>「○○のApple Watch via ○○さんのiPhone」の順にクリックします。
![](https://i-doctor.sakura.ne.jp/font/wp-content/uploads/2021/10/89e346557d693c184599aa003c8f08f2.png)
その後、ToolBarの左側の「▲」ボタンをクリックすると、ビルドが始まり、数十秒か数分待つと、自動的にAppleWatchにこのアプリが表示されます。
![](https://i-doctor.sakura.ne.jp/font/wp-content/uploads/2021/10/4d35a8085ddd2e0d0ca7c2dfc2e59e6d.png)
![](https://i-doctor.sakura.ne.jp/font/wp-content/uploads/2021/10/incoming-B3B8BE38-86AC-4B00-9DC1-DE6272E82484.png)
ディスカッション
コメント一覧
まだ、コメントがありません