KurocoとNuxt.jsで配信購読者の登録・停止フォームを作成する

Kurocoを利用したNuxt.jsプロジェクトで、配信機能の購読者を登録・解除するフォームを構築する方法について説明します。
本チュートリアルで作成するフォームの動作は下記となります。

ボタン	動作
購読する	クリックすると、入力されたメールアドレスを配信購読者に登録する。
購読解除する	クリックすると、入力されたメールアドレスを配信購読者から削除する。
テスト送信する	クリックすると、入力されたメールアドレス宛にテストメールを送信する。

なお、本チュートリアルでは配信IDが1の配信への購読/購読解除を行います。
配信については、管理画面マニュアル -> 配信一覧をご参照ください。

事前準備

Nuxtプロジェクトの構築。

このページはKurocoとNuxt.jsでのプロジェクトが構築済みであることを前提としています。
まだ構築していない場合は、Kurocoビギナーズガイドを参考に構築をお願いいたします。

APIの作成

まずはAPIを新規で作成します。
Kuroco管理画面のAPIより「追加」をクリックします。

API作成画面が表示されます。

下記入力し「追加する」をクリックします。

項目	設定内容
タイトル	Magazine
版	1.0
ディスクリプション	配信登録・解除用のAPI

CORSの設定

次にCORSの設定をします。[CORSを設定する] をクリックします。

CORS_ALLOW_ORIGINSの [Add Origin] をクリックし、下記を追加します。

http://localhost:3000

CORS_ALLOW_METHODSの [Add Method] をクリックし、下記を追加します。

GET
POST
OPTIONS

設定できたら[保存する]をクリックし、CORSの設定が完了です。

以上で、APIの設定が完了です。

配信登録の機能を実装する

エンドポイントの登録

まずは、配信登録に利用するエンドポイントを設定します。
[新しいエンドポイントの追加]をクリックします。

magazine_subscribeエンドポイントを下記設定にて作成します。

項目	設定内容
パス	magazine_subscribe
カテゴリー	配信
モデル	Magazine v1
オペレーション	subscribe
allow_magazine_id	1

設定完了後、「追加」をクリックし配信登録用のエンドポイント完成です。

フロントエンドの実装

次に、フロントエンドにマガジンの配信登録フォームを作成します。
subscribeのフォルダを作成し、以下のindex.vueファイルを追加します。

postの処理のエラー時のレスポンスはerror.response.dataで受け取ることができます。下記のファイルではthis.resultMessage = error.response.data.errors[0].messageの記述でKurocoのメッセージを取得しています。

/subscribe/index.vue

<template>
  <div>
    <form>
    <h1>マガジン登録</h1>
      <p v-if="resultMessage !== null">
        {{ resultMessage }}
      </p>
    <input v-model="emailEntered" name="email" type="email" placeholder="email">
    <button v-on:click.prevent="subscribeSubmit">購読する</button>
   </form>
  </div>
</template>

<script>
export default {
  data () {
    return {
      emailEntered: '',
      resultMessage: null,
      }
  },
  methods: {
    //購読するクリック時の動作
    async subscribeSubmit() {
      try {
        const payload = {
                    email: this.emailEntered
                }
        // post data
        const response = await this.$axios.$post(
          `/rcms-api/19/magazine_subscribe/1`, payload)
          this.resultMessage = response.messages[0]
      } catch (error) {
         this.resultMessage = error.response.data.errors[0].message
      }
    }
  }
}
</script>

npm run devを実行して動作の確認をします。
メールアドレスを入力し、[購読する]をクリックします。

Kurocoの管理画面で[配信]->[定期購読者]をクリックします。

[配信購読者一覧]のページに遷移し、先ほど入力したメールアドレスが購読者として登録されていることが確認できました。

配信停止の機能を実装する

エンドポイントの登録

次に、購読解除に利用するエンドポイントを設定します。
[新しいエンドポイントの追加]をクリックします。

magazine_unsubscribeエンドポイントを下記設定にて作成します。

項目	設定内容
パス	magazine_unsubscribe
カテゴリー	配信
モデル	Magazine v1
オペレーション	unsubscribe
allow_magazine_id	1

設定完了後、「追加」をクリックしテスト送信用のエンドポイント完成です。

フロントエンドの実装

次に、フロントエンドにマガジンの配信登録解除用のボタンを追加します。
/subscribe/index.vueファイルを以下のように修正します。

/subscribe/index.vue

<template>
  <div>
    <form>
    <h1>マガジン登録</h1>
      <p v-if="resultMessage !== null">
        {{ resultMessage }}
      </p>
    <input v-model="emailEntered" name="email" type="email" placeholder="email">
    <button v-on:click.prevent="subscribeSubmit">購読する</button>    
    <button v-on:click.prevent="unsubscribeSubmit">購読解除する</button>
   </form>
  </div>
</template>

<script>
export default {
  data () {
    return {
      emailEntered: '',
      resultMessage: null,
      }
  },
  methods: {
    //購読するクリック時の動作
    async subscribeSubmit() {
      try {
        const payload = {
                    email: this.emailEntered
                }
        // post data
        const response = await this.$axios.$post(
          `/rcms-api/19/magazine_subscribe/1`, payload)
          this.resultMessage = response.messages[0]
      } catch (error) {
         this.resultMessage = error.response.data.errors[0].message
      }
    },
    //購読解除するクリック時の動作
    async unsubscribeSubmit() {
      try {
        const payload = {
                    email: this.emailEntered
                }
        // post data
        const response = await this.$axios.$post(
          `/rcms-api/19/magazine_unsubscribe/1`, payload)
          this.resultMessage = response.messages[0]
      } catch (error) {
         this.resultMessage = error.response.data.errors[0].message
      }
    },
  }
}
</script>

