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

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

Image from Gyazo

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

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

事前準備

Nuxtプロジェクトの構築。

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

APIの作成

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

Image from Gyazo

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

Image from Gyazo

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

Image from Gyazo

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

CORSの設定

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

Image from Gyazo

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

  • http://localhost:3000

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

  • GET
  • POST
  • OPTIONS

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

Image from Gyazo

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

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

エンドポイントの登録

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

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

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

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

フロントエンドの実装

次に、フロントエンドにマガジンの配信登録フォームを作成します。
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を実行して動作の確認をします。
メールアドレスを入力し、[購読する]をクリックします。
Image from Gyazo

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

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

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

エンドポイントの登録

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

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

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

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

フロントエンドの実装

次に、フロントエンドにマガジンの配信登録解除用のボタンを追加します。
/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を実行して動作の確認をします。
メールアドレスを入力し、[購読解除する]をクリックします。
Image from Gyazo

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

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

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

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

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

エンドポイントの登録

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

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

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

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

カスタム処理の登録

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

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

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

項目設定内容
タイトルマガジン登録フォームのテストメール送信
識別子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すると、処理が実行されます。これにより、テストメールが送信されるようになりました。

fromfrom_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を実行して動作の確認をします。
メールアドレスを入力し、[テスト送信する]をクリックします。
Image from Gyazo

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

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

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