スケジュールの参加者にメッセージを送信する

目次

概要

メッセージ API を利用して、Garoon のスケジュールから、スケジュール参加者宛の新規メッセージ作成画面を表示するサンプルです。

前提条件と注意事項

  • この機能は、2018 年 9 月時点ではクラウド版 Garoon が必要です。

できること

打合せや会議をするとき、その前後に参加メンバーで情報共有をしたり、議論をしたりということはよくあるかと思います。
Garoon のスケジュール自体にもコメント欄や添付ファイル欄がありますが、全体公開のスケジュールではすべてのやりとりが全ユーザーに見えてしまいます。

一部のデータは会議参加者にしか見せたくない、
でもスケジュールを非公開にすると時間以外のすべての情報が参加者以外に見えなくなって不便、
Garoon のメッセージを使うにも宛先追加がたいへん。

今回のサンプルでは、そんなお困りごとを解決します!

完成イメージ

予定の詳細画面に、メッセージ送信用のボタンを表示します。
ボタンのデザインは、 Garoon html/css/image-Kit for Customize を利用します。

ボタンを押すとメッセージの新規作成画面が表示され、宛先にスケジュールの参加者が自動設定されます。

JavaScript/CSSカスタマイズ設定手順

Garoon のスケジュール、メッセージに対してカスタマイズを適用するためには、
適用したい範囲(ユーザ/グループ)に合わせてカスタマイズグループを作成し、適用したい JavaScript/CSS を設定します。

information

適用するユーザーを追加する場合は、スケジュールとメッセージの両方で適用する必要がありますのでご注意ください。

詳細手順

スケジュールの設定
  1. 次のサンプルコードをエディタにコピーして、ファイル名を「scheduleToMsg.js」、文字コードを「UTF-8」で保存します。
    ファイル名は任意ですが、ファイルの拡張子は「js」にしてください。

     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
    
    /*
    * Garoon JavaScript API of sample program
    * Copyright (c) 2018 Cybozu
    *
    * Licensed under the MIT License
    */
    (function() {
      'use strict';
      const myJQuery = jQuery.noConflict(true);
    
      (function($) {
        garoon.events.on('schedule.event.detail.show', (resp) => {
          const event = resp.event;
          const msgButtonSpace = garoon.schedule.event.getHeaderSpaceElement();
          const $msgButton = $('<button>', {
            id: 'myMessageBtn',
            class: 'button_main_sub_grn_kit',
            type: 'button',
            text: 'メッセージを送る'
          }).click(() => {
            sessionStorage.setItem('my_attendees', JSON.stringify(event.attendees));
            location.href = '/g/message/send.csp';
          });
          const $brElements = $('<br><br>');
          $msgButton.appendTo(msgButtonSpace);
          $brElements.appendTo(msgButtonSpace);
        });
      })(myJQuery);
    })();
  2. ボタン表示に利用する、 Garoon html/css/image-Kit for Customize のファイルを用意します。
    以下の GitHub から CSS ファイルをダウンロードしてください。
    https://github.com/garoon/css-for-customize (External link)

  3. [システム管理(各アプリケーション)> スケジュール > JavaScript / CSS によるカスタマイズ]の画面を表示し、「カスタマイズグループを追加する」をクリックします。

  4. 「カスタマイズ」項目の「適用する」を選択し、「カスタマイズグループ名」に任意のグループ名を入力します。

  5. 「適用対象」項目の「変更する」をクリックし、ユーザー/組織/ロールの選択画面でカスタマイズの適用範囲(ユーザー/組織/ロール)を選択し、「適用する」ボタンをクリックします。

  6. 「JavaScript カスタマイズ」項目に 1 で保存した「scheduleToMsg.js」と以下のライブラリーを指定します。
    「CSS カスタマイズ」項目に 2 で保存した「grn_kit.css」を指定して「追加する」をクリックします。
    このカスタマイズでは、 Cybozu CDN の次のライブラリーを使用します。

    • jQuery
      https://js.cybozu.com/jquery/3.1.1/jquery.min.js

