メールの内容を読み取って Garoon スケジュールに予定を登録しよう

目次

caution
警告

jQuery UI は v1.13 をもってメンテナンスモードになりました。
この記事で紹介しているカスタマイズでは、ダイアログの表示に jQuery UI を利用しています。
SweetAlert (External link) Micromodal (External link) などのダイアログを表示するその他のライブラリを使うよう、コードの書き換えを検討してください。

はじめに

打合せなど予定に関するメールを受信したら、1 クリックでスケジュールに登録できると便利ですよね。

今回は、メールの本文に日時が含まれているメールを Garoon メールで受信したら、Garoon スケジュールへ簡単に登録できるカスタマイズを紹介します。
このカスタマイズは、Cybozu Days 2019 でも紹介したカスタマイズです。

注意事項

  • クラウド版 Garoon またはパッケージ版 Garoon 5 以上の環境が必要です。
  • カスタマイズで Garoon がサポートしない DOM 操作しています。Garoon のアップデートにより、機能を利用できなくなる可能性があります。

完成イメージ

このカスタマイズは、メール画面の構成で 3ペイン(プレビュー表示) (External link) 設定のプレビュー画面のみに適用されます。

  1. メールのプレビュー画面で、メールの内容に日時が含まれていた場合、リンクが設定されます。
    リンクが設定される日時のフォーマットは「 リンクが設定される日時のフォーマット」を参照してください。

  2. リンクをクリックすると、予定を登録できるポップアップが表示されます。
    ポップアップの初期値は次のとおりです。

    項目 設定される初期値
    日付 リンクが設定された日付部分
    参加者 ログインユーザー
    他のユーザーを追加する場合は、登録後の予定を編集してください。
    タイトル メールのタイトル
    時刻 リンクが設定された時刻の部分
    終了時刻が本文にないとき:開始時刻+1時間後の値が設定されます。
    時刻部分が本文にないとき:0:00 - 0:00 が設定されます。
    メモ なし
  3. 項目を入力し、[登録する]ボタンをクリックすると、Garoon スケジュールに予定が登録されます。

リンクが設定される日時のフォーマット

リンクが設定される日時のフォーマットは、次のとおりです。

日付部分 時刻部分
  • MM月dd日
  • MM月dd日(EEE)
  • MM/dd
  • MM/dd(EEE)
  • HH時〜
  • HH時〜HH時
  • HH:mm~
  • HH:mm〜HH:mm
  • 日付 日付 時刻(間にスペースが必要)では、リンクされますが、「時刻」のみはリンクされません。
  • 日付や時刻の数字は、0 埋めなしでもリンクされます。
    例:11月2日(水)9:00〜12:00 11/02 09:00〜12:00
  • 曜日の括弧分は半角・全角どちらでもリンクされます。

カスタマイズの適用

このカスタマイズでは、次の外部ライブラリを利用しています。

  • jQuery v3.4.1, ドキュメント (External link)
    • https://js.cybozu.com/jquery/3.3.1/jquery.min.js
  • jQuery UI v1.12.1, ドキュメント (External link)
    • https://js.cybozu.com/jqueryui/1.12.1/jquery-ui.min.js
  • Garoon html/css/image-Kit for Customize
    ドキュメント Garoon デザインに調和するスタイルシートです。

手順

設定には、Garoon 管理者権限が必要です。手順の詳細は「 Garoon 全体のカスタマイズ (External link) 」を参照してください。

  1. Garoon システム管理画面を開きます。
  2. [基本システムの管理]タブを選択し、[カスタマイズ]をクリックします。
  3. [JavaScript/CSS によるカスタマイズ]をクリックします。
  4. [カスタマイズグループを追加する]をクリックします。
  5. 以下の内容を入力します。入力が終わったら、[追加する]をクリックします。

    項目名 設定値
    カスタマイズ 「適用する」を選択します。
    カスタマイズグループ名 任意の値を入力します。
    この記事では「メール予定登録」とします。
    適用対象 カスタマイズを適用するユーザーやグループを選択します。
    JavaScript カスタマイズ 次の順で指定します。
    CSS カスタマイズ 次の順で指定します。
カスタマイズファイルの入手方法

カスタマイズファイル一式は、 mail_to_schedule.zip よりダウンロードしてください。内容は次のとおりです。

  • mail_to_schedule.js
    • 全体 JS カスタマイズに適用します。記事執筆時点(2019 年 11 月)で Garoon メールの要素を取得する API は存在しないため、DOM 操作をしています。
    • このカスタマイズでは、ES6 以上の記法を利用しています。
  • gr_kit_icon.css
    • Garoon デザインに調和する、スケジュール登録のポップアップに表示しているアイコンです。
  • mail_to_schedule.css
    • スケジュール登録のポップアップのスタイルシートです。
