Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ポートフォリオサイトのお問い合わせフォームをSendgrid + microCMSで作成したお話

Nobuyoshi
December 09, 2021

ポートフォリオサイトのお問い合わせフォームをSendgrid + microCMSで作成したお話

ポートフォリオサイトのお問い合わせフォームをSendgrid + microCMSで作成したお話します。

site: https://uemu-engineer.com/

Nobuyoshi

December 09, 2021
Tweet

More Decks by Nobuyoshi

Other Decks in Programming

Transcript

  1. うえむー
    ポートフォリオサイトのお問い合わせフォームを
    Sendgrid + microCMSで作成したお話
    うえむー

    View full-size slide

  2. 自己紹介
    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/

    View full-size slide

  3. 目次
    ・サイト紹介
    ・Send Gridについて
    ・SendGridを登録・API発行
    ・実装
    ・まとめ

    View full-size slide

  4. サイト紹介

    View full-size slide

  5. サイトの紹介
    https://uemu-engineer.com/

    View full-size slide

  6. サイト全体図
    domain
    Frame work
    CMS
    Source code
    control
    Hosting
    CDN お名前.com
    Mail Platform

    View full-size slide

  7. Send Gridについて

    View full-size slide

  8. SendGrid って何?
    SendGridというのは全世界で利用されているメール配信プラットフォームで
    す。


    クラウドサービスを会員登録するだけで、トランザクションメール・マーケティン
    グメールをメールサーバー不要で利用できます。


    有料プラン・無料プランがあります。


    View full-size slide

  9. SendGridでフリープランでできること
    メール送信API
    ・SMTPリレー
    ・WebAPI(HTTPS)
    マーケティングキャンペーン機能
    上限2,000件
    通数上限 12,000通/月
    日本語ドキュメント
    日本語での無料サポート
    配信結果の把握・サプレッション管理
    配信状況の確認(到達 /再送/エラー等)
    開封・クリックの測定
    配信停止管理
    独自ドメイン利用 etc...

    View full-size slide

  10. 改修内容
    Mail Platform
    お問い合わせ
    フォーム
    Headless cms
    変更前 変更後
    Headless cms
    お問い合わせ
    フォーム
    mail

    View full-size slide

  11. SenadGridを登録・API発行

    View full-size slide

  12. SendGridを登録・API発行する
    仮登録完了メール受信
    されるので本登録
    「ユーザー情報を登録」
    ボタンを押下すると新規
    会員登録に遷移され本
    登録
    会員登録後、以下の
    メールが受信されユー
    ザ名が発行
    ※審査が通らないと利用できません。
    「無料で始める」ボタン
    を押下して会員登録
    「メールアドレス」を入力
    して仮登録
    1
    2
    3
    4
    5

    View full-size slide

  13. SendGridを登録・API発行する
    API KEYSをクリッ
    クします。
    以下の様にAPI発行される様になります。

    View full-size slide

  14. SendGridをインストール
    npm install --save @sendgrid/mail
    package.json

    "dependencies" : {
    ...
    "@sendgrid/mail" : "^7.4.7",
    ...
    },

    command

    sendgrid/mailをnpmでインストールします。
    package.jsonにsendgrid/mail
    をインストールされていることを
    確認できます。

    View full-size slide

  15. 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の設定を追加します

    View full-size slide

  16. api/send.tsx
    export 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キー
    を利用して実装します。

    View full-size slide

  17. contact.tsx
    const 関数 = 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送信して、送信成功したらトランザク
    ションメールを送信します。

    View full-size slide

  18. 実装結果
    実装した結果、図のように microcmsの管理画面に受信
    できて、自動送信できるようになりました。

    View full-size slide

  19. まとめ
    SendGridは全世界で利用されている、メール配信プラットフォームである。
    SendGridはアカウント登録するだけで、トランザクションメール・マーケティン
    グメールをメールサーバー不要で利用できる。


    APIを発行してenvファイルに設定して、フロントに実装するだけでトランザク
    ションメールを送信することができる。


    View full-size slide