> For the complete documentation index, see [llms.txt](https://app.developers.karte.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://app.developers.karte.io/android-sdk-appendix/appendix-customize-notification-android-sdk.md).

# \[Android]通知の表示をカスタマイズする

{% hint style="warning" %}
**サポート対象外**

通知の表示カスタマイズは、接客サービス内アクションのカスタマイズで設定することができます。\
接客のカスタマイズはサポート対象外となりますので、必ずテスト配信等行った上でご活用ください。
{% endhint %}

KARTE SDK を利用して通知を表示することが可能ですが、独自に通知を表示することも可能です。\
ここでは独自に通知の表示を行う方法について記します。

## 実装方法

独自に通知の表示処理を実装する場合に、重要となるのは3点です。

### 1. KARTE起点で送信されたプッシュ通知の判別

KARTE起点で送信されたプッシュ通知であるか判別するためには、`MessageHandler.canHandleMessage()` を呼び出します。\
`true` を返す場合は、KARTE起点で送信されたプッシュ通知と判断できます。

### 2. RemoteMessageオブジェクトからKARTEで付与したフィールド情報を取り出す

KARTEの管理画面上で設定したタイトル等の情報は、RemoteMessageオブジェクトの特定のフィールドの中にJSON文字列の形で保持されています。\
`MessageHandler.extractKarteAttributes()` メソッドを呼び出すと、`KarteAttributes` クラスのオブジェクトが返ります。\
このオブジェクトの各プロパティにアクセスすることでタイトル等の情報を取り出すことが可能です。

### 3. 通知のクリック計測を行うために、カスタマイズしたNotificationオブジェクトをSDKに渡す

通知をタップした際等に、効果測定用のイベントを送信するため、接客サービスに関する情報を付与しておく必要があります。\
これを行うには `MessageHandler.handleMessage()` メソッドにNotificationオブジェクトを渡します。\
`MessageHandler.handleMessage()` メソッドでは渡されたNotificationオブジェクトに効果測定用のパラメータを含むIntentを追加し、直ちに通知表示します。

{% hint style="info" %}
**効果測定について**

効果測定は、 `MessageHandler.handleMessage()` メソッド内でIntentに付与される、主に `krt_` prefixのついたパラメータを参照することで実現しています。\
通知をカスタマイズする際にも、こちらのパラメータが欠損しなければ効果測定は正しく行われます。\
また、通知にPendingIntentを付与していた場合でも、KARTEを通じて送信された内容に上書きされます。\
なお、パラメータの詳細については変更される可能性があります。
{% endhint %}

## サンプルコード

以下は、上記ポイントを踏まえて書かれたサンプルコードになります。\
※ このサンプルは、複数の通知を同時に表示する際などに必要な処理は含まれておりません。必ず動作確認を行なった上で、必要な処理等を適宜修正の上、ご利用ください。

{% tabs %}
{% tab title="Kotlin" %}
{% code title="MyFirebaseMessagingService.kt" overflow="wrap" %}

```kotlin
public class MyFirebaseMessagingService : FirebaseMessagingService() {
  override fun onMessageReceived(remoteMessage: RemoteMessage) {
    // POINT1
    if (MessageHandler.canHandleMessage(remoteMessage)) {
      // KARTE起点に送信されたプッシュ通知の場合
      showNotification(remoteMessage)
    } else {
      // KARTE以外のシステムを起点に送信されたプッシュ通知の場合
    }
  }

  private fun showNotification(remoteMessage: RemoteMessage) {
    // POINT2
    val attributes = MessageHandler.extractKarteAttributes(remoteMessage) ?: return

    val builder = NotificationCompat.Builder(this, attributes.channel)
            .setContentTitle(attributes.title)
            .setContentText(attributes.body)

    // urlからBitmapを取得する任意の関数を利用する例
    val bigPicture = bitmapFromUrl(attributes.fileUrl)
    if (bigPicture != null) {
      val style = NotificationCompat.BigPictureStyle()
              .bigPicture(bigPicture)
              .setBigContentTitle(attributes.title)
              .setSummaryText(attributes.body)
      builder.setStyle(style)
    } else {
      val style = NotificationCompat.BigTextStyle()
              .setBigContentTitle(attributes.title)
              .bigText(attributes.body)
      builder.setStyle(style)
    }

    // POINT3
    MessageHandler.handleMessage(this, remoteMessage, builder.build())
  }
}
```

{% endcode %}
{% endtab %}

{% tab title="Java" %}
{% code title="MyFirebaseMessagingService.java" overflow="wrap" %}

```java
public class MyFirebaseMessagingService extends FirebaseMessagingService {
  @Override
  public void onMessageReceived(RemoteMessage remoteMessage) {
    // POINT1
    if (MessageHandler.canHandleMessage(remoteMessage)) {
      // KARTE起点に送信されたプッシュ通知の場合
      showNotification(remoteMessage);
    } else {
      // KARTE以外のシステムを起点に送信されたプッシュ通知の場合
    }
  }

  private void showNotification(RemoteMessage remoteMessage) {
    // POINT2
    KarteAttributes attributes = MessageHandler.extractKarteAttributes(remoteMessage);
    if (attributes == null) {
      return;
    }

    NotificationCompat.Builder builder = new NotificationCompat.Builder(this, attributes.channel)
            .setContentTitle(attributes.title)
            .setContentText(attributes.body);

    // urlからBitmapを取得する任意の関数を利用する例
    Bitmap bigPicture = bitmapFromUrl(attributes.fileUrl);
    if (bigPicture != null) {
      NotificationCompat.BigPictureStyle style = new NotificationCompat.BigPictureStyle()
              .bigPicture(bigPicture)
              .setBigContentTitle(attributes.title)
              .setSummaryText(attributes.body);
      builder.setStyle(style);
    } else {
      NotificationCompat.BigTextStyle style = new NotificationCompat.BigTextStyle()
              .setBigContentTitle(attributes.title)
              .bigText(attributes.body);
      builder.setStyle(style);
    }

    // POINT3
    MessageHandler.handleMessage(this, remoteMessage, builder.build());
  }
}
```

{% endcode %}
{% endtab %}
{% endtabs %}