ノーコードツールAdalo（アダロ）でClubHouseっぽい音声通話機能を作ってみたいと思います。
今回は「Custom Action」で外部APIを使用するのではなく、Adaloのコンポーネントの「Web View」と「jam.systems」という外部サービスを使用して実装を作っていきます。
※「Custom Action」を使用することで、こんなこともできたりします。
「ノーコードAdaloでAPIと連携してみよう（郵便番号取得APIの例）」はこちらから
「【Adaloで外部APIと連携】Google翻訳っぽいアプリを作ってみよう」はこちらから
それでは早速、作っていきます！
▼ClubHouseっぽい音声通話機能を作ってみる
オーディオルームの一覧表示をさせるために「Simple List」を配置し、オーディオルームを作成するために「Action Button」を配置します。
「Audio Rooms」というデータベースコレクションを作ります。
「jam.systems」を使用する上で、「Room id」と「Topic Name」が必要になってくるので、それぞれをTextプロパティーとして作成します。
「Audio Rooms」の作成者も、Usersコレクションとリレーション設定を作ってプロパティーに追加します。
先ほど配置した「Simple List」を「Audio Rooms」のリストにします。
「Title」と「Subtitle」をそれぞれ設定します。
また、「Left Section」は必要ないので、オフにしておきます。
リストをクリックした際に遷移するスクリーンを作っていきます。
新しく作ったスクリーンに「Web View」を配置します。
以下のURLをコピーして、「Web View」のURLに貼り付けます。
https://jam.systems/<Audio Room Id>#name=<Audio Room Topic>
それぞれをマジックテキストで置き換えます。
「Action Button」から「Audio Rooms」を作るための実装を作っていきます。
「Audio Rooms」を作るためのフォームを配置します。
「Room id」は自動的に決められるようにしたいので、「Set Automatically」にし、「Custom Formula」で設定します。
RAND(X,Y)とは、X〜Yまでのランダムの数字を一つ持ってくるという関数になります。
0は含まないので、+１をしてあげます。
「Audio Rooms」作成後のLink設定も作成します。
▼Previewでテスト
Sigh up後、「Audio Rooms」がまだないので、新しく作っていきます。
「Audio Rooms」作成後、ClubHouseっぽい画面が出てきました。
この部屋に、別端末から入ることで端末同士での音声のやり取りをすることができるようになっています。
表示名を変えたりすることもできます。
スタンプを送信できたりもします。
こんな感じで会話ができました。
▼まとめ
今回は、AdaloでClubHouseっぽい音声通話機能を作ってみました。
このように、Adaloは外部ツールとの連携の幅が広いノーコードツールです。
様々な外部ツールや外部APIとの連携の知識を増やして、Adaloで実装可能な機能を増やしていきたいですね。
「ノーコードAdaloでZapierを使ってgoogle sheetと連携してみた」はこちらから
「Adaloで飲食店向けMAPアプリ（地図機能）を作ってみよう」はこちらから
今回の記事について、YouTube動画でも解説してあるので、より詳しく学びたい方はこちらもみてみてください。
https://www.youtube.com/watch?v=TmfC-SXe1Zw
最後までご覧いただき、ありがとうございました！