cybozu developer network

Enhanced by Google

カテゴリー内の他の記事

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

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

Index

はじめに

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

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

ES6 に対応していないブラウザ（例：Internet Explorer 11）で利用する場合、webpack入門 ~Babel,Polyfillを使って快適ES6ライフ~（kintone の Tips）を参考に、webpack を使って Polyfill の適用とトランスパイルを行ってください。

注意事項

  • クラウド版 Garoon または パッケージ版 Garoon 5 以上の環境が必要です。
  • カスタマイズで Garoon がサポートしない DOM 操作を行っています。Garoon のアップデートにより、機能が利用できなくなる可能性があります。
  • カスタマイズプログラムは、その動作を保証するものではありません。
  • カスタマイズプログラムの技術的なサポート等は行っていません。

完成イメージ

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

完成イメージ

  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, ドキュメント
    • 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）※1
    CSS カスタマイズ 次の順で指定します。
    • grn_kit.css（Garoon html/css/image-Kit for Customize）※2
    • カスタマイズファイル（grn_kit_icon.css） ※1
    • カスタマイズファイル（mail_to_schedule.css） ※1

※1 カスタマイズファイルの入手方法

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

  • mail_to_schedule.js
    • 全体 JS カスタマイズに適用します。記事執筆時点（2019年11月）で Garoon メールの要素を取得する API は存在しないため、DOM操作を行っています。
    • このカスタマイズでは、ES6 以上の記法を利用しています。
      ES6 に対応していないブラウザ（例：Internet Explorer 11）で利用する場合、webpack入門 ~Babel,Polyfillを使って快適ES6ライフ~（kintone の Tips） を参考に、webpack を使って Polyfill の適用とトランスパイルを行ってください。
  • gr_kit_icon.css
    • Garoon デザインに調和する、スケジュール登録のポップアップに表示しているアイコンです。
  • mail_to_schedule.css
    • スケジュール登録のポップアップのスタイルシートです。

※2 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」を利用します。

ソースコードの解説

日時の抽出

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

正規表現パターンを定義

メール本文からパターンを抽出

スケジュール登録のポップアップを表示するリンクを設定

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

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

動作確認

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

    打合せの候補日ですが、以下のご都合はいかがでしょうか？

    12/9(月) 9:00〜
    12/10(火) 13:00〜
    12/10(火) 15:00〜
    12/11(水) いつでも

    よろしくおねがいします。
  2. Garoon メールでメールを受信します（参考：メールの受信）
  3. プレビュー画面で、予定を登録したい日付のリンクをクリックします。
    日付のリンクをクリック
  4. 表示されたポップアップに、予定の詳細を入力します。入力が終わったら、[登録する]ボタンをクリックします。
    予定の詳細を入力
  5. 予定が登録されます。登録後は、登録した予定の詳細画面に自動で遷移します。
    予定の詳細画面へ遷移

おわりに

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

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

このTipsは、2019年11月版 Garoonで確認したものになります。

記事に関するフィードバック

記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。

サインインしてコメントを残してください。