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 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 Slide

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

    View Slide

  4. サイト紹介

    View Slide

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

    View Slide

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

    View Slide

  7. Send Gridについて

    View Slide

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


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


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


    View Slide

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

    View Slide

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

    View Slide

  11. SenadGridを登録・API発行

    View Slide

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

    View Slide

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

    View Slide

  14. 実装編

    View Slide

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

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

    command

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

    View Slide

  16. 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 Slide

  17. 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 Slide

  18. 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 Slide

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

    View Slide

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


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


    View Slide

  21. Thank YOU!

    View Slide