watchOSアプリの作成

GitHub

このプラグインのインストールステップとフルマークダウンガイドを含むセットアッププロンプトをコピーしてください。

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

前提条件

開始する前に、以下を確認してください。

Xcode 15 またはそれ以降 (Mac App Storeからダウンロード)
macOS Sonoma またはそれ以降 (最新のwatchOS SDK)
既存のCapacitor iOSプロジェクト (run 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 がプロジェクトをインデックス化するのを待つ

ワークスペースには、プロジェクトに必要なCocoaPodsの依存関係が含まれています。

ステップ 2: watchOS のターゲットを追加する Xcode で、
ファイル → 新規 → ターゲット…
- テンプレートの選択者に進みます。 watchOS を選択します 上部のタブ
- 選択 アプリ
- クリック次へ
時計アプリの設定
- 製品名: MyWatch (または好みの名前)
- チームApple Developerチームを選択
- 組織識別子iOSアプリと一致するものを選択 app.capgo)
- Bundle Identifier: app.capgo.myapp.watchkitapp)
- Language:
- SwiftUser Interface
- : SwiftUI
- Watch App Type : App (
- Existing iOS App ) 時計機能を含める (必要な場合を除き)
クリック完了
「MyWatch」スキームを有効化するかどうか」という質問が出た場合、クリック 有効化

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

プロジェクトナビゲーター（左側のサイドバー）で、プロジェクト（上部の青いアイコン）を選択
ターゲットリストから、時計ターゲット（例：「MyWatch」）を選択
以下の 一般設定 タブ:
- 表示名: アプリアイコンの下に表示される名前 (例: "My App")
- バンドル識別子: 最後に .watchkitapp
- バージョン: iOS アプリのバージョンと一致
- ビルド: iOS アプリのビルド番号と一致
Go to 署名 & Capabilities タブ:
- 有効化 自動署名を管理
- 選択してください チーム
- コンテキスト:Capgoのマーケティングサイト。役割:短いUIラベルまたはナビゲーションアイテム。ページ/エリア:page sla.astro。メッセージキー`team_plan` (チームプラン)。
Xcodeは自動的にプロビジョニングプロファイルを作成します設定:
- デプロイメント情報最小限のデプロイメント

: watchOS 9.0 またはそれ以降

セクションのタイトル「ステップ 4: Swift Package Manager を使用して CapgoWatchSDK を追加する」 WatchConnector 通信用クラス。

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アプリのターゲット ウォッチターゲットではありません
次に Signing & Capabilitiesタブ タブ
クリック 機能を追加
検索して追加 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)")
をクリックしてください を実行 ボタン (▶️) または Cmd + R
iPhone と Apple Watch の両方で iOS シミュレータが起動します

実機で実行

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

デバッグ → プロセスに接続する

From iPhone (Capacitor) to Watch

iPhone (Capacitor)からWatch

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

トラブルシューティング

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

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

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

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

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

Capgo WatchConnector.shared.activate() アプリライフサイクル初期に呼び出す
iOSではプラグインが自動的に有効化される - プラグインがインポートされていることを確認する
iOSのターゲットにWatchConnectivity機能が追加されていることを確認する

CapgoWatchSDKと関連するビルドエラー

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

シミュレーターの問題

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

次のステップ

API リファレンス API ドキュメントの完了
コミュニケーションパターン使用する方法
例のアプリフルワーキングの例

watchOSアプリの作成から続けて

あなたは watchOSアプリの作成 native プラグインの作業を計画するには、接続する Using @capgo/capacitor-watch native 能力のための Using @capgo/capacitor-watch Capgo プラグインディレクトリ Capgo プラグインディレクトリの製品フロー Capacitor プラグイン by Capgo Capacitor プラグイン by Capgo の実装詳細プラグインの追加または更新プラグインの追加または更新の実装詳細、 Ionic Enterprise プラグインの代替 Ionic Enterprise プラグインの代替の製品フロー