> ## 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. # Self Handled Cards > MoEngage の Self Handled Cards SDK と API を使用して、Flutter アプリでカスタムのカードビューを構築します。 Self Handled Cards を使用すると、MoEngage プラットフォームでカードキャンペーンを作成し、アプリケーション内の任意の場所にカードを表示できる柔軟性が得られます。SDK はキャンペーンのデータを取得するための API を提供しており、これを使用してカードの独自のビューを作成できます。 ![Download](https://img.shields.io/pub/v/moengage_cards.svg) # SDK のインストール # インストール MoEngage Cards SDK をアプリケーションに追加するには、アプリケーションの **pubspec.yaml** ファイルを編集し、次の依存関係を追加します。 ```yaml pubspec.yaml theme={null} dependencies: moengage_cards: $latestVersion ``` ***\$latestVersion*** は、プラグインの最新バージョンを指します。 依存関係を追加したら、ターミナルで ***flutter pub get*** コマンドを実行して依存関係をインストールします。 プラグインをインストールした後、以下のプラットフォーム固有の設定を行います。 このプラグインは **moengage\_flutter** プラグインに依存しています。**moengage\_flutter** プラグインもインストールされていることを確認してください。詳細については、[ドキュメント](/docs/ja/developer-guide/flutter-sdk/sdk-integration/sdk-installation/framework-dependency)を参照してください。 # Android のインストール V(1) *app/build.gradle* ファイルに次の依存関係を追加します。 ```json build.gradle wrap theme={null} dependencies { ... implementation("com.moengage:cards-core:$sdkVersion") } ``` **\$sdkVersion** を適切な SDK バージョンに置き換えてください。サポートされる最小バージョンは 1.5.0 です。 # iOS のインストール iOS の場合、ネイティブの依存関係は Cards Flutter SDK 自体に含まれているため、Cards をサポートするために追加の依存関係を含める必要はありません。 # Cards の初期化 MoEngage Cards モジュールは、Cards モジュールを使用するウィジェット内で初期化できます。 ```Dart Dart theme={null} MoEngageCards cards = MoEngageCards(YOUR_WORKSPACE_ID); cards.initialize(); ``` 例 ```Dart Dart theme={null} // Use Named Import otherwise MoEngage classes might be collided with classed in flutter/material.dart import 'package:moengage_cards/moengage_cards.dart' as moe; class CardsScreen extends StatefulWidget { const CardsScreen({Key? key}) : super(key: key); @override State createState() => _CardsScreenState(); } class _CardsScreenState extends State{ moe.MoEngageCards cards = moe.MoEngageCards("MOE_Workspace_ID"); @override void initState() { super.initState(); cards.initialize(); } } ``` # カード情報の取得 特定のユーザーに表示可能なすべてのカードキャンペーンのデータを取得します。データは ***CardsInfo*** として返されます。データモデルの完全な一覧については、[API ドキュメント](https://pub.dev/documentation/moengage_cards/)を参照してください。 ```Dart Dart theme={null} MoEngageCards cards = MoEngageCards(YOUR_WORKSPACE_ID); CardsInfo cardsInfo = await cards.getCardsInfo(); ``` ## ウィジェットとウィジェット ID のマッピング ### Basic Card/Illustration Card | ウィジェット ID | ウィジェットタイプ | ウィジェット情報 | | - | - | - | | 0 | Image (WidgetType.IMAGE) | カード内の画像ウィジェット。 | | 1 | Text (WidgetType.TEXT) | カードのヘッダーテキスト。 | | 2 | Text (WidgetType.TEXT) | カードのメッセージテキスト。 | | 3 | Button (WidgetType.Button) | カードの CTA（Call to action）。 | # カードの更新 ***refreshCards***\*()\*\*\* API を使用して、ユーザーの要求に応じてカードを更新します。この API は、プルして更新（Pull to refresh）の動作を再現するために使用できます。 ```Dart Dart theme={null} MoEngageCards cards = MoEngageCards(YOUR_WORKSPACE_ID); cards.refreshCards((data) { if (data?.hasUpdates == true) { // Update UI }}); ``` # カードの取得 ***fetchCards***\*()\*\*\* API を使用して、ユーザーのカードを取得します。この API は、最新のカードデータを同期するために使用できます。 ```Dart Dart theme={null} MoEngageCards cards = MoEngageCards(YOUR_WORKSPACE_ID); cards.fetchCards().then((data) { // Update UI}); ``` `fetchCards()` の同期タイミングとレート制限の詳細については、[MoEngage SDK はいつカードデータを同期しますか？](/docs/ja/user-guide/campaigns-and-channels/cards/faqs-cards/when-does-the-moengage-sdk-sync-card-data)を参照してください。 # Inbox の読み込み カードは、別の画面または画面の一部のセクションに表示できます。カードの画面またはセクションが読み込まれたら、***onCardsSectionLoaded()*** を呼び出します。 ```Dart Dart theme={null} MoEngageCards cards = MoEngageCards(YOUR_WORKSPACE_ID); cards.onCardsSectionLoaded((data) { if (data?.hasUpdates == true) { // Refresh UI } }); ``` # Inbox のアンロード 画面またはセクションが表示されなくなったとき、またはバックグラウンドに移行するときに、***onCardSectionUnloaded()*** を呼び出します。 ```Dart Dart theme={null} MoEngageCards cards = MoEngageCards(YOUR_WORKSPACE_ID); cards.onCardsSectionUnLoaded(); ``` # カテゴリーの取得 カードが設定されているすべてのカテゴリーを取得するには、***getCardsCategories()*** API を使用します。 ```Dart Dart theme={null} MoEngageCards cards = MoEngageCards(YOUR_WORKSPACE_ID); List categories = await cards.getCardsCategories(); ``` # All カテゴリーが有効かどうか カードが設定されているすべてのカテゴリーを取得するには、***isAllCategoryEnabled()*** API を使用します。 ```Dart Dart theme={null} MoEngageCards cards = MoEngageCards(YOUR_WORKSPACE_ID); bool isAllCategoryEnabled = await cards.isAllCategoryEnabled(); ``` # カテゴリー別のカードの取得 特定のカテゴリーで表示可能なカードを取得するには、***getCardsForCategory()*** API を使用します。 ```Dart Dart theme={null} MoEngageCards cards = MoEngageCards(YOUR_WORKSPACE_ID); int count = await cards.getCardsForCategory(category); ``` # 新しいカード数の取得 新しいカードの数を取得するには、次のように ***getNewCardsCount()*** メソッドを使用します。 ```Dart Dart theme={null} MoEngageCards cards = MoEngageCards(YOUR_WORKSPACE_ID); int count = await cards.getNewCardsCount(); ``` # カードの表示 カードがユーザーに表示されたことを通知するには、***cardShown()*** API を呼び出します。 ```Dart Dart theme={null} MoEngageCards cards = MoEngageCards(YOUR_WORKSPACE_ID); cards.cardShown(context, card); // Pass Card Object ``` # カードのクリック カードがユーザーに表示されたことを通知するには、***cardClicked()*** API を呼び出します。 ```Dart Dart theme={null} MoEngageCards cards = MoEngageCards(YOUR_WORKSPACE_ID); cards.cardClicked(card, widgetId); // Pass Card Object ``` # カードの削除 カードを削除するには、***deleteCard()*** API を呼び出します。 ```Dart Dart theme={null} MoEngageCards cards = MoEngageCards(YOUR_WORKSPACE_ID); cards.deleteCard(card); // Pass Card Object ``` # カードを配信済みとしてマーク アプリケーションのカードセクションへの配信をトラッキングするには、アプリケーションのカードセクションが読み込まれたときに ***cardDelivered()*** API を呼び出します。 ```Dart Dart theme={null} MoEngageCards cards = MoEngageCards(YOUR_WORKSPACE_ID); cards.cardDelivered(); ``` # 複数のカードの削除 カードを削除するには、***deleteCards()*** API を呼び出します。 ```Dart Dart theme={null} MoEngageCards cards = MoEngageCards(YOUR_WORKSPACE_ID); cards.deleteCards(context, cards); // Pass List of Cards ``` # 未クリックのカード数の取得 未クリックのカードの数を取得するには、次のように ***getUnClickedCardsCount()*** メソッドを使用します。 ```Dart Dart theme={null} MoEngageCards cards = MoEngageCards(YOUR_WORKSPACE_ID); int count = await cards.getUnClickedCardsCount(); ``` # アプリ起動時のカード同期リスナー このリスナーを設定すると、アプリ起動時のカード同期についてコールバックを受け取れます。このリスナーは ***initialize()*** API を呼び出す前に設定する必要があります。ほとんどの場合、この API は必要ありません。 ```Dart Dart theme={null} MoEngageCards cards = MoEngageCards(YOUR_WORKSPACE_ID); cards.setAppOpenCardsSyncListener((data) { //Update UI }); cards.initialize(); ``` ハイブリッドフレームワークは、MoEngage のデフォルトの Card をサポートしていません。Self-handled Card のみがサポートされています。