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カスタマイズ zoomInfomation.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で動作を確認しています。