close
プログラミング クラウド Microsoft Azure 情報処理資格 基本情報技術者 IT基礎 応用情報技術者 開発・設計方法 オブジェクト指向 内定者・新人研修 プログラミング基礎 アルゴリズム コンピュータ数学 内定者研修 新人研修 ヒューマンスキル プロジェクトマネジメント プレゼンテーション リーダーシップ 組織マネジメント ネゴシエーション ロジカルシンキング Java UI/UX HTTP JavaScript基礎 情報処理資格 ネットワークスペシャリスト ネットワーク インターネットルーティング応用 IPアドレス データベース応用 SQL応用 パフォーマンスチューニング データベース設計 ER図 概念設計(データベース) 論理設計(データベース) IT資格 Linux基礎 OS・システム基盤 セキュリティ TCP/IP OSI参照モデル データベースセキュリティ ファイアウォール 標的型攻撃 SQLインジェクション ネットワーク基本設計 CCNA Cisco プロジェクトマネジメント資格 情報処理資格プロジェクトマネージャ 情報処理安全確保支援士 人事給与 財務会計 管理会計 簿記 生産管理 在庫管理 ERP バランススコアカード 情報処理資格 ITアーキテクト 情報処理資格 ITストラテジスト 情報処理資格 ITサービスマネジメント 情報処理資格 システム監査 PMBOK® PMP® プロジェクト計画 WBS リスクコントロール ITIL ITサービスマネジメント 要求定義 要件定義 見積手法 ビジネスインダストリ 業種・業界知識 業務知識 提案力 ソフトウェアテスト基礎 情報処理資格 データベーススペシャリスト ハードウェア基礎 外部設計(基本設計) 内部設計(詳細設計) データベース基礎 SQL基礎 RDBMS 物理設計(データベース) C++ Ruby MVC基礎 Webアプリケーション開発 JavaEE Javaプログラミング応用 フレームワーク MVC応用 Spring フレームワーク ソフトウェアテスト応用 テスト手法 JUnit スマートフォンアプリ開発 Androidアプリ開発 C# 基礎 C# 応用 負荷テスト Javaプログラミング基礎 ソフトウェアテスト コーチング メンタリング HTML/CSS サーバー構築 仮想化技術 KVS (NoSQL) アジャイル スクラム ファシリテーション C言語 ITパスポート JSTQB データサイエンス 単体テスト ユニットテスト キャリアアップ インターネットルーティング基礎 パケット解析 LAN構築 データベース データサイエンティスト トレンド 障害対応 インフラ監視 HTTP/2.0 コンピュータサイエンス VPN ネットワーク物理設計 データベース障害 JavaScript モダンJS (Modern JavaScript) 応用 MVS応用 バックアップ/リカバリ 分散処理 Hadoop Hive Python AI 深層学習(DeepLearning) CentOS Linux応用 Zabbix シェルスクリプト Infrastructure as Code Windowsサーバー基礎 内部設計 Docker DevOps Windowsサーバー応用 NginX chef Ainsible ロジカルライティング R テスト自動化 Jenkins Git 継続的インテグレーション (CI) バージョン管理 Vagrant 要求分析 Redmine 継続的インテグレーション(CI) 継続的デリバリー (CD) ヒューマンリソース管理 Web API マイクロサービス コミュニケーション 業務知識/業界知識 マーケティング 語学 AWS 法務 IoT ビジネスマナー OJT 業務効率化 表計算ソフト オフィスソフト コンプライアンス フロントエンド Subversion PHP 関数型プログラミング Laravel モダンJS (Modern JavaScript) 基礎 Android Studio 機械学習 iOSアプリ開発 ぷプログラミング React 次世代高度IT人材 共創 IPA Raspberry Pi Xamarin スクリプト言語 GoF CUI VBA 資格 ビジネス文書 jQuery 研修参加レポート マネジメント OSPF テーブル設計 アンガーマネジメント クリティカル・シンキング PDU 経営改善 Pマーク 問題解決技法 サイバー攻撃 エンジニア 参加してみた エンゲージメントマネジメント 労働関連法 新人育成 ネットワーク構築 情報セキュリティマネジメント デザインパターン リファクタリング マルチスレッドプログラミング ベンダーコントロール Modern JavaScript 冗長化 VLAN インフラエンジニア チームビルディング テストケース リーダブルコード セキュリティ入門 ネットワーク入門 Node.js npm gulp ビルドツール Python入門 冗長化入門 インフラ実機演習 プロジェクト管理 Active Directory ネットワーク管理 コンテナ 正規化理論 Haskell 品質管理 OpenStack シンギュラリティ DBA中級 プロトコル UX 基本設計 FinTech トラブルシューティング 並列処理 見える化 PMO ロジカルコミュニケーション Deep Learning インデックス設計 超上流工程 BGP Excel C-CENT Selenide プライベートクラウド アセンブラ コンピュータ基礎 工数見積 CCENT 法律知識 失敗から学ぶ プロジェクト失敗事例 PDCA プログラミング入門 非エンジニア向け 4Biz DNS セルフマネジメント 片付け術 サーバーダウン サーバー タイムマネジメント GO言語 プロダクトマネジメント プロダクトマネージャ LVS ロードバランサー 負荷分散 仮想通過 犯罪心理学 情報漏えい SEカレッジ導入事例 IT研修制度を聞いてみた CentOS7 開発環境構築 数字力 財務 IT人材 UI Machine Learning Go言語 (golang) データマイニング 統計学 新人教育 やり直し数学 RDB つながる工場 モチベーション WebSocket WebWorker HTML5 CSS3 Bootstrap 微分・積分 システム設計 決断力 LAMP環境 教育研修担当者向け ルーティング Linux入門 図解術 目標設定 試験対策 インタビュー技法 Vue.js ブロックチェーン DHCP 仕掛け学 BSC 財務諸表 自己分析 RIP スタティックルート バッファオーバーフロー DoS攻撃 システム開発 Wireshark パケットキャプチャ 管理職研修 部下育成 文章力 情報システム部門向け プロジェクトリーダー プロジェクトマネージャ 塗り絵 リスク管理 法改定 会社の仕組み Chainer AI人材 会話術 テスト技法 会社規模199名まで 会社規模49名まで 会社規模99名まで アプリ開発 サーバサイドJava 営業知識 Cloud 栄養学 基本コマンド ウォーターフォールモデル ヘルスケア 論理設計 ニューラルネットワーク ハンズオン UML 顧客ヒアリング マウスで学ぶ Apache EC2 Lightsail M5Stack DevSecOps プロジェクト成果 画像認識 チャットポット コマンド レビュー 基本用語 自動構築 LPIC-1 サーバーサイドJavascript キャリア形成 ワークライフバランス インバスケット テック用語 GitHub Windows エディタ 教養 令和時代 RESTful API 物理設計 会社規模300名以上 データモデリング サーバーサイドJava Webサーバー基礎 Webサーバー応用 Watson IBMWatson Learning Topics OS モバイル コンテスト トレーニング手法 アーキテクチャ 人材モデル インフラ CI/CD Infrastructure as a Code チーム開発 制度づくり Special_Intro AI市場分析 研修ロードマップ 仕事術 デジタルトランスフォーメーション 財務分析手法 情報整理 PowerPoint 新しい研修 オンライン研修 見どころ紹介 統計分析 ディープラーニング G検定 情報処理技術者試験 販売管理 C# テスト計画 Linuxサーバー WEBサーバ構築 http/2 Postfix イーサリアム プロジェクト・メンバ 正規化 パケット実験 作業分解 トラブル調査 ネットワーク設計 Windows server 2016 ネットワーク機器 DX 管理職 最新動向 ポストコロナ時代 IoTデバイス マイコンボード センサ サーバー仮想化 仮想ルータ WAN インターネットVPN 若手エンジニア ITプロジェクト 人事面談 DX人材育成 Java基礎 ZAP 脆弱性診断 NWサービス構築 イノベーション・マネジメント ネットワークセキュリティ ストレッチ Google Cloud Platform 不動産業界 テレワーク(WFH) ドリル GCP ( Google Cloud Platform ) システム業界 PMS テレワーク ビッグデータ NoSQL OWASP CentOS8 ネットワーク技術 データ分析 デザインシンキング 保険業界 会議リーダー システムエンジニア 段取り術 プロジェクト原論 文章書き換え術 ノーコード No Code MongoDB Redis Cassandra 運用管理 Windows10 仮想マシン リモートワーク 働き方 生産性 IPSec Office セキュリティマナー ソフトウェア・レビュー ライフハック 新しい働き方 エクササイズ ビジネスモデルキャンバス 状況認識 ストレス 必須コマンド Web 今日わかる きほん 状況把握 意思決定 心の健康 IT書籍 書籍紹介

