パソコンやスマートフォンなどを使ったビデオ通話技術の普及が進んでいます。リモートワークやオンライン教育など、様々な場面にて活用できます。今回はBubbleで、Dailyというサービスを用いてビデオ通話を実装する方法について解説します。本記事はこちらの動画を参照しています。実装内容をさらに詳しく学びたい方は、こちらの動画をご覧ください。完成イメージ「ルームを作成」ボタンを押すと、リンク先が生成されました。リンク先をコピーし、ブラウザのアドレスバーに入力すると、通話に参加できました。dailyアカウントを作成するdailyのAPIキーを取得するために、アカウントを作成します。https://www.daily.co/トップページより新規登録します。認証メールが届くので、リンクをクリックします。メール認証が完了し、初期設定が始まります。任意のサブドメインを設定し、次に進みます。今回テストは不要なので、スキップします。ダッシュボードへ移動します。サイドメニュー「Developers」へ行くと、APIキーがあります。コピーまたはメモしておいてください。プラグインをインストールするBubbleの操作に移ります。Chat」をインストールします。Keyの設定欄に、まずAPIキーを貼り付けます。」と入力してください。データベースを作成するルームのURLを保存する必要があるため、データベースを作成します。ページを作成し、デザインを作る2枚のページを作成していきます。今回は「daily_video_chat_top」とします。page...」より作成できます。Text、Button、Groupを配置し、さらにGroupの中にTextを配置します。contentに、先ほど作成したデータベースのTypeを設定します。続いて通話ページを作成します。トップページにてルームを作成後、こちらのページへアクセスします。今回は「daily_video_chat_room」とします。contentに先ほど作成したデータベースのTypeを設定します。エレメントは特に配置しません。Workflowとプロパティを設定する各ページのWorkflowを設定します。トップページ(daily_video_chat_top)です。ボタン押下時のWorkflowを設定します。roomルームを作成します。1000」と設定します。ルーム作成時刻のUNIXタイムスタンプを取得しています。thing...ルームのURLをデータベースへ保存します。url」を設定します。dataルームのリンク先を表示するために、Groupへデータを渡します。Video...)」を設定します。Step3で渡したデータを使って、通話ページへのリンク先を表示します。Designタブにて、Textエレメントのプロパティを開き、次のように設定します。「daily_video_chat_room」の箇所は、通話ページのページ名を設定します。続いて通話ページ(daily_video_chat_room)のWorkflowを設定します。ページ読み込み時に、ルームに参加します。url」を設定します。styleを選択します。今回はfullscreen(全画面)にします。トップページからプレビューし、「ルームを作成」ボタンを押してください。生成されたリンク先をコピーし、ブラウザのアドレスバーに入力すると通話に参加できます。