プッシュアイコン設定ガイド

このドキュメントでは、プッシュ通知の小さな通知アイコン、右側アイコン、および大きな画像の設定方法について説明します。 alt text

📱 iOSアイコン設定

小さなアイコンの設定

Images.xcassets-AppIconに移動し、iPhone Notificationアイコンを設定します。必要なサイズ:

  • 40 x 40px
  • 60 x 60px

alt text

右側アイコン / 大きな画像の設定

✅ サポートされているバージョン

  • iOS 10以降、EngageLab iOS SDK v3.0.0以降でサポートされています。

🧑‍💻 クライアント側の設定

  1. Service Extensionターゲットを作成します。

  2. mtpush-extension-ios-xxx.xcframeworkファイルをService Extensionターゲットにインポートします。

  3. 次の2つのフレームワークを追加します:

    • libz.tbd
    • libresolv.tbd
  4. [mtpushSetAppkey:]を呼び出してAppKeyを設定します(AppPushアプリケーション作成時に使用したものと一致する必要があります)。

  5. [didReceiveNotificationRequest:]コールバックで、画像URLを取得します。サンプルコード:

- (void)didReceiveNotificationRequest:(UNNotificationRequest *)request withContentHandler:(void (^)(UNNotificationContent * _Nonnull))contentHandler { self.contentHandler = contentHandler; self.bestAttemptContent = [request.content mutableCopy]; self.bestAttemptContent.title = [NSString stringWithFormat:@"%@ [NotificationService]", self.bestAttemptContent.title]; NSString * attachmentPath = self.bestAttemptContent.userInfo[@"my-attachment"]; if (attachmentPath) { NSURL *fileURL = [NSURL URLWithString:attachmentPath]; [self downloadAndSave:fileURL handler:^(NSString *localPath) { if (localPath) { UNNotificationAttachment * attachment = [UNNotificationAttachment attachmentWithIdentifier:@"myAttachment" URL:[NSURL fileURLWithPath:localPath] options:nil error:nil]; self.bestAttemptContent.attachments = @[attachment]; } [self apnsDeliverWith:request]; }]; } else { [self apnsDeliverWith:request]; } } - (void)downloadAndSave:(NSURL *)fileURL handler:(void (^)(NSString *))handler { NSURLSession * session = [NSURLSession sharedSession]; NSURLSessionDownloadTask *task = [session downloadTaskWithURL:fileURL completionHandler:^(NSURL * _Nullable location, NSURLResponse * _Nullable response, NSError * _Nullable error) { NSString *localPath = nil; if (!error) { NSString * localURL = [NSString stringWithFormat:@"%@/%@", NSTemporaryDirectory(),fileURL.lastPathComponent]; if ([[NSFileManager defaultManager] moveItemAtPath:location.path toPath:localURL error:nil]) { localPath = localURL; } } handler(localPath); }]; [task resume]; }
              
              - (void)didReceiveNotificationRequest:(UNNotificationRequest *)request withContentHandler:(void (^)(UNNotificationContent * _Nonnull))contentHandler {
  self.contentHandler = contentHandler;
  self.bestAttemptContent = [request.content mutableCopy];
  self.bestAttemptContent.title = [NSString stringWithFormat:@"%@ [NotificationService]", self.bestAttemptContent.title];
  
  NSString * attachmentPath = self.bestAttemptContent.userInfo[@"my-attachment"];
  if (attachmentPath) {
    NSURL *fileURL = [NSURL URLWithString:attachmentPath];
    [self downloadAndSave:fileURL handler:^(NSString *localPath) {
      if (localPath) {
        UNNotificationAttachment * attachment = [UNNotificationAttachment attachmentWithIdentifier:@"myAttachment" URL:[NSURL fileURLWithPath:localPath] options:nil error:nil];
        self.bestAttemptContent.attachments = @[attachment];
      }
      [self apnsDeliverWith:request];
    }];
  } else {
    [self apnsDeliverWith:request];
  }
}

