ノーコード ラボ

NoCode 関連のツールの紹介、使い方などをやさしく説明します。質問やご指摘大歓迎です。わからないことがあったら、コメントや Twitter などで聞いてください!

Zoomプラグインを使ってみよう!

f:id:toka-xel:20211201155902p:plain

みなさん、こんにちは!今回は、アプリケーションから直接zoomの会議を作成できる「Zoom Meetings」の使い方を紹介したいと思います。

Zoom Meetings

Bubbleで作成したアプリケーションから直接会議を作成する事ができるプラグインです。

プラグインページ

プラグインページは以下になります。

bubble.io

使い方

ここからはプラグインの使い方について、紹介していきます。

プラグインのインストール

まずは、Pluginsタブで「Zoom Meetings」を検索し、インストールしましょう。f:id:ryuto6112:20211127090725p:plain

アプリの登録

次に、アプリの登録を行いましょう。以下のURLにアクセスして「Dvelop」から「Build App」をクリックします。(Developper登録がまだな方は、先にDevelopper登録を行いましょう) https://marketplace.zoom.us/ f:id:ryuto6112:20211127110031p:plain

作成するアプリの種類の中から「JWT」を選択します。

f:id:ryuto6112:20211127110419p:plain

各項目を設定し、アプリを作成。

f:id:ryuto6112:20211127111206p:plain

アプリを作成すると、API KeyとAPI Secretが取得できます。

f:id:ryuto6112:20211127112136p:plain

プラグインページに、API keyとAPI Secretを入力

先ほど取得したAPI keyとAPI Secretをそれぞれ入力してください。 f:id:ryuto6112:20211127112357p:plain

各エレメントを配置する

Custom stateの設定

今回はZoomプラグインで作成した会議のURLをこのページのCustom stateに設定するようにします。 zoomUrlという名前のCustom stateを設定しました。 f:id:ryuto6112:20211127092454p:plain

Zoom会議作成ボタンを配置

エレメントツリーからボタンを選択し、エディターに配置してください。 f:id:ryuto6112:20211127093352p:plain

Zoom会議URLを表示させるlinkを配置

ここでは、Custom stateに設定したzoomURLを表示させるようにします。 この際に、Link distinationをExternal URLに変更する事を忘れずに。 f:id:ryuto6112:20211127093930p:plain

ワークフローの設定

では、ワークフローを見ていきましょう。

Zoom会議の作成

Zoom会議作成ボタンを押した際に、click here add actionでplugins からzoom - create Meetingを選択しましょう。 f:id:ryuto6112:20211127094748p:plain create Meetingでは以下の設定が可能です。 それぞれ設定してください。

  • Type:Instant(即時型のミーティング)or Scheduled(スケージュール型のミーティング)

  • Topic:ミーティングのタイトル

  • Start Time:ミーティングの開始時間

  • Timezone:タイムゾーン

  • Duration:ミーティング時間 f:id:ryuto6112:20211127100108p:plain

Set state

Step1で作成したZoom会議URLを、Set stateでCutom stateに設定しましょう。 f:id:ryuto6112:20211127100509p:plain

プレビューで確認してみよう

ボタンを押すと、Zoom会議のリンクが表示されました! f:id:ryuto6112:20211127101511p:plain

終わりに

Zoom Meetingsの使い方は以上になります。

カレンダーなどと連携させれば、日程調整アプリのようなものも作れそうですね。

ここまで読んでいただき、ありがとうございました。