---
title: 配信購読者の登録・停止フォームを作成する
category: フロントエンド
description: Kurocoを利用したNuxt.jsプロジェクトで、配信機能の購読者を登録・解除するフォームを構築する方法について説明します。
---

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

## 概要
Kurocoを利用したNuxt.jsプロジェクトで、配信機能の購読者を登録・解除するフォームを構築する方法について説明します。  
配信の登録・解除を行う `MagazineSubscriber::subscribe/unsubscribe` のエンドポイントは`email`をポストするだけで動作しますが、
エンドポイントのURLが分かれば、他人のメールアドレスを登録・解除できてしまいます。

そこで本チュートリアルでは、ログインを必須にする方法と、keyを使って配信解除をする方法の2つを紹介します。

### 学べること
以下の2パターンで配信購読者の登録・解除をする動作を実装します。
- [ログイン必須の配信登録・解除を行う](#ログイン必須の配信登録解除を行う)
- [ログイン不要の配信登録・解除を行う](#ログイン不要の配信登録解除を行う)

### 前提条件
このページはKurocoとNuxt.jsでのプロジェクトが構築済みであることを前提としています。  
まだ構築していない場合は、下記のチュートリアルを参照してください。  

:::info
[Kurocoビギナーズガイド](/ja/docs/tutorials/beginners-guide/)
:::

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

## ログイン必須の配信登録・解除を行う
配信の登録・解除をログイン状態でのみ動作するように実装します。  
ログイン必須(`self_only`の設定)にしたエンドポイントは`email`をpostしても動作せず、ログイン状態で自身の`member_id`をpostして配信の登録・解除を行います。

### エンドポイントの登録 
[新しいエンドポイントの追加]をクリックし、配信登録のエンドポイントと、ログインのエンドポイントを作成します。  

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

#### 配信登録のエンドポイント
以下の内容を設定し、「追加」をクリックします。

|項目|設定内容|
| :--- | :--- |
|パス|magazine_subscribe|
|カテゴリー|配信|
|モデル|MagazineSubscriber|
|オペレーション|subscribe|
|allow_magazine_id|1|
|self_only|チェックを入れる|

#### 配信解除のエンドポイント
以下の内容を設定し、「追加」をクリックします。

|項目|設定内容|
| :--- | :--- |
|パス|magazine_unsubscribe|
|カテゴリー|配信|
|モデル|MagazineSubscriber|
|オペレーション|subscribe|
|allow_magazine_id|1|
|self_only|チェックを入れる|

#### ログインのエンドポイント
ログインのエンドポイントはデフォルトで設定されているものを使用します。
無い場合は以下の内容でログインのエンドポイントを作成します。

|項目|設定内容|
| :--- | :--- |
|パス|login|
|カテゴリー|認証|
|モデル|Login|
|オペレーション|login_challenge|

#### profileのエンドポイント
profileのエンドポイントはデフォルトで設定されているものを使用します。
無い場合は以下の内容でprofileのエンドポイントを作成します。

|項目|設定内容|
| :--- | :--- |
|パス|profile|
|カテゴリー|認証|
|モデル|Login|
|オペレーション|profile|

### フロントエンドの実装
次に、フロントエンドにマガジンの配信登録フォームを作成します。  
`/subscribe_with_login`のディレクトリで表示できるよう以下のファイルを追加します。  

また、エラーメッセージはpostの処理のエラー時のレスポンスを受け取ることで、Kurocoのエラーメッセージをそのまま表示しています。

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

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

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

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

</TabItem>
</Tabs>

:::caution
上記サンプルのサンプルは参考のため最低限のコードになっています。  
実際に利用する際には、バリデーション処理や、ログイン機能のためにライブラリもご利用ください。
:::

### 動作の確認
#### 配信登録する
`npm run dev`を実行して動作の確認をします。  
`/subscribe_with_login`のURLでログイン実行後、[Subscribe]するをクリックすると、KurocoのエンドポイントにAPIリクエストが行われ、「登録しました。」の表示が確認できます。  

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

[配信 購読者一覧](/ja/docs/management/notification-subscribers/)のページを確認すると、配信購読者が登録されていることが分かります。

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

#### 配信解除する
次に[Subscribe]するをクリックすると、KurocoのエンドポイントにAPIリクエストが行われ、「退会しました。」の表示が確認できます。  

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

購読者一覧のページでも配信購読者が削除されていることが分かります。

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

## ログイン不要の配信登録・解除を行う
配信登録はemailだけで登録できるようにし、配信解除は配信メッセージの[配信解除する]のリンクをクリックすることで解除するように実装します。  
未ログインでの配信解除では、他人の購読を勝手に解除できないよう購読者ごとに割り当てられたkeyを使用します。

keyは管理画面の[配信 購読者一覧](/ja/docs/management/notification-subscribers/)で確認できます。  

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

### エンドポイントの登録 
[新しいエンドポイントの追加]をクリックし、配信登録のエンドポイントと、ログインのエンドポイントを作成します。  

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

#### 配信登録のエンドポイント
以下の内容を設定し、「追加」をクリックします。

|項目|設定内容|
| :--- | :--- |
|パス|magazine_subscribe_with_key|
|カテゴリー|配信|
|モデル|MagazineSubscriber|
|オペレーション|subscribe|
|allow_magazine_id|1|

#### 配信解除のエンドポイント
以下の内容を設定し、「追加」をクリックします。

|項目|設定内容|
| :--- | :--- |
|パス|magazine_unsubscribe_with_key|
|カテゴリー|配信|
|モデル|MagazineSubscriber|
|オペレーション|subscribe|
|allow_magazine_id|1|
|required_key|チェックを入れる|

### カスタム処理の作成
配信解除を行うためのkeyは[配信 購読者一覧](/ja/docs/management/notification-subscribers/)に表示されています。
このkeyを配信メッセージ内で使えるようにするためのカスタム処理を作成します。

[オペレーション] -> [カスタム処理]をクリックします。  

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

[追加]をクリックします。  

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

以下のように入力します。

|項目|設定|
|:--|:--|
|タイトル|マガジンの差し込み(key,emailを使えるようにする)|
|識別子|substitution_key|
|これを使ったコンポーネント|トリガー: `配信の差し込み`<br/>値：1|
|処理|以下のコード|

```smarty
{assign_array var=substitutions values=''}
{assign var=substitutions.key   value=$member_info.key}
{assign var=substitutions.email value=$member_info.email}
```

### フロントエンドの実装
フロントエンドは配信登録用のページと、配信解除用のページを作成します。

まずは配信登録用のページを作成します。  
`/subscribe_with_key`のディレクトリで表示できるよう以下のファイルを追加します。  

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

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

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

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

</TabItem>
</Tabs>

次に配信解除用のページを作成します。  
`/subscribe_with_key/unsubscribe`のディレクトリで表示できるよう以下のファイルを追加します。

配信解除用のページは配信メッセージに記載したリンクからアクセスすることを前提としています。  

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

```markup reference title="/pages/subscribe_with_key/unsubscribe.vue"
https://github.com/diverta/kuroco-documents/blob/main/sample_code/front-end/nuxtjs/subscribe_with_key_unsubscribe.vue
```

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

```markup reference title="/pages/subscribe_with_key/unsubscribe.vue"
https://github.com/diverta/kuroco-documents/blob/main/sample_code/front-end/nuxt3/subscribe_with_key_unsubscribe.vue
```

</TabItem>
</Tabs>

### 動作の確認
#### 配信登録する
`npm run dev`を実行して動作の確認をします。  
`/subscribe_with_key`のURLでemailを入力し[Subscribe]をクリックすると、KurocoのエンドポイントにAPIリクエストが行われ、「登録しました。」の表示が確認できます。  

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

[配信 購読者一覧](/ja/docs/management/notification-subscribers/)のページを確認すると、配信購読者が登録されていることが分かります。

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

#### 配信メッセージを送付する
[配信 メッセージ作成](/ja/docs/management/notification-message-editor/)から購読者宛に以下のメールを送付します。

```html
<p>Thank you for trying our service!</p>
<p>This email is sent from Kuroco. If you wish to unsubscribe, please click <a href="http://localhost:3000/subscribe_with_key/unsubscribe?email=%email%&key=%key%">here</a>.</p>
<p>Best regards,<br>Kuroco Team</p>
```

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

購読解除ページへのリンクが付いた配信メッセージが届きます。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/786defbce9bff6f5998b55990337765d.png)

#### メッセージに記載のリンクから購読解除する
リンクにアクセスすると、クエリパラメータに付与されたemailとkeyをKurocoのエンドポイントにAPIリクエストし、購読解除の処理が完了します。  

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

以上で、配信機能の購読者を登録・解除するフォームを構築する方法についての説明を終了します。  

## 関連ドキュメント
- [カスタム処理に利用できるトリガと変数の一覧 - 配信の差し込み](/ja/docs/reference/trigger-variables/#配信の差し込み)