- (void)downloadAndSave:(NSURL *)fileURL handler:(void (^)(NSString *))handler {
  NSURLSession * session = [NSURLSession sharedSession];
  NSURLSessionDownloadTask *task = [session downloadTaskWithURL:fileURL completionHandler:^(NSURL * _Nullable location, NSURLResponse * _Nullable response, NSError * _Nullable error) {
    NSString *localPath = nil;
    if (!error) {
      NSString * localURL = [NSString stringWithFormat:@"%@/%@", NSTemporaryDirectory(),fileURL.lastPathComponent];
      if ([[NSFileManager defaultManager] moveItemAtPath:location.path toPath:localURL error:nil]) {
        localPath = localURL;
      }
    }
    handler(localPath);
  }];
  [task resume];
}

            
このコードブロックはフローティングウィンドウ内に表示されます

🌐 サーバー側の設定

iosの下にmutable-contentextrasフィールドを設定する必要があります:

フィールド タイプ 必須 親フィールド 説明
mutable-content boolean オプション notification.ios 通知拡張を有効にします。iOS 10拡張をサポートするにはtrueに設定する必要があります
extras JSONオブジェクト オプション notification.ios 追加フィールド。キー(my-attachmentなど)はクライアントロジックと一致する必要があります

JSONの例:

"notification": { "ios": { "alert": { "title": "title", "subtitle": "subtitle" }, "mutable-content": true, "extras": { "my-attachment": "https://raw.githubusercontent.com/Tikon/imgRepo/master/ic_launcher.png" } } }
              
              "notification": {
  "ios": {
    "alert": {
      "title": "title",
      "subtitle": "subtitle"
    },
    "mutable-content": true,
    "extras": {
      "my-attachment": "https://raw.githubusercontent.com/Tikon/imgRepo/master/ic_launcher.png"
    }
  }
}

            
このコードブロックはフローティングウィンドウ内に表示されます

🤖 Androidアイコン設定

✅ サポートされているバージョン

EngageLab Android SDK v4.4.0以降からサポートされています。

📡 チャネルサポートの概要

チャネル 動的小アイコン 右側アイコン 大きな画像
EngageLab ✅(システムサポート済み) ✅(Meizuを除く) ✅(システムサポート済み)
Xiaomi
Huawei ✅(サービス/ニュースのみ)
Honor ✅(マーケティングを除く)
OPPO
FCM
Meizu
vivo

📝 注釈:

  • OPPO:対象ユーザーが20人を超え、ColorOS>5.0の場合、Wi-Fi環境で最初のプッシュ通知に大きな画像が表示されます。
  • Xiaomi:2023年8月時点で、プッシュを介したアイコンと画像の動的設定はサポートされなくなりました。

🎨 小さなアイコンの設定

🧑‍💻 クライアント側の設定

  • プロジェクトにres/drawable/mtpush_notification_iconが存在する場合、デフォルトで使用されます。
  • 存在しない場合は、アプリのランチャーアイコンが使用されます。

FCMチャネルの例:

<meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="@drawable/mtpush_notification_icon" /> <meta-data android:name="com.google.firebase.messaging.default_notification_color" android:resource="@color/colorAccent" />
              
              <meta-data
    android:name="com.google.firebase.messaging.default_notification_icon"
    android:resource="@drawable/mtpush_notification_icon" />
<meta-data
    android:name="com.google.firebase.messaging.default_notification_color"
    android:resource="@color/colorAccent" />

            
このコードブロックはフローティングウィンドウ内に表示されます

🌐 サーバー側の設定

フィールド タイプ 必須 親フィールド 説明
small_icon_uri string オプション notification.android ネットワークアイコンURLまたはリソースパス。最大300KB
small_icon_uri string オプション options.third_party_channel.<vendor> OEMチャネル固有のアイコン(Huaweiのみ)

JSONの例:

