コロナ禍の開発勉強会～社内教育ツールの開発と実装
•
0 likes•4,383 views
［2020/12/14～17開催「IIJ Technical WEEK 2020」の講演資料です］ 2020年はコロナ渦の影響で様々なイベントがオンラインでの開催となりました。IIJでも昨年度から始まった社内勉強会「IIJ Bootcamp」が今年度は突然のオンライン開催となりました。しかし、オンラインでの勉強会に慣れていないこともあり、講師・受講者問わず多くの課題があがりました。本発表では、そのような課題を解決すべく有志で作られたWebアプリ「Visual Bootcamp」について、着想から開発、実装までを解説します。 講演者：IIJ 中日本事業部 名古屋支社 技術部 技術2課 韮塚 凌平
Recommended
More Related Content
What's hot
What's hot (20)
Similar to コロナ禍の開発勉強会～社内教育ツールの開発と実装
Similar to コロナ禍の開発勉強会～社内教育ツールの開発と実装 (20)
More from IIJ
More from IIJ (20)
コロナ禍の開発勉強会～社内教育ツールの開発と実装
- 2. $ whoami • 韮塚 凌平(にらづか りょうへい) • 所属：IIJ名古屋支社技術部技術2課 • 業務：製造系のSI, 社内GitHub(GHE)とDrone.ioの管理人 • 趣味：PCゲーム, コスプレ • 技術：Kubernetes, Python, Ruby on Rails • 社歴 • 2019年度新卒入社(2年目) 2
- 3. アジェンダ 1. VisualBootcampプロジェクトの発足 2. 課題へのアプローチ 3. 開発構成 4. 結果とまとめ 3
- 4. 登場人物紹介 • IIJ Bootcamp：IIJ社内で開催されている新人向け勉強会 • VisualBootcamp：勉強会の進行を補助するWebアプリ • IKE：IIJ Kubernetes Engine。IIJの持つKubernetes基盤 • バリーくん：IIJの障害対応システムのマスコットキャラクター • 韮塚, 濵﨑：本プロジェクトのメイン開発メンバー 4
- 5. 【補足1】IIJ Bootcampとは • 毎年1回、有志で開催する新人向けハンズオン研修 • 週に5〜10講義ほどのペースで7月頃に開催 • 「浅く、広く」色んな技術に触ってもらおうがテーマ • 昨年は24種類の講義を開催（1講義あたり1時間） • 今年は23種類の講義を開催（1講義あたり2時間枠） • 従来は会議室での講義だったが、新型コロナの影響で今年度から Teamsを使ってオンラインで開催することになった 5
- 6. 【補足2】IIJ Bootcampとは 6 • 今年度のIIJ Bootcampのカリキュラム • 1講義ずつ2時間枠でオンライン勉強会を開催した（合計23講義）
- 7. アジェンダ 1. VisualBootcampプロジェクトの発足 2. 課題へのアプローチ 3. 開発構成 4. 結果とまとめ 7
- 8. IIJ Bootcampがオンライン化した • 新型コロナの影響で今年度からTeamsを使ってオンライン開催 することになった • オンライン化という初めての試みだったが、講師含む運営側も 十分な準備が行えておらず、見切り発車での開催となった • 運営が作成したTeams会議に発表者/受講者が入室し、 発表者の画面共有で講義を進めていくスタイル 8
- 9. 初のオンライン実施で苦労 • オンラインでの講義は不慣れな上に、十分な準備も行えなかった ので、勉強会の進行が難航していた • 今年度のIIJ Bootcampはスケジュールの都合により「6月末」と 「7月下旬」の2ブロックでの開催なので、前半が終わったところ で一旦反省会を開いて課題を調査 • できることならば残る後半の勉強会までには改善したい 9
- 10. 反省会で挙がった課題 前回のIIJ Bootcampからの課題 • (1.) 質問時に質問内容を的確にTAに伝える必要があるため、 質問のハードルが高い（質問しづらい） IIJ Bootcampのオンライン化に伴う課題 • (2.) 受講者の様子がわからないため、 講師が受講者の進捗を把握しづらい • (3.) TAが資料のURLを定期的にTeamsチャットに貼っていたが、 手間がかかるしログが流れるため参照しづらい 10
- 14. アジェンダ 1. VisualBootcampプロジェクトの発足 2. 課題へのアプローチ 3. 開発構成 4. 結果とまとめ 14
- 15. 【再】反省会で挙がった課題 前回のIIJ Bootcampからの課題 • (1.) 質問時に質問内容を的確にTAに伝える必要があるため、 質問のハードルが高い（質問しづらい） IIJ Bootcampのオンライン化に伴う課題 • (2.) 受講者の様子がわからないため、 講師が受講者の進捗を把握しづらい • (3.) TAが資料のURLを定期的にTeamsチャットに貼っていたが、 手間がかかるしログが流れるため参照しづらい 15
- 16. 前回のIIJ Bootcampからの課題 • (1.) 質問時に質問内容を的確にTAに伝える必要があるため、 質問のハードルが高い（質問しづらい） IIJ Bootcampのオンライン化に伴う課題 • (2.) 受講者の様子がわからないため、 講師が受講者の進捗を把握しづらい • (3.) TAが資料のURLを定期的にTeamsチャットに貼っていたが、 手間がかかるしログが流れるため参照しづらい VisualBootcampで課題を解決 16 チェックポイント機能 リアルタイム進捗確認機能 講義情報の確認機能 ＼問☆題☆解☆決☆／＼( ゜ヮ゜)＞ ＼(゜ヮ゜)／ ＼(゜ヮ゜)／ ＜(゜ヮ＾ )／
- 17. 1. チェックポイント機能 • 講義内にチェックポイントを 用意し、受講者はそれに従い ハンズオンを進めていく • 受講者はどのチェックポイント で躓いているかを伝えれば いいので、質問がしやすい • チェックポイントによっては クイズ形式にもできるので、 理解の助けにもなる 17
- 18. 2. リアルタイム進捗確認機能 • 受講者の進捗が一目でわかり 発表速度を調整できる • 受講者をクリックすれば、 受講履歴も見られるので TAがサポートしやすい • 受講者の進捗はPush通知に よって表示されるため、 リアルタイムに進行管理が できる 18 受講者ごとの 進捗を一目で 確認できる 受講者をク リックすれば 過去の受講歴 が見れる
- 19. 3. 講義情報の確認機能 • 講義ページを開けば、 受講に必要な情報を一目で 把握できる • TAが遅れてきた受講者に 資料URLを送る必要がない 19 資料URL, Teams, TAの情報 を一目で確認できる
- 20. 機能まとめ 20 チェック ポイント 機能リアルタイム 進捗確認機能 講義情報の 確認機能 講義に必要な 資料を取得 課題を提示 課題を回答 進捗を記録 受講者 講師 TA 進捗を確認 進捗を確認
- 21. アジェンダ 1. VisualBootcampプロジェクトの発足 2. 課題へのアプローチ 3. 開発構成 4. 結果とまとめ 21
- 22. 目指したい開発構成 • OSSのように誰でも開発に参加できる構成にしたい • 開発者はインフラ基盤をできる限り考えないようにしたい • 最低限のアプリケーションのテストは自動化したい • (私の好きな技術を使いたい) などなど…… 22
- 23. 開発構成図 23 ＋ 社内GitHub 開発者 社内dockerレポジトリ IIJ Kubernetes Engine バージョン管理 継続的 インテグレーション アップデート 利用者
- 24. 開発時 24 ＋ 社内GitHub 開発者 社内dockerレポジトリ IIJ Kubernetes Engine バージョン管理 継続的 インテグレーション アップデート 利用者 • 自分の環境にdockerさえ入っ ていれば開発できる。 • Drone.ioで最低限のビルド テストをしてくれるため、 楽に開発ができる
- 25. 本番デプロイ時 25 ＋ 社内GitHub 開発者 社内dockerレポジトリ IIJ Kubernetes Engine バージョン管理 継続的 インテグレーション アップデート 利用者 • 本番環境に入らなくても、 コンテナを更新するだけ でデプロイが完了する。 • サービスを利用するため の通信はKubernetesで あらかじめ設定したため、 開発者は考えなくていい。
- 26. 開発構成まとめ • dockerさえ動かせる環境があれば誰でも開発に参加できる • ビルドテストが自動化されているため、効率的に開発を行える • 開発者は直接本番環境にアクセスしなくても、デプロイが できるので、デプロイコストが低い。 また、心理的にも継続的な更新がしやすい 26
- 28. • 開発中、社内GitHubにコードをあげていたため、それを見た人 からPull Requestでアプリ機能の追加や改善をしてもらえた • 実際に使ってもらって使いづらい箇所は随時Issueから要望を いただけたので、常にアプリを改善することができた 1. 色んな人から改善案が届いた 28
- 29. 2. 開発中は頻繁に進捗を共有する • コロナ禍な上に物理的な距離もあるため、 面着での会議や開発は行えない状況での 開発となった。 • さぎょいぷという形で互いに画面共有だけして開発を行ったり、 頻繁に進捗確認することで互いの状況を常に共有した。 29 kazuki-h kazuki-h
- 30. 【補足】さぎょいぷとは • 元は「作業しながらスカイプ」の略。 • 通話に参加している人がそれぞれでもくもくと作業を行う方式 このスタイルで開発することで、 • 基本的に自分の画面は誰も見ていないので気軽に作業が行えた。 • ちょっとした疑問があったときに通話は繋がっているので、 すぐに質問ができた。 • 詰まってるときに運よくメンバー以外の他の誰かが見てたりすると、 アドバイスをもらえたりして助かった。 30
- 31. 3. 実装待ちの状態を作らない • 片方の機能が完成するまで、 もう片方が何もしないという 状況をなるべく作らないように したかった。 • 得意分野がRuby on RailsとKubernetesで別れていたため、 基本的にWebアプリ開発とデプロイ環境構築に分かれて作業を行った。 31 kazuki-h
- 32. アジェンダ 1. VisualBootcampプロジェクトの発足 2. 課題へのアプローチ 3. 開発構成 4. 結果とまとめ 32
- 33. VisualBootcampの評価（受講者） • チェックポイントができていれば、自分は講義についていけている という確認ができで自信につながった。(受講者) • IIJ Bootcampが終わった後もTA一覧が確認できるので、 後日TAに講義のテーマで質問をしに行くことができた。(受講者) • 講義中に誤って資料を閉じてしまったり、Teamsが切れてしまっても 「講義情報画面」を開くことで、そこに記載されているリンクから すぐに講義にもどることができた。(受講者) 33
- 34. VisualBootcampの評価（講師・TA） • チェックポイントを明示することで講義構成もセクショニングでき て、参加者に講義で何を伝えるべきかを考えやすくなった。(講師) • 受講者の作業ペースが可視化されるため受講者に手を動かして もらうハンズオン時間を適切に調節できた。(講師) • 「リアルタイム進捗確認機能」により、早く終わった受講者には 補足をしたり、終わっていない受講者には先回りしてアドバイス するなど効率よくTA業務が行えた。(TA) 34
- 35. 開発プロジェクトの感想 • 開発期間が短いプロジェクトだったので、本番で動作してくれるか 心配だったが、IIJ Bootcamp内では特に深刻な問題もなく 無事に成功してよかった。 • OSSのような開発基盤を目指して基盤作成をおこなったため、 開発を効率よく進めることができた。 • 好きな技術を使って好きなものを作るのは楽しいです。 Kubernetesを好きになったきっかけはIIJ Bootcampなので、こう いった形でIIJ Bootcampに貢献できてよかったです。 35
- 36. 発表まとめ • オンライン化に伴う勉強会の課題をWebアプリで解決しました • IIJのエンジニアが有志で集まって開発 • 開発しやすい基盤づくりから趣味全開で考案 • VisualBootcampの開発は楽しかったです • 好きな技術を使って好きなものを開発するのは楽しいです • 業務とは別に何かを開発してみるきっかけに出会えるのはよいですね 36