情報処理学会 インタラクション 2018
IPSJ Interaction 2018

2A07
2018/3/5

授業映像視聴に適したマルチアングル・マルチビューに対応する動画ビューアの試作
浜田啓佑†

加藤直樹†

概要：学校現場では教員の資質能力向上が課題となっており，その方策として，校内外での研修の充実が求められている．本研究では，校内外での研修の一環として行われている，研究協議会における議論，及び日常的に行う授業の振り返りの支援を目標に，複数台のカメラで撮影した授業映像を，注目したい部分を複数抜き出して閲覧できる動画ビューアを提案し試作した．

A Prototype of a Video Viewer Capable of Multi-Angle andMulti-View for viewing of Recorded Image and Voice of ClassKEISUKE HAMADA†NAOKI KATO†

Abstract: Improvement of qualities and abilities of school teachers has been an issue in school scenes, and substantial traininginside and outside school is expected as its measures. This paper proposes and develops a video viewer which makes it possible toobserve record image and voice of class taken with more than one cameras extracting noteworthy points, for discussions in lesson
study discussion of teaching and support for daily post-class reviews carried out as a part of training inside and outside school.

1. はじめに
知識基盤社会の到来と情報通信技術の急速な発展，社会・したい複数の部分を抽出してマルチビューで閲覧できる動画ビューアの提案，設計について述べる．

経済のグローバル化や少子高齢化の進展など，社会は大き2. 動画閲覧システムの設計く変化している．このような変化の中，人材育成の中核を

2.1 基本コンセプト

担う学校教育では，教員の資質能力向上が課題となってい本研究では，複数台のカメラで撮影した授業映像から注る[1]．教員の資質能力を向上させるためには，校外での研目したい部分を複数抜き出して閲覧できる動画ビューアを修の体系的な実施とともに，OJT（On the Job Training）を通提案する．

じて日常的に学び合う校内研修の充実が必要とされている

授業の振り返りや研究協議会においては，議論・観察の[1]．校内研修の一環として，自他の授業の批評をしてよりポイントは撮影時に決められない．たとえ，授業研究に長良い授業とするために，授業研究が行われている．

けた人が撮影したとしても，その人が重要だと感じたポイ

授業研究には様々な手法があるが，その一つに，授業の様子をカメラで撮影し，それを視聴しながら振り返りや議ントを撮影した映像であり，授業者や多くの参観者の視点，観点に一致するとはいえない．

論を行うものがある．この手法では，教師の行動や児童のたとえば教師の動きと全て児童の活動の様子を一人に対活動，表情などの非言語情報も確認できるという良さがあして一台のカメラで撮影すれば，多様な視点や観点の視聴る．しかし，台本がなく予測のつかない授業を，少ない台が可能になるが，通常の教室と設備では難しい．そのため，数のカメラであらゆる分析に耐えられるように撮影するのごく少数のカメラでも教師と児童全員が映像に入るようには難しいという指摘もあり[2]，映像を用いた授業研究は模するには，引きアングルで撮影することになるが，児童が索されている．

小さくなりすぎ，一人一人の活動の様子や表情などを観察

本研究では，映像の視聴による授業の振り返り，および，するには適さない．

多くの参観者同士の意見交換と講師による授業の講評を行そこで，複数のカメラを用いてマルチアングルで撮影しう研究協議会における議論を支援することを目標に，複数た授業映像を表示し，また必要であればそこから注目したのカメラで撮影した授業映像を，様々な視点や観点から視い部分をズームしたり，抜き出してマルチビューで閲覧し聴することを可能とする動画ビューアの開発を目的とする．

たりできるようにする．

本稿では，同期したマルチアングルの授業映像から，注目† 東京学芸大学
Tokyo Gakugei University© 2018 Information Processing Society of Japan553情報処理学会 インタラクション 2018
IPSJ Interaction 2018

2.2 基本機能の設計
本節では，基本コンセプトを実現する機能の設計を述べる．