npm run devを実行して動作の確認をします。
メールアドレスを入力し、[購読解除する]をクリックします。

Kurocoの管理画面で[配信]->[定期購読者]をクリックします。

[配信購読者一覧]のページに遷移し、先ほど入力したメールアドレスが購読者一覧から削除されていることが確認できました。

テスト送信の機能を実装する

最後に配信メールのテスト送信をする機能を実装します。

配信::Magazine::sendのエンドポイントは、カスタムメンバーフィルターで登録した宛先にメールを送信するエンドポイントになるため、今回は使用しません。
今回は、特定のメールアドレス宛にメールを送信するため、「カスタム処理と紐づいたAPIエンドポイントを作成する」のチュートリアルを参考に、カスタム処理を利用してメール送信する機能を実装します。

エンドポイントの登録

まず、カスタム処理と紐づくAPIエンドポイントを作成します。
[新しいエンドポイントの追加]をクリックします。

magazine_sendMail エンドポイントを下記設定にて作成します。

項目	設定内容
パス	magazine_sendMail
カテゴリー	API
モデル	Api v1
オペレーション	request_api_post
name	magazine_sendMail

設定完了後、「追加」をクリックしカスタム処理と紐づいてテストメールを送信するためのエンドポイント完成です。

カスタム処理の登録

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

カスタム処理一覧が表示されるので、[追加]をクリックします。

カスタム処理を下記設定にて作成します。

項目	設定内容
タイトル	マガジン登録フォームのテストメール送信
識別子	magazine_sendMail
言語	Kuroco Smaraty
実行内容	下記の記述

実行内容

{if $smarty.request.mail_to|strpos:"@" === false}  
  {assign var="errors." value="メールアドレスが不正です。"}  
{else}  
  {sendmail var=result to=$smarty.request.mail_to subject='テストメール' contents="こちらはマガジンのテストメールです。本アドレスからのメールを受信できるよう設定ください。" from="noreply@kuroco-mail.app"  from_nm="test"}  
  {if !$result}  
    {assign var="errors." value="メールの送信に失敗しました。管理者にログを確認してもらってください。"}  
  {/if}  
{/if}

設定完了後、「追加する」をクリックします。
こちらで/rcms-api/19/magazine_sendMailのエンドポイントに{"mail_to":"example@example.com"}の形式でpostすると、処理が実行されます。これにより、テストメールが送信されるようになりました。

from、from_nmは省略可能です。 fromに独自ドメインのメールを利用する場合はSendGridとの連携が必要です。
SendGrid連携方法

メッセージひな形で追加したメールテンプレートの送信も可能です。その場合はメッセージひな形でテンプレートと識別子を設定し、カスタム処理の実行内容を以下のように記述してください。
{sendmail var=result to=$smarty.request.mail_to subject='testmail' mail_template='mail_test' }
mail_template=''でメッセージひな形の識別子を指定します。

フロントエンドの実装

次に、フロントエンドにマガジンのテスト送信用のボタンを追加します。
/subscribe/index.vueファイルを以下のように修正します。

/subscribe/index.vue

<template>
  <div>
    <form>
    <h1>マガジン登録</h1>
      <p v-if="resultMessage !== null">
        {{ resultMessage }}
      </p>
    <input v-model="emailEntered" name="email" type="email" placeholder="email">
    <button v-on:click.prevent="subscribeSubmit">購読する</button>    
    <button v-on:click.prevent="unsubscribeSubmit">購読解除する</button>
    <button v-on:click.prevent="sendTestMail">テスト送信する</button>
   </form>
  </div>
</template>

<script>
export default {
  data () {
    return {
      emailEntered: '',
      resultMessage: null,
      }
  },
  methods: {
    //購読するクリック時の動作
    async subscribeSubmit() {
      try {
        const payload = {
                    email: this.emailEntered
                }
        // post data
        const response = await this.$axios.$post(
          `/rcms-api/19/magazine_subscribe/1`, payload)
          this.resultMessage = response.messages[0]
      } catch (error) {
         this.resultMessage = error.response.data.errors[0].message
      }
    },
    //購読解除するクリック時の動作
    async unsubscribeSubmit() {
      try {
        const payload = {
                    email: this.emailEntered
                }
        // post data
        const response = await this.$axios.$post(
          `/rcms-api/19/magazine_unsubscribe/1`, payload)
          this.resultMessage = response.messages[0]
      } catch (error) {
         this.resultMessage = error.response.data.errors[0].message
      }
    },
    //テスト送信するクリック時の動作
    async sendTestMail() {
      try {
        const payload = {
                    mail_to: this.emailEntered
                }
        // post data
        const response = await this.$axios.$post(
          `/rcms-api/19/magazine_sendMail`, payload)
          this.resultMessage = 'テストメールを送信しました。'
      } catch (error) {
         this.resultMessage = error.response.data.errors[0].message
      }
    }
  }
}
</script>

npm run devを実行して動作の確認をします。
メールアドレスを入力し、[テスト送信する]をクリックします。

テストメールの受信を確認できました。

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

お探しのページは見つかりましたか？解決しない場合は、問い合わせフォームからお問い合わせいただくか、Slackコミュニティにご参加ください。