メインコンテンツへスキップ

@capgo/capacitor-widget-kit

SVGフレーム、タイマー、アクションホットスポット、フルネイティブのウィジェット状態同期を使って、Capacitor から WidgetKit と Live Activity のサーフェスを構築。

SVGフレーム、タイマー、アクションホットスポット、フルネイティブのウィジェット状態同期を使って、Capacitor から WidgetKit と Live Activity のサーフェスを構築。

まずはこちらから areActivitiesSupported() および以下に示すその他のコアメソッド。

プラットフォームサポート備考
iOSとはいネイティブ
Androidはいネイティブ
WebいいえCapacitor.getPlatform() でガード

Siri、ショートカット、App Intents

「Siri、Shortcuts、およびApp Intents」セクション

Widget Kitは、 決して SiriやShortcutsとのブリッジです。WidgetKit、ActivityKitによるLive Activitiesテンプレート、およびiOSのインタラクティブなコントロールを、同梱された LiveActivityIntent 型(CapgoTemplateActionIntent, CompleteSetIntent)を通じてサポートしており、保存されたテンプレートの状態を更新し、テンプレートの イベントログに追記します (listTemplateEvents / acknowledgeTemplateEvents).

また、 決して カスタムショートカットフレーズの登録、 AppShortcutsProviderJavaScriptエンティティカタログ、Spotlightアイテム、またはAppleアプリスキーマ。これらには @capgo/capacitor-app-intents を使用します。以下のようなツールとの詳細な比較は expo-app-intents次を参照してください: Siri、ショートカット、ウィジェット.

テンプレートウィジェットの状態と、Capacitorから制御されるコントロールを示すAnimated WidgetKitデモ
ウィジェットテンプレートのフロー
モード最適な用途主要API
SVGテンプレート・アクティビティSVG出力から描画されるLive Activitiesまたはウィジェット画面startTemplateActivity, performTemplateAction, listTemplateEvents
フルネイティブ・ウィジェット・セッション共有状態や非同期ジョブが必要なネイティブ描画ウィジェットstartWidgetSession, updateWidgetSession, sendWidgetMessage

両方のモードを同じアプリ内で併用できます。例えば、ワークアウトアプリにおいて、フレームやタイマーの素早い操作にはSVG Live Activityを使用し、よりリッチなネイティブレイアウトを持つホーム画面ウィジェットにはフルネイティブ・ウィジェット・セッションを使用するといった構成が可能です。

SVGテンプレートには、インタラクティブなウィジェット画面に必要な以下の要素が含まれています:

  • frames 次のような名前付きSVGバリアントを保持します: summary, timer、または details.
  • frameMutations ホットスポットのアクション後に、switch、toggle、またはフレームのステップ実行を行います。
  • timerMutations タイマーの開始、一時停止、再開、切り替え、リセット、停止、または継続時間の変更を行います。
  • patches リテラル値、テンプレート、タイムスタンプ、インクリメント、トグル、またはunset操作を使用してJSONの状態を更新します。
  • hotspots タップエリアをアクション識別子にマッピングします。
  • listTemplateEvents アプリがウィジェット経由のアクションを後で処理できるようにします。

ランタイムは、次のようなプレースホルダーを解決します: {{state.title}}, {{timers.rest.remainingText}}や {{meta.template.kind}} ネイティブブリッジがレンダリング用のサーフェスを返す前に実行されます。

フルネイティブブリッジ機能

「Full-Native Bridge Capabilities」セクション

フルネイティブセッションは、独自のUIをネイティブで描画するウィジェット向けです:

  • startWidgetSession ネイティブウィジェット code 用の共有状態とメタデータを作成します。
  • updateWidgetSession 状態をマージまたは置換し、セッションを再度アクティブにします。
  • stopWidgetSession 最終状態を記録し、セッションを停止状態にします。
  • sendWidgetMessage アプリからウィジェット、またはウィジェットからアプリへのタスクをキューに追加します。
  • acknowledgeWidgetMessages メッセージを受信済みとしてマークします。
  • completeWidgetMessage 非同期ジョブのレスポンスまたは失敗を保存します。

完了後のメッセージは冪等(べきとう)です。完了または失敗したメッセージを再試行しても、上書きされずに既存の結果が返されます。

メソッド説明
areActivitiesSupported現在のデバイスでネイティブのテンプレートアクティビティブリッジが動作するか確認します。
startTemplateActivitySVGテンプレートアクティビティを保存し、ネイティブの Live Update ブリッジを開始します。
updateTemplateActivityアクティビティの定義、状態、または開くURLを更新します。
endTemplateActivity実行中のアクティビティを終了し、必要に応じて最後に状態のスナップショットを保存します。
performTemplateAction宣言的なパッチ、フレームの変更、タイマーの変更、およびイベントログを実行します。
getTemplateActivity保存されているテンプレートアクティビティを1つ読み込みます。
listTemplateActivities保存されているすべてのテンプレートアクティビティを一覧表示します。
listTemplateEventsテンプレートアクションから発行されたアクションイベントを読み取ります。
acknowledgeTemplateEventsテンプレートイベントを処理済みとしてマークします。
startWidgetSession共有JSON状態を使用したフルネイティブのウィジェットセッションを開始します。
updateWidgetSessionフルネイティブのウィジェットセッションの状態をマージまたは置換します。
stopWidgetSessionフルネイティブのウィジェットセッションを停止し、必要に応じて最終状態を保存します。
getWidgetSessionフルネイティブウィジェットのセッションを1件読み取ります。
listWidgetSessionsフルネイティブウィジェットのセッションをすべて一覧表示します。
sendWidgetMessageアプリとネイティブウィジェット code の間のメッセージをキューに追加します。
listWidgetMessagesキューにあるブリッジメッセージを一覧表示します。
acknowledgeWidgetMessagesブリッジメッセージを確認済みとしてマークします。
completeWidgetMessage非同期ブリッジメッセージを完了または失敗させます。
getPluginVersionプラットフォーム実装のバージョンマーカーを返します。

このプラグインには、ウィジェットターゲット向けのネイティブヘルパーも同梱されています:

  • CapgoTemplateWidgetBridge SVGテンプレートのサーフェスを以下に解決します: svg, frameId, hotspots、およびメタデータ。
  • CapgoTemplateActionIntent インタラクティブなiOSウィジェットのボタンを、テンプレートのアクションに接続します。
  • CapgoNativeWidgetBridge ネイティブウィジェットの code から、フルネイティブのセッションとメッセージを読み込みます。
  • Androidのテンプレートヘルパーは、対応するアクションレシーバーとウィジェットブリッジの動作を提供します。

API のリファレンスは、以下から同期されます: src/definitions.ts プラグインリポジトリ内。

@capgo/capacitor-widget-kit から続ける

「@capgo/capacitor-widget-kit からの継続」セクション

使用している場合 @capgo/capacitor-widget-kit CI/CD自動化を計画するには、次と連携してください @capgo/capacitor-widget-kit の使用 「@capgo/capacitor-widget-kit の使用」のネイティブ機能については、 Capgo での CI/CD 設定 Capgo CI/CDでのプロダクトワークフローについては、 Capgo Native Build Capgo Native Buildsでのプロダクトワークフローについては、 Capgo インテグレーション Capgo Integrations でのプロダクトワークフロー、および CI/CD 連携 CI/CD Integration での実装詳細については。