Twilio Video Reactアプリケーションで短時間でチャット対応ビデオアプリを開発する

読む所要時間: 1分未満

March 31, 2021
執筆者
Sean Coleman
Twilion
Stephenie Minami Nakajima
Twilion
レビュー担当者
Hiroto Masaki
Twilion

Twilio Video Reactアプリケーションで短時間でチャット対応ビデオアプリを開発する

This article is for reference only. We're not onboarding new customers to Programmable Video. Existing customers can continue to use the product until December 5, 2024.


We recommend migrating your application to the API provided by our preferred video partner, Zoom. We've prepared this migration guide to assist you in minimizing any service disruption.

この記事はProgrammable VideoチームのプロジェクトマネージャーのSean Colemanがこちらで公開した記事（英語）を日本語化したものです。

Twilioは昨年、開発者がProgrammable Videoをわずか5分以内に立ち上げ、動作させることのできるTwilio Video Reactアプリケーションをリリースしました。そしてこのたび、このReactアプリケーションにチャット機能を新たに追加しました。この機能では、通常のチャットとファイルの送受信ができます。

このオープンソースのReactJSアプリケーションは、開発の足掛かりとして利用するにも、信頼できるソースとして参照するにも役立ちます。加えて、今回の機能追加により、ビデオアプリケーションへのチャット機能の追加を短時間で行えるようになりました。

この投稿では、エンドユーザーがビデオアプリケーションを利用するにあたり、チャットが重要なコミュニケーションチャネルである理由、新機能の概要、新機能の実装に使用されている仕組み（Conversations API）について説明します。

ビデオアプリケーションにチャットを追加する理由

ビデオアプリケーションでは、ユーザーが不明点をメッセージで質問する、過去の話題について後で質問する、関連リンクを共有するなど、話し手を邪魔することなくコミュニケーションをとりたいときにチャットが役に立ちます。

さらに、チャットを活用して以下のようなメリットを実現するビデオソリューションも増えてきています。

  • インクルーシビティの推進: 参加者がより快適にコミュニケーションできる選択肢を提供
  • 参加の促進: たわいのない会話で和やかな雰囲気を作る、質疑応答を行うなどによる対話の促進
  • 生産性向上: ユーザーのニーズに最適なメッセージング機能を構築

使用例や業種にかかわらず、カスタム化したチャットをビデオアプリケーションに追加することにより、ユーザーに価値の高いコミュニケーションチャネルを提供できます。

Twilio Video Reactアプリケーションの概要

Twilio Video Reactアプリケーションは、コラボレーション推進を念頭に置いて開発されています。今回の新しいチャット機能もこの目的に沿うものです。アップデートされたTwilio Video Reactアプリケーションをデプロイすると、メニューバーにチャットボタンが表示されます。エンドユーザーは、このボタンを使用し、テキストメッセージや添付ファイルをすべての参加者に送信できます。

Videoチャットアプリデモ

通話中はチャットのやり取りが消えずに残ります。遅れて通話に参加したのでそれまでの内容を理解したい、通話が切れた、一時的に離脱して後から戻るといった場合でも、チャットの履歴を参照できます。

チャットウィンドウも含め、Twilio Video ReactアプリケーションのコンポーネントではMaterialUIライブラリが利用されています。このため、ユーザーに合わせてスタイル、テーマ、UIを簡単にカスタマイズできます。

TwilioのConversations APIを使って開発された機能

新しいチャット機能は、Conversations APIを使用して構築されています。Conversations APIは、チャットやクロスチャネルメッセージングを可能とするTwilioの次世代メッセージングAPIです。すべてのエンドユーザーが通話中にチャットの履歴を参照できるよう実装されていますが、Conversations APIを使用すると、柔軟に参加者を管理し、メッセージ履歴を取得できます。

このサンプルアプリは、Conversations APIで実現できる基礎的な機能のみを備えています。ReactJSアプリの機能を拡張し、次のようなユースケースを実現できます。

  • 顧客ライフサイクルの任意の時点で会話を開始し、その内容をビデオ通話に引き継ぐ
  • 必要なときにチャット履歴にアクセスして分析を行う
  • SMS、MMS、WhatsAppをサポートするマルチチャネルのチャット機能を構築する

Conversations APIの利用には標準価格が適用されます。ただし、最大200名までの月間アクティブユーザーは無料でご利用になれます。価格の詳細については「Twilio Conversationsの料金」を参照してください。

今すぐ試してみましょう

新しいチャット機能を実際に試してみましょう。テキストメッセージ、リンク、関連するファイルをわずか数分で共有できます。Twilio Video ReactアプリケーションはTwilio CLI RTCプラグインを利用しています。このプラグインは最近更新され、ルーム参加時に会話に接続するために必要なサーバー側のロジックが追加されました。READMEの手順に従うか、以下の7つの手順でアプリケーションをデプロイすると、Twilio Video Reactアプリケーションを使用できます。

# Clone the web application
$ git clone https://github.com/twilio/twilio-video-app-react

# Change directories
$ cd twilio-video-app-react

# Build the application
$ npm install --production

# Install the Twilio CLI
$ npm install twilio-cli -g

# Login to your Twilio account using your Account SID and Auth Token
$ twilio login

# Install the RTC plugin
$ twilio plugins:install @twilio-labs/plugin-rtc

# Deploy!
$ npm run deploy:twilio-cli
deploying app... done Web App URL: https://video-app-1111-dev.twil.io?passcode=1111111111 Passcode: 1111111111

これで完了です。テキストとファイルによるチャット機能をサポートした、自分だけのビデオコラボレーションアプリを実行できました。このアプリは、Twilio Programmable Videoを使用した開発を進めるにあたり、信頼できるソースとして参照する、あるいは開発を進める足掛かりとして利用するなどの用途に役立つよう設計されています。このアプリについてのご質問、または改善すべき点についてのご意見は、Twilio Video Reactアプリケーションのイシューページよりお気軽にお寄せください。

Sean Colemanは、Programmable Videoチームのプロダクトマネージャーとして開発者体験の向上に注力しています。Twilio入社前は、低高度空域管理ソリューションの開発に携わり、安全で効率的な大規模ドローン運用に貢献しました。Colemanの連絡先は、scoleman［at］twilio.comです。

関連投稿

関連リソース

A newspaper article

Twilio Docs

APIからSDK、サンプルアプリまで

言語とプラットフォームの API リファレンス ドキュメント、SDK、ヘルパー ライブラリ、クイックスタート、チュートリアル。
An Open book

リソース・センター

最新の電子ブック、業界レポート、ウェビナー

顧客エンゲージメントの専門家から学び、自社のコミュニケーションを改善しましょう。
User group reactions

Ahoy

Twilio の開発者コミュニティ ハブ

コミュニケーションとデジタル エンゲージメント エクスペリエンスを構築するためのベスト プラクティス、コード サンプル、インスピレーション。