LoginSignup
8
6

More than 1 year has passed since last update.

kintone から SendGrid プラグインを利用してメール送信

Last updated at Posted at 2019-12-30

概要

ハッカソンのような利用シーンで kintone の入力内容を簡単にメール送信する方法を調べました。
結果、Azure Marketplace の SendGrid と、SendGrid for kintone プラグインの利用で簡単かつ迅速に実現できることがわかりました。

SendGridの設定

Azure のアカウント作成

以下のWebページなどを参考にアカウントを作成します。
【Azure入門①】Azureの始め方~アカウント作成~
https://engineer-ninaritai.com/azure-howto-start/

SendGrid の準備

以下のWebページなどを参照にAzureのMarketplaceでSendGridのFreeプランでアカウントを作成します。
AzureでSendGridを利用してメール送信 (5分で)
https://qiita.com/y-araki-qiita/items/3c353fa339fd5c0b0231

SendGridは構造計画研究所経由で以下のサイトからも申込みができますが、AzureのMarketplaceに比べてアカウント作成が遅くなります。
https://sendgrid.kke.co.jp/

SendGrid API KEYの設定

SendGridのログインアカウントが作成したら、以下にアクセス(ログイン)します。
https://app.sendgrid.com/settings/api_keys
右上の「Create API Key」ボタンで以下の画面を開きます。
SendGrid01.png
「API Key Name」を入力、「API Key Permissions」は”Full Access”を選択し「Create & View」ボタンで次の画面に進みます。
SendGrid02.png
API Key が表示されますので、このAPI Keyを控えておきます。

kintoneの設定

kintone プラグインのインストール

以下のWebページの中ほどの「パッケージの作成」"sendgrid_plugin.zip"のリンクからファイルをダウンロードします。
SendGrid APIを使ってメールを送信するプラグインを作ってみよう
https://developer.cybozu.io/hc/ja/articles/206584633

kintoneの管理者アカウントでログインして、ダウンロードしたファイルを以下の手順でインストールします。
ファイルから読み込んでインストールする
https://jp.cybozu.help/k/ja/admin/system_customization/add_plugin/plugin.html#add_plugin_plugin_20

kintone アプリの追加

kintoneのアプリをはじめから作成し、フィールドは以下のように設定します。

フィールド名 タイプ フィードコート・要素ID
TO 文字列(1行) to
FROM 文字列(1行) from
SUBJECT 文字列(1行) subject
BODY 文字列(1行) body

SendGrid04.png

kintoneアプリのプラグイン設定

アプリの設定の「プラグイン」を開いて「プラグインの追加」から、以下の「SendGrid for kintone」を追加します。
SendGrid05.png
プラグインが追加できたら「設定」を開き、先に入手した SendGrid API KEY を設定します。
SendGrid07.png

kintoneアプリにJavaScriptファイルを追加

「SendGrid for kintone」プラグインは、通常のプラグインのようにプラグインの設定だけでメールを送信することはできません。
メール送信はkintoneのJavaScriptのkintonePlugin.sendgrid.sendMail()に適切な引数を設定し送信します。
但し、非同期処理ではメール送信の成否が確認できないため、kintone.Promise() で同期処理で実装します。

以下は、kintone でレコードの追加と更新のSubmit時にメールを送信し、エラーが発生した場合はエラーを表示する実装例です。

sendMail.js
(function() {
    "use strict";

    // 追加・変更処理イベント
    var submitSuccessEvents = [
        "app.record.create.submit", 
        "app.record.edit.submit"
    ];
    kintone.events.on(submitSuccessEvents, function(event) {
        return new kintone.Promise(function(resolve, reject) {

            // kintoneのSendGridプラグインに引数を渡してメールを送信する
            kintonePlugin.sendgrid.sendMail(
                event.record.to.value,
                null, 
                null, 
                event.record.from.value,
                event.record.subject.value, 
                event.record.body.value,  
                null,
            function(resp) {
                var json = JSON.parse(resp);
                if(json.message != "success"){
                    event.error = 'メール送信に失敗しました';
                    reject(event);
                }
                resolve(event);
            }, function() {
                event.error = 'メール送信に失敗しました';
                reject(event);
            });

        });
    });

})();

結果

kintoneのアプリで以下の内容でレコードを保管しました。
SendGrid08.png
以下のようにメールの受信を確認しました。
SendGrid09.png
kintoneのBODYの改行が反映されていないので、JavaScript内で対応が必要となりそうです。

Gmailでは「sendgrid.me 経由」の表示がありますが、これはDKIMのドメインsendgrid.meとToアドレスのドメインが異なるためです。
メールのヘッダ情報 DKIM-Signature に"d=sendgrid.me"があり、SendGrid経由であることが確認できます。

参考

【Azure入門①】Azureの始め方~アカウント作成~
https://engineer-ninaritai.com/azure-howto-start/

AzureでSendGridを利用してメール送信 (5分で)
https://qiita.com/y-araki-qiita/items/3c353fa339fd5c0b0231

SendGrid APIを使ってメールを送信するプラグインを作ってみよう
https://developer.cybozu.io/hc/ja/articles/206584633

8
6
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
6