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

# セルフハンドルカード

> MoEngage のセルフハンドルカード SDK と API を使用して、React Native アプリでカスタムカードビューを構築します。

セルフハンドルカードを使用すると、MoEngage プラットフォームでカードキャンペーンを作成し、アプリケーション内の任意の場所にカードを表示できる柔軟性が得られます。SDK にはキャンペーンのデータを取得するための API が用意されており、そのデータを使用して独自のカードビューを作成できます。

# カード情報の取得

特定のユーザーに表示可能なすべてのカードキャンペーンデータを取得します。データは ***CardsInfo*** として返されます。

```typescript TypeScript theme={null}
import ReactMoEngageCards from "react-native-moengage-cards";
const cardsInfo = await ReactMoEngageCards.getCardsInfo();
```

***CardsInfo*** で利用可能なデータの詳細については、[Cards データペイロード](https://www.moengage.com/docs/developer-guide/react-native-sdk/cards/cards-data-payload)を参照してください。

## ウィジェットとウィジェット ID のマッピング

### ベーシックカード/イラストレーションカード

| ウィジェット ID | ウィジェットタイプ | ウィジェット情報 |
| - | - | - |
| 0 | Image (WidgetType.IMAGE) | カード内の画像ウィジェット。 |
| 1 | Text (WidgetType.TEXT) | カードのヘッダーテキスト。 |
| 2 | Text (WidgetType.TEXT) | カードのメッセージテキスト。 |
| 3 | Button (WidgetType.Button) | カードの Call to Action（CTA）。 |

# カードの更新

ユーザーの要求に応じてカードを更新するには、***refreshCards***\*()\*\*\* API を使用します。この API は、プルして更新する動作を再現するために使用できます。

```typescript TypeScript theme={null}
import ReactMoEngageCards from "react-native-moengage-cards";
ReactMoEngageCards.refreshCards((data) => {});
```

***SyncCompleteData*** で利用可能なデータの詳細については、[Cards データペイロード](https://www.moengage.com/docs/developer-guide/react-native-sdk/cards/cards-data-payload)を参照してください。

# カードの取得

ユーザーのカードを取得するには、***fetchCards***\*()\*\*\* API を使用します。この API は、最新のカードデータを同期するために使用できます。

```typescript TypeScript theme={null}
import ReactMoEngageCards from "react-native-moengage-cards";
const cardsData = await ReactMoEngageCards.fetchCards();
```

***CardsData*** で利用可能なデータの詳細については、[Cards データペイロード](https://www.moengage.com/docs/developer-guide/react-native-sdk/cards/cards-data-payload)を参照してください。

> [!NOTE]
>
> `fetchCards()` の同期タイミングとレート制限の詳細については、[MoEngage SDK はいつカードデータを同期しますか？](/docs/ja/user-guide/campaigns-and-channels/cards/faqs-cards/when-does-the-moengage-sdk-sync-card-data.md)を参照してください。

# インボックスの読み込み

カードは、別の画面または画面の一部のセクションに表示できます。カード画面/セクションが読み込まれたら、***onCardSectionLoaded()*** を呼び出します。

```typescript TypeScript theme={null}
import ReactMoEngageCards from "react-native-moengage-cards";
ReactMoEngageCards.onCardSectionLoaded((data) => {});
```

***SyncCompleteData*** で利用可能なデータの詳細については、[Cards データペイロード](https://www.moengage.com/docs/developer-guide/react-native-sdk/cards/cards-data-payload)を参照してください。

# インボックスのアンロード

画面/セクションが表示されなくなったとき、またはバックグラウンドに移行するときに、***onCardSectionUnloaded()*** を呼び出します。

```typescript TypeScript theme={null}
import ReactMoEngageCards from "react-native-moengage-cards";
ReactMoEngageCards.onCardSectionUnLoaded();
```

# カテゴリーの取得

カードが設定されているすべてのカテゴリーを取得するには、***getCardsCategories()*** API を使用します。文字列の配列が返されます。

```typescript TypeScript theme={null}
import ReactMoEngageCards from "react-native-moengage-cards";
const cardsCategories = await ReactMoEngageCards.getCardsCategories();
```

# すべてのカードカテゴリーの有効化状態

カードが設定されているすべてのカテゴリーを取得するには、***isAllCategoryEnabled()*** API を使用します。

```typescript TypeScript theme={null}
import ReactMoEngageCards from "react-native-moengage-cards";
const isAllCategoryEnabled = await ReactMoEngageCards.isAllCategoryEnabled();
```

# カテゴリー別のカードの取得

特定のカテゴリーで表示可能なカードを取得するには、***getCardsForCategory()*** API を使用します。

```typescript TypeScript theme={null}
import ReactMoEngageCards from "react-native-moengage-cards";
const cardsData = await ReactMoEngageCards.getCardsForCategory(cardCategory);
```

***CardsData*** で利用可能なデータの詳細については、[Cards データペイロード](https://www.moengage.com/docs/developer-guide/react-native-sdk/cards/cards-data-payload)を参照してください。

# 新着カード数の取得

新着カードの数を取得するには、以下のように ***getNewCardsCount()*** メソッドを使用します。

```typescript TypeScript theme={null}
import ReactMoEngageCards from "react-native-moengage-cards";
const newCardsCount = await ReactMoEngageCards.getNewCardsCount();
```

# カードの表示

カードがユーザーに表示されたことを通知するには、***cardShown()*** API を呼び出します。

```typescript TypeScript theme={null}
import ReactMoEngageCards from "react-native-moengage-cards";
ReactMoEngageCards.cardShown(card);
```

# カードのクリック

カードがユーザーに表示されたことを通知するには、***cardClicked()*** API を呼び出します。

```typescript TypeScript theme={null}
import ReactMoEngageCards from "react-native-moengage-cards";
ReactMoEngageCards.cardClicked(card, widgetId);
```

# カードの削除

カードを削除するには、***deleteCard()*** API を呼び出します。

```typescript TypeScript theme={null}
import ReactMoEngageCards from "react-native-moengage-cards";
// Delete a single card
ReactMoEngageCards.deleteCard(card);
// Delete a multiple card, pass the Array<Card>
ReactMoEngageCards.deleteCard(cards);
```

# カードを配信済みとしてマーク

アプリケーションのカードセクションへの配信をトラッキングするには、アプリケーションのカードセクションが読み込まれたときに ***cardDelivered()*** API を呼び出します。

```typescript TypeScript theme={null}
import ReactMoEngageCards from "react-native-moengage-cards";
ReactMoEngageCards.cardDelivered();
```

# 未クリックのカード数の取得

未クリックのカードの数を取得するには、以下のように ***getUnClickedCardsCount()*** メソッドを使用します。

```typescript TypeScript theme={null}
import ReactMoEngageCards from "react-native-moengage-cards";
const unClickedCard = await ReactMoEngageCards.getUnClickedCardsCount();
```

# カード同期リスナー

## バージョン 4.0.0 以前

アプリ起動時のカード同期に関するコールバックを受け取るには、このリスナーを設定します。このリスナーは ***initialize()*** API を呼び出す前に設定する必要があります。ほとんどの場合、この API は必要ありません。

```typescript TypeScript theme={null}
import ReactMoEngageCards from "react-native-moengage-cards";
ReactMoEngageCards.setAppOpenSyncListener((data) => {});
```

## バージョン 5.0.0 以降

アプリの起動時またはユーザーのログイン時にカード同期に関するコールバックを受け取るには、このリスナーを設定します。このリスナーは ***initialize()*** API を呼び出す前に設定する必要があります。

```typescript TypeScript theme={null}
import ReactMoEngageCards from "react-native-moengage-cards";
ReactMoEngageCards.setSyncCompleteListener((data) => {});
```

***SyncCompleteData*** で利用可能なデータの詳細については、[Cards データペイロード](https://www.moengage.com/docs/developer-guide/react-native-sdk/cards/cards-data-payload)を参照してください。


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.