> ## Documentation Index
> Fetch the complete documentation index at: https://documentation.onesignal.com/llms.txt
> Use this file to discover all available pages before exploring further.

# クロスプラットフォームLive Activity SDKセットアップ

> Push To StartとDefault Live Activity Typeのサポートを備えた、React Native、Flutter、Unity、Cordovaなどの OneSignalのWrapper SDKでLive Activitiesを実装する方法を学びます。

Live Activitiesは比較的新しいiOS機能であり、ネイティブ実装が必要です。これは、React Native、Flutter、Unity、Cordovaなどのクロスプラットフォームフレームワークを使用する際に課題となる可能性があります。プロセスを簡素化するために、OneSignalのSDKには、ネイティブコードの要件を最小限に抑え、サポートされているプラットフォーム全体でLive Activityの統合を効率化する機能が含まれています。

## 要件

* 最新バージョンのSDK。
* iOS 16.1以降およびiPadOS 17以降
* [.p8 APNsキー](./ios-p8-token-based-connection-to-apns)を使用します。Appleは、Live Activitiesでp12証明書をサポートしていません。
* Xcode 14以降

## セットアップ

### 1. SDKをセットアップ

アプリに最新バージョンのMobile SDKがセットアップされていることを確認してください。Live Activitiesは、WebサイトまたはWeb SDKでは利用できません。

<Columns cols={2}>
  <Card href="./unity-sdk-setup">
    <div style={{ display: 'flex', alignItems: 'flex-start', gap: '1rem' }}>
      <div style={{ flexShrink: 0, width: '40px', height: '40px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <img src="https://mintcdn.com/onesignal/4HyuQPBpu-4xjmQC/images/docs/cms/Docs/docs-unity.png?fit=max&auto=format&n=4HyuQPBpu-4xjmQC&q=85&s=4f65e7750194bcbdc08b8f1549d27eb5" style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain' }} width="96" height="96" data-path="images/docs/cms/Docs/docs-unity.png" />
      </div>

      <div>
        <div style={{ fontWeight: '600', fontSize: '1.1rem', marginBottom: '0.25rem' }}>
          Unity
        </div>

        <div>
          UnityベースのモバイルアプリのクロスプラットフォームSDKガイド。
        </div>
      </div>
    </div>
  </Card>

  <Card href="./react-native-sdk-setup">
    <div style={{ display: 'flex', alignItems: 'flex-start', gap: '1rem' }}>
      <div style={{ flexShrink: 0, width: '40px', height: '40px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <img src="https://mintcdn.com/onesignal/4HyuQPBpu-4xjmQC/images/docs/cms/Docs/docs-react.png?fit=max&auto=format&n=4HyuQPBpu-4xjmQC&q=85&s=dddbb392fdea1f20e0d9e20e6d90098a" style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain' }} width="96" height="96" data-path="images/docs/cms/Docs/docs-react.png" />
      </div>

      <div>
        <div style={{ fontWeight: '600', fontSize: '1.1rem', marginBottom: '0.25rem' }}>
          React Native & Expo
        </div>

        <div>
          React NativeおよびExpo環境のセットアップ手順。
        </div>
      </div>
    </div>
  </Card>

  <Card href="./flutter-sdk-setup">
    <div style={{ display: 'flex', alignItems: 'flex-start', gap: '1rem' }}>
      <div style={{ flexShrink: 0, width: '40px', height: '40px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <img src="https://mintcdn.com/onesignal/4HyuQPBpu-4xjmQC/images/docs/cms/Docs/docs-flutter.png?fit=max&auto=format&n=4HyuQPBpu-4xjmQC&q=85&s=09904d15d1b7bd1c5f902a6101c13a22" style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain' }} width="96" height="96" data-path="images/docs/cms/Docs/docs-flutter.png" />
      </div>

      <div>
        <div style={{ fontWeight: '600', fontSize: '1.1rem', marginBottom: '0.25rem' }}>
          Flutter
        </div>

        <div>
          Dartを使用するFlutterアプリのSDKガイド。
        </div>
      </div>
    </div>
  </Card>

  <Card href="./cordova-sdk-setup">
    <div style={{ display: 'flex', alignItems: 'flex-start', gap: '1rem' }}>
      <div style={{ flexShrink: 0, width: '40px', height: '40px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <img src="https://mintcdn.com/onesignal/4HyuQPBpu-4xjmQC/images/docs/cms/Docs/docs-ionic.png?fit=max&auto=format&n=4HyuQPBpu-4xjmQC&q=85&s=b9e33554d01ff7413f11f9bbf1f4a1b2" style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain' }} width="96" height="96" data-path="images/docs/cms/Docs/docs-ionic.png" />
      </div>

      <div>
        <div style={{ fontWeight: '600', fontSize: '1.1rem', marginBottom: '0.25rem' }}>
          Ionic & Ionic Capacitor
        </div>

        <div>
          IonicおよびCapacitorハイブリッドモバイルアプリのセットアップ。
        </div>
      </div>
    </div>
  </Card>

  <Card href="./net-sdk-setup">
    <div style={{ display: 'flex', alignItems: 'flex-start', gap: '1rem' }}>
      <div style={{ flexShrink: 0, width: '40px', height: '40px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <img src="https://mintcdn.com/onesignal/F6GiolM7XhfdYah_/images/docs/cms/Docs/docs-logo-dotnet.svg?fit=max&auto=format&n=F6GiolM7XhfdYah_&q=85&s=89024e079243d091d9bd6fda0493242d" style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain' }} width="48" height="48" data-path="images/docs/cms/Docs/docs-logo-dotnet.svg" />
      </div>

      <div>
        <div style={{ fontWeight: '600', fontSize: '1.1rem', marginBottom: '0.25rem' }}>
          .NET MAUI
        </div>

        <div>
          .NET MAUIアプリとの統合ガイド。
        </div>
      </div>
    </div>
  </Card>

  <Card href="./huawei-sdk-setup">
    <div style={{ display: 'flex', alignItems: 'flex-start', gap: '1rem' }}>
      <div style={{ flexShrink: 0, width: '40px', height: '40px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <img src="https://mintcdn.com/onesignal/4HyuQPBpu-4xjmQC/images/docs/cms/Docs/docs-huawei.png?fit=max&auto=format&n=4HyuQPBpu-4xjmQC&q=85&s=d15371678eda8514d135b2d4cc51a56a" style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain' }} width="96" height="96" data-path="images/docs/cms/Docs/docs-huawei.png" />
      </div>

      <div>
        <div style={{ fontWeight: '600', fontSize: '1.1rem', marginBottom: '0.25rem' }}>
          Huawei Android Native
        </div>

        <div>
          HMSプッシュサービスを使用するHuaweiデバイスのSDKセットアップ。
        </div>
      </div>
    </div>
  </Card>