ハンズオン(演習)形式のオンライン研修に使えるツールをまとめてみた


2020-12-16 更新

新型コロナにより、研修はオンラインで開催するのが「ニューノーマル」になりました。

それに伴って、オンライン研修と従来からあった e ラーニングの境界も曖昧になり、ライブで研修する意味が、より問われるようになっています。

ただ、その中で課題が残っているのが、 プログラミングなど技術習得のためのハンズオン(演習)のオンライン化です。

技術習得にあたってハンズオンで自分で練習するステップはとても重要であり、ハンズオン中の講師への質疑・サポートも欠かせません。つまり、ハンズオンこそライブ研修で行う意味があります。

このハンズオンのオンライン化にあたり、その課題とその解決に効くツールを探りました。

ハンズオン オンライン化の課題

ハンズオンで何が困るのか、以前にインタビューした記事でも表面化したのが、以下の 2 点の課題です。

  • 受講者がつまづいたときに受講者の PC 画面を見られないのでサポートしにくい
  • 講師が教室内を見回るようなことがオンラインではできないため、理解度を把握しにくい

label関連記事

NTTデータはなぜ「壮大な PoC 」、新入社員研修のオンライン化を成功できたのか

この問題はリソース(マンパワー)を増やせば解決できますが、それをせずともいくつかのツールを組み合わせることでも軽減・解消できます。

