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書籍 書籍紹介 営業マン 類推法 クラス プロセス指向 PdM 共用 ウェビナーレポート 地方創生 GraphQL CSS OWASP ZAP セキュリティマネジメント 問題解決 ソフトウェア 新技術 雑談力 テスト見積もり Scala Go Rust Relay Cloud AI Kaggle ITエンジニア フレッシャーズ 経営戦略 事業戦略 マインドフルネス 基本情報技術者試験 ニューノーマル プロジェクト会議 メソドロジ 講師インタビュー システム障害 販売管理システム VMware セキュリティ事例 ケーススタディ インターネット通信 ビジネスマン 品質向上 提案 ロジック図解術 バーチャルマシン 対策事例 アスリート 国の動向 アンチパターン リモートアクセス 脳ヨガ 自律神経 整え方 組み立て方 コミュニケーション術 リーダー 新人 知っておきたいこと 対人能力 洞察力 一文作成 サッカー業界 グループワーク マネジメント手法 IT業界 Octave セキュリティ管理 IT ネットワーク機器の特徴 ネットワーク機器の仕組み 基本のキ プレゼンテーションの組み立て方 伝え力 試験合格後 時短術 作成のコツ 導入事例 メンタルマネジメント メンタルヘルスケア DXプロジェクト プログラミング教育 プログラミング的思考 子供向けプログラミング データ定義言語 DDL モダンWebアプリケーション ドキュメント作成 Docker Compose Docker Hub AR VBAエキスパート試験 Azure メディア掲載 サーバーアーキテクチャ データ操作言語 DML NewSQL ソフトウェアセキュリティ 数学 VR アパレル業界 Kubernetes Power BI Android プロダクトオーナーシップ プロダクトオーナー 内製化 情報システム部門 Z世代 クラウドネイティブ 技術教育 Windows server 2019 XSS CSRF クリックジャッキング ビジネスパーソン VPC IAM AWS Fargete ECS 問題発見力 問題分析力編 Access 流通業界 金融業界 ネットワーク設定 トラブル対応 評価 ソフトウェア品質 クレーム対応 呼吸法 戦国武将 エンジニアリング 組織論 SpreadSheet GAS ゼロトラスト Express 3D Arduino 業務分析法 業務構造 経営者 ストレングスファインダー 発注者視点 情報セキュリティ 顧客体験 エンターテインメント お笑い オンライン学習 オンライン教育 学校教育 情報化社会 スポーツ デジタル戦略 ITフェスティバル2022 GoogleSpreadSheet GoogleAppsScript(GAS) SQL 問題分析力 メタバース NFT 資産形成 資産運用 Typescript WebXR 講師が注目する技術 プラクティス ローコード ホワイトハッカーに学ぶ Google Cloud LinuC レイヤ3スイッチ ホワイトハッカー ハッキング 脆弱性 ビジネススキル キャリア戦略 NFTアート リテンションマネジメント ゲーム制作 トラブル防止 システム外注 食事メソッド コード ソフトウェア設計 ドメイン駆動設計 人事評価制度 報告書 稟議書 契約書 Rails 業務自動化 価値 原則 睡眠 IT用語 DBA 炎上対策 2022年版 パフォーマンス パフォーマンス向上 Kubernetes入門 実践 チューニング 2020年代 2010年代 リモートアクセスVPN VPN構築 Railsの教科書 CCNA試験 ウェビナー 老後 人生設計 OSPF入門 Ruby on Rails 脆弱性対策 説明上手 説明力 システム障害報告 システム障害解決 いまさら聞けない 仕掛けから考える ネットワーク基礎 社会人 基礎知識 今日から変わる 睡眠マネジメント 仕事の成果を上げる 出るとこだけ 情報セキュリティマネジメント試験 狩野モデル 独学 若手向け 若手に受けてほしい ルーティング基礎 ルーティング実践 ネットワークエンジニア はじめての サイバー攻撃対策 2022 機械学習エンジニア 実演 AI基礎 Java開発 HTML Web基礎 JavaScriptフレームワーク Vue.js入門 明日から使える 最新テクノロジー 生産性向上 組織開発 PMBOK®第6版 リスクマネジメント 結合 副問合わせ Linux 実践演習 シェルスクリプト入門 マネジメント変革 押さえておきたい DHCPサーバー DNSサーバー VLANスイッチ レイヤ3 LAN NW技術 ローカルエリアネットワーク 知っておきたい 基本文法 Windowsプログラミング ネットワーク全体像 Git入門 GitHub入門 Pyhtonライブラリ プロジェクト QCD管理 Ruby入門 オブジェクト指向言語経験者向け PMBOK®ガイド第7版 ディープラーニング入門 グラフデータベース LinuC入門 サーバサイドJava入門 基礎編 応用編 AWS入門 AWSサービス ファイアウォール構築 Docker入門 データベース設計技術 オンプレミス オンプレ オンプレAD Windows Admin Centre データベース概念設計 Javaプログラミング 1日プログラミング特訓 AI開発 微分 線形代数 行列 統計検定 統計検定準拠 MySQL データベースメンテナンス データベース論理設計 ファイアウォール入門 副問合せ 顧客の売上アップ 売上アップ Azure入門 自分でつくる Docker実行環境 午後アルゴリズム問題 解き方のコツ FE シェルスクリプト実践 仮題で学ぶ 課題で学ぶ 現場 コミュニケーション管理 DX最新動向 DX推進人材 DX人材 Windows server Django データベース連携 インフラエンジニア最新動向 なんとなくわかるからもう一歩 アルゴリズム入門 アルゴリズム基礎 プログラム ハードウェア Javaアルゴリズム 1日特訓 現場でよく使う Rails入門 データベース障害復旧 Google Cloud Vision AI Dialogflow Cloud Functions Pythonプログラミング 社内資格制度 今日から使える 「仕掛け」から考える ITベンダー 診断ツール Webセキュリティ Webセキュリティ基礎 新任PM 新任PL テスト NW機器 独学できる Windows Admin Center プログラミング体験 Java開発者のための C#開発 RPA RPA入門 NWエンジニア NFT入門 だれにでもわかる サーバサイドJavq サーバサイドJava基礎 サーバサイドJava応用 炎上しないための AWSサーバ プログラム基礎 アセンブラ基礎 人工知能 ICT 課題解決 自律性 システム開発基礎 プロジェクト基礎 Webアプリ パターン別 アプリケーション開発 エンジニア初級 2022年からの 実用的な 発注 受け入れ Microsoft Office AI最新動向 良いSQL 悪いSQL データベース管理 インデックス Webの基本 NW管理 C#開発者のための ルータ TCP/IP通信 積分 数学基礎 NWセキュリティ 基本パターン JavaScriptでつくる DX時代 デザインシンキング入門 データ構造 PHPフレームワーク Linuxで学ぶ 速習 VLAN基礎 ゼロからはじめる jQuery入門 JavaScriptドリル Ruby on rails基礎 テストツール リレーショナルデータベース はじめて学ぶ データベースのしくみ 人生100年時代 令和 デザイン デザイン入門 現場ですぐに使える テーブル設計実践 情シス 外部設計 外部設計基礎 小規模ネットワーク Linux必須コマンド 違いを知ろう AWS CLI AWS CLI入門 CloudFormation NW設計 親子で作る メタバースプログラミング サーバー仮想化入門 DNSサーバー構築 秋冬版 IoT基礎 新人PM マネジメント研修 人を動かす 仕組みづくり イノベーション・マネジメント入門 心理的安全性 チーム チーム運営 3時間で学ぶ OS基礎 サーバー基礎 情報漏えい対策 プロジェクトマネジメント入門 組織改革 やさしいチームのつくりかた 簿記から学ぶ ビジネス基礎 データベースマネジメント 乃木坂46 乃木坂46に学ぶ マーケティング論 なっとく! LinuCレベル1 101試験 LinuCレベル1 101試験 ファイルシステム ディスク管理 データ分析基礎 一発OKを引き出す 資料作成術 プレゼン資料 クラウドサービス NW NW構築 SQL入門 目標達成マネジメント マネジメント基礎 目標管理 行動分析学 人の動かし方 組織の動かし方 科学的な Tableau MongoDB基礎 IoT実践 データ収集 データ自動収集 データ管理 技術者 SEのための 論理的思考 PM PL アルゴリズム再入門 GoFデザインパターン オブジェクト指向未経験者向け 令和版 失敗事例から学ぶ データベース構築 原価管理 業務連動 Access基本操作 クエリ活用 フォーム作成 レポート作成 実務事例で学ぶ 実務 知識活用 ネットワーク管理コマンド PCスキル 最強の習慣 ストレスフリー 作業効率化 Windows 11 webサーバ カラダとココロ ハワイアンストレッチ 身体のケア ストレス解消 パワーアップ リフレッシュ 1日で習得する ユーザ視点で考える 今知っておきたい UX向上 ユーザエクスペリエンス ユーザ体験 比べて学ぶ 仮想化 仮想マシンとコンテナ データサイエンスプログラミング データ視覚化 オリンピックコーチが伝える セルフマネジメントメソッド セルフイメージ 仮想環境 仮想環境で学ぶ セキュリティ実践 サーバーセキュリティ オンライン攻撃事例 質問技法 SE JavaScriptだけでつくる バッチ処理 テストデータ作成 ストアドプロシージャ バッチ テストデータ 実践編 デザイン力 テレワーク時代 収納術 インテリア術 サイバーセキュリティ 無線LAN Wi-FI 人事 BGP入門 ルーティングプロトコル 文系でもわかる 統計学入門 IPv6 IPv6入門 IPv4 人材育成 人が育つ仕組み 売れる仕組み マーケティング入門 セールスパーソン セールスマネージャー セキュリティ対策 計画の立て方 脱TCP HTTP/3 HTTP/3時代 AWS認定資格 Amazon Web Services 作業自動化 顧客折衝 Webサーバー自動構築 JavaScriptコーディング JavaScriptコーダーのための エンジニアのための ここが危ない テレワークセキュリティ サイバー攻撃事例 相手が理解し納得できる プレゼン 図解活用術 図解活用 Webアプリケーション Webアプリケーションセキュリティ クロスサイトスクリプティング OSコマンドインジェクション PowerPointで作る 資料デザイン 見やすい資料 IT業界人 知っておくべき 目の疲れ 眼精疲労 新習慣 習慣 栄養 運動習慣 イノベーション IMS ISO56000 イノベーション・マネジメントシステム 顧客視点 デザイン思考 Excel初級編 オブジェクト指向基礎 Javaでオブジェクト指向 Vue3 Vueアプリケーション FE試験 リーン開発 情報システム 情報システム開発 開発手法 C#プログラミング 応用情報技術者試験 AP AP試験 情報漏えい事例 心理学 E-R図 PMBOKから学ぶ 新人エンジニア 0年目エンジニア Webサービス Webサービス基礎 スコープ・ベースライン スコープ記述書 WBS辞書 ステークホルダ 3Dオブジェクト 3Dプログラミング canvas WebGL Three.js 3D描画 Pythonによる ローコードAI開発 Pandas scikit-learn Pycaret データ前処理 AIエンジニア Windows server基礎 攻撃対策 攻撃手段 マルウェア マルウェア対策 攻撃監視 Power BI Desktop BI ERD

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

calendar_month2020-12-04 公開 update2020-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

タグ一覧