メインコンテンツにジャンプ

WatchOSアプリの作成

GitHub

CapgoWatchSDKを統合し、SwiftUIを使用して機能するウォッチアプリを作成するまでのプロセスを説明します。

前提条件

前提条件

始める前に、以下の条件を満たしてください。

  • Xcode 15 またはそれ以降 Mac App Store からダウンロード
  • macOS Sonoma またはそれ以降 (for latest watchOS SDK)
  • 既存のCapacitor iOS プロジェクト (__CAPGO_KEEP_0__を実行してください) npx cap add ios あなたがまだしていない場合)
  • Apple Developerアカウント (無料アカウントは開発用に機能します)

このガイドを完了した後、プロジェクトの構造は次のようになります:

  • ディレクトリios/
    • ディレクトリApp/
      • ディレクトリApp/ (あなたの主なiOSアプリ)
      • App.xcodeproj
      • App.xcworkspace (プロジェクトを開くにはこちらを使用)
      • Podfile
    • ディレクトリMyWatch/ (新しいウォッチアプリ)
      • ディレクトリMyWatch/ (ウォッチアプリソース)
        • MyWatchApp.swift
        • ContentView.swift
        • ディレクトリAssets.xcassets/
      • MyWatch.xcodeproj

ステップ 1: Xcode で iOS プロジェクトを開く

ステップ 1: Xcode で iOS プロジェクトを開く
  1. あなたの Capacitor プロジェクトの ios/App フォルダ
  2. 開く App.xcworkspace (ダブルクリックで開くことができるのは、 .xcodeproj
  3. プロジェクトをインデックス化するのを待つ

ステップ 2: watchOS のターゲットを追加する

ステップ 2: watchOS のターゲットを追加する
  1. Xcode で ファイル → 新規 → ターゲット…

  2. テンプレートの選択肢で

    • watchOS を選択します watchOS 上部のタブ
    • 選択 アプリ
    • クリック 次へ
  3. 時計アプリの設定

    • 製品名: MyWatch (またはあなたの好きな名前)
    • チームApple Developerチームを選択してください
    • 組織識別子iOSアプリと一致するようにしてください app.capgo)
    • Bundle ID: 生成されます (例えば、 app.capgo.myapp.watchkitapp)
    • 言語:
    • Swiftユーザーインターフェイス
    • SwiftUIウォッチアプリの種類
    • : iOS用の既存のアプリ用のアプリ (App) ではありません 選択を外す 通知シーンを含める
    • (必要な場合は除く) 時計拡張機能を追加 (必要に応じて)
  4. クリック 完了

  5. 「MyWatch」スキームを有効化するかどうか”と尋ねられたら 有効化

ステップ 3: 時計アプリ設定の構成

「ステップ 3: 時計アプリ設定の構成」セクション
  1. プロジェクトナビゲータ(左側のサイドバー)で、プロジェクトを選択(上部の青いアイコン)

  2. 時計ターゲット(例:「MyWatch」)を選択

  3. 「一般」 「一般」セクション タブ:

    • 表示名: アプリアイコンの下の表示名 (例: "My App")
    • バンドル識別子: 最後に .watchkitapp
    • バージョン: iOS アプリのバージョンと一致
    • ビルド: iOS アプリのビルド番号と一致
  4. Go to 署名 & Capabilities タブ:

    • 有効にする 自動署名を管理する
    • 選択する チーム
    • チームプラン
  5. Xcodeは自動的にプロビジョニングプロファイルを作成します 設定:

    • デプロイメント情報最小限のデプロイメント

CapgoWatchSDKは、Swift Package Managerを使用してCapgoWatchSDKを追加するステップ 4 WatchConnector 通信用クラス。

  1. In Xcode、次の手順に進みます。 ファイル → パッケージ依存関係の追加…

  2. 検索フィールドに次の文字列を入力します。

    https://github.com/Cap-go/capacitor-watch.git
  3. Enterキーを押して、Xcodeがパッケージを取得するのを待ちます。

  4. パッケージの設定:

    • 依存関係のルール: 「メジャーバージョン以降」に「8.0.0」
    • 追加 追加する製品を選択します。
  5. 依存関係のルール

    • 重要: 以下のものを選択してください CapgoWatchSDK
    • 「MyWatch」などの ウォッチのターゲット iOSアプリではなく
    • クリック パッケージを追加

Step 5: Watchアプリの実装

Step 5: Watchアプリの実装

さて、Watchアプリを作成しましょう code. 以下のファイルを置き換えてください。

5.1 アプリのエントリポイントを作成

5.1 アプリのエントリポイントを作成

編集 MyWatch/MyWatchApp.swift:

