@shiba6v です.1/13(土)に,NTT コミュニケーションズ株式会社に協賛を頂いて,「WebRTCでビデオチャットアプリを作ってみよう!」というイベントを開催しました. このイベントは,SkyWayを使ってビデオチャットアプリを作成しようというイベントです.
ビデオチャットアプリ作成ハンズオン
最初に,ビデオチャットアプリを作成するために,GitHubからチュートリアルのリポジトリをCloneするところから始めます.
参加者は手を動かしながらサンプルコードを動かしました. 最初のたった14行のJavaScriptから,5つのステップを踏んで多人数ビデオチャットアプリを作りました. ビデオチャットを実現するにあたって難しい部分はSkyWayがやってくれて,APIを叩くだけでビデオチャットが実現できるため,アプリの開発者がアプリ本体の制作に集中できるとのことです.
P2P接続の開始や終了などに関するSDKの説明を聞きながら手を動かして実装していきました.
SkyWayでのビデオチャットは基本的にP2P通信で行いますが,人数が増えていくとそれに応じて1対1の回線の数が非常に多くなってしまいます.こういった場合は,サーバーを用いる「SFU」というモードに変更して回線の数を減らすという工夫ができるそうです.こういったSkyWayの機能の説明を受けつつ,ビデオチャットに必要な機能を実装していきます.
最終的に,NTT コミュニケーションズの社員の方のサポートのもと,ビデオチャットアプリを完成させることができました.
何かを作ってみるためのUXデザイン入門
ハンズオンでビデオチャットアプリが作れるようになったところで,次は自分が作りたいものを作っていくための準備としてUXデザイン入門のトークがありました.
内容はUXに関連する説明で,これから作るビデオチャットアプリの価値をUXの視点からコーディング前に整理しようという話でした. 具体的には,UXデザインはUIデザインよりもっと広く,戦略まで含めてユーザー中心にフォーカスするためのものだという話がありました. その後,バリューシナリオ,アクティビティシナリオ,インタラクションシナリオという3つのことを大事にするといった話に沿って,ビデオチャットアプリの価値を紙に書き出しました.
学んだ内容を使ったアプリ開発タイム
最後に,UIデザイン入門のトークを通じて参加者それぞれが考えたアプリを開発していきました. ビデオチャット部分はハンズオンで作成したコードを利用し,ビデオチャットを生かしたアプリを開発していきました.
この他にも,開発タイムにNTT コミュニケーションズの社員の方とWebRTCの詳細な技術の話で盛り上がっている姿が見られ,非常に有意義な時間になっていたと思います.
開発タイム終了後には,一部の人が作ったアプリを発表する時間となり,ゲームの時に使えるビデオチャットWebアプリの発表などがありました. このブログの執筆者 @shiba6v も,Twitterで使えるWebアプリ TwCall を発表しました.
懇親会
イベントの最後に,NTTコミュニケーションズ様のご厚意で懇親会を開催しました.
お酒とお寿司を囲みながらお話して,とても盛り上がりました.
最後に
今まで,ビデオチャットを利用したアプリを作ってみるのはハードルが高いと思っていましたが,今回のイベントでSkyWayが使えるようになり,Webアプリの発想の幅が広がりました.非常に密度が濃く楽しいイベントでした!