はじめに
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 の情報を追加します。
手順の詳細は「施設を変更する」をご参照ください。
- Garoon メニュー右の歯車アイコンをクリックし、[Garoonシステム管理]を選択します。
- [各アプリケーションの管理]タブを選択し、[スケジュール]を選択します。
- [施設/施設グループ]をクリックします。
- Zoom 情報を追加する施設が所属する施設グループを選択します。
- 施設の[変更]をクリックします。
- 次の内容を入力します。入力が終わったら、[変更する]ボタンをクリックします。
項目名 設定値 メモ 次のフォーマットで Zoom 情報を設定します。
※ コロン:は半角です。Room:Zoom会議室
URL:https://xxx.zoom.us/xxxxxxxx
Priority:0- Room(必須)
ミーティングルーム名(任意の値)です。 - URL(必須)
ミーティングルーム URL です。
https://から指定します。 - 優先度
0 以上の数字で指定します。指定しない場合、0が指定されます。
予定に施設が複数登録されている場合、優先度の数値が最も小さい施設の Zoom 情報が表示されます。
優先度が同じ場合、ミーティングルーム名を昇順で並び替えたときの先頭の Zoom 情報が表示されます。
- Room(必須)
カスタマイズの適用
カスタマイズグループを作成し、スケジュールのカスタマイズファイルを適用します。
手順の詳細は「スケジュールのカスタマイズ」をご参照ください。
- Garoon メニュー右の歯車アイコンをクリックし、[Garoonシステム管理]を選択します。
- [各アプリケーションの管理]タブを選択し、[スケジュール]を選択します。
- [JavaScript/CSSによるカスタマイズ]を選択します。
- [カスタマイズグループを追加する]をクリックします。
- 次の内容を入力します。入力が終わったら、[追加する]ボタンをクリックします。
項目名 設定値 カスタマイズ 「適用する」を選択します。 カスタマイズグループ名 任意の値を入力します。
今回は「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 の入手方法
- https://github.com/garoon/css-for-customize にアクセスします。
- [Clone or download] ボタンをクリックして、「Download ZIP」を選択します。
- ダウンロードした zip ファイルを解凍します。
- 解凍したファイルの「css」フォルダー以下の「grn_kit.css」を利用します。
おわりに
今回の記事では、実際の施設に紐付けた Zoom ミーティングルームへ移動できるカスタマイズを紹介しました。
このカスタマイズでは、次の API を利用しています。
- Garoon JavaScript API
- Garoon REST API
developer network では、他にもさまざまな Garoon スケジュールカスタマイズ例を紹介しています。
ぜひご参考ください。
このTipsは、2019年9月版 Garoonで確認したものになります。
いつもお世話になっております。
順番通り試してみましたが、このようになっておりまして、なにかアドバイス頂ければ幸いです。どうぞご指導のほどよろしくお願い致します。
経験浅いもので大変恐縮でございますが、
① おわりのところの
このカスタマイズでは、次の API を利用しています。
ですが、このAPIを設定しないといけないものでしょうか?
②メモの部分ですが、ZOOmでミーティングスケジュリングするたび毎回URLが変わりますが、登録者(ユーザー側)どうやって編集すればよろしいでしょうか?予定の詳細を編集したところ、メモの部分は出てこなくて、どうすればいいか困っております・・
Tomy 様
お世話になっております。
cybozu developer network 運営でございます。
以下、回答となります。
①について
>このAPIを設定しないといけないものでしょうか?
「おわりに」の部分の案内については、適応していただいた zoomInfomation.js 内で使用している API の記事ページへのリンクです。より詳しくカスタマイズについて知りたい方のための参考リンクとなっております。
別途、設定をしていただく必要はありません。
②について
>ZOOmでミーティングスケジュリングするたび毎回URLが変わりますが、登録者(ユーザー側)どうやって編集すればよろしいでしょうか?
本記事では、「はじめに」に記載されている通り、各施設が固定のURLを持っている想定で書かれています。ですので、毎回URLが変わるミーティングについては対応しておりません。
また、記事のコメント欄は記事に対するフィードバックをする場となっております。
「記事を参考にした技術的な質問」は、 お手数ですがcybozu developer コミュニティのご利用をお願いします。
ご確認のほど、よろしくお願いいたします。
cybozu developer network様
いつもお世話になっております。
承知致しました。
いつもありがとうございます。