import SwiftUI
import CapgoWatchSDK
@main
struct MyWatchApp: App {
init() {
// Activate WatchConnectivity when app launches
WatchConnector.shared.activate()
}
var body: some Scene {
WindowGroup {
ContentView()
}
}
}

5.2 メインビューを作成

5.2 メインビューを作成

編集 MyWatch/ContentView.swift:

import SwiftUI
import CapgoWatchSDK
struct ContentView: View {
// Observe the WatchConnector for automatic UI updates
@ObservedObject var connector = WatchConnector.shared
// Local state
@State private var messageText = ""
@State private var statusMessage = "Ready"
var body: some View {
ScrollView {
VStack(spacing: 16) {
// Connection Status
ConnectionStatusView(connector: connector)
Divider()
// Message Input
TextField("Message", text: $messageText)
.textFieldStyle(.roundedBorder)
// Send Buttons
HStack {
Button("Send") {
sendMessage()
}
.disabled(!connector.isReachable || messageText.isEmpty)
Button("Request") {
sendWithReply()
}
.disabled(!connector.isReachable || messageText.isEmpty)
}
Divider()
// Status
Text(statusMessage)
.font(.caption)
.foregroundColor(.secondary)
// Last Received Message
if !connector.lastMessage.isEmpty {
VStack(alignment: .leading) {
Text("Last Message:")
.font(.caption)
.foregroundColor(.secondary)
Text(formatMessage(connector.lastMessage))
.font(.caption2)
}
.frame(maxWidth: .infinity, alignment: .leading)
}
}
.padding()
}
}
private func sendMessage() {
connector.sendMessage(["text": messageText, "timestamp": Date().timeIntervalSince1970])
statusMessage = "Message sent"
messageText = ""
}
private func sendWithReply() {
connector.sendMessage(["text": messageText, "needsReply": true]) { reply in
DispatchQueue.main.async {
statusMessage = "Reply: \(formatMessage(reply))"
}
}
messageText = ""
}
private func formatMessage(_ message: [String: Any]) -> String {
message.map { "\($0.key): \($0.value)" }.joined(separator: ", ")
}
}
// Separate view for connection status
struct ConnectionStatusView: View {
@ObservedObject var connector: WatchConnector
var body: some View {
HStack {
Circle()
.fill(connector.isReachable ? Color.green : Color.red)
.frame(width: 12, height: 12)
Text(connector.isReachable ? "Connected" : "Disconnected")
.font(.headline)
Spacer()
if connector.isActivated {
Image(systemName: "checkmark.circle.fill")
.foregroundColor(.green)
}
}
}
}
#Preview {
ContentView()
}

Step 6: WatchConnectivity用のiOSアプリの設定

Step 6: iOSアプリのWatchConnectivity設定

iOSアプリもWatchConnectivity機能が必要です。

  1. プロジェクトナビゲーターでプロジェクトを選択してください

  2. プロジェクト iOSアプリのターゲット ウォッチターゲットではありません

  3. 設定 署名 & 能力 タブ

  4. クリック 機能追加

  5. 機能を検索して追加 WatchConnectivity (利用可能であれば) または自動的に追加されるかもしれません

  6. The Capacitor plugin handles the iOS side automatically, but ensure your Info.plist has:

    <key>WKCompanionAppBundleIdentifier</key>
    <string>app.capgo.myapp.watchkitapp</string>

ステップ 7: ビルドと実行

ステップ 7: ビルドと実行

シミュレータで実行

シミュレータで実行
  1. Xcodeウィンドウの上部のスキームセレクターから、ウォッチ用のスキームを選択してください

  2. ウォッチ用のシミュレータを選択してください

    • デバイスセレクターの右側のデバイスをクリックしてください
    • Apple Watchシミュレータを選択してください (例: "Apple Watch Series 9 (45mm)")
  3. iPhoneとApple Watchの両方でiOSシミュレータを起動するには、 実行 ボタン (▶️) をクリックするか、 Cmd + R

  4. iPhoneとApple Watchの両方でiOSシミュレータを起動するには、

  1. iPhoneをUSBで接続する

  2. iPhoneとApple Watchがペアリングされていることを確認する

  3. ウォッチスキームを選択する

  4. 実機のApple Watchをデバイスリストから選択する

  5. 実行 実行

  6. 初回:両方のデバイスでコンピュータを信頼する必要がある場合があります

ステップ8: 通信のテスト

ステップ8: 通信のテスト

Capacitorアプリ内で:

import { CapgoWatch } from '@capgo/capacitor-watch';
// Check connection
const info = await CapgoWatch.getInfo();
console.log('Watch reachable:', info.isReachable);
// Send a message
if (info.isReachable) {
await CapgoWatch.sendMessage({
data: { action: 'update', value: 'Hello from iPhone!' }
});
}

