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

目次

はじめに

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

前提条件と注意事項

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

完成イメージ

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

Garoonメッセージ作成画面

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

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

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

詳細手順

  1. 次のサンプルコードを任意のファイル名で保存します。拡張子は「.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;
      });
    
    }());
  2. Garoon ライクなアラートを表示するために、 Garoon html/css/image-Kit for Customize のファイルを用意します。
    以下の GitHub から「grn_kit.css」ファイルをダウンロードしてください。
    https://github.com/garoon/css-for-customize (External link)

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

  4. 「カスタマイズ」を「適用する」を選択し、「カスタマイズグループ名」は任意に設定してください。

  5. 「適用対象」には、カスタマイズ対象となるユーザー、組織、グループを選択してください。

  6. 「JavaScript カスタマイズ」項目に 1. で保存した js ファイルを設定します。

  7. 「CSS カスタマイズ」項目には 2. でダウンロードした CSS ファイルを設定します。

  8. すべての設定が完了したら「追加する」をクリックして、設定を保存します。

解説

サンプルコード

イベント

サンプルコード 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 をお試しください。

information

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