> ## 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.

# 通知画像とリッチメディア

> OneSignalのダッシュボードとAPIを使用してモバイルプッシュ通知に画像、GIF、マルチメディアを追加する方法を学びます。推奨される形式、デバイス固有の動作、およびリッチメディアのカスタマイズオプションを含みます。

このガイドでは、**画像とリッチメディア**を使用してモバイルプッシュ通知を強化する方法について、プラットフォームサポート、技術的制限、OneSignalのカスタマイズオプションを含めて説明します。

他のチャネルの画像ガイド：

<Columns cols={2}>
  <Card title="Webプッシュ" href="./push#image" arrow={true}>
    Webプッシュ通知に画像を追加します。
  </Card>

  <Card title="アプリ内メッセージ" href="./design-your-in-app-message" arrow={true}>
    アプリ内メッセージに画像を追加します。
  </Card>

  <Card title="メール" href="./design-emails-with-drag-and-drop" arrow={true}>
    メールに画像を追加します。
  </Card>

  <Card title="SMS" href="./sms-messaging" arrow={true}>
    画像を追加してMMSメッセージを作成します。
  </Card>
</Columns>

***

## モバイルアプリの画像

OneSignalダッシュボードまたはAPIを介してプッシュ通知に画像を追加できます。主に2つのタイプがあります：

### 通知アイコン

* **iOS**：アプリアイコンを自動的に使用します。
* **Android**：カスタムの大きいアイコンと小さいアイコンを許可します。
* セットアップ手順については、[通知アイコン](./notification-icons)を参照してください。

### ビッグピクチャー画像（大きい形式）

* **Android**：ほとんどのデバイスでデフォルトで展開表示されます。
* **iOS**：ユーザーがスワイプダウンまたは長押しする必要があります。

画像を追加するには：

* ダッシュボードの場合：**Messages > New Push > 画像フィールドに「Upload」**
* またはAPIパラメータを使用：`big_picture`（Android）および`ios_attachments`（iOS）

<Frame caption="OneSignalダッシュボードの「Image」フィールドから画像を追加します。">
  <img src="https://mintcdn.com/onesignal/YOTSrtBSoqdrJ37A/images/docs/4cb2ac2-Screenshot_2024-03-15_at_11.19.45_AM.png?fit=max&auto=format&n=YOTSrtBSoqdrJ37A&q=85&s=d8fa92fdbd9a610dcdbbb2ef5065d08b" width="1828" height="828" data-path="images/docs/4cb2ac2-Screenshot_2024-03-15_at_11.19.45_AM.png" />
</Frame>

***

## 画像仕様

2:1のアスペクト比の横向き画像を使用してください。

|              | iOS                                                                                            | Android                                                            |
| ------------ | ---------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ |
| **ファイルタイプ**  | `jpg`, `jpeg`, `png`, `gif`                                                                    | `jpg`, `jpeg`, `png`, `gif`\*                                      |
| **解像度**      | 1:1アスペクト比または2:1アスペクト比（例：`1038x1038px`または`1024×512px`）<br />**最大幅：** 2000px<br />**最小幅：** 300px | 2:1アスペクト比（例：`1024×512px`）<br />**最大幅：** 2000px<br />**最小幅：** 300px |
| **APIパラメータ** | `ios_attachments`                                                                              | `big_picture`                                                      |

* \*Androidはアニメーション**GIFをサポートしていません**。
* [アクションボタン](./action-buttons)を追加すると、画像表示領域が縮小される場合があります。
* 画像が表示されない場合は、[通知画像が表示されない](./notification-images-not-showing)を参照してください。

<Warning>
  OneSignalは5MBのアップロード制限を適用し、オーディオまたはビデオのアップロードはサポートしていません。ホストされた画像は33日後に期限切れになります。長期使用の場合は、独自の静的URLにアップロードするか、テンプレートを使用してください。
</Warning>

***

## リッチ通知のカスタマイズ

OneSignalは、ネイティブプラットフォーム機能を使用して、より深い視覚的およびインタラクティブなカスタマイズをサポートします。

### Androidカスタム通知レイアウト

Android 12+は、カスタム通知にシステムテンプレートを適用します。ただし、Androidの標準通知スタイルを使用してレイアウトをカスタマイズできます。詳細については、[動作変更](https://developer.android.com/about/versions/12/behavior-changes-12#custom-notifications)を参照してください。

レイアウトをカスタマイズするには：

* [Androidのカスタム通知ガイド](https://developer.android.com/develop/ui/views/notifications/custom-notification)に従ってください
* [通知サービス拡張](./service-extensions)を介して変更を適用します
* 使用可能なカスタマイズについては、[Notification.DecoratedCustomViewStyle](https://developer.android.com/reference/android/app/Notification.DecoratedCustomViewStyle)を参照してください。

### iOSコンテンツ拡張

iOSは[`UNNotificationContentExtension`](https://developer.apple.com/documentation/usernotificationsui/unnotificationcontentextension?language=objc)を使用して、通知でリッチメディアとインタラクティブ性を有効にします。

サポートされている機能：

* 画像カルーセル
* 埋め込みビデオ再生
* カレンダーやチャットプレビューなどのカスタムビュー

セットアップ手順については、[iOSカルーセルガイド](./ios-image-carousel-push-notifications)を参照してください。

***

## サポートされているメディア添付ファイル

リッチメディアは、外部ホストコンテンツへのURLを介して追加できます。これは、iOSの`UNNotificationContentExtension`で機能します。

<Warning>
  * URLがファイルへの直接リンクであり、正しい拡張子で終わることを確認してください。そうでない場合は、クエリ（例：`?file=video.mp4`）を追加して、SDKがメディアタイプを検出できるようにします。
  * OneSignalは、アップロードされた画像に5MBの制限があります。ビデオとオーディオは外部にホストする必要があります。Webページではなく、メディアファイルに直接リンクしてください。
</Warning>

| 添付ファイル    | ファイルタイプ                                | 最大サイズ | 要件                                                                                                                                             |
| --------- | -------------------------------------- | ----- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
| **オーディオ** | `aif`, `aiff`, `wav`, `mp3`            | 5MB   | なし                                                                                                                                             |
| **ビデオ**   | `mp4`, `mpeg`, `mpeg2`, `mpeg4`, `avi` | 50MB  | [`UNNotificationContentExtension`](https://developer.apple.com/documentation/usernotificationsui/unnotificationcontentextension?language=objc) |
| **画像**    | `jpg`, `jpeg`, `png`, `gif`            | 10MB  | [OneSignalNotificationServiceExtension](./service-extensions)                                                                                  |

<Note>
  [OneSignalNotificationServiceExtension](./service-extensions)はOneSignal SDKに含まれており、画像サポート、配信追跡、およびバッジ更新に必要です。
</Note>

***

## テストのヒント

メディアがデバイス全体で正しく表示されることを確認してください：

* 常に実際のデバイスでテストします（エミュレーターではありません）。
* iOSでは、リッチメディアを表示するために長押しまたはスワイプダウンが必要です。
* Androidのレンダリングは、デバイス、OSバージョン、およびアクションボタンの有無によって異なります。
* キャンペーンを開始する前に、OneSignalの\*\*「Send Test」\*\*ボタンを使用してください。

### ユースケースの例

* カート放棄リマインダーに製品写真を表示する
* ビデオプレビュー（iOSのみ）で新しい映画の予告編を宣伝する
* フラッシュセール用のアニメーションバナーを送信する

***

## トラブルシューティング

画像が期待どおりに表示されない場合は、一般的な原因と修正方法について[通知画像が表示されない](./notification-images-not-showing)ガイドを参照してください。

***