ウォッチからiPhoneへ

「ウォッチからiPhoneへ」

ウォッチアプリは WatchConnector:

// Send message (fire and forget)
WatchConnector.shared.sendMessage(["action": "buttonTapped"])
// Send message with reply
WatchConnector.shared.sendMessage(["request": "getData"]) { reply in
print("Got reply: \(reply)")
}

iPhoneでメッセージを処理する

「iPhoneでメッセージを処理する」
// Listen for messages from watch
await CapgoWatch.addListener('messageReceived', (event) => {
console.log('Message from watch:', event.message);
// { action: 'buttonTapped' }
});
// Handle messages that need a reply
await CapgoWatch.addListener('messageReceivedWithReply', async (event) => {
console.log('Request from watch:', event.message);
// Send reply back
await CapgoWatch.replyToMessage({
callbackId: event.callbackId,
data: { status: 'success', items: ['item1', 'item2'] }
});
});

高度な機能:カスタムデリゲートによる制御の向上

「高度な機能:カスタムデリゲートによる制御の向上」

制御が必要な場合は実装 WatchConnectorDelegate:

import SwiftUI
import CapgoWatchSDK
class WatchHandler: WatchConnectorDelegate {
func didReceiveMessage(_ message: [String: Any]) {
print("Received: \(message)")
// Handle incoming message
}
func didReceiveMessageWithReply(_ message: [String: Any],
replyHandler: @escaping ([String: Any]) -> Void) {
print("Received request: \(message)")
// Process and send reply
replyHandler(["status": "processed"])
}
func didReceiveApplicationContext(_ context: [String: Any]) {
print("Context updated: \(context)")
}
func didReceiveUserInfo(_ userInfo: [String: Any]) {
print("User info received: \(userInfo)")
}
func reachabilityDidChange(_ isReachable: Bool) {
print("Reachability changed: \(isReachable)")
}
func activationDidComplete(with state: WCSessionActivationState) {
print("Activation completed: \(state.rawValue)")
}
}
// In your app setup:
let handler = WatchHandler()
WatchConnector.shared.delegate = handler
WatchConnector.shared.activate()

トラブルシューティング

Section titled “Troubleshooting”

Watch App が時計上に表示されない

Section titled “Watch App が時計上に表示されない”
  1. Bundle ID が正しく関連付けられていることを確認する (時計アプリの Bundle ID は iOS アプリの Bundle ID +) .watchkitapp)
  2. 両方のアプリが同じチームで署名されていることを確認する
  3. 物理デバイス上: iPhone で Watch アプリを開く → My Watch → アプリを探してスクロール → アプリを ON に切り替える

Section titled “Messages Not Being Received”

メッセージが受信されない
  1. Section titled “メッセージが受信されない”
  2. 両方のアプリが WCSession を有効にしていることを確認する isReachable 確認する
  3. メッセージを送信する前に transferUserInfo の代わりに sendMessage
  4. 他のデバイスがメッセージを送信する前にリスナが登録されていることを確認する

セッションが有効化されていない

セクション「セッションが有効化されていない」
  1. 「セッションが有効化されていない」エラー WatchConnector.shared.activate() Call
  2. アプリのライフサイクルが早い段階で
  3. iOSではプラグインが自動的に有効化されるため、プラグインがインポートされていることを確認する

iOSのターゲットにWatchConnectivity機能が追加されていることを確認する

CapgoWatchSDKと関連するビルドエラー
  1. セクション「CapgoWatchSDKと関連するビルドエラー」 パッケージがwatchターゲットに追加されていることを確認するiOSターゲットではない
  2. Clean buildフォルダ: Product → Clean Build Folder (Cmd + Shift + K)
  3. パッケージキャッシュをリセット: File → Packages → Reset Package Caches

Simulatorの問題

Simulatorの問題
  1. シミュレータをリセット: Device → Erase All Content and Settings
  2. iOSとwatchOSのシミュレータは互換性のあるペアであることを確認する
  3. 両方のシミュレータが実行されている必要があります。通信が機能するため

Capgo Builder / ネイティブクラウドビルド製品ページ Capgo Builder / ネイティブクラウドビルド製品ページ native プラグインの作業を計画するには、 Using @capgo/capacitor-watch native 能力のために Using @capgo/capacitor-watch Capgo プラグイン ディレクトリ Capgo プラグイン ディレクトリの製品フロー Capacitor プラグイン by Capgo Capacitor プラグイン by Capgo の実装詳細 プラグインの追加または更新 プラグインの追加または更新の実装詳細、 Ionic Enterprise プラグインの代替 Ionic Enterprise プラグインの代替の製品フロー