独自ドメインのメールアドレスでメールを送受信する方法【ほぼ無料】

当ポートフォリオサイトでは自前のコンタクトフォームを設置しています。
コンタクトフォームにて入力されたお問い合わせ内容は「info@autovice.jp」という独自ドメインのメールアドレス宛に送信する設定になっています。

通常、メールを送るためにはメールサーバーが必要です。
メールサーバーは自前で用意するかメールサーバー提供サービスを利用する必要があります。
自前で用意する場合は構築とメンテナンスが大変ですし、メールサーバー提供サービスを利用するにはお金が必要です。
しかし、いわゆるWeb連携サービスを使えばほぼ無料で独自ドメインのメールアドレスで送受信ができてしまいます。

ちなみに、今回はIntegromatというWeb連携サービスを使っています。
ZapierはWebhookの利用が(おそらく)有料のため除外。IFTTTにいたっては使い方がいまいちよくわかりませんでした😓

前提

独自ドメインはあらかじめ取得しておいてください。
独自ドメインを取得するのに少しだけお金が必要なので「ほぼ無料」としました。

送信処理の流れ

Client → Rails → SendGrid → Integromat → Gmail
  1. Clientがコンタクトフォームなどから送信処理を開始
  2. Railsアプリに設定したメールサーバー(SendGrid)宛に送信
  3. SendGridのInboundによりWebhookを転送
  4. Integromatで受信したWebhookを解析しGmailに送信
  5. Gmailで受信

SendGridの設定

SendGridに登録します。登録するには審査にパスする必要があります。一般的なサイトを作り、何らかのメール送信処理を実装しておきましょう。

1. 独自ドメインの設定
独自ドメインを利用するを見ながら設定します。

2. Inbound Parse設定
SendGridで受信したメールの内容をメールクライアントで確認するの【ステップ2】SendGridのParse Webhook設定を見ながら設定します。
Destination URLは後述するIntegromatが発行するURLを入力します。

3. APIキー発行
APIキーを管理するを見ながら設定します。
  • API Key Permissions:Redirected Access
  • Access Details:Mail Send - Full Access
発行したAPIキーをRailsのpasswordに設定します(後述)。

Railsアプリの設定

Railsアプリでメール送信設定を以下の通り設定します。
...
  config.action_mailer.smtp_settings = {
    :user_name => 'apikey',
    :password => Rails.application.credentials.mail[:apikey],
    :domain => 'autovice.jp',
    :address => "smtp.sendgrid.net",
    :port => 587,
    :authentication => :plain,
    :enable_starttls_auto => true
  }
...
  • user_name:'apikey'
  • password:SendGridのAPIキー
  • domain:取得したドメイン名
  • address:'smtp.sendgrid.net'

Integromatの設定

Integromatに登録します。
スクリーンショット 2019-12-02 14.01.15.png 4.47KB

画面右上の「Create a new scenario」から新しいシナリオを作成します。
スクリーンショット 2019-12-02 14.04.23.png 347KB

webhookを検索し出てきたアイコンをクリック。右上の「Continue」から次に進みます。
スクリーンショット 2019-12-02 14.07.00.png 52.5KB

[Webhook] - [Custom mailhook]を選択します。
スクリーンショット 2019-12-02 14.09.14.png 109KB

フックを追加します。名前は何でも問題ありません。
スクリーンショット 2019-12-02 14.10.47.png 95.9KB

発行されたURLをSendGrid - Inbound ParseのDestination URLに設定します。
スクリーンショット 2019-12-02 14.26.15.png 121KB

Webhooksモジュールの右側をクリックしてモジュールを追加します。
gmailと検索し[Gmail] - [Send an email]を選択します。
スクリーンショット 2019-12-02 14.52.25.png 114KB

Connectionを追加します。
メールを受信したいGmailアカウントの認証を行います。
スクリーンショット 2019-12-02 14.29.01.png 4.28KB

左下の実行ボタンから処理を実行します。
スクリーンショット 2019-12-02 14.45.32.png 17.5KB

右下の実行ログに「The request was accepted. Waiting for data.」と出たら次に進みます。
スクリーンショット 2019-12-02 13.28.59.png 38KB

メール送信処理を実行します(今回はコンタクトフォームよりお問い合わせ送信)。
スクリーンショット 2019-12-02 14.56.34.png 170KB

Integromatでリクエストを受信しています(まだ転送先などの設定を行っていないので処理は失敗しているはず)。
Subjectなどの入力ボックスをクリックすると、先程送ったメールの内容が選択できるようになっています。
  • To:メールを受信したいアカウントのメールアドレス
  • Subject:subject
  • Content:text/html
ここまで設定できればメールを受信できるようになっているはずです。
もう一度実行すると…
スクリーンショット 2019-12-02 15.07.23.png 26.6KB

無事、メールが受信できていますね。

メール送信設定

Gmailから独自ドメインのメールアドレスで送信できるように設定していきます。
スクリーンショット 2019-12-02 15.10.19.png 96.9KB

Gmailのアカウントとインポート設定を表示します。
[名前] - [他のメールアドレスを追加]をクリックします。
スクリーンショット 2019-12-02 15.15.38.png 31.4KB
  • 名前:自分の名前(後から変更できます)
  • メールアドレス:送信したい独自ドメインのメールアドレス
スクリーンショット 2019-12-02 15.19.52.png 46.3KB
  • SMTPサーバー:smtp.sendgrid.net
  • ユーザー名:apikey
  • パスワード:発行したAPIキー
スクリーンショット 2019-12-02 15.33.05.png 51KB

確認メールに記載された確認コードを入力するか、URLをクリックします。