カテゴリー内の他の記事

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

フォローする

Index

はじめに

クラウド版Garoon 2018年9月版に、メッセージ画面に関するGaroon JavaScript APIが追加されました。
このAPIが追加されたことにより、メッセージ画面のカスタマイズが簡単に可能になりました。

今回は2つのイベントと、要素取得するAPIを用いて、
メッセージ操作のうっかりミスを抑止するアラートを宛先パーツ内に表示する方法をご紹介します。

前提条件と注意事項

  • この機能は、現時点ではクラウド版 Garoon が必要です。(2018年9月時点)
  • サンプルプログラムは、その動作を保証するものではありません。
  • サンプルプログラムの技術的なサポート等は行っていません。

完成イメージ

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

Garoonメッセージ作成画面

fix.png

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

______.png

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

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

詳細手順

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

解説

サンプルコード

イベント

サンプルコード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 コミュニティをご活用ください。

ログインしてコメントを残してください。