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

November 16, 2018 5 min read

サイト下部のフッターにメールアドレス([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>&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 のみだと、対応しているメールソフトが開き、 Tomailto: 以降で指定したメールアドレスが入る新規メールを作成するリンクになる。

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

まとめ

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

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


Written by Shun Nishimura.

© Copyright 2020 Shun Nishimura - All Rights Reserved