当ポートフォリオサイトでは自前のコンタクトフォームを設置しています。
コンタクトフォームにて入力されたお問い合わせ内容は「info@autovice.jp」という独自ドメインのメールアドレス宛に送信する設定になっています。
通常、メールを送るためにはメールサーバーが必要です。
メールサーバーは自前で用意するかメールサーバー提供サービスを利用する必要があります。
自前で用意する場合は構築とメンテナンスが大変ですし、メールサーバー提供サービスを利用するにはお金が必要です。
しかし、いわゆるWeb連携サービスを使えばほぼ無料で独自ドメインのメールアドレスで送受信ができてしまいます。
ちなみに、今回はIntegromatというWeb連携サービスを使っています。
ZapierはWebhookの利用が(おそらく)有料のため除外。IFTTTにいたっては使い方がいまいちよくわかりませんでした😓
コンタクトフォームにて入力されたお問い合わせ内容は「info@autovice.jp」という独自ドメインのメールアドレス宛に送信する設定になっています。
通常、メールを送るためにはメールサーバーが必要です。
メールサーバーは自前で用意するかメールサーバー提供サービスを利用する必要があります。
自前で用意する場合は構築とメンテナンスが大変ですし、メールサーバー提供サービスを利用するにはお金が必要です。
しかし、いわゆるWeb連携サービスを使えばほぼ無料で独自ドメインのメールアドレスで送受信ができてしまいます。
ちなみに、今回はIntegromatというWeb連携サービスを使っています。
ZapierはWebhookの利用が(おそらく)有料のため除外。IFTTTにいたっては使い方がいまいちよくわかりませんでした😓
前提
独自ドメインはあらかじめ取得しておいてください。
独自ドメインを取得するのに少しだけお金が必要なので「ほぼ無料」としました。
独自ドメインを取得するのに少しだけお金が必要なので「ほぼ無料」としました。
送信処理の流れ
Client → Rails → SendGrid → Integromat → Gmail
- Clientがコンタクトフォームなどから送信処理を開始
- Railsアプリに設定したメールサーバー(SendGrid)宛に送信
- SendGridのInboundによりWebhookを転送
- Integromatで受信したWebhookを解析しGmailに送信
- Gmailで受信
SendGridの設定
SendGridに登録します。登録するには審査にパスする必要があります。一般的なサイトを作り、何らかのメール送信処理を実装しておきましょう。
1. 独自ドメインの設定
独自ドメインを利用するを見ながら設定します。
2. Inbound Parse設定
SendGridで受信したメールの内容をメールクライアントで確認するの【ステップ2】SendGridのParse Webhook設定を見ながら設定します。
Destination URLは後述するIntegromatが発行するURLを入力します。
3. APIキー発行
APIキーを管理するを見ながら設定します。
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に登録します。
画面右上の「Create a new scenario」から新しいシナリオを作成します。
webhookを検索し出てきたアイコンをクリック。右上の「Continue」から次に進みます。
[Webhook] - [Custom mailhook]を選択します。
フックを追加します。名前は何でも問題ありません。
発行されたURLをSendGrid - Inbound ParseのDestination URLに設定します。
Webhooksモジュールの右側をクリックしてモジュールを追加します。
gmailと検索し[Gmail] - [Send an email]を選択します。
Connectionを追加します。
メールを受信したいGmailアカウントの認証を行います。
左下の実行ボタンから処理を実行します。
右下の実行ログに「The request was accepted. Waiting for data.」と出たら次に進みます。
メール送信処理を実行します(今回はコンタクトフォームよりお問い合わせ送信)。
Integromatでリクエストを受信しています(まだ転送先などの設定を行っていないので処理は失敗しているはず)。
Subjectなどの入力ボックスをクリックすると、先程送ったメールの内容が選択できるようになっています。
画面右上の「Create a new scenario」から新しいシナリオを作成します。
webhookを検索し出てきたアイコンをクリック。右上の「Continue」から次に進みます。
[Webhook] - [Custom mailhook]を選択します。
フックを追加します。名前は何でも問題ありません。
発行されたURLをSendGrid - Inbound ParseのDestination URLに設定します。
Webhooksモジュールの右側をクリックしてモジュールを追加します。
gmailと検索し[Gmail] - [Send an email]を選択します。
Connectionを追加します。
メールを受信したいGmailアカウントの認証を行います。
左下の実行ボタンから処理を実行します。
右下の実行ログに「The request was accepted. Waiting for data.」と出たら次に進みます。
メール送信処理を実行します(今回はコンタクトフォームよりお問い合わせ送信)。
Integromatでリクエストを受信しています(まだ転送先などの設定を行っていないので処理は失敗しているはず)。
Subjectなどの入力ボックスをクリックすると、先程送ったメールの内容が選択できるようになっています。
- To:メールを受信したいアカウントのメールアドレス
- Subject:subject
- Content:text/html
ここまで設定できればメールを受信できるようになっているはずです。
もう一度実行すると…
無事、メールが受信できていますね。
もう一度実行すると…
無事、メールが受信できていますね。
メール送信設定
Gmailから独自ドメインのメールアドレスで送信できるように設定していきます。
Gmailのアカウントとインポート設定を表示します。
[名前] - [他のメールアドレスを追加]をクリックします。
Gmailのアカウントとインポート設定を表示します。
[名前] - [他のメールアドレスを追加]をクリックします。
- 名前:自分の名前(後から変更できます)
- メールアドレス:送信したい独自ドメインのメールアドレス
- SMTPサーバー:smtp.sendgrid.net
- ユーザー名:apikey
- パスワード:発行したAPIキー
確認メールに記載された確認コードを入力するか、URLをクリックします。