検索
Close
カテゴリー内の他の記事

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

作成日
更新日
フォローする

Index

はじめに

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

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

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

zoom.png

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

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

完成イメージ

システム構成図

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

システム構成

zoom.png

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

注意事項

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

Garoon の設定

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

Zoom 情報の設定

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

  1. Garoon メニュー右の歯車アイコンをクリックし、[Garoonシステム管理]を選択します。
  2. [各アプリケーションの管理]タブを選択し、[スケジュール]を選択します。
  3. [施設/施設グループ]をクリックします。
  4. Zoom 情報を追加する施設が所属する施設グループを選択します。
  5. 施設の[変更]をクリックします。
  6. 次の内容を入力します。入力が終わったら、[変更する]ボタンをクリックします。
    facility.png
    　
    項目名 設定値
    メモ 次のフォーマットで 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 を利用しています。

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

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

記事に関するフィードバック

直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。

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