メッセージの設定
  1. 次のサンプルコードをエディタにコピーして、ファイル名を「msgFromSchedule.js」、文字コードを「UTF-8」で保存します。
    ファイル名は任意ですが、ファイルの拡張子は「js」にしてください。

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    
    /*
    * Garoon JavaScript API of sample program
    * Copyright (c) 2018 Cybozu
    *
    * Licensed under the MIT License
    */
    (function() {
      'use strict';
    
      garoon.events.on('message.body.create.show', (resp) => {
        const myAttendees = sessionStorage.getItem('my_attendees');
        if (myAttendees) {
          resp.body.recipients = JSON.parse(myAttendees);
          sessionStorage.removeItem('my_attendees');
        }
        return resp;
      });
    })();
  2. [システム管理(各アプリケーション)> メッセージ > JavaScript / CSS によるカスタマイズ]の画面を表示し、「カスタマイズグループを追加する」をクリックします。

  3. 「カスタマイズ」項目の「適用する」を選択し、「カスタマイズグループ名」に任意のグループ名を入力します。

  4. 「適用対象」項目の「変更する」をクリックし、ユーザー/組織/ロールの選択画面でカスタマイズの適用範囲(ユーザー/組織/ロール)を選択し、「適用する」ボタンをクリックします。

  5. 「JavaScript カスタマイズ」項目に 1 で保存した「msgFromSchedule.js」と以下のライブラリーを指定して「追加する」をクリックします。
    このカスタマイズでは、 Cybozu CDN の次のライブラリーを使用します。

    • jQuery
      https://js.cybozu.com/jquery/3.1.1/jquery.min.js

コード解説

scheduleToMsg.js (スケジュールに適用するカスタマイズ)

ボタン押下で、スケジュールの詳細画面表示イベントで取得した参加者情報を sessionStorage へ保存し、メッセージの作成画面を開きます。

「メッセージを送る」ボタンは Garoon と調和するデザインにするため、
Garoon html/css/image-Kit for Customize で用意されているサブボタンの「ポジティブ/強調」を利用しました。
これは class 名に button_main_sub_grn_kit を指定するだけです。簡単ですね!

 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
/*
 * Garoon JavaScript API of sample program
 * Copyright (c) 2018 Cybozu
 *
 * Licensed under the MIT License
*/
(function() {
  'use strict';
  const myJQuery = jQuery.noConflict(true);

  (function($) {
    garoon.events.on('schedule.event.detail.show', (resp) => {
      const event = resp.event;
      const msgButtonSpace = garoon.schedule.event.getHeaderSpaceElement();
      const $msgButton = $('<button>', {
        id: 'myMessageBtn',
        class: 'button_main_sub_grn_kit',
        type: 'button',
        text: 'メッセージを送る'
      }).click(() => {
        sessionStorage.setItem('my_attendees', JSON.stringify(event.attendees));
        location.href = '/g/message/send.csp';
      });
      const $brElements = $('<br><br>');
      $msgButton.appendTo(msgButtonSpace);
      $brElements.appendTo(msgButtonSpace);
    });
  })(myJQuery);
})();
msgFromSchedule.js (メッセージに適用するカスタマイズ)

メッセージ追加イベントを利用して、sessionStorage に保存されているデータを取得し、データがあればメッセージの宛先にセットします。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
/*
 * Garoon JavaScript API of sample program
 * Copyright (c) 2018 Cybozu
 *
 * Licensed under the MIT License
*/
(function() {
  'use strict';

  garoon.events.on('message.body.create.show', (resp) => {
    const myAttendees = sessionStorage.getItem('my_attendees');
    if (myAttendees) {
      resp.body.recipients = JSON.parse(myAttendees);
      sessionStorage.removeItem('my_attendees');
    }
    return resp;
  });
})();

おわりに

今回は、2018 年 9 月にリリースされた メッセージの作成画面を表示したときのイベント を利用したカスタマイズを紹介しました。
Garoon の API が増えていく中で、便利なカスタマイズができるようになってきましたね。
今後も Garoon API をぜひご活用ください!

information

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