ICFO2021 コロナ時代のオンラインハンズオン体験
- 3. このセッションについて
• 「ハンズオン」を含みます
• ハンズオンに参加できるのは WebEx で聴講されている方だけです
• ハンズオンに参加せず、聴講だけでも大歓迎です
• ハンズオンの様子がオンラインでどのように見えるかを楽しんでください
• 聴講だけの場合、以下の内容・要件は無視してください
• ハンズオンに参加いただく場合、PC の画面をセッション中に
参照する可能性があります
• ハンズオン内容
• 「ちょっとした JavaScript のプログラミング」
• ハンズオン参加要件
• PC の Google Chrome ブラウザ
- 4. 自己紹介 木村 桂（きむら けい）
日本アイ・ビー・エム
「IBMガレージ」という組織でアジャイル開発
プログラミングが大好き・楽しい
BMXUG(IBM Cloud ユーザーグループ）で活動
IBM Cloud Festa Online 2020 にも参加しました！
- 7. ウェブ会議を使った "ハンズオン"
ウェブ会議
(Zoom, Webex, .. )
できた！
エラー
遅れ気味。。
未着手
参加者ごとの作業に差が出る
ホストは気がつかない
オンラインでなければ、
直接画面を覗き見ればわかる
参加者ごとの進捗が把握しにくい
エラー時の内容を把握しにくい
課題
-- --- --
---- ---
-- --- --
---- ---
Error
-- --- --
A
B
C
D
（ホスト役）
- 8. 解決に向けた仮説
ウェブ会議
(Zoom, Webex, .. )
できた！
エラー
遅れ気味。。
未着手
ホスト役の人が、自分の画面を共有しつつ、
同時に参加者全員の画面を見ることができれば、
画面を覗き見る感覚でオンラインでも
進捗確認ができるのではないか？
-- --- --
---- ---
-- --- --
---- ---
Error
-- --- --
A
B
C
D
-- --- --
---- ---
A
Error
B
-- --- --
C D
（ホスト役）
要検証
- 10. システム構成
ウェブ会議
(Zoom, Webex, .. )
ウェブ会議を併用しながら
Screen Capture API と WebSocket(Socket.IO) を
併用して、リロード不要で（ほぼ）リアルタイムに
参加者の PC デスクトップ画面を一箇所に集めて表示する
-- --- --
---- ---
-- --- --
---- ---
Error
-- --- --
A
B
C
D
-- --- --
---- ---
A
Error
B
-- --- --
C D
（ホスト役）
アプリ
③Screen Capture API でデスクトップ
画面を取得し、WebSocket に送信
①WebSocket を生成して、メッセー
ジが送信されてくるのを監視
② WebSocket に接続
④WebSocket に送付さ
れた画面を表示
- 20. 課題の模範解答
JavaScript
var count = -1;
var colors = [ 'green', 'yellow', 'red' ];
$('#mybutton').click( function( e ){
// id=mybutton のボタンがクリックされた
count ++;
$('#main').css( 'color', colors[count % colors.length] );
});
赤字部分を書き加えて変更するか、全体をコピー＆ペーストしてください
https://dotnsf.github.io/jch/?file=icfo2021_0521_answer.json
- 21. 仮説の検証結果
ウェブ会議
(Zoom, Webex, .. )
できた！
エラー
遅れ気味。。
未着手
ホスト役の人が、自分の画面を共有しつつ、
同時に参加者全員の画面を見ることができれば、
画面を覗き見る感覚でオンラインでも
進捗確認ができるのではないか？
-- --- --
---- ---
-- --- --
---- ---
Error
-- --- --
A
B
C
D
-- --- --
---- ---
A
Error
B
-- --- --
C D
（ホスト役）
アプリ
要検証
できそう？
- 22. Screen Capture API の使用箇所
<script>
navigator.mediaDevices.getDisplayMedia( { video: true } ).then( function( mediaStream ){
// mediaStream は共有スクリーンのストリーミング動画（ハンズオンの様子の動画）
:
:
- 画面上部の video にストリーミング動画を流す
- 定期的に video を drawImage() 関数で（静止画で切り出して）canvas に表示
- canvas の内容を WebSocket に送付
:
:
});
</script>
詳しくは https://github.com/dotnsf/screen_collect/blob/master/views/screen.ejs 参照
<video autoplay playsinline id="video" width="640" height="480"></video>
※画面の遥か上部（非表示ではないが、見えない位置）
<canvas id="canvas" width="640" height="480" style="display:none;"></canvas>
※非表示
- 23. （小規模用）screen-collect の使い方
• 手順
• ユニークな ROOM ID の決定
• 例："icfo2021" （他の人とは異なるもの）
• ホスト役がアクセス
• https://screen-collect.mybluemix.net/view?room=(ROOM ID)
• ID: admin
• PW: password
• ユーザーがアクセス
• https://screen-collect.mybluemix.net/?room=(ROOM ID)
• 注意
• 小規模なサーバーなので複数ルームの同時利用を想定していません
• 本格的に利用する場合は、ソースコード（と IBM Cloud）を使って専用サー
バーを構築して使ってください
• その際にはホスト用の ID やパスワードも変更してください
- 25. リンク集
• screen-collect （のソースコード＆使い方）
• https://github.com/dotnsf/screen_collect
• オンライン HTML ビューワ（のソースコード＆使い方）
• https://github.com/dotnsf/jch
• Screen Capture API
• https://developer.mozilla.org/en-
US/docs/Web/API/Screen_Capture_API/Using_Screen_Capture
