ポートフォリオサイトのお問い合わせフォームをSendgrid + microCMSで作成したお話します。
site: https://uemu-engineer.com/
うえむーポートフォリオサイトのお問い合わせフォームをSendgrid + microCMSで作成したお話うえむー
View Slide
自己紹介Name:うえむー フロントエンドエンジニアJob Skill:html / css / scss / javascript / jQuery / vue.js / php etc...Private Skill:next.js / React.js / nuxt.js / micro cms / go etc...Hobby:プログラミング学習・ボードゲーム・麻雀・筋トレSNS・ブログサイトTwitter::https://twitter.com/uemuragame5683ブログサイト:https://nu-blogsite.net/ポートフォリオサイト:https://uemu-engineer.com/
目次・サイト紹介・Send Gridについて・SendGridを登録・API発行・実装・まとめ
サイト紹介
サイトの紹介https://uemu-engineer.com/
サイト全体図domainFrame workCMSSource codecontrolHostingCDN お名前.comMail Platform
Send Gridについて
SendGrid って何?SendGridというのは全世界で利用されているメール配信プラットフォームです。 クラウドサービスを会員登録するだけで、トランザクションメール・マーケティングメールをメールサーバー不要で利用できます。 有料プラン・無料プランがあります。
SendGridでフリープランでできることメール送信API・SMTPリレー・WebAPI(HTTPS)マーケティングキャンペーン機能上限2,000件通数上限 12,000通/月日本語ドキュメント日本語での無料サポート配信結果の把握・サプレッション管理配信状況の確認(到達 /再送/エラー等)開封・クリックの測定配信停止管理独自ドメイン利用 etc...
改修内容Mail Platformお問い合わせフォームHeadless cms変更前 変更後Headless cmsお問い合わせフォームmail
SenadGridを登録・API発行
SendGridを登録・API発行する仮登録完了メール受信されるので本登録「ユーザー情報を登録」ボタンを押下すると新規会員登録に遷移され本登録会員登録後、以下のメールが受信されユーザ名が発行※審査が通らないと利用できません。「無料で始める」ボタンを押下して会員登録「メールアドレス」を入力して仮登録12345
SendGridを登録・API発行するAPI KEYSをクリックします。以下の様にAPI発行される様になります。
実装編
SendGridをインストールnpm install --save @sendgrid/mailpackage.json "dependencies" : {..."@sendgrid/mail" : "^7.4.7",...}, command sendgrid/mailをnpmでインストールします。package.jsonにsendgrid/mailをインストールされていることを確認できます。
envを設定NS_GRID_API_KEY='SG.XXXXXXX'[email protected]next.config.js module.exports = {env: {NS_GRID_API_KEY: process.env.NS_GRID_API_KEY ,NS_FROM: process.env.NS_FROM,},...};.env 発行したAPIKeyを入力します送信先のアドレスを入力しますnext.config.jsファイルを開きenvの設定を追加します
api/send.tsxexport default function handler(req, res) {if(req.method === 'POST') {const sgMail = require('@sendgrid/mail');sgMail.setApiKey(process.env.NS_GRID_API_KEY);const msg = {to: req.body.email,from: process.env.NS_FROM,subject: 'お問合せありがとうございました。',text: req.body.name + '様平素より、Nu-。。。' + req.body.body,html: req.body.name + '様平素より、Nu-。。。' + req.body.body,};(async () => {try {await sgMail.send(msg);} catch (error) {console.error(error);if (error.response) {console.error(error.response.body)}}})();}res.status(200)}トランザクションメールを送信するために、send.tsxファイルを生成します。その後、先ほど設定した APIキーを利用して実装します。
contact.tsxconst 関数 = async e => {e.preventDefault();const datas = { email: email, name: name, title: title, body: body };axios({method: "post",url: "https://XXXXXXXXXXXXXXXXXXXXXXXX.io/api/v1/XXXXXXXX",data: datas,headers: { "Content-Type": "application/json", "X-MICROCMS-API-KEY": process.env.XXXXXXXXXXXXXXX }}).then(() => {const contact_form = document.getElementsByClassName("c-contact__conform");const complete_cont = ReactDOMServer.renderToStaticMarkup();contact_form[0].insertAdjacentHTML('afterbegin', complete_cont);axios( {method: "POST",url:'/api/send',data: datas,headers: { "Content-Type": "application/json", },} ).then(() => {})}).catch(err => {console.log(err);});}import * as React from 'react';export default function Component() {return( <>XXXXXXX>);}お問い合わせ内容確認を送信した時のイベント処理のコードでaxiosを利用して実装しました。まず、microcmsでPOST送信して、送信成功したらトランザクションメールを送信します。
実装結果実装した結果、図のように microcmsの管理画面に受信できて、自動送信できるようになりました。
まとめSendGridは全世界で利用されている、メール配信プラットフォームである。SendGridはアカウント登録するだけで、トランザクションメール・マーケティングメールをメールサーバー不要で利用できる。 APIを発行してenvファイルに設定して、フロントに実装するだけでトランザクションメールを送信することができる。
Thank YOU!