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

# iOS：画像カルーセルプッシュ通知

> Swiftを使用してOneSignal iOSプッシュ通知に画像カルーセルを実装する方法。

iOSは、通知コンテンツアプリ拡張機能のエントリーポイントとして[UNNotificationContentExtension](https://developer.apple.com/documentation/usernotificationsui/unnotificationcontentextension?language=objc)プロトコルを提供しています。これを使用して、アプリの通知用のカスタムインターフェースを表示できます。このサンプルガイドでは、iOS通知内でカルーセルを作成するためにこれを使用する方法について説明します。

<Frame caption="プッシュ通知のカルーセルを示す画像">
  <img src="https://files.readme.io/8ba64c7-RPReplay_Final1606950566.gif" />
</Frame>

## 1. 通知コンテンツ拡張機能を追加

<Card img="https://mintcdn.com/onesignal/ciRrThfP6xMpI7GY/images/docs/00355f9-Screen_Shot_2020-11-30_at_9.32.26_PM.png?fit=max&auto=format&n=ciRrThfP6xMpI7GY&q=85&s=80e43cac5c764bd0538169f9de8b6743" horizontal="true" width="600" height="315" data-path="images/docs/00355f9-Screen_Shot_2020-11-30_at_9.32.26_PM.png">
  Xcodeで、ファイル > 新規 > ターゲット...を選択します
</Card>

<Card img="https://mintcdn.com/onesignal/Xl2NHJvxakrK4JbL/images/docs/efd0fde-Screen_Shot_2020-11-30_at_3.10.58_PM.png?fit=max&auto=format&n=Xl2NHJvxakrK4JbL&q=85&s=1050faa9adf15303846a0cdee4cb0bab" horizontal="true" width="600" height="431" data-path="images/docs/efd0fde-Screen_Shot_2020-11-30_at_3.10.58_PM.png">
  「Notification Content Extension」を選択します
</Card>

<Card img="https://mintcdn.com/onesignal/6v_cVPknFpo5qSVB/images/docs/0a0fa6a-Screen_Shot_2020-11-30_at_6.44.46_PM.png?fit=max&auto=format&n=6v_cVPknFpo5qSVB&q=85&s=9779778bc953998e3e0ec96642d33e50" horizontal="true" width="600" height="429" data-path="images/docs/0a0fa6a-Screen_Shot_2020-11-30_at_6.44.46_PM.png">
  ポップアップ表示されるウィンドウで選択を確認します
</Card>

<Card img="https://mintcdn.com/onesignal/6tscVAtiSqz353kV/images/docs/ActivateContentExtension.png?fit=max&auto=format&n=6tscVAtiSqz353kV&q=85&s=8e0cf29704f3e01163074be168c3a597" horizontal="true" width="567" height="409" data-path="images/docs/ActivateContentExtension.png">
  デバッグするためにアクティブ化を選択します
</Card>

## 2. アプリにコードを追加

GithubからOSNotificationContentExtensionを[ダウンロード](https://github.com/jfishman1/OSNotificationContentExtension)し、XcodeプロジェクトのOSNotificationContentExtensionを同じファイルで置き換えます。

次のファイルが追加されます：

<Frame caption="Content Extension配下のファイル">
  <img src="https://mintcdn.com/onesignal/6v_cVPknFpo5qSVB/images/docs/0de83b8-Screen_Shot_2020-11-30_at_8.58.01_PM.png?fit=max&auto=format&n=6v_cVPknFpo5qSVB&q=85&s=ab382c7011a4481ab5cc91ce6d1a09cd" width="261" height="125" data-path="images/docs/0de83b8-Screen_Shot_2020-11-30_at_8.58.01_PM.png" />
</Frame>

## 3. 通知カテゴリを設定

この例は、AppDelegate.swiftの`didFinishLaunchingWithOptions`内で[アクション可能な通知タイプを宣言](https://developer.apple.com/documentation/usernotifications/declaring_your_actionable_notification_types)します。

<CodeGroup>
  ```swift Swift theme={null}
  func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {

      //START Authorize OS Notification Carousel Category
      if #available(iOS 10.0, *) {
          let options: UNAuthorizationOptions = [.alert]
          UNUserNotificationCenter.current().requestAuthorization(options: options) { (authorized, error) in
              if authorized {
                  let categoryIdentifier = "OSNotificationCarousel"
                  let carouselNext = UNNotificationAction(identifier: "OSNotificationCarousel.next", title: "👉", options: [])
                  let carouselPrevious = UNNotificationAction(identifier: "OSNotificationCarousel.previous", title: "👈", options: [])
                  let carouselCategory = UNNotificationCategory(identifier: categoryIdentifier, actions: [carouselNext, carouselPrevious], intentIdentifiers: [], options: [])
                  UNUserNotificationCenter.current().setNotificationCategories([carouselCategory])
              }
          }
      }
      //END Authorize OS Notification Carousel Category

      return true
  }
  ```
</CodeGroup>

## 4. プッシュ通知を送信

[プッシュメッセージの送信](./push)時に、iOSカテゴリとカスタムデータを設定できます。

### iOSカテゴリ

iOSカテゴリとして`OSNotificationCarousel`を使用します：

<Tabs>
  <Tab title="ダッシュボード">
    「プラットフォーム設定」 > **Apple iOSに送信** > 「カテゴリ」で設定します

    <Frame caption="OneSignalダッシュボードのiOSプラットフォームオプション">
      <img src="https://mintcdn.com/onesignal/6tscVAtiSqz353kV/images/docs/OSNotificationCarousel.png?fit=max&auto=format&n=6tscVAtiSqz353kV&q=85&s=2e0ff19d9f383aae03d510a34fc2c7fe" width="1101" height="848" data-path="images/docs/OSNotificationCarousel.png" />
    </Frame>
  </Tab>

  <Tab title="API">
    `ios_category` [APIパラメーター](/reference/push-notification)で設定します。
  </Tab>
</Tabs>

### カスタムデータ

OneSignalには、通知ごとに複数の画像をアップロードするオプションはありません。

代わりに、カンマ`,`で区切られた画像URLをリストする必要があります

<Tabs>
  <Tab title="ダッシュボード">
    「詳細設定」 > 「追加データ」で設定します

    「キー」には`images`を設定し、「値」には引用符なしでカンマ区切りのURLのリストを設定します。

    <Frame>
      <img src="https://mintcdn.com/onesignal/4HyuQPBpu-4xjmQC/images/docs/d07200a-Screen_Shot_2020-11-30_at_9.19.59_PM.png?fit=max&auto=format&n=4HyuQPBpu-4xjmQC&q=85&s=1f4911116d4c3a944d1aa282d6566359" width="635" height="307" data-path="images/docs/d07200a-Screen_Shot_2020-11-30_at_9.19.59_PM.png" />
    </Frame>

    例、コピー&ペースト：

    <CodeGroup>
      ```text text theme={null}
      https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823_960_720.jpg,https://cdn.pixabay.com/photo/2013/11/28/10/36/road-220058_960_720.jpg,https://cdn.pixabay.com/photo/2012/08/27/14/19/mountains-55067_960_720.png,https://cdn.pixabay.com/photo/2015/01/28/23/35/landscape-615429_960_720.jpg,https://cdn.pixabay.com/photo/2016/05/05/02/37/sunset-1373171_960_720.jpg
      ```
    </CodeGroup>
  </Tab>

  <Tab title="API">
    次のように`data` [APIパラメーター](/reference/push-notification)を使用します：

    <CodeGroup>
      ```json json theme={null}
      data: {
        "images" : "https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823_960_720.jpg,https://cdn.pixabay.com/photo/2013/11/28/10/36/road-220058_960_720.jpg,https://cdn.pixabay.com/photo/2012/08/27/14/19/mountains-55067_960_720.png,https://cdn.pixabay.com/photo/2015/01/28/23/35/landscape-615429_960_720.jpg,https://cdn.pixabay.com/photo/2016/05/05/02/37/sunset-1373171_960_720.jpg"
      }
      ```
    </CodeGroup>
  </Tab>
</Tabs>

### プッシュを送信

プッシュを受信したら、iOSバージョンに応じて、長押しするか左にスワイプして「表示」をクリックして通知を展開する必要があります。

### 参考資料

* [アクション可能な通知タイプを宣言するAppleのドキュメント](https://developer.apple.com/documentation/usernotifications/declaring_your_actionable_notification_types)
* [Ahmet KeskinによるMediumの有益な投稿](https://medium.com/nsistanbul/carousel-notification-in-ios-5a1e8239d786)

***