"notification": { "android": { "alert": "Hi, Push!", "title": "Send to Android", "small_icon_uri": "https://res.engagelab.net/oversea/e/website/2025/_nuxt/app-push.II1rRaB5.webp" } }, "options": { "time_to_live": 60, "third_party_channel": { "huawei": { "distribution": "pns_mtpush", "small_icon_uri": "logog" } } }
              
              "notification": {
  "android": {
    "alert": "Hi, Push!",
    "title": "Send to Android",
    "small_icon_uri": "https://res.engagelab.net/oversea/e/website/2025/_nuxt/app-push.II1rRaB5.webp"
  }
},
"options": {
  "time_to_live": 60,
  "third_party_channel": {
    "huawei": {
      "distribution": "pns_mtpush",
      "small_icon_uri": "logog"
    }
  }
}

            
このコードブロックはフローティングウィンドウ内に表示されます

🖼️ 右側アイコン / 大きな画像の設定

🌐 サーバー側のフィールド

フィールド タイプ 必須 親フィールド 説明
style int オプション notification.android 通知スタイル。デフォルト0、1=bigText2=Inbox3=bigPicture
big_pic_path string オプション notification.android style=3の場合必須。URLまたはローカルパスをサポート
large_icon string オプション notification.android 右側アイコン。ネットワークまたはdrawableリソースをサポート(最大300KB)

JSONの例:

{ "notification": { "android": { "alert": "Hi, Push!", "title": "Send to Android", "large_icon": "logog", "big_pic_path": "https://scpic.chinaz.net/files/pic/pic9/201311/apic2098.jpg", "style": 3 } }, "options": { "third_party_channel": { "huawei": { "distribution": "ospush", "large_icon": "logog" } } } }
              
              {
  "notification": {
    "android": {
      "alert": "Hi, Push!",
      "title": "Send to Android",
      "large_icon": "logog",
      "big_pic_path": "https://scpic.chinaz.net/files/pic/pic9/201311/apic2098.jpg",
      "style": 3
    }
  },
  "options": {
    "third_party_channel": {
      "huawei": {
        "distribution": "ospush",
        "large_icon": "logog"
      }
    }
  }
}

            
このコードブロックはフローティングウィンドウ内に表示されます

❓ FAQ

小さなアイコンの問題

1. アイコンが灰色になるのはなぜですか?

  • 標準Android 5.0以降では、アプリのtargetSdkVersion ≥ 21の場合、システムは通知アイコンにマスクカラーオーバーレイを適用し、アイコンが灰色に表示される場合があります。アイコンが明確に表示され、輪郭がはっきりするようにするには、影なし、グラデーションなし、透明な背景のアイコンを使用し、mtpush_notification_iconと名付けることを推奨します。プロジェクトのres/drawableディレクトリのファイルをこのアイコンに置き換えてください。また、res配下の他のすべてのアイコンアセット(drawable-xxhdpiなど)を更新し、一貫性を確保するようにしてください。正しく設定されている場合、システムはアイコンを正しい形状の灰色の輪郭としてレンダリングし、表示問題を回避します。

  • 一部のシステム(OnePlusフォンやAndroid 10を実行するGoogleデバイスなど)の制限により、アイコンのカスタマイズがサポートされない場合や効果がない場合があります。

  • Xiaomiデバイスでは、ランチャーがアイコンをキャッシュする場合があります。上記の設定を完了した後、テストを行う前に必ずデバイスを再起動してください。

  • XiaomiデバイスでEngageLabチャネルまたはXiaomi独自のプッシュチャネルを使用する場合、アイコンが正しく表示されるにはネイティブ通知スタイルに切り替える必要があります。切り替え方法: alt text

2. 新しいアイコンが反映されないのはなぜですか?

  • システムまたはOEMプッシュサービスがアイコンをキャッシュしている可能性があります。
  • アプリをアンインストールし、デバイスを再起動してから再インストールしてみてください。

右側アイコン / 大きな画像の問題

アイコンや画像が表示されないのはなぜですか?

  1. EngageLabチャネル:デフォルトの通知ビルダーインターフェースが呼び出されていないか確認してください。呼び出されている場合は、削除してアプリを再インストールしてください。
  2. APNs(iOS):右側アイコンと大きな画像は同じものです。フォアグラウンドモードでプルダウンしたときにのみ画像が表示され、それ以外の場合はアイコンのみが表示されます。
  3. FCM(Android):初期状態では右側アイコンが表示され、通知を展開すると大きな画像が表示されます。 alt text
icon
お問い合わせ