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のメッセージを取得しています。
<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(
process.env.BASE_URL + `/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
ファイルを以下のように修正します。
<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(
process.env.BASE_URL + `/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(
process.env.BASE_URL + `/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 |
設定完了後、「追加」をクリックしオリジナル処理と紐づいてテストメールを送信するためのエンドポイント完成です。
オリジナル処理の登録
オリジナル処理一覧が表示されるので、[追加]をクリックします。
項目 | 設定内容 |
---|---|
タイトル | マガジン登録フォームのテストメール送信 |
Slug | 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連携方法
メールひな形で追加したメールテンプレートの送信も可能です。
その場合はメールひな形でテンプレートとslugを設定し、オリジナル処理の実行内容を{sendmail var=result to=$smarty.request.mail_to subject='testmail' mail_template='mail_test' }
のように記述してください。mail_template=''
でメールひな形のslugを指定します。
フロントエンドの実装
次に、フロントエンドにマガジンのテスト送信用のボタンを追加します。
/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(
process.env.BASE_URL + `/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(
process.env.BASE_URL + `/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(
process.env.BASE_URL + `/rcms-api/19/magazine_sendMail`, payload)
this.resultMessage = 'テストメールを送信しました。'
} catch (error) {
this.resultMessage = error.response.data.errors[0].message
}
}
}
}
</script>
npm run dev
を実行して動作の確認をします。
メールアドレスを入力し、[テスト送信する]をクリックします。
以上で、配信機能の購読者を登録・解除するフォームを構築する方法についての説明を終了します。