</Columns>

### 2. 新しい`setupDefault`メソッドを追加

OneSignal SDKに`DefaultLiveActivityAttributes`タイプのLiveActivityライフサイクルを管理するように指示するには、`setupDefault`メソッドを呼び出すことができます。このメソッドを使用すると、[Start Live Activity](/reference/start-live-activity)と[Update Live Activity](/reference/update-live-activity-api)の両方のAPIを使用して、Default Live Activityを開始/更新/終了できます。

<CodeGroup>
  ```javascript React Native/Expo theme={null}
  import { OneSignal } from 'react-native-onesignal'

  //Push To Start
  OneSignal.LiveActivities.setupDefault()

  //Launching the Live Activity from within the app (not needed for push to start)
  const activityId = "my_activity_id"
  const attributes = { title: "Sample Title" } ;
  const content = { message: { en: "message" } };
  OneSignal.LiveActivities.startDefault(activityId, attributes, content);

  ```

  ```csharp Unity theme={null}
  using OneSignalSDK;

  //Push To Start
  OneSignal.LiveActivities.SetupDefault();

  //Launching the Live Activity from within the app (not needed for push to start)
  string activityId = "my_activity_id";

  OneSignal.LiveActivities.StartDefault(
    activityId,
    new Dictionary<string, object>() {
        { "title", "Welcome!" }
    },
    new Dictionary<string, object>() {
        { "message", new Dictionary<string, object>() {
            { "en", "Hello World!"}
        }},
    });
  ```

  ```javascript Cordova/Ionic theme={null}
  /*Cordova*/

  //Push To Start
  window.plugins.OneSignal.LiveActivities.setupDefault();

  //Launching the Live Activity from within the app (not needed for push to start)
  const activityId = "my_activity_id";
  const attributes = { title: "Sample Title" };
  const content = { message: { en: "message" } };
  window.plugins.OneSignal.LiveActivities.startDefault(
    activityId,
    attributes,
    content
  );

  /*Ionic/Capacitor*/
  import OneSignal from "onesignal-cordova-plugin";

  //Push To Start
  OneSignal.LiveActivities.setupDefault();

  //Launching the Live Activity from within the app (not needed for push to start)
  const activityId = "my_activity_id";
  const attributes = { title: "Sample Title" };
  const content = { message: { en: "message" } };
  OneSignal.LiveActivities.startDefault(activityId, attributes, content);
  ```

  ```csharp .NET theme={null}
  using OneSignalSDK;

  //Push To Start
  OneSignal.LiveActivities.SetupDefault();

  //Launching the Live Activity from within the app (not needed for push to start)
  string activityId = "my_activity_id";

  OneSignal.LiveActivities.StartDefault(
    activityId,
    new Dictionary<string, object>() {
        { "title", "Welcome!" }
    },
    new Dictionary<string, object>() {
        { "message", new Dictionary<string, object>() {
            { "en", "Hello World!"}
        }},
    });
  ```

  ```javascript Flutter theme={null}
  import 'package:onesignal_flutter/onesignal_flutter.dart';

  OneSignal.LiveActivities.setupDefault()

  //Launching the Live Activity from within the app (not needed for push to start)
  const String activityId = "my_activity_id";
  OneSignal.LiveActivities.startDefault(activityId!, {
    "title": "Welcome!"
    }, {
    "message": {"en": "Hello World!"},
  });
  ```
