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 プロジェクトを開く

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

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

Xcode で ファイル → 新規 → ターゲット…
テンプレートの選択肢で
- watchOS を選択します watchOS 上部のタブ
- 選択 アプリ
- クリック次へ
時計アプリの設定
- 製品名: MyWatch (またはあなたの好きな名前)
- チームApple Developerチームを選択してください
- 組織識別子iOSアプリと一致するようにしてください app.capgo)
- Bundle ID: 生成されます (例えば、 app.capgo.myapp.watchkitapp)
- 言語:
- Swiftユーザーインターフェイス
- SwiftUIウォッチアプリの種類
- : iOS用の既存のアプリ用のアプリ (App) ではありません 選択を外す 通知シーンを含める
- (必要な場合は除く) 時計拡張機能を追加 (必要に応じて)
クリック完了
「MyWatch」スキームを有効化するかどうか”と尋ねられたら 有効化

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

プロジェクトナビゲータ（左側のサイドバー）で、プロジェクトを選択（上部の青いアイコン)
時計ターゲット（例：「MyWatch」）を選択
「一般」 「一般」セクション タブ:
- 表示名: アプリアイコンの下の表示名 (例: "My App")
- バンドル識別子: 最後に .watchkitapp
- バージョン: iOS アプリのバージョンと一致
- ビルド: iOS アプリのビルド番号と一致
Go to 署名 & Capabilities タブ:
- 有効にする 自動署名を管理する
- 選択する チーム
- チームプラン
Xcodeは自動的にプロビジョニングプロファイルを作成します設定:
- デプロイメント情報最小限のデプロイメント

: watchOS 9.0 またはそれ以降

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

In Xcode、次の手順に進みます。 ファイル → パッケージ依存関係の追加…
検索フィールドに次の文字列を入力します。
```
https://github.com/Cap-go/capacitor-watch.git
```
Enterキーを押して、Xcodeがパッケージを取得するのを待ちます。
パッケージの設定:
- 依存関係のルール: 「メジャーバージョン以降」に「8.0.0」
- 追加 追加する製品を選択します。
依存関係のルール
- 重要: 以下のものを選択してください CapgoWatchSDK
- 「MyWatch」などの ウォッチのターゲット iOSアプリではなく
- クリック パッケージを追加

Step 5: Watchアプリの実装

さて、Watchアプリを作成しましょう 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()
}

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

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

プロジェクトナビゲーターでプロジェクトを選択してください
プロジェクト iOSアプリのターゲット ウォッチターゲットではありません
設定 署名 & 能力 タブ
クリック 機能追加
機能を検索して追加 WatchConnectivity (利用可能であれば) または自動的に追加されるかもしれません
The Capacitor plugin handles the iOS side automatically, but ensure your Info.plist has:
```
<key>WKCompanionAppBundleIdentifier</key>
<string>app.capgo.myapp.watchkitapp</string>
```

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

シミュレータで実行

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

実機で実行

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

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

From iPhone (Capacitor) to Watch

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

トラブルシューティング

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

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

Section titled “Messages Not Being Received”

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

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

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

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

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

Simulatorの問題

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

次のステップ

API リファレンス API ドキュメントの完了
コミュニケーションパターン各メソッドの使用時期
例のアプリ機能する完全な例

Creating a watchOS App から続けて

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 プラグインの代替の製品フロー