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

目次

はじめに

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 で動作を確認しています。