grn_kit.css(Garoon html/css/image-Kit for Customize)の入手方法
  1. https://github.com/garoon/css-for-customize (External link) にアクセスします。
  2. [Clone or download]ボタンをクリックして、[Download ZIP]を選択します。
  3. ダウンロードした zip ファイルを解凍します。
  4. 解凍したファイルの「css」フォルダー以下の「grn_kit.css」を利用します。

ソースコードの解説

日時の抽出

メール本文の時刻は正規表現で抽出しています。パターンに一致する文字列があれば、スケジュール登録のポップアップを表示するリンクを設定します。

正規表現パターンを定義
27
28
29
30
  const regexPatterns = {
    japanese: /((?<month>\d+)月(?<date>\d+)日([((].?[))])?\s*((?<startHour>\d+)(:(?<startMinute>\d+)|時)(.(?<endHour>\d+)(:(?<endMinute>\d+)|時))?)?)/,
    en: /((?<month>\d+)\/(?<date>\d+)([((].?[))])?\s*((?<startHour>\d+)(:(?<startMinute>\d+)|時)(.(?<endHour>\d+)(:(?<endMinute>\d+)|時))?)?)/,
  };
メール本文からパターンを抽出
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
  const getMailInfo = dateButton => {
    const dateTimeRegex = regexPatterns[dateButton.dataset.regexKey];
    const matches = dateButton.innerText.match(dateTimeRegex);
    let {
      month,
      date,
      startHour = '',
      startMinute = '',
      endHour = '',
      endMinute = '',
    } = matches.groups;

    if (endHour === '' && startHour !== '') {
      endHour = String(Number(startHour) + 1);
    }
    const $mailContentTitle = $('.mail_content_title_text_grn');
    const title = $mailContentTitle.text().trim();
    return {
      month: removeZero(month),
      date: removeZero(date),
      title,
      startHour: removeZero(startHour),
      startMinute: removeZero(startMinute),
      endHour: removeZero(endHour),
      endMinute: removeZero(endMinute),
    };
  };
スケジュール登録のポップアップを表示するリンクを設定
39
40
41
42
43
44
45
46
47
48
49
50
51
52
    const $mailContent = $('#mail_view .format_contents');
    if ($mailContent.html()) {
      for (const [key, pattern] of Object.entries(regexPatterns)) {
        $mailContent.html(
          $mailContent
            .html()
            .replace(
              new RegExp(pattern, 'g'),
              `<div class="mail-to-schedule"><button class="mail-to-schedule-button" data-regex-key="${key}">$1</button></div>`
            )
        );
      }
      // 中略
    }

Garoon スケジュールへ予定を登録

Garoon スケジュールへの予定登録は、 予定を登録する API を実行しています。

241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
  const addSchedule = popupInfo => {
    return garoon.api('/api/v1/schedule/events', 'POST', {
      eventType: 'REGULAR',
      subject: popupInfo.subject,
      notes: popupInfo.notes,
      attendees: [
        {
          id: popupInfo.attendeesId,
          type: 'USER',
        },
      ],
      start: {
        dateTime: popupInfo.startDateTime,
        timeZone: 'Asia/Tokyo',
      },
      end: {
        dateTime: popupInfo.endDateTime,
        timeZone: 'Asia/Tokyo',
      },
      isAllDay: popupInfo.isAllDay,
      isStartOnly: popupInfo.isStartOnly,
    });
  };
187
188
189
190
191
192
193
194
      addSchedule(popupInfo)
        .then(response => {
          closePopup($popup);
          openScheduleView(response.data.id);
        })
        .catch(() => {
          alert('予定登録に失敗しました');
        });

動作確認

  1. Garoon メールで受信できるメールアドレス宛に、日時を含む内容でメールを送信します。
    例:

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    
    山田様  
    
    打合せの候補日ですが、以下のご都合はいかがでしょうか?  
    
    12/9(月) 9:00〜  
    12/10(火) 13:00〜  
    12/10(火) 15:00〜  
    12/11(水) いつでも  
    
    よろしくおねがいします。
  2. Garoon メールでメールを受信します(参考: メールの受信 (External link)

  3. プレビュー画面で、予定を登録したい日付のリンクをクリックします。

  4. 表示されたポップアップに、予定の詳細を入力します。入力が終わったら、[登録する]ボタンをクリックします。

  5. 予定が登録されます。登録後は、登録した予定の詳細画面に自動で遷移します。

おわりに

他にも cybozu developer network では、さまざまな Garoon カスタマイズ を紹介しています。ぜひ参照してください。

このカスタマイズでは、次の API を利用しています。

information

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