はじめに
使い方がシンプル & 無料でも利用できるWeb会議システム「Zoom」、
最近の仕事やプライベートで活用されている方はたくさんいらっしゃると思います。
しかし、オンラインミーティングが増えるにつれ、日程の管理が大変..!!と悩んでいる方も実は多いのではないでしょうか。
そんなとき、会議の日程を管理したり、会議の前にリマインダーを設定できる kintone と連携できたら便利かと思います。
この記事では「Zoom API」を利用して、ミーティング日程の管理などを実現する、
Zoom と kintone の連携カスタマイズをご紹介したいと思います。
完成イメージ
今回のカスタマイズは、「会議日程管理」という kintone アプリと「kintone2Zoom」というプラグインを利用します。
「会議日程管理」アプリに「kintone2Zoom」プラグインをインストールすることで、
Zoomミーティングの作成 / 削除などの操作を kintone アプリからできるようになります。
できること
- 会議日程の管理
- 「会議日程管理」アプリからレコードを登録 / 削除することで、Zoomミーティングを作成 / 削除することができます。
- 登録されたミーティングの日程を、カレンダー形式の一覧画面で管理できます。
- 会議の集計
- 毎月の会議を集計し、グラフにすることができます。
- 毎月の会議を集計し、グラフにすることができます。
- 会議の日程のリマインド
- kintone のリマインダー機能を利用することで、「会議の○○時間前」にリマインダーを設定することができます。
詳細の設定手順は、kintone ヘルプ- リマインダーの設定をご参照ください。
- kintone のリマインダー機能を利用することで、「会議の○○時間前」にリマインダーを設定することができます。
使い方
ミーティングを登録 / 削除する
ミーティングの登録は、次の手順で行います。
- kintone の「会議日程管理」アプリに、レコードを新規追加します。
- 「会議名」「開始時間」「会議時間」などの関連情報を入力します。
- レコードを保存します。
保存されたレコードの「ZoomInfo」グループに、登録された Zoomミーティングの情報が表示されます。
Zoom の「ミーティング」画面（ログインが必要）からも、登録された予定を確認できます。
ミーティングを削除したい場合は、
kintone のレコードを削除すれば、該当ミーティングも Zoom から自動的に削除されます。
登録したミーティングに参加する
- 「会議日程管理」アプリから、開始したい会議のレコードの詳細画面を開き、
「ZoomInfo」にある「会議リンク」をからミーティングに参加します。
利用上の注意事項
- レコード保存後に内容を編集した場合、編集された内容は Zoom に反映されません。
会議時間などの情報を変更したい場合は、レコードを削除してもう一度登録し直してください。 - Zoom の無料版に対応したカスタマイズのため、複数のミーティングを同時に行うことはできません。
環境の準備
- Zoom の準備
- 必要な認証情報の準備
- kintone の準備
- アプリの作成
- プラグインのパッケージング
Zoom の準備
Zoom の準備で必要な作業は、Zoom の Developer Account から JWTアプリを作成し、
認証用の Token を取得することです。
JWTアプリの作成
- Zoom App Marketplace ページにアクセスし、
右上にある「Develop」プルダウンから「Build App」を選択します。 - Developer Account のサインイン画面が表示されたら、ログインをします。
（初めての方は「サインアップ」して進めてください） - 「Choose your app type」画面から、JWT の「Create」をクリックします。
- 画面の指示に従って「App Name」「Basic Information」などの情報を入力し、
「Continue」ボタンをクリックします。
JWT Token の確認
- 作成した JWTアプリの「App Credentials」画面に表示された「JWT Token」 を、利用する期間を設定した上で、控えておきます。
kintone の準備
kintone の準備で必要な作業は「会議日程管理」というアプリの作成と、
「kintone2Zoom」というプラグインのパッケージングをすることです。
-
「会議日程管理」アプリ
「はじめから作成」からアプリを新規作成し、下記のフィールドをアプリに追加してください。
| フィールドの種類 | フィールドコード | 備考 |
|---|---|---|
| 文字列（1行） | topic | 会議の「会議名」を入力します。 |
| 日時 | start_time | 会議の「開始時間」情報を入力します。 |
| 数値 | duration | 会議の「会議時間」情報を入力します。 |
| ユーザー選択 | participants | 会議の「参加者」情報を入力します。 |
| グループ | ZoomInfo | 会議の「会議番号」「会議パスワード」「会議リンク」を入れるグループです。 |
| 文字列（１行） | meetingNumber | 会議の「会議番号」情報が自動入力されます。 |
| 文字列（１行） | password | 会議の「会議パスワード」情報が自動入力されます。 |
| 文字列（１行） | join_url | 会議の「会議リンク」情報が自動入力されます。 |
- 「kintone2Zoom」プラグイン
「サンプルコード」部分の手順に沿ってサンプルプログラムをパッケージングした上で、kintone にインストールしてください。
※プラグインをインストール手順の詳細は、kintone ヘルプ - アプリにプラグインを追加する をご参照ください。
利用する前には、事前に用意した Token をプラグインに入力し、保存してください。
サンプルコード
サンプルコードは、GitHub に公開されています。
https://github.com/kintone-samples/sample-kintone-to-zoom
こちらの手順を参考に、「kintone2zoom-plugin」フォルダ内にある「plugin」ファイルをパッケージングしてください。
ソースコードに変更を加えたい方はそちらのファイルを編集し、ビルドをした上でパッケージング作業を行ってください。
ビルド作業の仕方については「webpack入門 ~Babel,Polyfillを使って快適ES6ライフ~」記事をご参照ください。
カスタマイズのポイント
今回のカスタマイズのポイント、レコード登録 / 削除をするタイミングで Zoomミーティングを生成 / 削除する処理は、
「kintone2Zoom」プラグインで実装されている「index.js」「zoomApi.js」で行われています。
詳細は下記をご確認ください。
index.js
zoomApi.js
注意事項
- 本カスタマイズについて、プラグインファイル（zipファイル）の公開予定はありません。
プラグインとして利用してみたい方は、サンプルコード を確認しパッケージングを行ってください。 - 本カスタマイズは、Zoomの無料版を対象としています。
おわりに
今回の記事は、Zoom API を使った Zoom と kintone の連携カスタマイズを紹介しました。
Zoom が提供している「Zoom Web SDK」を利用することで、
Zoomミーティングの画面を直接 kintone アプリに表示させるなどの機能も実現できるので、興味ある方はぜひ試してみてください。
他にも、kintone から音声通話を実現する「Twilioを使ってkintoneから直接電話をかけてみよう」などの記事も、
cybozu developer network で紹介していますので、気になる方はぜひ確認してみてください。
この記事で利用しているライブラリ
- webpack v4.29.3, ドキュメント（外部サイト）
- babel v7.2.2, ドキュメント（外部サイト）
- kintone UI Component v0.7.4, ドキュメント（外部サイト）
本Tipsは、2020年11月版 kintoneで確認したものになります。
この記事に記載されている「会議日程管理アプリ」はどこで入手可能でしょうか？kintone アプリストアで見つかりませんでしたので・・・・。
2020/12/23追記：
アプリは自分で作成するんですね。無事、Zoom連携できました。（ゲストスペースです）
Hiroki Sano 様
お世話になっております。cybozu developer network 運営でございます。
返事が遅くなりまして大変申し訳ございませんもうでした。
無事に解決できてよかったです。
引き続きよろしくお願いいたします。
githubのテンプレートで各自のカスタマイズが必要な個所はどちらになりますでしょうか。
katsuya 様
お世話になっております。 cybozu developer network 事務局です。
kintone 側の処理は「index.js」に、Zoom の API を用いた処理は「zoomApi.js」に記載されておりますのでご確認ください。
また、本コメント欄は、記事へのフィードバックを目的としておりますので、
具体的なカスタマイズ方法や技術的な質問につきましては、cybozu developer コミュニティをご活用ください。
よろしくお願いいたします。
素晴らしい記事ありがとうございます。
この記事の通りにやってみました。
zoomのミーティングURL、ミーティングIDはアプリに入りますが、どうしてもパスワードがアプリに入りません。
Zoom側を見るとパスワードがないミーティングが生成されていました。
ということは、ミーティング生成時のオプションにパスワード生成するオプションを入れなければならない、ということでしょうか（推察するに、index.jsの28行目から34行目の中にパスワードを設定するオプションを入れれば解決するような気もします）。
初心者ですみません。もしおわかりになれば…。
廣野光夫 様
お世話になっております。 cybozu developer network 事務局です。
「会議パスワード」フィールドは、Zoomのアカウント設定でミーティング登録時のパスワード生成がオンの状態を想定しています。Zoomアカウントの設定をご確認ください。
また、本コメント欄は、記事へのフィードバックを目的としておりますので、
具体的なカスタマイズ方法や技術的な質問につきましては、cybozu developer コミュニティをご活用ください。
よろしくお願いいたします。
「JWTアプリの作成」ですが、
「Zoom App Marketplace ページにアクセスし、
右上にある「Develop」プルダウンから「Build App」を選択します。」とありますが、ページがリニュアルされているようで、「Build App」というプルダウンの項目がなくなっていました。サイト内検索から検索してもページが見つからず。
最新の情報ありましたら、教えていただけると幸いです。
t.coo 様
お世話になっております。 cybozu developer network 事務局です。
JWTアプリを作成するために、デベロッパー向けの権限が付与された Zoom アカウントが必要になります。
そのため、お手数ですが、ご利用の Zoom アカウントの権限をご確認いただけますでしょうか。
▼参照情報
https://marketplace.zoom.us/docs/sdk/native-sdks/developer-accounts/#developer-roles
cybozu developer network 事務局さま
ありがとうございます。
デベロッパー向けの権限はないアカウントでした。
参照サイトは英語でしたので翻訳して確認しましたが、デベロッパー向けの権限を付与する方法がわからないため、遺憾ながら今回は断念いたします。情報提供ありがとうございました。