Honai's Blog

OPENREC Webフロントチームでのインターン - CA Tech JOB 参加記

2019/09/06

こんにちは。ほないです。 京都はまだ暑いですが、9 月になりましたね。通った高校では 9 月初めに運動会があります。もうそんな季節かぁとぼやいています。

先月、大学の夏休みを利用して、株式会社 CyberZ の OPENREC.tv というサービスの開発チームでインターンをしてきました。サイバーエージェントの就業型インターン「CA Tech JOB」で、職種としては Web フロントエンジニアです。この記事では、インターンで取り組んだことやインターン全体の回想をまとめています。

OPENREC とは

OPENREC.tv は、ゲーム実況・プレイ動画やライブ配信が楽しめる、動画コミュニティプラットフォームです。

openrec トップ画面

個人の配信だけでなく、オフィシャルチャンネルでのイベントや e-Sports 大会の配信、プロゲーマーやタレントによる番組など、様々なコンテンツを楽しむことができます 📺 🎮

取り組んだこと - チャットの再現機能

3 週間で主に 2 つのタスクに取り組んだのですが、このブログでは前半 2 週間で取り組んだチャット機能の改善について紹介します。

その前に使われている技術ですが、OPENREC の視聴画面の Web フロントは TypeScript / React / Mobx が使われており、ストリーミングに HLS、チャットなどに WebSocket が使われています。

実装前の仕様

ライブ配信にはチャット機能があり、視聴者が投稿したコメントやスタンプが流れていくのですが、ライブ配信中に時間を遡って途中から再生する「追いかけ再生」をすると、チャットは非表示になっていました。

機能実装前のアプリ画面キャプチャ

実装後

これを、追いかけ再生に合わせて、チャットが再現されるようにしました。

機能実装後のアプリ画面キャプチャ

チャット欄下部のボタンで、追いかけ再生に合わせたチャットと、リアルタイムのチャットの表示を切り替えることができます。

OPENREC の公式 Twitter でも紹介されてます 🎉

技術的には、

  • チャットの取得方法として GET メソッドと WebSocket を併用する部分
  • 時間処理を駆使して動画のステートとチャットのステートを同期させながらチャットを表示させる部分

が難しくもあり考えるのが楽しい部分でした。

回想 - 選考編

CA Tech JOB | 株式会社サイバーエージェント

3 月に同じく CA の短期インターンに参加していた こともあり、書類・人事面接は問題なくパスすることができました。事業部単位 (メディア/ネット広告/ゲームなど) で希望を提出できるのですが、自分はメディアを第 1 希望にしました。

人事面接では、提出した書類の内容や 3 月のインターンについて話しました。 「Web フロントではあるが、動画配信の技術も学びたい」と話したところ、OPENREC を紹介していただきました。

人事面接の次には OPENREC のエンジニアとの面接がありました。 面接官は 2 人で、開発のマネージャーと、Web フロントチームのリーダーでした。面接でしたやりとりは、

  • 何をやりたいかの確認
  • 実際に OPENREC の開発で (自分がやりたいことに対して) 今こんなタスクがある、という紹介
  • 「こういうタスクをすれば動画配信について学べる」というアドバイス

などです。

その後、人事の方から受け入れ決定の連絡が来て、インターンへの参加が確定しました。

回想 - 業務編

平日の 10 時-19 時で昼休憩が 1 時間。シェアハウスから渋谷マークシティのオフィスまではドアドアで 20 分くらいです(Abema Towers だと 5-10 分です)。待遇は時給 1,500 円で、打刻に基づいて残業代も出ます。

コード読む、質問する (1 週目)

最初の 3 日はコードやドキュメントを読んで、メンターに質問しながら、開発環境、担当する部分に関する仕様・実装、バックエンド API の仕様について学ぶことに徹しました。3 日目の夕方くらいから少しずつコードを書きましたが、現在の実装を確認しながらで、最初の PR が出せたのは 5 日目(入社 1 週間)でした。

PR, デバッグ, 修正 (2 週目)

2 週目は、PR を出してデバッグし、見つかったバグを修正しながらリリースに向けて機能を仕上げていきました。

リリース, バグ対応

入社から 2 週間たった日、ついにリリースが行われました!自分が実装した機能が世に出るのはやはりうれしい!

しかし、リリース後に自分の担当箇所でバグが見つかり、その対応も行いました。社員さんがすぐに原因を突き止めてくださり、修正 PR を出すことができました。 自分が原因でバグがあるままリリースしてしまったことはショックでしたが、メンターの社員さんと対応を振り返る中で得られた学びも多く、 (結果としてではありますが) 良い経験になったと思っています。

2 つ目のタスク (3 週目)

詳しく書きませんが、のこり 1 週間でもう 1 つの課題に取り組みました。

成果発表 LT 会

3 週目には、就業中のインターン生・内定者(内定者バイト)による成果発表会がありました。 サイバーエージェント全体でのインターン/内定者の発表で、思ったより人数が多く(90 人くらい集まった)、少し緊張しました。AbemaTV やアドテクなど、様々な部門・分野で、技術的な話や成果、業務外のエピソードなどを聴くことができました。みんなプレゼンが上手でした。

LT発表中の写真

↑ 緊張しながらしゃべっている自分です。

回想 - 業務以外編

シェアハウスきれい (入社前日)

新幹線で品川に到着し、山手線で渋谷へ。Abema Towers で宿泊する部屋の鍵を受け取ったあと、宿泊場所であるシェアハウスに向かいました。寝室は個室になっていて、共用の部屋もきれいで 3 週間安心して過ごせました。

風船かわいい (入社日)

入社日には、Abema Towers で入社の説明会やオフィス見学をしたあと、WELCOME バルーンをいただいて (下記ツイート参照)、CyberZ のオフィスが入っている渋谷マークシティに移動し CyberZ のオフィスも見学しました。 その後、開発チームで自己紹介をし、メンターの社員さん(2 名)と、3 週間の方針を固めるため面談をしました。

ランチ

メンターの社員さんや新卒の先輩、人事の方がほぼ毎日ランチをセッティングしてくださり、おいしいランチをいただくことができました。

またランチではないですが、ちょうど CyberZ の納会が期間中にあり、お酒を飲みながら社員の方々とお話することもできました。

FreshersLT

OPENREC 開発チームの先輩からのお誘いで、様々な IT 企業の新卒の方が集まり主に新卒研修で学んだことを共有する会に参加しました。どの LT も興味深かったですし、懇親会で他社の Web フロントエンジニアの方とおしゃべりが盛り上がって楽しかった!

FreshersLT - connpass

休日

3 連休もあり、休日には友人や先輩とランチを食べたりライブに行ったり、横浜にいったり東京タワーに登ったり、遊ぶ予定がない日にはいっぱい寝たりと、満喫することができました。

まとめ

3 週間はほんとうにあっという間で、個人開発では学べない Web フロントの実践的な知識と経験を得ることができました。なにより、実装した機能をリリースできたのは今後の自信やモチベーションになると思います。

OPENREC 開発チームの皆さん、サポートしてくださった人事の皆さん、そしてメンターとして 3 週間ご指導してくださったメンターの社員さんおふたりに心から感謝しています。ありがとうございました!

サイバーエージェントエントランス