こんにちは、”はふぃ”です。
みなさんはApple Watchを持っていますか？
4万円ぐらいするので高いと思うかもしれませんが、SuicaやIDを登録すれば右手をかざすだけでとてもスマートに買い物ができるので、かなり便利でおすすめです！
（これに慣れると携帯を取り出すのすら面倒になります。笑）
せっかくApple Watchを持っているので、Watchアプリを作ってみたい！
ということで今回は Swift を使ったはじめてのWatchアプリ作成について説明します。
※ 普段はWEBエンジニアとして JavaScript を使っているので、 Swift も Xcode を使ったアプリ開発も初です！
ゴール
自由に開発するための環境を整えるという意味で、以下を満たすサンプルアプリを作ってみたいと思います。
- Github に新規リポジトリを作成
- ボタンを押すと数字が増えていくアプリを作成し、シミュレーターを使って動かす
開発手順
新規プロジェクト作成
まずは Xcode を起動しましょう。
起動したら「Create a new Xcode Project」を選択し、新しいプロジェクトの作成をはじめます。
テンプレートを選択する画面が表示されるので、「watchOS」のタブを選択して「iOS App with WatchKit App」を選択します。
次にプロジェクトの情報を入力する画面になるので、それぞれ入力しましょう。
※ 今回は一番下のチェックは全て外しておいて大丈夫です
フォルダをどこに作成するか選択する画面になるので、今回作成するプロジェクトのフォルダを作成したい場所を選びます。
この時、「Create Git repository on my Mac」にチェックを入れてください。
これで新規プロジェクトの作成ができました！
Githubに新規リポジトリ作成
続いてGithubを使ってバージョン管理を行うための設定をしていきます。
まず、メニューの「Source Control > Create Git Repositories…」を押すと以下のような画面が出ると思うので、”create”ボタンを押します。
すると、左サイドメニューの左から２番目の項目を選択した項目が以下のようになっていると思います。
一番上の水色のフォルダを右クリックして、「Create “sampleWatchApp” Remote…」を選択します。
項目を埋めて”create”ボタンを押すと、Githubに新規リポジトリが作成されます。
watchアプリの作成
ここから”ボタンを押すと数字が増えていくアプリ”の制作に移っていきます。
左サイドメニューの「sampleWatchApp > sampleWatchApp WatchKit App > interface.storyboard」を選択します。
真ん中に移っている AppleWatch の画面に”Label”と”Button”を追加していきます。
画面上にある円の中に正方形が描かれたマークをクリックすると要素を検索する画面が表示されるので、まずは”Label”を検索します。
一番上の「Label Label – Display a static text string.」と書かれた項目をドラッグ＆ドロップしてAppleWatchの画面に Label を置きます。
同じ流れで “Button” も検索して配置します。
続いて、メニューの「View > Assistant Editor > Show Assistant Editor」を選択してプログラムを表示します。
controlボタンを押しながら“Label”をプログラムの方へドラッグ＆ドロップすると以下のような項目が表示されるので、Labelのオブジェクト名を設定します。
“connect”ボタンを押すと、プログラムに以下の一文が追加されていると思います。
@IBOutlet weak var sampleLabel: WKInterfaceLabel!
これでLabelのオブジェクトが作成されました。
次に「ボタンが押された時に実行する処理」を実装するために、先ほどと同じように今度は”Button”をcontrolボタンを押しながらドラッグ＆ドロップします。
すると今度は先ほどとは異なる項目が表示されるので、メソッド名を設定します。
すると以下のような文がプログラムに追加されます。
@IBAction func onTapButton() {
}
次に左サイドメニューの「sampleWatchApp WatchKit Extension > InterfaceController.swift」を選択します。
するとプログラムが表示され、先ほど設定した “onTapButton” があると思うので、その中にボタンを押した時の処理を記入します。
var count = 0
@IBAction func onTapButton() {
count += 1
sampleLabel.setText("\(count)")
}
これで実装が完了しました！
シミュレーターを使ったテスト
アプリの実装が完了したので、正常に動作するかどうかをシミュレーターを使ってテストします。
以下の画像のようにシミュレートしたいiOS端末を選択し、▶︎ボタンを押してシミュレーターを起動します。
初回はスタンバイに時間がかかりますが、しっかり待てば以下のようにAppleWatch上での動きをシミュレートできます。
まとめ
基礎中の基礎のアプリですが、シミュレーターでも動いているのを見ると楽しいですね！
商品詳細
参考
以下のサイトの内容をかなり参考にさせていただきました。