Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ポートフォリオサイトのお問い合わせフォームをSendgrid + microCMSで作成したお話
Search
Nobuyoshi
December 09, 2021
Programming
1
1.4k
ポートフォリオサイトのお問い合わせフォームをSendgrid + microCMSで作成したお話
ポートフォリオサイトのお問い合わせフォームをSendgrid + microCMSで作成したお話します。
site:
https://uemu-engineer.com/
Nobuyoshi
December 09, 2021
Tweet
Share
More Decks by Nobuyoshi
See All by Nobuyoshi
仕事では採用されなかったホスティングサービス、 せっかくなのでLTで話します
uemura
0
66
Babylon.js × microCMS でフォトギャラリーサイト作った
uemura
0
210
2年ぶりにCSSアニメーションを作ったよ!
uemura
0
750
今年初めてのBabylonJsを触ってみた
uemura
0
250
Three.js(WebGL)で一年以上学習した成果と便利なクラス/ライブラリを紹介
uemura
0
300
Pug / SASS でピクロス(カービィ)を作成
uemura
0
150
僕の好きなcssプロパティ・値5選
uemura
0
460
複雑なHTML_CSS アニメーション 作品一覧 + 苦労したこと
uemura
0
140
Microcms + nuxt.jsで個人ブログサイトをデプロイした件
uemura
0
850
Other Decks in Programming
See All in Programming
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.4k
MCPを使ってイベントソーシングのAIコーディングを効率化する / Streamlining Event Sourcing AI Coding with MCP
tomohisa
0
150
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
710
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
230
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
410
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
2.3k
What's new in AppKit on macOS 26
1024jp
0
130
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
160
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
200
Deep Dive into ~/.claude/projects
hiragram
14
7.5k
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
880
Goで作る、開発・CI環境
sin392
0
240
Featured
See All Featured
BBQ
matthewcrist
89
9.7k
Documentation Writing (for coders)
carmenintech
72
4.9k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Site-Speed That Sticks
csswizardry
10
690
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Visualization
eitanlees
146
16k
Producing Creativity
orderedlist
PRO
346
40k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Transcript
うえむー ポートフォリオサイトのお問い合わせフォームを Sendgrid + microCMSで作成したお話 うえむー
自己紹介 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/
サイト全体図 domain Frame work CMS Source code control Hosting CDN
お名前.com Mail 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発行する 仮登録完了メール受信 されるので本登録 「ユーザー情報を登録」 ボタンを押下すると新規 会員登録に遷移され本 登録 会員登録後、以下の メールが受信されユー ザ名が発行
※審査が通らないと利用できません。 「無料で始める」ボタン を押下して会員登録 「メールアドレス」を入力 して仮登録 1 2 3 4 5
SendGridを登録・API発行する API KEYSをクリッ クします。 以下の様にAPI発行される様になります。
実装編
SendGridをインストール npm install --save @sendgrid/mail package.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.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 + '様<br><br>平素より、Nu-。。。' + req.body.body, html: req.body.name + '様<br><br>平素より、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.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(<Complete />); 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 ( <> <div className='c-contact__complete'> <p> XXXXXXX </p> </div> </> ); } お問い合わせ内容確認を送信した時のイベント処理のコード でaxiosを利用して実装しました。 まず、microcmsでPOST送信して、送信成功したらトランザク ションメールを送信します。
実装結果 実装した結果、図のように microcmsの管理画面に受信 できて、自動送信できるようになりました。
まとめ SendGridは全世界で利用されている、メール配信プラットフォームである。 SendGridはアカウント登録するだけで、トランザクションメール・マーケティン グメールをメールサーバー不要で利用できる。 APIを発行してenvファイルに設定して、フロントに実装するだけでトランザク ションメールを送信することができる。
Thank YOU!