メール送信前イベントを使って、送信前に注意喚起するカスタマイズをしよう

目次

はじめに

Garoonのメール送信前イベントを使って、メール送信前に注意喚起を行うカスタマイズを紹介します。

メールを送信する前のイベント は、メール送信画面の[送信する]ボタンをクリックした後に発行するイベントです。

このイベントを利用すると、メール送信前に、メールの内容に応じた注意喚起ができます。

なお、クラウド版Garoonでは「 メール誤送信警告プラグイン (External link) 」が提供されています。
機能の詳細は プラグインの紹介ページ (External link) を確認してください。

注意事項

  • 次の画面ではカスタマイズを利用できません。
    • モバイル表示
    • モバイル用アプリ(KUNAIおよびGaroonモバイル)
  • メール送信前イベントは、メール送信画面の[送信する]ボタンをクリックした後に発行するイベントです。
    メールの一般設定(個人設定) (External link) で「送信前の確認」を有効にしている場合、[送信する]ボタンクリック後に確認画面に遷移します。
    また、確認画面での[送信する]ボタンをクリックしたとき、このイベントは発行しません。

メール送信前イベントとは

次のコードは、[送信する]ボタンをクリックしたとき、標題が空の場合はエラーダイアログを表示し、メール送信を中止するカスタマイズ例です。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
// Garoonのメール送信前イベント
garoon.events.on('mail.mail.send.submit', (event) => {
  // メールのデータを取得
  const mail = event.mail;
  if (mail.subject === '') {
    // event.errorに値を設定してreturn eventすると、エラーダイアログを表示し、メール送信を中止します。
    event.error = '「標題」を入力してください';
  }
  // return eventによって画面に反映する
  return event;
});
  • メール送信前イベントは、メール送信画面の[送信する]ボタンをクリックした後に発行するイベントです。
  • event.mailプロパティで、メール送信画面に表示されるメールの情報を取得できます(参照: メールオブジェクト
  • event.errorに値を設定してreturn eventすると、エラーダイアログを表示し、メール送信を中止します(次の画面に遷移しません)
    Garoonのエラーダイアログ

カスタマイズサンプル

メールの内容を判定し、注意喚起をしたい場合に確認ダイアログを表示してカスタマイズサンプルです。
カスタマイズファイルの適用方法は、後述の Garoonの設定 を参照してください。

ベースとなるコード

以下のコードは、カスタマイズのベースとなるコードです。

  • 注意喚起こする条件判定する処理は、shouldWarning関数(20〜22行目)に実装します。
    • shouldWarning関数の引数として メールオブジェクト を渡します。
    • 確認ダイアログを表示させたい場合はtrueを返します。
  • 11・12行目では、確認ダイアログやGaroonのエラーダイアログに表示するメッセージを設定します。表示させたいメッセージに応じて変更します。
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
/*
 * Garoon mail.submit sample program (check including attachment)
 * Copyright (c) 2020 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/license/mit/
 */
(function() {
  'use strict';

  const CONFIRM_DIALOG_DESCRIPTION = 'xxxです。送信してもよろしいですか?'; // 確認ダイアログに表示する文言
  const GAROON_ERROR_DIALOG_DESCRIPTION = 'xxxを確認してください'; // Garoonのエラーダイアログの文言

  // 確認ダイアログを表示するかを判定する関数
  // ---------------- ここから ----------------
  /*
   * @param {Object} Garoonメールオブジェクト
   * @return {boolean} 確認ダイアログを表示する場合trueを返す
   */
  const shouldWarning = function(mail) {
    // ここに判定ロジックを書く
  };
  // ---------------- ここまで ----------------


  // メール送信前イベント
  garoon.events.on('mail.mail.send.submit', (event) => {
    // メールのデータを取得
    const mail = event.mail;

    if (shouldWarning(mail)) {
      // 警告すべきであったら確認ダイアログを表示する
      const result = window.confirm(CONFIRM_DIALOG_DESCRIPTION);
      // [キャンセル]ボタンをクリックしたら、エラーダイアログを表示・メール送信を中止し、メール作成画面に戻る
      if (!result) {
        event.error = GAROON_ERROR_DIALOG_DESCRIPTION;
      }
    }
    return event;
  });
})();

この記事では、shouldWarning関数の実装例として、次の内容を判定し注意喚起こするサンプルを紹介します。

宛先に社外(自社ドメイン以外)のメールアドレスが含まれているか

宛先に社外(自社ドメイン以外)のメールアドレスが含まれている場合、確認ダイアログを表示して送信者に注意喚起こするカスタマイズです。
確認ダイアログの[キャンセル]ボタンをクリックすると、メールの送信を中止します。

ベースとなるコード の確認ダイアログやGaroonのエラーダイアログに表示するメッセージを設定する箇所(11・12行目)を次に置き換えます。

11
12
const CONFIRM_DIALOG_DESCRIPTION = '社外のメールアドレスが含まれています。送信してもよろしいですか?';
const GAROON_ERROR_DIALOG_DESCRIPTION = '宛先のメールアドレスを確認してください';

shouldWarningで呼び出す関数( ベースとなるコード の16〜22行目)は、次の内容に置き換えます。
このとき、以下のコード2行目のOWN_DOMAINの値を自社のメールアドレスのドメイン(@以降)に置き換えてください。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
// 自社ドメインを設定
const OWN_DOMAIN = 'cybozu.co.jp';

/**
   * ドメイン部分を取得する
   * @param {string} mailAddressメールアドレス
   * @returns {string} ドメイン部分
   */
const extractDomain = function(mailAddress) {
  const result = mailAddress.split('@');
  return result.length >= 2 ? result[1] : null;
};

/**
   * 他社ドメインのメールアドレスを含むか
   * @param {Object[]} destinations宛先の配列
   * @returns {boolean} 他社ドメインのメールアドレスを含む場合はtrue
   */
const hasOtherDomain = function(destinations) {
  let isOtherDomain = false;
  destinations.forEach((destination) => {
    const domain = extractDomain(destination.mailAddress);
    if (domain && OWN_DOMAIN !== domain) {
      isOtherDomain = true;
    }
  });
  return isOtherDomain;
};

/**
   * 確認ダイアログを出すかどうかを判定する関数
   * @param {Object} Garoonメールオブジェクト
   * @return {boolean} 確認ダイアログを表示する場合trueを返す
   */
const shouldWarning = function(mail) {
  // to/cc/bccに自社ドメインが含まれていたら確認ダイアログを表示する
  return hasOtherDomain(mail.to) || hasOtherDomain(mail.cc) || hasOtherDomain(mail.bcc);
};
コードの解説

一定サイズの添付ファイルが含まれているか

一定サイズ以上の添付ファイルが添付されている場合、確認ダイアログを表示して送信者に注意喚起こするカスタマイズです。
確認ダイアログの[キャンセル]ボタンをクリックすると、メールの送信を中止します。

ベースとなるコード の確認ダイアログやGaroonのエラーダイアログに表示するメッセージを設定する箇所(11・12行目)を次に置き換えます。
このとき、以下コード2行目のOVER_SIZEの値を任意のファイルサイズの上限(MBで指定)に書き換えてください。

11
12
13
14
15
16
17
// 添付ファイルのサイズ上限(MBで指定)
const OVER_SIZE = 1;
// KBに再計算
const overSizeKB = OVER_SIZE * 1024;

const CONFIRM_DIALOG_DESCRIPTION = 'サイズ上限(' + OVER_SIZE + 'MB)を超える添付ファイルが含まれています。送信してもよろしいですか?';
const GAROON_ERROR_DIALOG_DESCRIPTION = '添付ファイルを確認してください';

shouldWarningで呼び出す関数( ベースとなるコード の16〜22行目)は、次の内容に置き換えます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/**
   * 規定サイズ以上の添付ファイルがあるか
   * @param {Object[]} attachments添付ファイルオブジェクトの配列
   * @return {string[]} 規定サイズを超えていたらtrue
   */
const hasOverSizeAttachment = function(attachments) {
  let isOverSizeAttachemnt = false;
  attachments.forEach((attachment) => {
    if (attachment.size > overSizeKB) {
      isOverSizeAttachemnt = true;
    }
  });
  return isOverSizeAttachemnt;
};

/**
   * 確認ダイアログを出すかどうかを判定する関数
   * @param {Object} Garoonメールオブジェクト
   * @return {boolean} 確認ダイアログを表示する場合trueを返す
   */
const shouldWarning = function(mail) {
  // 添付ファイルのサイズがサイズ上限を超えていたら確認ダイアログを表示する
  return hasOverSizeAttachment(mail.attachments);
};
コードの解説
  • 添付ファイル情報は、メールオブジェクトの 添付ファイルに関するプロパティ に格納されています。
  • hasOverSizeAttachment関数で、shouldWarning関数から 添付ファイルに関するプロパティ の値を受け取ります(23行目)
    • この値はオブジェクトの配列になっているので、forEachで1件ずつの添付ファイル情報として取り出して処理します(8〜12行目)
    • 取り出した添付ファイル情報のsizeプロパティにファイルサイズが格納されているので、サイズ上限を超えているかをチェックします。
      ファイル上限を超えていたら、hasOverSizeAttachment関数の戻り値をtrueにします。
  • shouldWarning関数は、hasOverSizeAttachment関数の戻り値がtrueだったら確認ダイアログを表示するとして、ベースとなるコードにtrueを返します。

Garoonの設定

カスタマイズグループを作成し、スケジュールのカスタマイズファイルを適用します。

  1. Garoonメニュー右の歯車アイコンをクリックし、[Garoonシステム管理]を選択します。
  2. [各アプリケーションの管理]タブを選択し、[メール]を選択します。
  3. [JavaScript/CSSによるカスタマイズ]を選択します。
  4. [カスタマイズグループを追加する]をクリックします。
  5. 次の内容を入力します。入力が終わったら、[追加する]ボタンをクリックします。

    項目名 設定値
    カスタマイズ 「適用する」を選択します。
    カスタマイズグループ名 任意の値を入力します。
    適用対象 カスタマイズを適用するユーザー・グループを選択します。
    JavaScriptカスタマイズ 適用するカスタマイズファイル(JavaScript)を指定します。
    CSSカスタマイズ なし

おわりに

メール送信前イベントを利用すると社内のメール送信ルールに沿っているかをチェックできるカスタマイズを実装できるので、メールの送信者に注意喚起ができます。

また、この記事ではブラウザー標準のダイアログを利用しましたが、 Cybozu CDN で配信している SweetAlert (External link) SweetAlert2 (External link) を利用するとスタイリッシュなダイアログを表示できます。

利用しているGaroon API

information

この記事の内容は、2020年3月版Garoonで動作を確認しています。