</CodeGroup>

### 3. Activity Widgetを作成

<Steps>
  <Step title="Info.plistを更新">
    Xcodeで、メインターゲットの`Info.plist`を開き、キー`Supports Live Activities`を**Boolean**として追加し、`YES`に設定します。

    <Frame caption="InfoにSupports Live Activitiesキーを追加し、その値をBoolean YESに設定">
      <img src="https://mintcdn.com/onesignal/yt4lRKoquAlWvRvF/images/live-activities/info-la-setting.png?fit=max&auto=format&n=yt4lRKoquAlWvRvF&q=85&s=e839231401651b71d0ae8d48614ec130" width="2166" height="1488" data-path="images/live-activities/info-la-setting.png" />
    </Frame>

    <Note>
      Live Activitiesを更新するときに、Appleが更新の緊急性を判断するために使用する「優先度」を設定するオプションがあります。Appleには、高優先度フラグを頻繁に使用するリクエストをスロットルする内部しきい値があります。

      Live Activitiesのユースケースがより頻繁な高優先度更新に依存している場合は、[AppleのDeveloper Docs](https://developer.apple.com/documentation/activitykit/starting-and-updating-live-activities-with-activitykit-push-notifications#Determine-the-update-frequency)で指示されているように、キー`NSSupportsLiveActivitiesFrequentUpdates`をInfo.plistにBoolean型としてYESに設定して追加できます。Live Activityがプッシュ予算を超えると、ユーザーにはダイアログが表示され、Live Activityの継続を許可すると、予算が自動的に増加してシームレスなユーザーエクスペリエンスが提供されます。
    </Note>
  </Step>

  <Step title="Widget Extensionを作成">
    Xcodeで、**File > New > Target... > Widget Extension**に移動します。

    <Frame caption="Xcodeでアプリの新しいWidget Extensionターゲットを追加">
      <img src="https://mintcdn.com/onesignal/FXJz6yFfOqztaEND/images/live-activities/live-activity-widget-extension.png?fit=max&auto=format&n=FXJz6yFfOqztaEND&q=85&s=60a52d6484203c4d6af21bc3a7da5e62" width="2166" height="1488" data-path="images/live-activities/live-activity-widget-extension.png" />
    </Frame>

    選択して**Next**を押します。

    名前を指定してWidget Extensionを構成し（例：`OneSignalWidget`）、**Include Live Activity**が選択されていることを確認します。次に、**Finish**をクリックします。

    <Frame caption="Live ActivityのWidget Extensionオプション">
      <img src="https://mintcdn.com/onesignal/yt4lRKoquAlWvRvF/images/live-activities/OneSignalWidget.png?fit=max&auto=format&n=yt4lRKoquAlWvRvF&q=85&s=47412314963f6fbd58fd2c7d3a529322" width="2166" height="1488" data-path="images/live-activities/OneSignalWidget.png" />
    </Frame>

    スキームのアクティブ化を求められたら、**Don't Activate**をクリックします。

    <Frame caption="Live ActivityのWidget Extensionオプション">
      <img src="https://mintcdn.com/onesignal/yt4lRKoquAlWvRvF/images/live-activities/la-scheme-activation.png?fit=max&auto=format&n=yt4lRKoquAlWvRvF&q=85&s=d3a2207ff2b5988c63c2abd631a72541" width="2166" height="1488" data-path="images/live-activities/la-scheme-activation.png" />
    </Frame>
  </Step>

  <Step title="PodfileにOneSignalXCFrameworkを追加">
    プロジェクトのTargetsリストでwidget extensionターゲットの名前を見つけます。例の名前は`OneSignalWidgetExtension`です。

    <Frame caption="widget extensionターゲットの名前を見つける">
      <img src="https://mintcdn.com/onesignal/yt4lRKoquAlWvRvF/images/live-activities/cocoapods-la-extension-name.png?fit=max&auto=format&n=yt4lRKoquAlWvRvF&q=85&s=850a91387539587802306a66771435eb" width="2166" height="1488" data-path="images/live-activities/cocoapods-la-extension-name.png" />
    </Frame>

    `Podfile`を開き、次のコードを追加します。`OneSignalWidgetExtension`をwidget extensionターゲットの名前に置き換えます。

    ```ruby Podfile theme={null}
    target 'OneSignalWidgetExtension' do
      #use_frameworks!
      pod 'OneSignalXCFramework', '>= 5.0.0', '< 6.0'
    end
    ```

    Xcodeを閉じて、`pod repo update && pod install`を実行して`OneSignalLiveActivities` podをインストールします。
  </Step>
</Steps>

### 4. LiveActivity.swiftファイルをセットアップ

Xcodeで、\_WidgetExtensionLiveActivity.swift\_ファイルを開きます。

画面の右側にあるInspectorパネルを開きます。**Target Membership**内で、\*\*+\*\*ボタンをクリックしてRunnerターゲットを選択します。

<Frame caption="メインターゲットメンバーシップを許可">
  <img src="https://mintcdn.com/onesignal/FXJz6yFfOqztaEND/images/live-activities/target-membership.png?fit=max&auto=format&n=FXJz6yFfOqztaEND&q=85&s=3315253623dfec6c13a56ff30a156772" width="2392" height="1488" data-path="images/live-activities/target-membership.png" />
</Frame>

\_WidgetExtensionLiveActivity.swift\_の内容を次のデフォルトのLive Activityレイアウトで更新します。このWidget内の値は、widgetに表示したいものに変更できます。setupDefaultメソッドは、これらの属性の構造体を定義します。

```swift Swift theme={null}
import ActivityKit
import WidgetKit
import SwiftUI
import OneSignalLiveActivities

// Your struct name might be different here
@available(iOS 16.2, *)
struct OneSignalWidgetLiveActivity: Widget {
    var body: some WidgetConfiguration {
        ActivityConfiguration(for: DefaultLiveActivityAttributes.self) { context in
            // Lock screen / banner UI
            VStack {
                Spacer()

                Text("Title: " + (context.attributes.data["title"]?.asString() ?? ""))
                    .font(.headline)

                Spacer()

                HStack {
                    Spacer()
                    Text(context.state.data["message"]?.asDict()?["en"]?.asString() ?? "Default Message")
                    Spacer()
                }

                Text("INT: " + String(context.state.data["intValue"]?.asInt() ?? 0))
                Text("DBL: " + String(context.state.data["doubleValue"]?.asDouble() ?? 0.0))
                Text("BOL: " + String(context.state.data["boolValue"]?.asBool() ?? false))

                Spacer()
            }
            .activitySystemActionForegroundColor(.black)
            .activityBackgroundTint(.white)

        } dynamicIsland: { _ in
            DynamicIsland {
                // Expanded UI
                DynamicIslandExpandedRegion(.leading) {
                    Text("Leading")
                }
                DynamicIslandExpandedRegion(.trailing) {
                    Text("Trailing")
                }
                DynamicIslandExpandedRegion(.bottom) {
                    Text("Bottom")
                    // More content
                }
            } compactLeading: {
                Text("L")
            } compactTrailing: {
                Text("T")
            } minimal: {
                Text("Min")
            }
            .widgetURL(URL(string: "http://www.apple.com"))
            .keylineTint(Color.red)
        }
    }
}

```

***

## Live Activityをテスト

1. アプリを起動します

2. [Start Live Activity APIリファレンス](/reference/start-live-activity)ですべての可能なフィールドを確認してください。これらのフィールドの構造は、UIの設定方法によって異なる場合があります。例：

* `"event_updates"`：これは、Live Activityが開始された後に更新できる動的データです（コード例の`context.state`以降のすべて）。context.state.dataがあるため、このフィールドにdataオブジェクトと、コード例で追加したメッセージ辞書などの追加フィールドを追加します。使用方法については、以下のリクエスト例を参照してください。
* `"event_attributes"`：これは、push to startリクエストで設定される静的データで、Live Activityが削除または上書きされるまで同じ値のままです。

3. push to startを使用する場合、コード内ではなく、リクエストで`"activity_id"`を設定します。異なるActivity IDを使用すると、新しいLive Activitiesが開始されます。同じActivity IDを使用すると、そのIDを現在使用しているwidgetが上書きされます。

4. URLパスで[OneSignal App ID](./keys-and-ids)を変更し、AuthorizationヘッダーでRest [API Key](./keys-and-ids#rest-api-key)を変更していることを確認してください。デフォルトのセットアップを使用している場合、`DefaultActivityAttributes`タイプは変更できません。また、パスに追加されるactivityタイプは大文字と小文字が区別され、ユーザーが定義したものまたは以下の例で使用されているDefault activityと一致する必要があることに注意してください。

```curl curl theme={null}
curl --request POST \
     --url https://api.onesignal.com/apps/YOUR_APP_ID/activities/activity/DefaultLiveActivityAttributes \
     --header 'Authorization: key YOUR_REST_API_KEY' \
     --header 'Content-Type: application/json' \
     --header 'accept: application/json' \
     --data '
{
  "event": "start",
  "event_updates": {
    "data": {
      "message": {
        "en": "The message is nested in context.state.data[\"message\"] as a dictionary"
      },
      "intValue": 10,
      "doubleValue": 3.14,
      "boolValue": true
    }
  },
  "event_attributes": {
    "title": "this is set when the LA starts and does not get updated after"
  },
  "activity_id": "my-activity-id",
  "name": "OneSignal Notification Name",
  "contents": {
    "en": "English Message"
  },
  "headings": {
    "en": "English Message"
  },
  "sound": "beep.wav",
  "priority": 10
}'
```

***

## 低レベルメソッド

これらは、独自のPush To Startトークンを生成したい場合に使用するオプションのメソッドです。これは、SDKの最新リリースにも追加されています。これらのメソッドを使用するには、Xcodeとのやり取りを増やし、Swiftを使用してPush To Start用の独自のトークンを生成する必要があります。このガイドは[こちら](https://github.com/OneSignal/OneSignal-iOS-SDK/pull/1377#:~:text=Alternative%20\(low%20level\)%20method%20to%20setup%20Live%20Activities%20with%20OneSignal)で見つけることができます。

<CodeGroup>
  ```javascript React Native/Expo theme={null}
  //Setting the Push To Start Token
  OneSignal.LiveActivities.setPushToStartToken(activityType: string, token: string)

  //Removing the Push To Start Token
  OneSignal.LiveActivities.removePushToStartToken(activityType: string)

  ```

  ```csharp Unity theme={null}
  //Setting the Push To Start Token
  OneSignal.LiveActivities.SetPushToStartToken(string activityType, string token)

  //Removing the Push To Start Token
  OneSignal.LiveActivities.RemovePushToStartToken(string activityType)
  ```

  ```javascript Cordova/Ionic theme={null}
  /* Cordova */
  //Setting the Push To Start Token
  window.plugins.OneSignal.LiveActivities.setPushToStartToken(activityType: string, token: string)

  //Removing the Push To Start Token
  window.plugins.OneSignal.LiveActivities.removePushToStartToken(activityType: string)

  /* Ionic */
  //Setting the Push To Start Token
  OneSignal.LiveActivities.setPushToStartToken(activityType: string, token: string)

  //Removing the Push To Start Token
  OneSignal.LiveActivities.removePushToStartToken(activityType: string)
  ```

  ```csharp .NET theme={null}
  //Setting the Push To Start Token
  OneSignal.LiveActivities.SetPushToStartToken(string activityType, string token)

  //Removing the Push To Start Token
  OneSignal.LiveActivities.RemovePushToStartToken(string activityType)
  ```

  ```javascript Flutter theme={null}
  //Setting the Push To Start Token
  OneSignal.LiveActivities.setPushToStartToken(String activityType, String token)

  //Removing the Push To Start Token
  OneSignal.LiveActivities.removePushToStartToken(String activityType)
  ```
</CodeGroup>

***
