Zoom 連携アプリの作り方を学ぶ - ユニファ開発者ブログ

この記事はユニファ Advent Calendar 2022 の 12 日目の記事です。

adventar.org

こんにちは、rightgo09 です。今回は Zoom 連携アプリの作り方をまとめてみます。

Zoom 連携アプリとは

explore.zoom.us

Zoom では、Zoom クライアントからサードパーティ製のアプリを使用することができます。

Zoom クライアントからでなく、Web ブラウザからでも、アプリを選んで使用することができます。

※ 組織によって管理されている場合は、管理者による承認が必要となる場合があります。

ブラウザから選ぶ場合はこちら
https://marketplace.zoom.us/

Zoom 連携アプリを自作する

この Zoom の連携アプリは自作することができます。自作した連携アプリは、いろいろな制限がありつつも、マーケットに公開せず非公開の状態でも、実装して使用することが可能です。

自作 Zoom 連携アプリの簡単なまとめ

Zoom クライアントアプリの連携アプリが動作する部分は WebView が使われている
それゆえ連携アプリの開発は、Web サービスの開発とほぼ同じ
特に SPA と相性が良さそう

Developer Platform にログインする

Developer Platform | Zoom

作り方ドキュメント

https://marketplace.zoom.us/docs/zoom-apps/create-zoom-app/

開発者用ツールを有効化しておく

前述のとおり、連携アプリは WebView 上で動作するため、Web サービス開発ではおなじみの開発者用ツールを使用することができます。

デフォルトでは無効化されているので、有効化するためのコマンドを実行します（macOS の場合）。

$ defaults write ZoomChat webview.context.menu true

これによって、画面上で右クリック → 「要素の詳細を表示」から、開発者用ツールを呼び出すことができます。

README のとおり実行すればうまく動作するはずです。

※ ただし、実行には HTTPS の通信が必要なため、ngrok などのツールを挟んでおく必要があります。

自作 Zoom アプリの作成のページ

https://marketplace.zoom.us/develop/create

「Zoom Apps」の赤枠の「Create 」から自作アプリを作成できます。

API を試してみる

サンプルアプリの中で最も簡素な zoomapps-sample-js を改造して遊んでみます。

デバイスに付随しているカメラの一覧を取得してみます。使用する API は「listCameras」です。

※ API はいろいろな種類があり、「ミーティング中でのみ有効」や「主催者と共同主催者のみ有効」など、いろいろな条件が設定されているので、闇雲に実行はできないようになっているので注意してください（エラーになる）。

アプリの Features に listCamras を追加

自作連携アプリ内の、[Features] < [Zoom App SDK] < [+ Add APIs] から、「listCameras」にチェックを入れておきます。

コードに手を入れる

server/views/index.pug

extends layout

block content
    if isZoom
        div
            input#listCamerasBtn(type='button', value='List Cameras')
...

public/js/index.js

(async () => {
  // ...
  // await zoomSdk.config() の実行
  // ...

  const listCamerasBtn = document.getElementById("listCamerasBtn");
  listCamerasBtn.addEventListener("click", listCameras);
})();

async function listCameras() {
  console.log("Call listCameras()");
  try {
    const res = await zoomSdk.listCameras();
    console.log(res);
  } catch(e) {
    console.error(e);
  }
}

あとは適宜スタイルをつけておきます。

実行してみる

「listCameras」はミーティング時にのみ有効な情報を返してくれるので、一人でミーティングを立ち上げて、起動してみます。

起動時スクリーンショット — Zoom ミーティング時に自作アプリ起動して listCameras を呼ぶ

※ 実際には listCameras をコールするタイミングで許可ダイアログが出ます。

カメラ情報を取得できたので、この情報と setCameras を使って、Zoom で使うカメラを設定することができます。

まとめ

Zoom 連携アプリは思ったよりも簡単にできることがわかりました。とはいえ、Zoom というアプリ上で動かすアプリなので、一人で試せる範囲は広くないため、開発を進めるには色々な人たちの協力とひと頑張りが必要となります。頑張りましょう。

ユニファでは一緒に働いてくれる仲間を募集中です！

unifa-e.com