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

Garoon開発Tips

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

固定リンクがコピーされました

更新日：2023年02月01日

概要

固定リンクがコピーされました

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

前提条件と注意事項

固定リンクがコピーされました

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

できること

固定リンクがコピーされました

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

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

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

完成イメージ

固定リンクがコピーされました

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

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

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

固定リンクがコピーされました

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

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

詳細手順

固定リンクがコピーされました

スケジュールの設定

次のサンプルコードをエディタにコピーして、ファイル名を「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);
})();

ボタン表示に利用する、 Garoon html/css/image-Kit for Customize のファイルを用意します。
以下のGitHubからCSSファイルをダウンロードしてください。
https://github.com/garoon/css-for-customize
[システム管理（各アプリケーション）> スケジュール > JavaScript / CSSによるカスタマイズ]の画面を表示し、「カスタマイズグループを追加する」をクリックします。
「カスタマイズ」項目の「適用する」を選択し、「カスタマイズグループ名」に任意のグループ名を入力します。
「適用対象」項目の「変更する」をクリックし、ユーザー/組織/ロールの選択画面でカスタマイズの適用範囲（ユーザー/組織/ロール）を選択し、「適用する」ボタンをクリックします。
「JavaScriptカスタマイズ」項目に1で保存した「scheduleToMsg.js」と以下のライブラリーを指定します。
「CSSカスタマイズ」項目に2で保存した「grn_kit.css」を指定して「追加する」をクリックします。
このカスタマイズでは、 Cybozu CDN の次のライブラリーを使用します。
- jQuery
  https://js.cybozu.com/jquery/3.1.1/jquery.min.js

メッセージの設定

次のサンプルコードをエディタにコピーして、ファイル名を「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;
  });
})();

[システム管理（各アプリケーション）> メッセージ > JavaScript / CSSによるカスタマイズ]の画面を表示し、「カスタマイズグループを追加する」をクリックします。
「カスタマイズ」項目の「適用する」を選択し、「カスタマイズグループ名」に任意のグループ名を入力します。
「適用対象」項目の「変更する」をクリックし、ユーザー/組織/ロールの選択画面でカスタマイズの適用範囲（ユーザー/組織/ロール）を選択し、「適用する」ボタンをクリックします。
「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をぜひご活用ください！

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

Garoon開発Tips