Garoon スケジュールに Zoom ミーティングルームの情報を表示しよう

はじめに

Web 会議システムのひとつである Zoom では、仮想ミーティングルームを作成し、参加者はその仮想ミーティングルームへ接続して打ち合わせします。

サイボウズでは、Zoom 上にオフィスにある実際の会議室にそれぞれ紐づく仮想ミーティングルームを準備しています。
仮想ミーティングルームには、それぞれ固定のURL（以降、ミーティングルームURL）が発行されています。

自宅や他拠点のメンバーと打ち合わせをするとき、打ち合わせの参加者は、打ち合わせが行われる会議室に紐づく Zoom のミーティングルームへ接続します。

打ち合わせには施設に紐づくミーティングルームへ接続しますが、打ち合わせのたびにその施設の Zoom 情報を確認するのは面倒です。

この記事では、スケジュール詳細画面から、スケジュールの施設に紐づくミーティングルーム URL へ移動できるボタンを表示するカスタマイズを紹介します。
参加者は、予定の詳細画面から Zoom のミーティングルームへ移動できるので、シームレスに打ち合わせへ参加できます。

完成イメージ

• スケジュールの詳細画面の「施設」の下に、スケジュールに登録された施設の Zoom 情報を表示します。
• 「PC/スマートフォンでアクセス（社内用）」ボタンをクリックすると、Zoom ミーティングルーム URL に移動します。

システム構成

• 各施設の Zoom 情報は、施設情報の「メモ」に設定します。
• スケジュールに登録された施設の Zoom 情報を取得して、スケジュール詳細画面に表示します。 

注意事項

• クラウド版 Garoon、パッケージ版 Garoon バージョン 5.0.0 以降で動作します。
• このカスタマイズでは、スケジュール詳細画面に表示される表に行を追加する DOM 操作をしています。今後の Garoon のアップデートで動作しなくなる可能性があります。

Garoon の設定

設定にはGaroon の管理者権限が必要です。

Zoom 情報の設定

それぞれの施設に、ミーティングルーム URL を含む Zoom の情報を追加します。
手順の詳細は「施設を変更する」をご参照ください。

1. Garoon メニュー右の歯車アイコンをクリックし、[Garoonシステム管理]を選択します。
2. [各アプリケーションの管理]タブを選択し、[スケジュール]を選択します。
3. [施設/施設グループ]をクリックします。
4. Zoom 情報を追加する施設が所属する施設グループを選択します。
5. 施設の[変更]をクリックします。
6. 次の内容を入力します。入力が終わったら、[変更する]ボタンをクリックします。
   
   　
   

   項目名	設定値
   メモ	次のフォーマットで Zoom 情報を設定します。 ※ コロン:は半角です。 Room:Zoom会議室 URL:https://xxx.zoom.us/xxxxxxxx Priority:0 Room（必須） ミーティングルーム名（任意の値）です。 URL（必須） ミーティングルーム URL です。 https://から指定します。 優先度 0 以上の数字で指定します。指定しない場合、0が指定されます。 予定に施設が複数登録されている場合、優先度の数値が最も小さい施設の Zoom 情報が表示されます。 優先度が同じ場合、ミーティングルーム名を昇順で並び替えたときの先頭の Zoom 情報が表示されます。

カスタマイズの適用

カスタマイズグループを作成し、スケジュールのカスタマイズファイルを適用します。
手順の詳細は「スケジュールのカスタマイズ」をご参照ください。

1. Garoon メニュー右の歯車アイコンをクリックし、[Garoonシステム管理]を選択します。
2. [各アプリケーションの管理]タブを選択し、[スケジュール]を選択します。
3. [JavaScript/CSSによるカスタマイズ]を選択します。
4. [カスタマイズグループを追加する]をクリックします。
5. 次の内容を入力します。入力が終わったら、[追加する]ボタンをクリックします。
   
   　　
   

   項目名	設定値
   カスタマイズ	「適用する」を選択します。
   カスタマイズグループ名	任意の値を入力します。 今回は「Zoom 連携」とします。
   適用対象	カスタマイズを適用するユーザー・グループを選択します。
   JavaScript カスタマイズ	garoon-schedule-zoom.zip から zip ファイルをダウンロードしてください。 ダウンロードしたファイルを解凍し、解凍したフォルダー内の 「zoominformation.js」を指定します。
   CSS カスタマイズ	Garoon の見た目に調和するスタイルシートである Garoon html/css/image-Kit for Customize を利用します。 「grn_kit.css」※1 を指定します。

※1 Garoon html/css/image-Kit for Customize の入手方法

1. https://github.com/garoon/css-for-customize にアクセスします。
2. [Clone or download] ボタンをクリックして、「Download ZIP」を選択します。
3. ダウンロードした zip ファイルを解凍します。
4. 解凍したファイルの「css」フォルダー以下の「grn_kit.css」を利用します。

おわりに

今回の記事では、実際の施設に紐付けた Zoom ミーティングルームへ移動できるカスタマイズを紹介しました。

このカスタマイズでは、次の API を利用しています。

• Garoon JavaScript API
  • 予定の詳細画面が表示されたときのイベント
• Garoon REST API
  • 施設の一覧取得

developer network では、他にもさまざまな Garoon スケジュールカスタマイズ例を紹介しています。
ぜひご参考ください。

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