【Garoon JavaScript API】メッセージ画面内にアラートを表示する

Garoon開発Tips

【Garoon JavaScript API】メッセージ画面内にアラートを表示する

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

更新日：2023年02月01日

はじめに

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

今回は、次のイベントとAPIを使って、メッセージ操作ミスを防止するアラートを宛先パーツ内に表示する方法を紹介します。

前提条件と注意事項

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

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

完成イメージ

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

Garoonメッセージ作成画面と宛先変更画面の宛先下部に注意喚起のアラートを1行表示するシンプルなカスタマイズです。
これだけですが、送信前確認をしないユーザーには一定の効果がありそうです。

Garoonメッセージ作成画面

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

Garoonメッセージ宛先変更画面

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

JavaScript / CSSカスタマイズ設定方法

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

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

詳細手順

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

次のサンプルコードを任意のファイル名で保存します。拡張子は「.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
30
31
32
33
34
35
36
37
38
39
40
41
42
43


/*
* 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', (event) => {
    const alert = garoon.message.body.getItemLastSpaceElement('recipients');
    alert.innerHTML =
    '<div class="attention_area_grn_kit">' +
        '<div>' +
            '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="icon_attention16_grn_kit">' +
                '<rect class="icon_attention16_1_grn_kit"/>' +
                '<path class="icon_attention16_2_grn_kit" d="M.1,15,7.92,1.47l8,13.53Z"/>' +
                '<rect class="icon_attention16_3_grn_kit" x="7" y="6" width="2" height="5"/>' +
                '<rect class="icon_attention16_3_grn_kit" x="7" y="12" width="2" height="2"/>' +
            '</svg>' +
            '<span class="message_text_grn_kit attention_message_grn_kit">送信前に宛先と本文を確認してください。</span>' +
        '</div>' +
    '</div>';
    return event;
  });

  garoon.events.on('message.body.changeTo.show', (event) => {
    const alert = garoon.message.body.getItemLastSpaceElement('recipients');
    alert.innerHTML =
    '<div class="attention_area_grn_kit">' +
        '<div>' +
            '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="icon_attention16_grn_kit">' +
                '<rect class="icon_attention16_1_grn_kit"/>' +
                '<path class="icon_attention16_2_grn_kit" d="M.1,15,7.92,1.47l8,13.53Z"/>' +
                '<rect class="icon_attention16_3_grn_kit" x="7" y="6" width="2" height="5"/>' +
                '<rect class="icon_attention16_3_grn_kit" x="7" y="12" width="2" height="2"/>' +
            '</svg>' +
            '<span class="message_text_grn_kit attention_message_grn_kit">変更内容が問題ないか確認してください。</span>' +
    '</div>' +
    '</div>';
    return event;
  });

}());

Garoonライクなアラートを表示するために、 Garoon html/css/image-Kit for Customize のファイルを用意します。
以下のGitHubから「grn_kit.css」ファイルをダウンロードしてください。
https://github.com/garoon/css-for-customize
[Garoonシステム管理 > 各アプリケーションの管理 > メッセージ > JavaScript / CSSによるカスタマイズ]の画面を表示し、「カスタマイズグループを追加する」をクリックします。
「カスタマイズ」を「適用する」を選択し、「カスタマイズグループ名」は任意に設定してください。
「適用対象」には、カスタマイズ対象となるユーザー、組織、グループを選択してください。
「JavaScriptカスタマイズ」項目に1. で保存したjsファイルを設定します。
「CSSカスタマイズ」項目には2. でダウンロードしたCSSファイルを設定します。
すべての設定が完了したら「追加する」をクリックして、設定を保存します。

解説

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

サンプルコード

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

イベント

サンプルコード9行目ではメッセージの作成画面を表示したときのイベントを使用しています。

9

garoon.events.on('message.body.create.show', (event) => { /* 省略 */ });

26行目ではメッセージの宛先変更画面を表示したときのイベントを使用しています。

26

garoon.events.on('message.body.changeTo.show', (event) => { /* 省略 */ });

スペースの取得

アラートを表示するために、10,27行目でメッセージの「宛先」下の要素を取得する APIを使用しています。

10

const alert = garoon.message.body.getItemLastSpaceElement('recipients');

取得したスペースに追加する要素を作成

11~22行目、28~39行目それぞれで、 Garoon html/css/image-Kit for Customize の「メッセージ > 注意」の要素を使用しています。

11
12
13
14
15
16
17
18
19
20
21
22


alert.innerHTML =
'<div class="attention_area_grn_kit">' +
    '<div>' +
        '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="icon_attention16_grn_kit">' +
            '<rect class="icon_attention16_1_grn_kit"/>' +
            '<path class="icon_attention16_2_grn_kit" d="M.1,15,7.92,1.47l8,13.53Z"/>' +
            '<rect class="icon_attention16_3_grn_kit" x="7" y="6" width="2" height="5"/>' +
            '<rect class="icon_attention16_3_grn_kit" x="7" y="12" width="2" height="2"/>' +
        '</svg>' +
        '<span class="message_text_grn_kit attention_message_grn_kit">送信前に宛先と本文を確認してください。</span>' +
    '</div>' +
'</div>';

28
29
30
31
32
33
34
35
36
37
38
39


alert.innerHTML =
'<div class="attention_area_grn_kit">' +
    '<div>' +
        '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="icon_attention16_grn_kit">' +
            '<rect class="icon_attention16_1_grn_kit"/>' +
            '<path class="icon_attention16_2_grn_kit" d="M.1,15,7.92,1.47l8,13.53Z"/>' +
            '<rect class="icon_attention16_3_grn_kit" x="7" y="6" width="2" height="5"/>' +
            '<rect class="icon_attention16_3_grn_kit" x="7" y="12" width="2" height="2"/>' +
        '</svg>' +
        '<span class="message_text_grn_kit attention_message_grn_kit">変更内容が問題ないか確認してください。</span>' +
    '</div>' +
'</div>';

スタイルシート

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

アラートをGaroonライクなUIにするため、 Garoon html/css/image-Kit for Customize を使用しています。
アラート以外もさまざまなUIが用意されているのでご活用ください。

おわりに

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

Garoonメッセージ画面のカスタマイズ一例を紹介しました。
Garoon JavaScript APIが増えたことにより、カスタマイズの可能性が広がりました。

他にも、メッセージの「宛先」下の要素を取得するAPI と予定を登録するAPI を用いて、メッセージ画面から予定を登録するカスタマイズもできそうですね。

ぜひこの機会にGaroon APIをお試しください。

このTipsは、2018年9月版Garoonで動作を確認しています。

Garoon開発Tips