watchOSアプリの作成

このプラグインのインストールステップとフルマークダウンガイドを含むセットアップ用の質問をコピーする。

このガイドでは、Xcodeでプロジェクトを設定し、CapgoWatchSDKを統合し、SwiftUIを使用して機能するウォッチアプリを作成する方法について説明します。

前提条件

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

Xcode 15 またはそれ以降 (Mac App Storeからダウンロード)
macOS Sonoma またはそれ以降 (最新のwatchOS SDK)
既存のCapacitor iOSプロジェクト (実行) 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

Step 1: iOS プロジェクトを開く

Navigate to your Capacitor project’s ios/App フォルダ
を開く App.xcworkspace (フォルダ .xcodeproj)をダブルクリックして開く
Xcode がプロジェクトをインデックス化するのを待つ

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

Xcodeで ファイル → 新規作成 → ターゲット…
テンプレート選択画面で
- watchOS watchOS 上部のタブ
- 選択 アプリ
- クリック次へ
時計アプリの設定:
- 製品名: MyWatch (または好みの名前)
- チーム: Apple Developer のチームを選択
- 組織識別子: iOS アプリと一致するようにしてください (例えば app.capgo)
- Bundle Identifier: __CAPGO_KEEP_0__ (自動生成) app.capgo.myapp.watchkitapp)
- Language: Swift
- User Interface: SwiftUI
- Watch App Type: App (既存のiOSアプリ用のAppではない)
- Uncheck 通知シーンを含める (必要に応じて)
- 通知シーンを含めない 複雑な設定を含む (必要な場合を除き)
クリック完了
「MyWatch」スキームを有効にするかどうか”と尋ねられた場合、クリック有効

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

プロジェクトナビゲーター（左側のサイドバー）で、プロジェクトを選択（上部の青いアイコン）
ターゲットリストから「MyWatch」などのウォッチターゲットを選択
「General」に移動 Go to the "General" タブ:
- 表示名: アプリアイコン下の表示名 (例: "My App")
- パッケージ識別子: .watchkitapp
- バージョン: iOS アプリのバージョンと一致
- ビルド: iOS アプリのビルド番号と一致
Go to 署名 & Capabilities タブ:
- 有効化 __CAPGO_KEEP_0__を自動的に署名管理
- __CAPGO_KEEP_0__を選択 __CAPGO_KEEP_0__
- Xcodeは自動的にプロビジョニングプロファイルを作成します
設定 デプロイメント情報:
- 最小限のデプロイメントwatchOS 9.0 またはそれ以降

ステップ 4: Swift Package Managerを使用してCapgoWatchSDKを追加する

CapgoWatchSDKは、すぐに使用できるものを提供します WatchConnector 通信用クラス。

Xcodeに移動し、 ファイル → パッケージ依存関係の追加…

検索フィールドに:

https://github.com/Cap-go/capacitor-watch.git

Enterを押して、Xcodeがパッケージを取得するのを待つ
パッケージの設定:
- 依存関係のルール: 'メジャーバージョン以降' '8.0.0'
- クリック パッケージの追加
追加する製品を選択:
- 重要: には選択してください CapgoWatchSDK
- 追加するには、 目標の (例: “MyWatch”), iOS アプリではなく
- クリック パッケージ追加

ステップ 5: ウォッチアプリを実装する

ウォッチアプリを作成しましょう code. 以下のファイルを置き換えてください:

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 メインビューを作成する」のセクション 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()
}

コピー先のクリップボード

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

プロジェクトナビゲータでプロジェクトを選択してください。
__CAPGO_KEEP_1__ __CAPGO_KEEP_2__のiOSアプリターゲット (時計ターゲットではありません)
Signing & Capabilities タブ Capabilityを追加
Capabilityを検索して追加 WatchConnectivity
__CAPGO_KEEP_3__ WatchConnectivity (if available) または自動的に追加されるかもしれません
CapgoプラグインのCapacitorはiOS側を自動的に処理しますが、Info.plistには以下の設定を確認してください:
```
<key>WKCompanionAppBundleIdentifier</key>
<string>app.capgo.myapp.watchkitapp</string>
```

Step 7: ビルドと実行

シミュレーターで実行

Xcodeウィンドウの上部のスキームセレクターから、ウォッチ用のスキームを選択してください
ウォッチ用のシミュレーターを選択してください:
- スキームの隣のデバイスセレクターをクリックしてください
- Apple Watch用のシミュレーターを選択してください（例：「Apple Watch Series 9 (45mm)」）
クリックして実行ボタン (▶️) または Cmd + R
iPhone と Apple Watch の両方で iOS シミュレータが起動します。

実機で実行

iPhone を USB で接続してください
iPhone とペアリングされている Apple Watch を確認してください
ウォッチのスキームを選択してください
実機の Apple Watch をデバイスリストから選択してください
クリックして実行
初回使用時:両方のデバイスでコンピュータを信頼する必要があるかもしれません

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

iPhone (Capacitor) からウォッチ

あなたの 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まで

ウォッチアプリは 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でメッセージを処理する

// 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()

トラブルシューティング

ウォッチアプリが表示されない

__CAPGO_KEEP_0__が正しく関連付けられていることを確認してください (ウォッチアプリの__CAPGO_KEEP_0__はiOSアプリの__CAPGO_KEEP_0__に等しくしてください) .watchkitapp)
両方のアプリが同じチームで署名されていることを確認してください
物理デバイスで: iPhoneでウォッチアプリを開く → マイウォッチ → アプリを探してスクロール → アプリをオンにします

メッセージが受信されない

両方のアプリでWCSessionが有効になっていることを確認してください
送信する前に isReachable 確実に送信されるようにするには
__CAPGO_KEEP_0__ transferUserInfo その代わりに sendMessage
他のデバイスがメッセージを送る前に、リスナが登録されていることを確認する。

セッションが有効化されていません

コール WatchConnector.shared.activate() アプリのライフサイクルが始まる早い段階で
iOS環境ではプラグインは自動的に有効になります - プラグインがインポートされていることを確認してください。
iOS ターゲットに WatchConnectivity 能力が追加されていることを確認してください。

CapgoWatchSDKによるエラー

パッケージが追加されていることを確認する watch target, iOS へのターゲットを除く
ビルドフォルダをクリーンする: 製品 → ビルドフォルダをクリーンする (Cmd + Shift + K)
パッケージキャッシュをリセットする: ファイル → パッケージ → パッケージキャッシュをリセットする

シミュレーターの問題

シミュレータをリセットする: デバイス → 全てのコンテンツと設定を削除
iOS と watchOS のシミュレータが互換性のあるペアであることを確認する
両方のシミュレータが通信を実行するために動作している必要がある

次のステップ

API リファレンス - API ドキュメントの完了
コミュニケーションパターン - 各メソッドの使用時期
サンプルアプリ - 完全なワーキングエクゼキューション

watchOSアプリの作成

前提条件

プロジェクト構造の概要

Step 1: iOS プロジェクトを開く

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

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

ステップ 4: Swift Package Managerを使用してCapgoWatchSDKを追加する

ステップ 5: ウォッチ アプリを実装する

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

コピー先のクリップボード

コピー先のクリップボード

Step 7: ビルドと実行

シミュレーターで実行

実機で実行

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

iPhone (Capacitor) からウォッチ

ウォッチからiPhoneまで

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

高度な機能：カスタムデリゲートによるより多くの制御

トラブルシューティング

ウォッチアプリが表示されない

メッセージが受信されない

セッションが有効化されていません

CapgoWatchSDKによるエラー

シミュレーターの問題

次のステップ

ステップ 5: ウォッチアプリを実装する

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