はじめに
クラウド版Garoon 2018年9月版に、メッセージ画面に関するGaroon JavaScript APIが追加されました。
このAPIが追加されたことにより、メッセージ画面のカスタマイズが簡単に可能になりました。
今回は2つのイベントと、要素取得するAPIを用いて、
メッセージ操作のうっかりミスを抑止するアラートを宛先パーツ内に表示する方法をご紹介します。
前提条件と注意事項
- この機能は、現時点ではクラウド版 Garoon が必要です。（2018年9月時点）
- サンプルプログラムは、その動作を保証するものではありません。
- サンプルプログラムの技術的なサポート等は行っていません。
完成イメージ
Garoonメッセージ作成画面と宛先変更画面の宛先下部に注意喚起のアラートを1行表示するシンプルなカスタマイズです。
これだけですが、送信前確認をしないユーザーには一定の効果がありそうです。
Garoonメッセージ作成画面
Garoonメッセージ宛先変更画面
JavaScript / CSSカスタマイズ設定方法
Garoonのメッセージに対してJavaScript / CSSのカスタマイズを適用するためには、
適用したい範囲（ユーザ／グループ）に合わせてカスタマイズグループを作成し、適用したいJavaScript / CSSを設定します。
詳細手順
- 下記のサンプルコードを任意のファイル名で保存します。拡張子は「.js」にしてください。
- 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行目ではメッセージの作成画面が表示されたときのイベントを使用しています。
25行目ではメッセージの宛先変更画面が表示されたときのイベントを使用しています。
スペースの取得
アラートを表示するために、10,26行目でメッセージの空白要素を取得する関数を使用しています。
取得したスペースに追加する要素を作成
11~22行目、27~38行目それぞれで、Garoon html/css/image-Kit for Customizeの「メッセージ > 注意」の要素を使用しています。
スタイルシート
アラートをGaroonライクなUIにするため、Garoon html/css/image-Kit for Customizeを使用しています。
アラート以外も様々なUIが用意されているのでご活用ください。
おわりに
Garoonメッセージ画面のカスタマイズ一例をご紹介しました。
Garoon JavaScript APIが増えたことにより、カスタマイズの可能性が広がりました。
他にも、メッセージの空白要素を取得する関数と予定登録のGaroon REST APIを用いて、
メッセージ画面から予定を登録するカスタマイズもできそうですね。
ぜひこの機会にGaroon APIをお試しください。
このTipsは、2018年9月版 Garoonで確認したものになります。
記事に関するフィードバック
直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。