【Garoon JavaScript API】メッセージ画面内にアラートを表示する
はじめに
今回は、次のイベントと 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 行目では メッセージの作成画面を表示したときのイベント を使用しています。
|
|
26 行目では メッセージの宛先変更画面を表示したときのイベント を使用しています。
|
|
スペースの取得
アラートを表示するために、10,27 行目で メッセージの「宛先」下の要素を取得する API を使用しています。
|
|
取得したスペースに追加する要素を作成
11~22行目、28~39 行目それぞれで、 Garoon html/css/image-Kit for Customize の「メッセージ > 注意」の要素を使用しています。
|
|
|
|
スタイルシート
アラートを Garoon ライクな UI にするため、
Garoon html/css/image-Kit for Customize を使用しています。
アラート以外もさまざまな UI が用意されているのでご活用ください。
おわりに
Garoon メッセージ画面のカスタマイズ一例を紹介しました。
Garoon JavaScript API が増えたことにより、カスタマイズの可能性が広がりました。
他にも、 メッセージの「宛先」下の要素を取得する API と 予定を登録する API を用いて、メッセージ画面から予定を登録するカスタマイズもできそうですね。
ぜひこの機会に Garoon API をお試しください。
この Tips は、2018 年 9 月版 Garoon で動作を確認しています。