開発環境構築の簡素化

研修も含めたソフトウェアの開発で、一番最初に行うのが開発環境の構築です。 これが一筋縄には行かず、ほぼ 100% の確率でなんらかつまづきます。

初学者であればあるほどつまづくことが多く、またなぜエラーになるのかわからず、オンラインでのサポートは困難を極めます。このため、ハンズオンのオンライン化にあたって、まず環境構築をスルーする or つまづかせないよう簡素化する、といったことが必要です。

例えば、 Web アプリケーション開発がテーマの研修であれば、

  • 開発言語
  • Web アプリケーションフレームワーク
  • 必要なライブラリ
  • Web サーバ
  • データベース

この 5 つが少なくとも必要になります。これを個々の受講者が PC に 1 からインストールして、設定しているのでは、いくら研修時間があっても足りません。また、 PC のスペック、 OS 、すでにインストールしている既存のソフトなどの影響を受け、手順が一通りにならず、逆に、手順通りに上手くいくと相当なラッキーといえる代物です(開発者なら誰もが経験する最初の関門です)。

クラウドで環境構築をスルーする

現在の AWS / GCP / Azure など主要なクラウドベンダーの一般的な PC レベルのインスタンス費用は圧倒的に安くなっています。

ex. AWS で Linux on t3.2xlarge を使用したときの 1 日の費用見積もり
arrow_forward$ 318.57 / 1 ヶ月 1 インスタンス ( Windows なら $426.32 ) から 30 日間で日割り
arrow_forward$ 10.62 / 1 日 1 インスタンス ( Windows なら $14.21 )
Amazon Web Services Simple Monthly Calculator で見積もり ( 2020 年 11 月現在)

このインスタンスを使って、講師もしくは研修運営が事前に環境構築、そのインスタンスを受講人数分コピーしておけば、受講者はリモートデスクトップ接続や SSH すればよく、環境構築はスルーして、すぐさまハンズオンを開始できます。

弊社の定額制研修サービス SEカレッジでは、この方式を利用し、 Azure 上のインスタンスに、受講者は自身の PC からリモートデスクトップで接続し、研修を受講しています。

 

なお、 PC のレンタル / リースなら月額費用はもっと安くすみますが、 1 日間 ~ 1 週間の短期利用では圧倒的にコストが高く、またインストール・設定工数に加え、配送にかかるコストも発生しますので、新人研修などのような長期間でなければ現実的ではありません。

Docker で簡素化する

Docker を使用すると、 PC のスペックや OS などの影響が受けにくく、同じ手順で、しかも、はるかに環境構築を容易にします。

例えば、 Laravel という PHP の Web アプリケーションフレームワークを環境構築しようとすると、従来は、

  1. PHP のインストール
  2. Composer のインストール
  3. MySQL をインストール
  4. Apache をインストール
  5. Composer で Laravel をインストール
  6. Laravel と MySQL との接続を設定
  7. MySQL でデータベースを作成

  8. ?. サーバーにログインして $ php artisan serve で起動

