---
title: 複数のメールマガジンを一度に登録・解除するページを作成する
description: MagazineInfo::listのエンドポイントにself_onlyのパラメータを設定して利用すると自身の購読している配信の一覧が取得できます。本チュートリアルではこちらを利用して、複数のメールマガジンとその購読状態が表示され、一度に登録・解除できるページを作成します。
---

## 概要
`MagazineInfo::list`のエンドポイントにself_onlyのパラメータを設定して利用すると自身の購読している配信の一覧が取得できます。  
本チュートリアルではこちらを利用して、複数のメールマガジンとその購読状態が表示され、一度に登録・解除できるページを作成します。  

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

### 学べること
以下の手順で階層構造を持ったコメントの追加と取得をします。
- [複数の配信を準備する](#複数の配信を準備する)
- [エンドポイントを設定する](#エンドポイントを設定する)
- [フロントエンドを実装する](#フロントエンドを実装する)
- [動作の確認をする](#動作の確認をする)

### 前提条件
:::info
このページはKurocoとNuxt.jsでのプロジェクトが構築済みであり、ログイン画面の実装がされていることを前提としています。  
まだ構築していない場合は、下記のチュートリアルを参照してください。  
[Kurocoビギナーズガイド](/ja/docs/tutorials/beginners-guide/)  
[KurocoとNuxt.jsで、ログイン画面を構築する](/ja/docs/tutorials/integrate-login/)
:::

:::info
本チュートリアルでは以下のバージョンでコードを書いています。  
Nuxt2: v2.15.8  
Nuxt3: v3.8.0  
:::

## 複数の配信を準備する
まずはKurocoの管理画面で複数の配信を登録します。  
[キャンペーン]->[配信]で配信一覧に遷移し、右上の[追加]をクリックして配信を登録します。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/83dde7ca8ec2010d77ead21da36e8a72.png)

今回は以下のように3つの配信を準備しました。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/a7deeedea451e9a94c82b4262579bd32.png)

配信のIDはエンドポイントに設定するのでメモしてください。

## エンドポイントを設定する
エンドポイントは Login::login_challenge のエンドポイントが設定されたAPI設定に追加します。  
そうすることでログインした認証情報を利用してエンドポイントへのリクエストが行われます。
異なるAPI間で認証情報は共有できませんので注意してください。

今回は自身の購読している配信一覧を取得するエンドポイントと、配信登録するエンドポイント、配信解除するエンドポイントの3つを設定します。  

[新しいエンドポイントの追加]をクリックして、それぞれ作成します。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/1e20df3e56291487f859a3cbd905b261.png)

**配信一覧を取得するエンドポイント**

|項目|設定内容|
| :--- | :--- |
|パス|my_magazine/info|
|カテゴリー|マガジン|
|モデル|MagazineInfo|
|オペレーション|list|
|magazine_id|レスポンスの対象となる配信IDを入力する<br/>7<br/>8<br/>9|
|self_only|チェックを入れる|

![Image from Gyazo](https://t.gyazo.com/teams/diverta/924e9291e755a32287452c2518d50e04.png)

![Image from Gyazo](https://t.gyazo.com/teams/diverta/9bc676e1818055eb7038b911559e63bd.png)

:::tip
self_onlyを有効にすると、購読している配信のみレスポンスされます。
購読有無によらない配信の一覧をAPIから取得する場合は、self_onlyを付与しない`MagazineInfo::list`のエンドポイントを別途作成して利用してください。
:::

**配信登録するエンドポイント**

|項目|設定内容|
| :--- | :--- |
|パス|magazine/subscribe|
|カテゴリー|マガジン|
|モデル|MagazineSubscriber|
|オペレーション|subscribe |
|allow_magazine_id|エンドポイントを利用して購読者登録を許可する配信IDを入力する<br/>7<br/>8<br/>9|
|self_only|チェックを入れる|

![Image from Gyazo](https://t.gyazo.com/teams/diverta/034ca5590ffc13d3be0b6dfa434832ce.png)

![Image from Gyazo](https://t.gyazo.com/teams/diverta/6a50ba20972c3afa409925f3bff0cb69.png)

:::caution
self_onlyにチェックが無い場合、エンドポイントが分かれば他人を購読者に追加できてしまうのでご注意ください。
:::

:::caution
allow_magazine_idの指定が無い場合、全ての配信に対して購読者登録できてしまうのでご注意ください。
:::

**配信解除するエンドポイント**

|項目|設定内容|
| :--- | :--- |
|パス|magazine/unsubscribe|
|カテゴリー|マガジン|
|モデル|MagazineSubscriber|
|オペレーション|unsubscribe|
|allow_magazine_id|エンドポイントを利用して購読解除を許可する配信IDを入力する<br/>7<br/>8<br/>9|
|self_only|チェックを入れる|

![Image from Gyazo](https://t.gyazo.com/teams/diverta/58166c33f40dac4b8b0dcd9fd4416dc5.png)

![Image from Gyazo](https://t.gyazo.com/teams/diverta/b35ebe8a134376a0e2d8cafb49ddab92.png)

:::caution
self_onlyにチェックが無い場合、エンドポイントが分かれば他人の購読者登録を削除できてしまうのでご注意ください。
:::

:::caution
allow_magazine_idの指定が無い場合、全ての配信に対して購読者登録の削除ができてしまうのでご注意ください。
:::

:::tip
本チュートリアルでは利用していませんがMagazineSubscriber::listのエンドポイントを利用すると、配信に対する購読者の一覧が取得できます。  
`search_mail_address contains "@example.com"`のようにフィルタをかけるとメールアドレスのドメイン名で検索が可能です。  
管理者向けの管理画面を実装する場合にご活用ください。
:::

## フロントエンドを実装する

以下のファイルを作成します。

<Tabs>
<TabItem value="Nuxt2" label="Nuxt2" default>

```markup reference title="/pages/mypage/magazine/index.vue"
https://github.com/diverta/kuroco-documents/blob/main/sample_code/front-end/nuxtjs/multiple_magazines_update.vue
```

</TabItem>
<TabItem value="Nuxt3" label="Nuxt3" default>

```markup reference title="/pages/mypage/magazine/index.vue"
https://github.com/diverta/kuroco-documents/blob/main/sample_code/front-end/nuxt3/multiple_magazines_update.vue
```

</TabItem>
</Tabs>

今回はサンプルとしてラジオボタンで購読状態を表示し、変更があった場合は変更があったタイミングですぐにAPIリクエストを送信する実装としました。  

:::tip
Sumbitボタンを付けて、Submit時にまとめてPOSTのリクエストを送る場合は、配信の数が増えると処理に時間がかかる場合があります。  
変更のない配信へのリクエストを省略したり、新しい購読状態をバッチに登録させて処理させるなどの工夫をしてください。  
:::

## 動作の確認をする

ログイン後に対象のディレクトリにアクセスすると、配信の一覧が表示され、購読状態を更新したタイミングでAPIリクエストが送信されることを確認できます。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/ab1328c88661fefa5e2b689603e5ee54.gif)

## 関連ドキュメント
- [KurocoとNuxt.jsで配信購読者の登録・停止フォームを作成する](/ja/docs/tutorials/implement-a-magazine-subscription-unsubscription-form/)