Garoon 開発 Tips

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

目次

はじめに

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

サイボウズでは、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 の情報を追加します。
手順の詳細は「 施設を変更する (External link) 」を参照してください。

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

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

カスタマイズの適用

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

  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」を指定します。
Garoon html/css/image-Kit for Customize の入手方法
  1. css-for-customize (External link) にアクセスします。
  2. [Clone or download]ボタンをクリックして、「Download ZIP」を選択します。
  3. ダウンロードした zip ファイルを解凍します。
  4. 解凍したファイルの「css」フォルダー以下の「grn_kit.css」を利用します。

おわりに

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

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

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

information

この Tips は、2019 年 9 月版 Garoon で動作を確認しています。