作業時間はたった約1時間！音声通話アプリをAgoraで作ってみた

音声通話アプリの実装

　npm（Node.jsのパッケージ管理ツール）を使用するので、Node.jpの環境がない場合はNode.jp公式サイトからインストールしてください。

　Agora公式のクイックスタートに従うと、「Vite」というビルドツールを使用します。ターミナルを開いて、以下のコマンドを実行します。

$ npm create vite@latest agora_project --template vanilla

　すると、以下のような選択肢が表示されますが、いずれもデフォルトのものを選択します。

? Select a framework: › - Use arrow-keys. Return to submit. ❯ Vanilla Vue React Preact Lit Svelte

? Select a variant: › - Use arrow-keys. Return to submit. ❯ JavaScript TypeScript

　以下のよう表示がされ、ディレクトリ内に「agora_project」というファイルが作成されていることを確認します。

Scaffolding project in /Users/XXXXXXXX/XXXXXXXX/agora_project...

　その後、「agora_project」内に移動し、以下のコマンドを実行します。

$ npm install

　続いて、以下のコマンドでVoice SDKをダウンロードして、インストールします。

$ npm i agora-rtc-sdk-ng

　次に、「agora_project」内にある「index.html」と「main.js」を該当ページにあるように書き換えます。

https://docs.agora.io/en/voice-calling/get-started/get-started-sdk/#implement-a-client-for-

　 「main.js」は以下の部分に、Agoraの設定時にメモをした「App ID」「Channel Name」「Temp Token」を追記します。

let options = { // Pass your App ID here. appId: 'XXXXXXX'XXXXX'XXXXX'XXXXX', // Set the channel name. channel: 'XXXXX'XXXXX'', // Pass your temp token here. token: 'XXXXX'XXXXX'XXXXX'XXXXX'XXXXX'XXXXX'', // Set the user ID. uid: 0, };

通話テスト

　まず、ngorkの公式サイトからアカウントを作成し、環境に合わせたバージョンをダウンロードして、「agora_project」内に解凍したファイル（ファイル名「ngrok.exe」）を移動させます。

　「Your Authtoken」に移動し、「Authtoken」をコピーします。

　ターミナルを開き、「agora_project」でローカルサーバーを立ち上げます。

$ npm run dev

　以下のように表示されることを確認し、URLをメモします。

VITE v3.1.4 ready in 86 ms ➜ Local: http://127.0.0.1:5173/ ➜ Network: use --host to expose

　次に別ウィンドウで、ターミナルを開き、「agora_project」のディレクトリに移動し、以下のコマンドでngrokを起動します。

$ ./ngrok http （ローカルサーバーのURL）

　以下のように表示されれば、無事起動完了です！

ngrok by @inconshreveable (Ctrl+C to quit) Session Status online Account takakuwaranka (Plan: Free) Version 2.3.40 Region United States (us) Web Interface http://127.0.0.1:4040 Forwarding http://180f-240d-1a-aa-b000-8518-539b-1912-a4dd.ngrok.io -> http://127.0.0.1:5173 Forwarding https://180f-240d-1a-aa-b000-8518-539b-1912-a4dd.ngrok.io -> http://127.0.0.1:5173 Connections ttl opn rt1 rt5 p50 p90 21 0 0.00 0.00 5.75 99.25

　「Forwarding」に記載されているURLにアクセスしてみます。「Join」を押すと、音声通話が始まります。

▼PC

▼スマホ

　どちらからもいい感じに声が聞こえることが確認できました！

まとめ

　今回はAgora公式のクイックスタートに従って作成したので、作業時間自体も1時間ほどで簡単な音声通話アプリを作れました。通話機能と言うと、漠然とめちゃくちゃ大規模な開発が必要なイメージがありますが、APIを使用することでこんなにも簡単に作成ができてしまうことがわかりました（もちろん自前で実装するとなると、すごく大変そう）。

　改めて自分で作成してみて、はやく「メンヘラせんぱい」にも通話機能を導入したいなという気持ちになりました！

高桑蘭佳（たかくわらんか）

　1994年生まれ。石川県出身。東京工業大学大学院環境社会理工学院研究生。2018年8月にメンヘラテクノロジーを設立。彼氏を束縛したくて起業した大学院生として「アウト×デラックス」（フジテレビ系列）や、「指原莉乃＆ブラマヨの恋するサイテー男総選挙」（AbemaTV）などに出演。