警告

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

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

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

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

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

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

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

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

3. 項目を入力し、[登録する]ボタンをクリックすると、Garoonスケジュールに予定が登録されます。

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

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

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

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

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

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

   

   項目名	設定値
   カスタマイズ	「適用する」を選択します。
   カスタマイズグループ名	任意の値を入力します。 この記事では「メール予定登録」とします。
   適用対象	カスタマイズを適用するユーザーやグループを選択します。
   JavaScript カスタマイズ	次の順で指定します。 https://js.cybozu.com/jquery/3.4.1/jquery.min.js https://js.cybozu.com/jqueryui/1.12.1/jquery-ui.min.js カスタマイズファイル（mail_to_schedule.js） カスタマイズファイルの入手方法
   CSS カスタマイズ	次の順で指定します。 grn_kit.css（Garoon html/css/image-Kit for Customize） grn_kit.css（Garoon html/css/image-Kit for Customize）の入手方法 カスタマイズファイル（grn_kit_icon.css） カスタマイズファイルの入手方法 カスタマイズファイル（mail_to_schedule.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 にアクセスします。
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スケジュールへの予定登録は、 予定を登録する 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メールでメールを受信します（参考： メールの受信 ）

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

   

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

   

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

   

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

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

• Garoon REST API
  • 予定を登録する

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