Apple Watchアプリ開発の超絶基礎・通信編 2022版

こんにちは。22卒としてFIXERに入社しました、寺田です。

タイトルにも書いていますが、今回はApple Watchアプリの開発について書いていこうと思います。今回のテーマは「iPhoneとApple Watch間の通信」です。

はじめに

なぜ、Apple Watchアプリの開発について書こうと思ったのか、その理由は単純です。

情報が皆無!!

これに尽きます。「Apple Watchアプリ開発」で検索しても、ヒットする情報は「古い」もしくは「不十分」です。

そのため、いざ開発しようと思っても「結局どうすればいいの?」となってしまうのが現状です。大学生時代の僕がそうでした。

今回は、そんな現状を変える一手として、この記事を投稿させていただきます。

準備物

必要な機材は以下のようになっています。

  • Mac ※必須

PCに関しては、Mac限定となります。(今回利用するXcodeが、Windowsマシンにはインストールできないことが理由です。)

Xcodeのインストール

まず、「Xcode」をMacにインストールしていこうと思います。※すでに「Xcode」をインストールしている方は、飛ばしていただいて大丈夫です。

App Storeを開き、検索タブで「Xcode」と検索してください。すぐにヒットすると思いますので、インストールをお願いします。※容量が大きいので、少し時間がかかります。

プロジェクト作成

Xcodeのインストールが終わりましたら、プロジェクトを作成していきます。

Xcodeを起動すると、以下のような画面が表示されるので、「Create a new Xcode project」を選択してください。

次に、作成するプロジェクトの種類を選択します。Apple Watchを利用するアプリは、以下の2種類に分類されます。

  • Apple Watchのみで動作するアプリ
  • Apple WatchとiPhoneが連携し、動作するアプリ

今回は、後者の「Apple WatchとiPhoneが連携し、動作するアプリ」を作成していきますので、「iOS App with Watch App」を選択します。選択しましたら、「Next」を押します。

最後に、プロジェクトに関する細かい設定を行います。以下のように設定してください。使用言語は「Swift」です。

上図の設定後、「Next」を押すと、プロジェクトが作成されます。

UIの設定

ここからはUIの簡単な設定を行っていきますが、その前に、今回作成するアプリを簡単に説明していきます。

今回作成するアプリは、iPhone側でボタンを押すと、Apple Watch側の数字が、1ずつ増えていくというアプリです。そのため、以下のオブジェクトが必要になります。

iPhone側

  • Apple Watch側の数字を増やすボタン

Apple Watch側

  • iPhone側のボタン押下に合わせて、1ずつ数字を増やすラベル

iPhone側のUI

まず、iPhone側の設定を行います。「Main.storyboard」を開き、以下の操作を行ってください。

上図に示すように「送信」というボタンが表示されたら、iPhone側の設定は完了です。

Apple Watch側のUI

次に、Apple Watch側の設定を行います。「Interface.storyboard」を開き、以下の操作を行ってください。

上図に示すように「カウント」というラベルが表示されたら、Apple Watch側の設定は完了です。

コーディング・iPhone側の処理

UIの設定も完了したので、ここからはコードを書いていきます。(本章で利用するファイルは「ViewController.swift」です。)

コードを書くにあたり、まず、オブジェクトを「ViewController.swift」に接続します。今回は、ボタン押下時の処理を記載していくので、ボタンを「ViewController.swift」に接続します。

また、接続時に表示されるダイアログの「Name」は、「sendButton」にしてください。

上図のようになっていることを確認後、「Connect」を押してください。接続が完了すると、「@IBAction func sendButton(_sender Any){ }」というコードが記載されます。

次に、Apple Watchと通信を行うにあたり、必要なフレームワークをインポートします。「ViewController.swift」を以下のように書き換えてください。「WatchConnectivity」、「WCSessionDelegate」を追加する形になります。

ここまで記入すると、以下のようなエラーメッセージが表示されると思うので、「Fix」を押してください。必要なコードが自動で記載されます。

次に、「override func viewDidLoad() { }」内に、以下のコードを記載してください。以下のコードを記載しないと、WCSesssionが機能しないので、ご注意ください。

これで、iPhoneからApple Watchに向け、データを送信するための準備が整いました。

今度は、実際にApple Watchに送信するデータを定義していきます。今回は、Int型の変数を定義し、Apple Watchに送ってみましょう。

「sendInt」という名前の変数を定義してください。

最後に、定義した「sendInt」をApple Watchに送信する処理を記載していきます。「 @IBAction func sendButton(_sender Any){ } 」内に以下のコードを記載してください。ここで記載したコードは、ボタンが押されるたびに実行される処理になります。

これで、ボタンを押すたびに、「sendInt」がApple Watchに送信される処理が完成しました。

コーディング・Apple Watch側の処理

次に、Apple Watch側の処理を記載していきます。 (本章で利用するファイルは「InterfaceController.swift」です。)

まず、iPhone側と同様に「WatchConnectivity」、「WCSessionDelegate」を「InterfaceController.swift 」に追加します。

次に、利用するオブジェクトを 「InterfaceController.swift」に接続します。今回は、ラベルを接続します。接続の流れはiPhone側と同様です。

また、接続時に表示されるダイアログの「Name」は、「receiveLabel」にしてください。

上図のようになっていることを確認後、「Connect」を押してください。

最後に、iPhone側から送られてきたデータをApple Watch側で受け取る処理を記載していきます。以下のコードを記載してください。

これで、iPhone側から送られてきたデータを、Apple Watch側で受け取ることができます。

おわりに

これで、iPhone側でボタンを押すと、Apple Watch側の数字が、1ずつ増えていくアプリが完成しました。

好評でしたら、実機で今回のアプリを動作させる方法や、コードの解説などに関しても別記事として挙げていこうと思います。

FIXER Inc. 寺田 縁
  • FIXER Inc. 寺田 縁
  • (てらだ えにし)

    2022年度入社の文系エンジニアです。座右の銘は「ユーザーの声を聞いているか」です。研究室の先生がおっしゃていた話の意訳になるのですが、開発に夢中になりすぎると自分が実装したいことを優先しそうになるので、この言葉を思い出すようにしています。