【インターンシップ体験記】『スタディサプリ』の講義動画に字幕をHLSで配信できるようにしました

株式会社リクルートでインターンシップをしていました会津大学のユオレイです。

普段は、個人開発している動画配信サービスの開発を行ったり、LTをしたり、開発に関するブログを執筆したりするような生活をしています。


今回は2024年10月3日(木)から2024年11月1日(金)の1ヶ月間 、『スタディサプリ 小学・中学・高校講座』(以下、『スタディサプリ 小中高』)のエンジニアとして開発に携わらせていただいたため、そこでの取り組みや学びを紹介します。

 

なぜリクルートに行ったのか

私自身が興味のあるサービスが多かったことが大きな理由です。リクルートにはさまざまなサービスがあります。『スタディサプリ』、『じゃらん』、『SUUMO』、『リクナビ』など、多種多様な領域で多くのユーザーがいるサービスを運営しています。そして私自身が使ったことのあるサービスも多く、そのサービスの裏側を知りたいとも思いました。また、ユーザー数の多いサービスに関わることができれば技術的に考えることも増え、それをどう解決するかを学び、成長ができると思ったからです。

 

インターンシップのタスク

私は教育支援小中高プロダクト開発部 小中高プロダクト基盤開発グループの動画基盤チーム に配属されました。

私自身が動画配信に興味を持っており、今回の配属にもつながりました。

このチームでは『スタディサプリ小中高』の動画基盤を開発しています。

そして今回私は『スタディサプリ』の講義動画に字幕を表示させるプロジェクトの開発に携わりました。

プロジェクトについてご興味のある方は、こちらのプレスリリースもご覧ください。

-『スタディサプリ高校講座』、講義動画に字幕表示 音声文字起こし生成AI活用で、聴覚障がい者も利用しやすく まずは「数学Ⅰ/A」「情報Ⅰ」で

https://www.recruit.co.jp/newsroom/pressrelease/2025/0217_15474.html

 

『スタディサプリ』とは

プロ講師の授業動画を配信するオンライン学習サービスです。

詳細はこちらのサイトをご覧ください。

https://brand.studysapuri.jp/

 

『スタディサプリ』における動画配信について

『スタディサプリ』では講義動画をストリーミングで配信しています。それを実現するために、HLSというApple社が開発した動画の「ストリーミング配信」のための規格を使用しています。

HLSには、 multivariant playlist (m3u8)、media playlist (m3u8) 、media segment (ts) に分かれています。動画を再生する際に、multivariant playlistからビットレートや解像度にあわせて media playlist を参照します。 media playlistから分割されたmedia segment を参照することで動画を配信しています。

 

字幕HLSの流れ

 

このHLSという規格に乗って字幕を配信するためには、以下の三つが必要になります。

  • 字幕ファイル(今回はWebVTT)
  • 字幕ファイルへの参照が書かれた、字幕media playlist
  • 字幕media playlistへの参照を、multivariant playlistへ追加

 

インターンシップで作成したもの

私が担当した部分は、用意された字幕をHLSで配信するためのジョブを作成することでした。

そもそも私は字幕がどのような仕組みで表示されているかをインターンシップ前は知りませんでした。さらにHLSを使った配信であったため、複雑なものにもなるということを後から知りました。それらを理解しながら今回の実装に取り組みました。

article_02

 

このジョブを作成するために、さまざまな学びを得ながら開発を行いました。特にHLSのRFCを読みながらどう実装していくかを考えるのはとてもやりがいがあり、学びにもなりました。

RFCに記載されていることを元にさまざまな検証をしていくことで調査する力もついたかと思っています。

 

HLSでの字幕配信では、multivariant playlist と media playlist に字幕用の加工をしておく必要があります。multivariant playlistに字幕参照情報を追加する処理だったり字幕の時間の長さを計算した上でmedia playlistを生成する処理などを実装しました。

また、ジョブとしてArgo Workflows を初めて使用したため、Argo Workflows についてやKubernetes についても学べました。

 

article_03

 

そして無事にジョブが完成し、講義動画に字幕を付与させ、その再生を行うことができました。

 

article_04

 

これでインターンシップのタスクは無事に終わらせることができました。

 

リクルートの文化

リクルートにはリクルートならではの文化が存在します。

 

Working Out Loud

Working Out Loud 大声作業(しなさい)という文化が『スタディサプリ』にはあります。slackのtimesにどんどん思ったことを投稿していくようなスタイルで、質問もしやすく、ペアプロも何回かしていただきました。

参考 「Working Out Loud 大声作業(しなさい)、チームメンバー同士でのトレーニング文化の醸成」
https://blog.studysapuri.jp/entry/2018/11/14/working-out-loud

 

よもやま

「よもやま」と呼ばれる自由にお話しできる文化があります。

そこでは、先輩エンジニアだけでなく、ビジネス(事業)担当者にも、仕事や趣味のお話をしていただきました。特にエンジニアがビジネスの方とお話できる良い機会だと思いました。これで「まだ、ここにない、出会い。」をたくさんしました。

 

やりたいことをやれる

リクルートには自身の主体的な意志(Will)を尊重する文化があります。このこともあって、インターンシップ期間中は多くのやりたいことをやらせていただけました。

 

その他

『スタディサプリ小中高』 プロダクト開発部キックオフ

『スタディサプリ小中高』の開発に関する、上期にやったことと下期にやることを共有する会がありました。そこでは、他のチームの状況や課題を知ることができました。また、懇親会では他のチームの方ともお話をしました。

 

技術書購入制度

インターンシップ参加時に参考資料として技術書を購入できます。とてもありがたい制度でした。実は、購入した本の著者がリクルートにいて、よもやまをして執筆時のお話も聞けました。

 

article_05

  • データ指向アプリケーションデザイン

https://www.oreilly.co.jp/books/9784873118703/

  • Web配信の技術

https://gihyo.jp/book/2021/978-4-297-11925-6

  • SoftwareDesign

https://gihyo.jp/magazine/SD/archive/2024/202409

 

ランチ・ディナー

インターンシップ期間中に何度かご飯に連れて行ってもらいました。そこでチームの方と交流をしながら食事をすることができます。美味しいところに連れて行ってもらいました。

 

article_06

 

インターンシップを終えて

1ヶ月間のインターンシップを通して、リクルートの文化や技術的な成長をしました。特に動画配信周りは企業でないと学びづらい内容でもあったため大変勉強になりました。リクルートの文化により、さまざまな方と交流することができて、やりたいことも多くやれて大変よかったです。

最後になりますが、メンターさん、チームの皆様、その他関わっていただいた方々、大変お世話になりました。ありがとうございました!