どうもジャンボです。レアジョブではあだ名の宣伝に失敗して羽田さんと呼ばれることが多いです。よろしくお願いします。今は技術本部の副部長や、デザインチームのリーダーをしています。体験開発の責任者です。 この記事では我々の提供しているレッスンルームについて書きたいと思います。
レッスンルームとは
弊社はずっとスカイプ英会話と呼ばれて来ましたが、EdTechのリーディングカンパニーになるべく、自社システムであるレッスンルームへの移行を進めています。これまでチューニングできなかったレッスン中のUXをゴリゴリに改善すべくバリバリに開発を進めています。
レッスンルームを支える技術
一言にレッスンと言っても、ただ会話をするだけではありません。最適なレッスン体験を安定して提供・改善するために私たちは様々な技術セットを選んでいます。Webだけではなく、アプリからのレッスンを可能にするためにネイティブアプリの開発にも力を入れています。 Webでは一般的なSPA構成で使われるVue/Typescript/Webpackを中心に、コアとなるWebRTCにおいてはNTT Communicationsが提供しているSkyWayを使うことで安定したインフラを最小限のコストで利用できています。
この辺については話したいトピックが2億個以上あるのですが、今回は血泪を流してWebRTCについて書きます。
WebRTC
WebRTC（Web Real-Time Communication）はブラウザでリアルタイム通信を行う仕組みです。ブラウザで電話をする仕組みではないです。データのやり取りの一環として音声や映像があるだけで、規格として電話のような動作を保証するものではありません。 なるべく簡単な図を用意しました。
こちらをご覧ください。
・・・
お分りいただけたでしょうか。そう、思い出してください。ブラウザで電話をする仕組みではないのですよ、内部的には非常に複雑なことをしています。そこまで簡単になりません。しかしこれでもSkyWayの導入により非常にシンプルになっているのですが、それでも我々の悩みはつきません・・・なぜでしょうか？
WebRTCの悩み
WebRTCを扱うエンジニアが直面する問題がいくつかあります。それについて説明していきます。
1. 総合格闘技である
一発目からパンチがあるのですが、WebRTCはフロントエンド技術の皮を被ったフルスタック技術なので非常に網羅性の高いエンジニアリングスキルが求められます。ちょっと思いつくだけでも
- ネットワーク
- ICEやシグナリング等の基本的なWebRTCの仕様
- セキュリティ
- モダンフロントエンド
- ブラウザの持つAPIやその差分
- デバイスアクセスとそのコントロール
- デバイスへのパーミッション管理もろもろ
- リアルタイム通信という状態の多いシステムの状態管理を実現可能なフロントエンドアーキテクチャ
- リアルタイム通信という状態の多いシステムのUX
- リアルタイム通信という状態の多いシステムのエラーハンドリング
- 複雑な通信経路内のボトルネックを発見する能力
- etc...
という感じで、安定したオンラインリアルタイムレッスンの提供するためには非常に広い範囲のスキルが必要となります。 幸いなことに我々はSkyWayの導入によって、いくつかの問題、特に「ICEやシグナリング等の基本的なWebRTCの仕様」「セキュリティ」のような問題は解決ができています。どれか一つがダメでもその瞬間「繋がらない・動かない」と言われてしまうため、ユーザーにとっての馴染みがありシンプルな体験である「通話」というのを0からシステムデザインすることがいかに難しいかを物語っています。
2. 通話へのハードル
インターネットと違い、我々が長く使い続けて来て骨身まで安定していることが沁みている電話回線というプロダクトにより人類は「繋がって当たり前」という印象を持っています。一方でWebRTCはまだ枯れておらず、いまだにアップデートが多くありまだ改善の余地のある仕組みなため、当然我々の実装や環境に依存して繋がらないという状況が生まれます。
なんで？と言われると一言で表すのは難しいんですが、コールをするためにも様々なるプロセスがあり、そのどのプロセスもボトルネックたりうるからです。
実際の手順等はこちらに。 qiita.com
この問題を理解・分解することが非常に求められ、かつそれを適切な人、それはエンジニアなのかユーザーさんなのか、伝えていく必要があります。またSkypeやLineのように無料で高品質な通話を当たり前にしてきた世代にとって、有料サービスなのに繋がらないなんてどういうこっちゃという感情は当たり前なので、このハードルを乗り越えていく必要があります。
3. 環境依存
一言に「繋がらない」という問題に対して「お客様環境」というものが何パターンあるか考えたことはあるでしょうか？
問題に対してお客様環境がどんな状態か、これの問題がどこにあるか、そしてそれは解決・発見できる状況かというのが運用上すぐ直面する課題だと思います。多くの企業ではこれらの全てをサポートするのは難しいでしょう、またサポートするにも多くのリソースが必要となることが容易に想像できます。
またサーバを介さない通信のため、行動のログの解析も容易ではありません。またこの状況の複雑性は技術やブラウザの進歩により日々加速度的に増えていっています。
そんな容易でないWebRTCを使ったプロダクト開発ですが、こういった問題にどのように我々が向き合っているのか、ほんの一部だけ紹介します。
WebRTCとの戦い
1. 「総合格闘技」には正攻法では挑まない
真正面からこれらの問題とは戦えません。少人数のチームで毎月何十万のレッスンを提供するシステムを支えるためには、工夫と適切な技術選定が必要になります。SkyWayやVue.jsなど、エンタープライズ・オープン技術を組み合わせて少人数でも運用可能なレッスン基盤の構築を目指しています。
正直まだまだやれることは全然ありますし、マニュアルな運用しているところも非常に多いです。それでも運用当初よりレッスンルームを使ったレッスン提供数も格段に増え、これを支える開発・運用は日本とフィリピンで連携して進めています。
めちゃくちゃカメラ目線のalbert氏は去年1年近く日本に出向してくれて、一緒にレッスンルームの開発をしていました。日本とフィリピンを横断したシステム開発とQAで複雑度の高いシステムを改善しています。
2. 「通話へのハードル」に向き合うUX
Webとモバイル、それぞれのデバイスでUIを大きく変えています。 それはインタビューや行動のログから見えて来たそれぞれの期待される体験が大きく違うことや、それぞれの持つ環境特有の問題を解決することを目標としています。
その中には多くのリトライや、エラーハンドリングの仕組みが混在されておりWebではVue/async-await、アプリではRx系のライブラリをふんだんに使うことで複雑度の高いアプリケーションを実装しています。
また入室前に実際にレッスンルームを体験できるレッスンルーム デモページも提供しており、 これにより初めてレッスンを受ける人でも安心してレッスンが受けられる取り組みを入れています。
またこのハードルを越えるために社内外多くの人に支えられていて、SkyWayの技術チームとは共同でイベントをしたり技術交流がありギークな面々と仕事ができて楽しいです。
3. 「環境依存」と向き合うチーム開発
我々のメインコンテンツであるレッスンを支えるシステムはもはやサービスのインフラといっても過言じゃありません。これを支えるためには営業数値への貢献も必要ですが、適切に定量化された数値をベースに改善をする必要があります。当たり前のことですが、まずは「あたりまえ」クオリティを満たすために必要なKPIの選定は慎重にしています。
我々はここ1年ほど、安定性を支えるKPIをチームで持ち、ビジネス・フィリピンチーム含めた皆で改善に当たっています。 接続率や、入室率、結果としてのレッスン提供数など様々なKPIをエンジニア含め皆で改善しています。
内製しているロギングの仕組みの結果をredashで可視化し、redash apiでbot経由で毎日のモニタリングや問題の早期発見をしています。 このデータにアクセスできるようになったことで、レッスンの本当の実態が見えて来ています。
これにより、デバイス別・ユーザー別・講師別・プラン別などなど、様々な切り口からの問題特定をする、または気づける環境を作っています。より多くのデータを活用して、いかに安定していい価値を届けられるかが我々のお仕事です。
なぜこんながんばるのか
開発をしていて「いやもう正直、めっちゃわからん！」ということもあるのですが、日々の改善により問題の本質や数字が改善されていくことはエンジニア冥利につきます。難易度も複雑度も高く、解決することがビジネスや自身のキャリアへインパクトがあると感じています。
また本当にユーザーさんが日々25分もレッスンを実際にするサイトなので、フィードバックや効果は毎日のように来ます。 ゲーム以外で1日に25分も同じURLのサイトを見続けることってありますか？あまりないと思うんですよ、そうなると人はいろいろなことに気づいたり、感情が生まれたり、そうしたものが届きます。これは講師も然りです。
もちろん全てがいいフィードバックではないですが、数字を見ても反応を見ても確実に日々進歩していると感じています。これまでは科学できなかったレッスンの中身を知り、様々なる技術を総出でガシガシに改善するのは非常に面白いです！
是非一緒に働きry)という前に是非一回使って欲しいです。
無料体験を是非レッスンルームで受けてください！よろしくお願いします。
