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);
  }
}