カスタムドメインのメールアドレスを取得

サイト下部のフッターにメールアドレス([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 レコードに１つ登録する。

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>&copy; </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: 以降で指定したメールアドレスが入る新規メールを作成するリンクになる。

実際にデプロイ後、スマホなどでリンクを踏むとメールクライアントが開くので、ついでにテストメールを送った。

まとめ

普段使っているメールアドレスを使っている裏で難しい設定が動いていることが、少しは理解できた。（今回はメール配信サービスで楽しているので）

この点で、実際にこのメールアドレスを使うかどうかは別として有意義だったと思う。