と延々と手順が必要でした。

これを Docker を使うと、

  1. Docker をインストール
  2. Git をインストール
  3. Git から Laradock ( Docker イメージ) をダウンロード
  4. Docker で Laradock コンテナを立ち上げ
  5. 立ち上げたコンテナにログインして Laravel プロジェクトを作成
  6. (オシマイ)

( env ファイルの編集など細かなものはありますが)大まかには、この 5 つの手順で完了します。

 

講師もしくは研修運営が docker-compose.yml など構成ファイルを用意する必要がありますが、フルスクラッチの環境構築と比較すれば、はるかに工数をカットできますし、何より受講者がつまづきにくくなります。

GitHub Codespaces で環境構築をスルー

GitHub Codespases はクラウドでの環境構築をさらに発展させ、 GitHub 上にあるリポジトリを使って、ブラウザで環境構築ができ、そこで開発もできるというものです。

Codespaces | GitHub

したがって受講者側の PC にはブラウザさえあればよく、Git / Docker はもとより、リモートデスクトップや SSH で繋ぐことすら必要ありません。

GitHub Codespaces は 2020 年 12 月現在でベータ版での提供ですが、リリースされれば、とても面倒な環境構築から開放されるだけでなく、オフィスや自宅、外出先などで異なる PC を使用していても開発が継続できます。

例えば、研修中はオフィスにある PC で演習し、演習の続きは自宅で個人の PC で再開するといったことが可能になります。

 

なお、 GitHub Codespaces と同じコンセプトで、すでに製品リリースされていて、クラウド上で環境構築レスで開発が出来るツールがあります。それが Gitpod です。

Gitpod – Dev environments built for the cloud

50 時間 / 月までなら無料、有料なら $9 ~ $39 / 月 で 16 人分のワークスペースが提供できます。

 

コロナ禍でのリモートワーク、 Work From Home が進む中、環境構築コストを出来るだけ抑えようとするトレンドとも相まって、クラウド開発はますます進化しています。

オンライン研修の単調さ・質問づらさを解消

Zoom / Teams など Web 会議ツールで研修を配信しようとすると、問題になるのが以下のような点です。

  • 講師が画面共有するとき、エディタやカメラ、ホワイトボード、チャットなど複数のソースを同じ画面に取り込めない
  • 配信映像が単調になり、理解がしづらい
  • 受講者からチャットで質問しても届いたのか、反応がわかりにくい

単に画面共有しただけでは、受講者が理解しづらく、質問しにくい環境を生んでしまいがちです。

ただ、これはストリーミング配信ツールを使えば解決できます。

ストリーミング配信ツールを利用すると、カメラだけでなく チャット、プレゼンテーションツールやエディタの画面などなど、様々なリソースを配信画面内に取り込んで、仮想カメラを使って Zoom や Teams で配信できます。

ストリーミング配信ツールで様々なリソースをキャプチャ
Icons made by Pixel perfect from www.flaticon.com

こういったツールを使えば、以下のように、カメラ、エディタ、チャットを入れた画面も配信できます。

ストリーミング配信ツールを使った画面構成の例

OBS Studio

配信ツールの多くはこれまで主にゲームプレイの実況動画の中継で使われ歴史は古く、 XSplit Broadcaster, vMix, Wirecast など様々にあります。

その中でも、最も有名なのが OSS として開発され、無料で利用できる OBS Studio ( OBS ) です。コロナ以降の IT 系の勉強会やカンファレンスでは、ほぼ一択で選ばれています。

Open Broadcaster Software®️ | OBS

使い方もとてもわかりやすいので、紹介します。

  1. OBS を初期起動すると、配信チャンネル、アカウントなど入力するモーダルがでますが、 仮想カメラ を選択するか、閉じる

  2. ソース から ボタンを押して、キャプチャするものを選ぶ

    1. 映像キャプチャデバイス( Web カメラなど)、ウインドウ (アプリケーション) 、画像、ブラウザなどから選択可能

    2. ソースの名前をつける(キャプチャするソースの名前をつけるとわかりやすい)

    3. ウインドウ から表示したいソースを選択

    4. 取り込めると赤枠で画面いっぱいに表示されます

  3. それぞれのソースのレイアウトを調整

    • 赤枠を広げたり、移動します(アプリケーション側のウインドウサイズを変えても、赤枠は追随します)
  4. 仮想カメラ開始 ボタンを押す

  5. Zoom 等の画面でビデオソースとして OBS Studio を選択

