【Garoon JavaScript API】スケジュールの参加者にメッセージを送信する

Index

• 概要
• 前提条件と注意事項
• できること
• 完成イメージ
• JavaScript／CSSカスタマイズ設定手順
• おわりに

概要

メッセージAPIを利用して、Garoonのスケジュールから、スケジュール参加者宛の新規メッセージ作成画面を表示するサンプルです。

前提条件と注意事項

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

できること

打合せや会議を行うとき、その前後に参加メンバーで情報共有をしたり、議論をしたりということはよくあるかと思います。

Garoonのスケジュール自体にもコメント欄や添付ファイル欄がありますが、全体公開のスケジュールではすべてのやりとりが全ユーザーに見えてしまいます。

一部のデータは会議参加者にしか見せたくない、
でもスケジュールを非公開にすると時間以外のすべての情報が参加者以外に見えなくなって不便、
Garoonのメッセージを使うにも宛先追加が大変・・・。

今回のサンプルでは、そんなお困りごとを解決します！ 

完成イメージ

予定の詳細画面に、メッセージ送信用のボタンを表示します。
※ボタンのデザインは、Garoon html/css/image-Kit for Customize を利用します。

ボタンを押すとメッセージの新規作成画面が表示され、宛先にスケジュールの参加者が自動設定されます。

JavaScript／CSSカスタマイズ設定手順

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

※ 適用するユーザーを追加する場合は、スケジュールとメッセージの両方で適用する必要がありますのでご注意ください。

詳細手順

スケジュールの設定

1. 下記のサンプルコードをエディタにコピーして、ファイル名を「scheduleToMsg.js」、文字コードを「UTF-8」で保存します。
   ※ファイル名は任意ですが、ファイルの拡張子は「js」にしてください。
2. ボタン表示に利用する、Garoon html/css/image-Kit for Customize のファイルを用意します。
   以下のGitHubからCSSファイルをダウンロードしてください。
   https://github.com/garoon/css-for-customize
    
3. [システム管理（各アプリケーション） > スケジュール > JavaScript / CSSによるカスタマイズ]の画面を表示し、「カスタマイズグループを追加する」をクリックします。
   
   
   
4. 「カスタマイズ」項目の「適用する」を選択し、「カスタマイズグループ名」に任意のグループ名を入力します。
5. 「適用対象」項目の「変更する」をクリックし、ユーザー/組織/ロールの選択画面でカスタマイズの適用範囲（ユーザー/組織/ロール）を選択し、「適用する」ボタンをクリックします。
6. 「JavaScriptカスタマイズ」項目に1.で保存した「scheduleToMsg.js」と以下のライブラリーを、
   「CSSカスタマイズ」項目に2.で保存した「grn_kit.css」を指定して「追加する」をクリックします。
   このカスタマイズでは、Cybozu CDNの次のライブラリーを使用します。
   
   - jQuery
      https://js.cybozu.com/jquery/3.1.1/jquery.min.js
   

メッセージの設定

1. 下記のサンプルコードをエディタにコピーして、ファイル名を「msgFromSchedule.js」、文字コードを「UTF-8」で保存します。
   ※ファイル名は任意ですが、ファイルの拡張子は「js」にしてください。
2. [システム管理（各アプリケーション） > メッセージ> JavaScript / CSSによるカスタマイズ]の画面を表示し、「カスタマイズグループを追加する」をクリックします。
   
3. 「カスタマイズ」項目の「適用する」を選択し、「カスタマイズグループ名」に任意のグループ名を入力します。
4. 「適用対象」項目の「変更する」をクリックし、ユーザー/組織/ロールの選択画面でカスタマイズの適用範囲（ユーザー/組織/ロール）を選択し、「適用する」ボタンをクリックします。
5. 「JavaScriptカスタマイズ」項目に1.で保存した「msgFromSchedule.js」と以下のライブラリーを
   指定して「追加する」をクリックします。
   このカスタマイズでは、Cybozu CDNの次のライブラリーを使用します。
   
   - jQuery
      https://js.cybozu.com/jquery/3.1.1/jquery.min.js
   

コード解説

scheduleToMsg.js （スケジュールに適用するカスタマイズ）

ボタン押下で、スケジュールの詳細画面表示イベントで取得した参加者情報をsessionStorageへ保存し、メッセージの作成画面を開きます。

「メッセージを送る」ボタンはGaroonに調和するデザインにするため、
Garoon html/css/image-Kit for Customize に用意されているサブボタンの「ポジティブ／強調」を利用しました。
これはclass名に "button_main_sub_grn_kit" を指定するだけです。簡単ですね！

msgFromSchedule.js（メッセージに適用するカスタマイズ）

メッセージ追加イベントを利用して、sessionStorageに保存されているデータを取得し、データがあればメッセージの宛先にセットします。

おわりに

今回は、2018年9月にリリースされたメッセージ追加イベントを利用したカスタマイズをご紹介しました。
GaroonのAPIが増えていく中で、便利なカスタマイズができるようになってきましたね。
今後もGaroon APIをぜひご活用ください！

このTipsは、2018年9月版 Garoonで確認したものになります。