ノーコードAdalo（アダロ）で新しくビデオチャットコンポーネントが追加されました。
Adaloのマーケットプレイスからvideo chatで検索するとすぐ出てきます。
まだ公式にアナウンスされてなく、使い方もよくわからないのですが（汗）、
とりあえず手探りで使ってみたので紹介します。
シンプルなビデオチャットサンプルの完成形
こんな感じのシンプルなものを作ります。
左がビデオチャットのルーム一覧。真ん中がルーム作成画面。右がビデオチャット画面です。
左の黄色いプラスボタンを押すと真ん中のページに遷移して、ルームを作成します。
そして一覧に戻り、一覧からルームを選択するとビデオチャットができる、というシンプルなものを試します。
事前準備：「Daily.co」でアカウントを取得
まず、このビデオチャット機能を使うにはDaily.coというサービスに登録する必要があります。
https://daily.co/ に遷移し、join freeのボタンからアカウント登録します。
アカウント登録するとこんな感じです。
↑Developersのところに「APIキー」があるので、これをコピーしておきましょう。あとで使います。
ビデオチャットコンポーネント「Video Chat by Daily」をインストール
マーケットプレイスからVideo Chat by Dailyで検索し、インストールしておきます。
データベース作成
データベースはシンプルに、Chat Roomsというルームを保存する場所を作り、ルームのタイトルとURLを保存できるようにしましょう。
ルーム一覧画面
ルーム一覧はこんな感じ。
アクションボタンを押したらこのあと作る「create chat」ページに遷移するようにしましょう。
ビデオチャットのルーム作成画面
ルーム作成画面：Create Roomという画面を作ります。
ルームのタイトルを入力するための「input box」を配置します。
次に、ADD COMPONENTの下の方にあるINSTALLEDのところに、CREATE ROOM BUTTONというのが追加されているので、これをドラッグし以下のように配置します。
これがビデオチャットのルーム作成用のボタンになります。
このボタンの赤枠↑のところにAPIキーを設定しましょう。
また、以下のようにボタンのアクションでデータベースのchat roomコレクションを追加し、タイトルとURLを設定しましょう。
最後に、ホームへのLink↑も設定します。
ビデオチャット画面にVideo Chat by Dailyコンポーネントを配置
ビデオチャット画面を作成し、Video Chat by Dailyコンポーネントを配置します。
そして、ホームのルーム一覧のリストからこの画面へのLinkを設定しましょう。
「Vide Chat By Dailyコンポーネント」のRoom urlにCurrent Chat Room -> URLを設定します。
これで完了です！
アプリを動かし、チャットルームを作成し、チャットができるか試してみてください。
Adaloでビデオチャット機能作成についてのYoutube動画はこちら
Youtube動画でもAdaloのVideo Chat by Dailyについて解説しているので興味のある方はそちらもご覧ください。
アプリ・Webサービスの開発の無料相談はこちら
Adalo、bubble、STUDIOなどのノーコードを使うことで、リスクを抑えてスピーディにビジネスアイデアを形にすることができます。
弊社はスタートアップ・新規事業向けにコストを抑えた最速のアプリ・Webサービスの開発、さらにはサービス立ち上げのコンサルティングから提案を行なっております。
アプリ、Webサービス、LPなどの構築に興味のある方は、ぜひこちらからご気軽にご相談ください。