2A07
2018/3/5

なる．
2.2.2 映像ビューの追加
映像ビューの一部分に注目しながら，同一の映像ビュー

2.2.1 複数映像ソースの表示マルチアングルを実現するために，その元となる複数の映像ソースを同期して表示できるようにする．一つの映像ソースを一つのウィンドウ（以下，映像ビューと呼ぶ）で表示するマルチウィンドウ方式を採用する（図 1）．
また，それぞれの映像ビューは・配置変更に表示されている他の対象，つまり一つの映像ソース内の複数の対象にも注目したい場合，ズーム機能では十分ではない．
そこで，表示されている映像ビューの任意の範囲を指定し，その範囲を表示する新たな映像ビューを生成する機能を提供する（図 2）．
2.2.3 チャプター・サイズ変更

授業では一つの教師の発問や児童の活動，発言などが，・表示映像のズーム／パン後の授業の展開に大きく関わってくることが多々ある．そを可能とする．次にそれぞれの機能の説明を記す．のように授業のキーポイントとなり，何度も繰り返し視聴

1） 配置変更

しながら議論を深めたい場面を，容易に視聴できるように，映像ビューを任意の位置へ移動させることができる機能

授業映像を視聴しながら，授業を任意の時間軸のまとまりを提供する．また，重ね合わせての配置を可能とする．に分割する機能，及び指定した場面の頭出し再生をする機

2） サイズ変更

能を提供する．

視聴中に映像ビューのサイズを変更することができる機能を提供する．この機能により，視聴する場面に応じて注

2.3 実装方法の設計
本節では，基本機能の実装方法の設計を述べる．なお，

目したい映像ビューを大きく表示することや，議論にあまこの設計では HTML5 ベースでの実装を前提とする．

り関係しない映像ビューを小さく表示することが可能とな

2.3.1 映像ソースから映像ビューへの映像ソースの表示る．よって，映像ビューのサイズを変更した場合も，映像複数の映像ソースを同期して表示するために，複数の映ビューに表示している映像ソースの範囲は変更せず，サイ像ソースを合成した映像データファイルを入力とし，それズを大きくすれば映像は拡大され，サイズを小さくすればを一つの非表示の video 要素に対応づける．映像ビューは映像は縮小される．なお，ビューサイズの変更は映像の縦div 要素で包んだ canvas 要素で実現し，その canvas に対し横比が崩れないように縦横比を保持した制約内でサイズ変て，video 要素の一部分（表示領域）を drawImage メソッド更を可能とする．

により描画することで，映像を画面上に表示する（図 3）．

3） 表示映像のズーム／パン研究協議会における議論のポイントや映像視聴で振り返りたいポイントが，映像ビューに表示されている映像の一部分で，そこをより詳細に見たい場合のために，映像ビュー内の映像をズームインする機能を提供する．
逆に，ズームインしている状態で，映像ビューに表示されている周辺を見たいことがある．そこで，ズームインし初期状態では，映像データファイルに含まれる映像ソースの数だけ canvas 要素を生成し，各映像ソースの全体を一つの canvas へ描画する状態とする．
映像ビューの追加操作が行われた場合は，新しく canvas要素を生成し，指定された映像ソースの範囲を描画する状態にする（図 4）．
2.3.2 表示映像のズーム／パンている際には，映像ビューに表示されている映像をズーム

表示映像のズームとパンは，映像ビューに表示する映像アウト，及びパンする機能を提供する．これらの機能は，ソース内の範囲を変更することで実装する．ズームイン操映像ビューに表示する映像ソースの範囲を変更する機能と

図 1

本システムの映像ビュー表示画面

Figure 1 Multi-videoview in a display© 2018 Information Processing Society of Japan

図 2

映像ビューの追加

Figure 2 Adding a new videoview

554

情報処理学会 インタラクション 2018
IPSJ Interaction 2018

作が行われたら範囲を縮小，ズームアウト操作が行われた

