🍣

1 Day インターンシップでvideo.jsのハンズオンをした話

2022/11/02に公開

はじめに

初めまして。millvi 開発部の ikeda です。

この度、当社で8月31日(水)、9月10日(土)、10月29日(土)にエビリーで初のエンジニア向け1dayインターンシップを実施しました。

https://www.wantedly.com/projects/1080280

今回は、当日に至るまでの流れについてお話したいと思います。
他社さんでもインターンシップを実施する際の参考になれば幸いです。

インターンシップの目的

インターンシップの目的は、以下の通りです。

  • 幅広い層の学生さんにエビリーという会社を知ってもらうこと
  • 動画を取り扱う企業として、エンジニア志望の学生さんが興味を持てるようなテーマを提供すること

インターンシップの設定

今回インターンシップを実施するにあたって、以下のように設定しました。

  • 実施はオンライン(Zoom)
  • 1dayインターンシップ(夕方から3時間)
  • 各月1回のペースで実施

いずれの条件も参加可能な学生さんの幅をできるだけ狭めず、多くの学生さんに参加してもらうために設定しました。
オンライン実施については、全国の学生さんを対象にできますし、1dayで3回かつ夕方~夜に実施とすることで、学生さんのスケジュールも合わせやすくなると考えたためです。

日程については、先の2回は平日と土曜日でそれぞれ実施して参加人数を比較して3回目の実施日を決めました。
結果としては、土曜日実施の方が参加者は圧倒的に多かったので、3回目は土曜日実施としました。

テーマ選定 ~ video.jsのハンズオンに至るまで ~

今回のインターンシップで最も悩ましかったのが、テーマ選定でした。
オンラインで1回3時間という時間が限られているため、その時間内で学生さんにどれだけインパクトを与えられるのか、ということも考えながらテーマを選ぶ必要がありました。

途中、グループディスカッションや競技プログラミングといった案が挙がりましたが、いずれもエビリーの技術やサービスに関するものではないため、廃案としました。
かといって、限られた時間内に自社サービスを触ってもらうのも難しく、開発環境等の準備もオンラインだとフォローが難しかったため、こちらは現実的ではありませんでした。

最終的にはvideo.jsのハンズオンを実施することで、話がまとまりました。

video.jsとは、動画プレイヤーを実装できるJavaScriptライブラリです。

https://github.com/videojs/video.js

video.jsはCDNから読み込むだけで利用できるので、コードエディターのインストール以外に開発環境の準備もほとんど必要なくなりました。

この内容であれば、エビリーの技術やサービスに関連づけることもでき、当日コーディングした内容についてもお土産コードとして残せます。
コードが手元に残ればインターンシップ後でも、コードを自由に弄って遊ぶことができるので、インターンシップ後も楽しめるのではないかと考えました。

ハンズオン詳細

ハンズオンは以下のような章構成で行いました。

  • videoタグ(HTML標準)を用いたプレイヤーの実装
  • video.jsを用いたプレイヤーの実装
  • 拡張プラグインの導入方法について
  • 自作拡張プラグインの作成・導入方法について

インターンシップ後も、video.jsについては各個人が自走できるような内容を目指し、網羅的な内容になるように心がけました。
また、最初にvideoタグを用いたプレイヤーについて触れた理由は、video.jsと比較してどのようなメリットがあるのかを学生さんに知ってもらうためにあえて取り入れました。

当日の流れ

タイムテーブルはおおよそ以下のような感じで実施しました。
会社説明等の時間は、事前にエンジニア向けの会社説明資料を配布することで省略。
その代わり、ハンズオンの時間を90分確保することで、ハンズオンの内容を充実させられました。

時間 内容
17:50 学生入場開始
18:00 メンバー紹介
18:05 動画配信の仕組み
18:30 機能実装(video.jsハンズオン)
20:10 社員の見本
20:15 休憩
20:25 フィードバック
20:40 座談会①
20:55 座談会②
21:15 終了

また、ハンズオン実施前に、一般的な動画配信の仕組みを説明することで、ハンズオンへの導入を円滑に進められるようにしました。
ハンズオン中は、社内のエンジニアが5名体制で、Slack、Zoomのブレークアウトルーム等の機能を用いて、学生さんのフォローにあたりました。

ソースコード

今回は学生さんの実装レベルについて制限を設けなかったため、学生さんが途中で挫折しないように、各章ごとのサンプルファイルも用意しました。

ソースコードは以下のリポジトリにあります。
あくまでも、サンプルコードなので、品質は保証できませんが、それでもよければご利用ください。

https://github.com/eviry/video-js-hands-on

終わりに

今回はエビリー初のエンジニア向け1dayインターンシップについて、実施の経緯や内容についてご紹介しました。
参加してくれた学生さんの中には、後日の社内イベント等に参加してくれる方もいて、運営メンバーとしてはとても嬉しい限りです。

今回のインターンシップが、学生さんにとって有益なものになったと願いつつ、この記事が、インターンシップを実施する際の参考になれば幸いです。

弊社に興味があったり、プロダクト開発チームのことをもっと知りたい
という方がいましたらお気軽にご連絡ください。
https://recruit.eviry.com/

Discussion