オープンソースのTwilioビデオ会議アプリにチャット機能が追加！非エンジニアでも簡単構築

こんにちは、Twilioマーケティング部の高橋です。

昨年Twilioがオープンソースにて公開した、Programmable VideoのSDKを活用したビデオ会議アプリケーション。「たったの5分でビデオアプリケーションを構築・実行できる」ということで非常に需要が高まっていますが、こちらにテキストや添付ファイルを送れるチャット機能が加わりました。

本記事では私のような非エンジニアのマーケターでも簡単にチャット機能を実装できるのか、こちらの記事を元に試してみたいと思います。

ビデオアプリにチャット機能を追加する理由

コロナウイルスの蔓延で在宅勤務を余儀なくされていることから、ビデオアプリを使って会議をしたり、コミュニケーションを取ったりする機会が増えました。その際、画面共有で同じ画面を見ながら話すこともありますが、チャットでURLや資料を送って情報交換をすることもあります。

たとえば私の場合は、複数人でのビデオ会議中に次の予定が来てしまった……といったケースでチャットを使っています。話をわざわざ遮って「次があるので抜けます」と宣言していくより、チャットで「次の予定がありますのでお先に失礼します」と伝えて抜けていく方が、印象的にも会議の進行的にもベストだと思って活用しています。

そのため、Twilio Programmable Videoにチャット機能が加わることで、よりUXに優れた満足度の高いビデオアプリケーションになると考えています。

React.jsで簡単に作るTwilioビデオアプリのチャット機能

Twilio Programmable Videoのチャット機能についてご紹介していきます。

今回アップデートされたReact.jsのアプリをデプロイすると、画面下のメニューバーに"Chat"が追加されています。

こちらを押していただくと、以下のように右側にチャット画面が表れ、テキストやファイルを添付できるようになります。

ちなみに添付ファイルはドラッグ＆ドロップではなく、赤枠の"添付ファイルのアイコン"を押した後にファイルを選択することで送信できます。

今回は私ひとりしかビデオに参加していませんが、複数人で参加した場合は参加者の画面が表れます。またビデオを繋いでいる間はチャットが保持されているため、途中から参加した人でもチャットの履歴を見ることができます。

さらにReact.jsのアプリコンポーネントは、MaterialUIライブラリを活用することで、デザインの設定やテーマの設定などカスタマイズを簡単に行えます。

Twilio Conversations APIでチャット機能を構築

それでは実際に、Twilio Conversations APIを利用してチャット機能を構築していきましょう！

Twilio Conversationsは、2022年7月25日にサービス提供の終了が予定されているTwilio Programmable Chatの後継となるAPI。WhatsAppやSMSなどのメッセージングアプリと連携して、シームレスな独自のチャット機能を作れます。

UI部分の開発のみで実現できるため、開発コストの大幅な削減が可能となるのが強みです。

Twilio Conversationsの詳細は、「Twilio Conversationsとは？チャットアプリのクイックスタートをご紹介」の記事をご覧ください。

Twilio CLIのRTCプラグインで簡単にデプロイ

本題の実装ですが、マーケターの私が本当にできるかワクワクと不安でいっぱいです。

まずTwilio Videoを簡単にデプロイするために、TwilioがあらかじめこちらのGitHubに用意しているCLI RTCプライグインを使用します。

今回は以下の手順でアプリケーションをデプロイしますが、こちらのREADMEの手順に沿っていただいても構いません。お好きなやり方でご活用ください。

1.GitHubからウェブアプリケーションをクローンする

まずはCLIで以下を入力して、GitHubからクローンしてください。

$ git clone https://github.com/twilio/twilio-video-app-react

2.ディレクトリーに移動する

$ cd twilio-video-app-react

3.npmコマンドでアプリケーションをビルド

以下のnpmコマンドを使ってインストールしてください。

$ npm install --production

npmコマンドを普段から使っているエンジニアの方であればスムーズにインストールできると思いますが、私が挑戦したときは「npm command not found」と表示されてしまいました。

そして時計を見ると、もうこの時点で5分を過ぎてしまっています……。

この困難を打破するために、私はマーケターが大好きなGoogle先生に尋ねて無事インストールできました。困ったときはやはりGoogle先生ですね。

4.Twilio CLIをインストール

アプリケーションはTwilio CLIを使用してTwilioにデプロイされるため、以下のコマンドでTwilio CLIをインストールしてください。

$ npm install twilio-cli -g

5.Twilioアカウントにログイン

Twilio CLIにログインするには、TwilioのAccount SIDとAuth Token（認証用のトークン）が必要となります。どちらもTwilioの管理画面（コンソール）のダッシュボードにありますので、そちらからコピーをしてください。

$ twilio login 

"Account SID"、"Auth Token"、"profile"の順番に打ち込んでください。profileはとりあえず"Main"などでOKです。

6.RTCプラグインをインストール

以下のコマンドでRTCプラグインをインストールしてください。無事インストールできたら最後のあと1歩！！

$ twilio plugins:install @twilio-labs/plugin-rtc 

7.ついにデプロイの時が

最後の７つ目の手順となるデプロイです。

$ npm run deploy:twilio-cli

"deploying app... done"と表示されればデプロイの完了です。

本当に手順に沿ってやっただけで、非エンジニアの私がチャット機能付きのビデオアプリを構築できました。Twilioの威力に開いた口が塞がりません・・・。

最後に、表示されているWeb App URLをお使いのブラウザに"コピー＆ペースト"してください。

Web App URL: https://video-app-〇〇〇〇-〇〇〇〇-dev.twil.io?passcode=〇〇〇〇〇〇〇〇

Twilio VideoのUI・UX

では実際のビデオアプリの画面を見てみましょう！

先ほど表示されていたWeb App URLを入力すると、以下の画面が表れます。ビデオ内で表示したい名前と部屋の名前を入力して"Continue"を押してください。

すると部屋に入る前に、音声や画面を設定できるようになります。自分の映り具合も確認できるため、急に部屋に入ってしまって変な顔を見られてしまった……といったこともありません。

準備が完了したら"Join Now"で部屋に入りましょう。

ビデオとチャットの画面は一度お見せした通りです。

画面共有は"Share Screen"ボタンから行えます。共有する部分を「全画面」「開いているアプリごと」「ブラウザに表示されているタブごと」から細かく選択できる、素晴らしいUXとなっています！！