2A07
2018/3/5した ChimeCa Sports[5]などがある．

ら範囲を拡大する（図 5）．パン操作が行われた場合は範囲

MVP と Easy Streaming NIME Multi-angle Editor では，複の位置を移動する（図 6）．なお，video 要素には複数の映数の映像ソースを同期閲覧することができるが，閲覧時に像ソースが含まれているが，範囲の拡大と移動では，各映レイアウトの変更をすることができない．

像ソースをまたがらないようにする（図 7）．

ChimeCa Sports では，複数の映像データファイルを読み込み，音声情報を元に高精度の同期をすることができる特3. 試作長がある．しかし，注目したい部分を切り出して表示する

今回設計したシステムの実現可能性を示すために試作をなどの閲覧を支援する機能はない．

行った．本システムは Web ブラウザ上で動作するように，本研究では，複数の映像を見やすいレイアウトで表示すHTML5，javascript で実装した．動作を確認した Web ブラるために映像ビューの配置変更，サイズ変更を可能とした．

ウザを表 1 に示す．

また，授業映像の視聴に焦点をあて，撮影時に振り返りや4. 関連研究

議論を行うポイントを決めずとも，様々な視点や観点同期したマルチアングルの映像を閲覧できるシステムは，市松らによる MVP[3]，柳沼らによる Easy Streaming NIME
Multi-angle Editor[4]や，ヤマハ・スポーツセンシングが開発で視聴できるように，注目したい部分の抽出や切り出しを行えるようにした．これらの機能を有したマルチアングルの映像を同期閲覧できる動画ビューアはない．

5. おわりに本研究では，同期したマルチアングルの授業映像から，注目したい複数の部分を抽出してマルチビューで閲覧できる動画ビューアの提案，設計，試作した．本ビューアを

図 3

映像ソースの表示方法

Figure 3 Displaying a video source

図 4

映像ビューの追加方法

Figure 4 A operation for adding a new videoview

図 6パン

Figure 6 Panning the image

図 5

ズームイン／ズームアウト

Figure 5 Zooming-in/out on the image© 2018 Information Processing Society of Japan

図 7

表示範囲の移動可能領域

Figure 7 The movable region of a display range555情報処理学会 インタラクション 2018
IPSJ Interaction 2018

表 1

動作環境

Table 1 System requirements
Google Chrome (v63.0.3239.84)
動作確認ブラウザ

Safari (v11.0.2)
Microsoft Edge (v40.15063.674.0)

2A07
2018/3/5

参考文献
[1]

[2]
[3]

[4]

用いることにより，撮影時に議論のポイントを決めずに，振り返りや研究協議会の議論の最中に，様々な観点や観点を反映させた視聴を行うことが期待できる．
今後は，現職教員を対象とした評価実験を行い，本システムの有用性を検証していきたい．さらに，ICT 機器の活[5]中央教育審議会：これからの学校教育を担う教員の資質能力の向上について〜学び合い，高め合う教員育成コミュニティの構築に向けて〜（答申）(2015)
河野義章：『授業研究入門』，図書文化社 (2009)
市松哲，宇田隆哉，伊藤雅仁，田胡和哉，松下温：散在する多視点ビデオ映像を用いたユビキタス網構想，情報処理学会
研究報告，Vol.2003-UBI-1, pp.23-30 (2003)
柳沼良知，古川雅子，山田恒夫：レイアウト編集可能な映像評価ツールの開発，情報処理学会研究報告，Vol.2003-CE-71,pp.21-26 (2003)
株式会社スポーツセンシング(2017)「ChimeCa Sports について」http://www.sportssensing.com/products/video_equip/chimecasports.html（最終確認2017 年 12 月 17 日）

用が苦手な教員も含め，現場の教員が日常的に授業研究を行えるような誰でも簡単に使いやすいインタフェースの検討と改善を行っていきたい．

© 2018 Information Processing Society of Japan556