また OBS では配信中でもレイアウトを変えることができるため、研修シーンに合わせてスグに調整が可能です。

なお、 OBS では上記のように作った画面構成を シーン という単位で管理しており、 例えば、事前にスライドを使うときの画面構成を別のシーンにしておくと、そのシーンを選択するだけでスグに切り替えられます。

MacOS 版は仮想カメラ出力に近々対応予定ですが、 2020 年 12 月現在はまだです。 OBS ( macOS ) Virtual Camera というプラグインを入れると、仮想カメラ出力ができるようになります。
MacOS 版も仮想カメラに対応した模様です(未検証)。

johnboiles/obs-mac-virtualcam: Creates a virtual webcam device from the output of OBS. Especially useful for streaming smooth, composited video into Zoom, Hangouts, Jitsi etc. Like CatxFish/obs-virtualcam but for macOS.
macOSとLinuxで仮想カメラをネイティブサポートし、直接ZoomやGoogle Meetなどに映像を出力できるようになったライブ配信アプリ「OBS Studio 26.1」がリリース。 | AAPL Ch.

教室内を回るような感覚で、オンラインでも受講者の PC 画面を確認

ハンズオンでは、受講者の手が動いているのか、動いていないのか、どこで止まっているのか、どこで間違えているのか、講師は教室内を回りながら受講者の PC 画面を確認して理解度を測り、次の手を考えています。

これがオンラインでは難しいのです。受講者の PC 画面を複数同時に共有できないからです。

受講者の PC にも OBS を入れる

ここで察しの良い皆さまであれば、わかることでしょう。

「 Zoom 等のビデオソースから仮想カメラを選べるのであれば、受講者側も同じようにやれば、受講者全員の PC 画面を同時に共有できるのでは」と。

その通りです!

受講者にも OBS など仮想カメラをインストールしてもらい、ハンズオン時にビデオソースを 仮想カメラ に切り替えてもらえばよいのです。

実際にやってみたのが、以下の画像です。

Zoom で複数の PC 画面を共有

ただし、今回は参加人数が 2 人でテストしたので、スクリーンの文字やソースコードなどは視認できる大きさでしたが、受講人数が 4 人を超えると上記よりスクリーンサイズが小さくなってしまい、画面が見えにくくなります。

ブレイクアウトルームを併用

そこで、ハンズオンのときには Zoom の ブレイクアウトルーム のような機能を併用すると良いでしょう。

  • スクリーンサイズを考えて 4 人でグループをつくる
  • 講師は教室内を回るように、各ルームを回って理解度が測ることができる
    • ルーム内だけに閉じた音声になるので、講師から個別のアドバイスもしやすくなる
    • 場合によって単一画面の画面共有機能も併用すると、モブプログラミングのようなこともしやすい
  • ルーム内全員が PC 画面を共有しているので、受講者同士の教え合いもしやすい

受講者に OBS のインストールや設定、ビデオソースの切り替えに対応してもらうので、少し手間はかかりますが、教室内でハンズオンをやっていたときと同じように理解度が把握できるのは、何ものにも変えがたいものでしょう。

まとめ

ハンズオンをオンライン化するにあたって、ハードルとなる、

  • 受講者がつまづいたときに受講者の PC 画面を見られないのでサポートしにくい
  • 講師が教室内を見回るようなことがオンラインではできないため、理解度を把握しにくい

この 2 点を飛び越えられるツールを紹介して参りました。

オンラインでハンズオンがスムーズにできれば、ライブで行う研修の魅力が増します。それだけでなく、従来の教室型では出来なかった、全国各地から遠隔受講することも可能になります。

 

一方で、 Zoom や Teams はアップデートが進み、 Teams では全員が一緒の講堂にいるようなモードが追加されたり、 Zoom の API を使ってフルカスタマイズしたツールやプラグインが開発できるようになるなど、目覚ましい進化を遂げています。

今回紹介したツールが必要なくなるアップデートもあるかも知れません。今後の動向に注目です。

午前免除 FAQ

タグ一覧