サイト下部のフッターにメールアドレス([email protected])を追加した話。
-
ドメインをメール配信サービスに登録
- サービスの比較
- 登録
- テスト
- フッターに追加( Next.js )
- まとめ
ドメインをメール配信サービスに登録
個人で VPS を持ってる方はメールサーバーを VPS 内に立てたほうがいい。。。
サービスの比較
個人的に試したメール配信サービスとその感想
-
Amazon SES
- メリット:おそらく一番有名
- デメリット:SES 自体は無料だが、 S3 で課金の必要があり・クレカの登録必須
-
Sendgrid
- メリット:日本語のブログがたくさん見つかる
- デメリット:受信側のサーバーが必要
-
Mailgun
- メリット:API 周りが充実
- デメリット:クレカの登録がほぼ必須・ブラウザのみ対応
-
Zoho Mail
- メリット:クレカ不要
- デメリット:POP3 は有料
結論から言うと、 Zoho Mail を選んだ。理由はクレカが不要なことが大きい。
実際に試すと他にも気づくことがあると思うので、(ここに載ってないサービスも含めて)ぜひ使ってみて比較してほしい。
登録
Zoho Mail で登録を進める。幸いにも日本語に対応しているので、チュートリアル通りにすすめて行けば無事登録できる。
おそらく躓くポイントはメール認証の部分だと思う。メール認証には SPF と DKIM があるが、これを登録しておくことでスパムメールなどと認識されないため、メール到達率が上がる(らしい)。
SPF の登録は、 SPF のページ に書いてあるとおり、DNS の TXT レコードに1つ登録する。
DKIM の登録は、DKIM のページ で自分のドメインをクリックし、セレクタのページに飛ぶ。 セレクターの追加
を押し、任意の名前のセレクターを登録する。例として admin
で登録したとすると、 DNS の TXT レコードには admin._domainkey
の名前で v=DKIM1; k=rsa; p=xxxXXX
の値を登録する。レコードを反映した数分後に、このページにある 認証
ボタンを押して認証を完了させる。(これに気づかないで時間を食われた…)
実際に認証されているかは外部チェッカーを用いて確かめた。サイト内で
Selector: admin
Domain name: nshun.net
のように入力し、 Check
ボタンを押して This is a valid DKIM key record
と出れば認証できている。
テスト
チュートリアルの最後でモバイルアプリを入れるように勧められた。 Android/iOS どちらにも対応しているのでインストールしてテストした。
アプリ内でアカウント名(ex. [email protected])とパスワードを入れてログインする。 2FA(二段階認証)を勧められたのでついでに登録した。普段使いの Gmail などのメールアドレスと相互に送受信できれば成功だ。
フッターに追加( Next.js )
ここからはサイト内にリンク付きでメールアドレスを記載する。
フッターファイル ./src/components/Footer.js
を以下の様にした。
import React from 'react';
import PropTypes from 'prop-types';
function Footer(props) {
const now = new Date();
return (
<footer className="center w5 f6 tc mt4">
<p>
<div>
<a className="black no-underline" href={`mailto:${props.email}`}>
{props.email}
</a>
</div>
<div>
<span>© </span>
<span>{now.getFullYear()} </span>
<span>{props.copyright}</span>
</div>
</p>
</footer>
);
}
Footer.propTypes = {
copyright: PropTypes.string.isRequired,
};
export default Footer;
あとは Page などで Footer を読み込むときに email
にメールアドレスを渡せばいい。(ハードコーティングするなら、上記コードで直接指定してもいいが…)
ポイントは href で mailto:メールアドレス
を渡している点だ。このスキームは HTML などで利用できる形式だ。Wikipedia に使用可能なオプションなど書いてあるので参照されたし。今回のように mailto
のみだと、対応しているメールソフトが開き、 To
に mailto:
以降で指定したメールアドレスが入る新規メールを作成するリンクになる。
実際にデプロイ後、スマホなどでリンクを踏むとメールクライアントが開くので、ついでにテストメールを送った。
まとめ
普段使っているメールアドレスを使っている裏で難しい設定が動いていることが、少しは理解できた。(今回はメール配信サービスで楽しているので)
この点で、実際にこのメールアドレスを使うかどうかは別として有意義だったと思う。