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

2B-48
2020/3/9

注目箇所の把握を目的とした授業資料への書き込みの可視化
印部太智1,a)

丸山一貴1,b)

概要：教育機関への ICT 機器の導入や LMS を活用する動きの中で，教員が授業の際に用いる資料 (以下，授業資料) を公開し，学習者は授業資料を手元で閲覧しながら授業を受ける場面が想定される．学習者は教員が説明している授業資料が手元にある場合には，その授業資料に対して書き込みを行なう．そのため，教員が説明している際の授業資料に対する書き込みを可視化することで，説明中に学習者が着目している位置を推定することが可能になると考えた．現在までに学習者が閲覧している授業資料のページを可視化した研究はあるが，具体的に授業資料のページ中のどこに書き込んだのかを可視化した研究はない．そのため，本研究では，学習者が授業資料に対して行なった書き込みをリアルタイムに教員に可視化する手法を提案する．実験から，授業資料に対してハイライトを追加する単純なフィードバック手法では，学習者の注目箇所を授業時間外に分析することは可能であるが，リアルタイムに確認することは難しいことが判明した．

1. はじめにを提示することで，教員が注目箇所を把握する手法を提案する．教員は，授業中に補足説明や要点のまとめ，授業の近年，教育機関への ICT 機器導入の動きが高まって進行を管理することが可能になる．学習者の注目箇所を把いる. 大学教育においては Moodle や manaba に代表され握するために，授業資料中のテキストにヒートマップで段る LMS(Learning Management System) の導入が進んでい階的に色分けされたハイライトを提示する．教員は授業資る [1]．こういった状況を活用し，教員は LMS 上に授業資料として説明用のスライドを用意していることを前提と料の公開を行なう．学習者は公開された授業資料を，手元する．の紙や ICT 機器上の画面で閲覧しながら授業を受ける．このような授業が行なわれる場合，学習者は授業中に教員の2. 関連研究説明を聞きながら，手元にある授業資料に対して，文字に長谷川ら [5] は，授業中に双方向性を高めることを目的

よるメモや重要単語への下線を書き込むことが想定される．

として，教員に学習者の発言をフィードバックする手法を授業中のノートに対して，下線や通常の文字より大きい提案している．この研究では，説明している最中の授業資文字などの追加情報を多く付与する学習者は事後の穴埋め

料上に他の学習者にも見える形にコメントを提示することテストや記述問題でスコアが高い傾向にある [2]．そのたで，学習者の発言する敷居を下げている．学習者が授業中め，授業資料に対する書き込みは学習者の理解度を測る指に注目している箇所が可視化されるという点は本研究と標の 1 つになると考えられる．さらに，学習者が教員の説一致する．しかし，本研究では，学習者の書き込みを集約

明中に資料に書き込みを行なう場合，説明を聞きながら注して資料中にハイライトするため，教員に対してフィード目している箇所であると言える．

バックされる情報が異なる．

現在まで，学習者が授業資料のどのページを閲覧してい授業の演習中に筆記内容を可視化する研究は多く存在す

るのかリアルタイムに可視化した研究 [3] や，授業終了後る [6][7]．これらの研究では，学習者の筆記内容をそのまにハンドアウトに対する書き込みを分析した研究 [4] は存

ま可視化している．教員は授業中に，授業内容を学習者に在する．しかし，授業中に学習者が授業資料のどこに書き教授する以外の活動が増えてしまう．本研究は，教員が説込みを行なったのか可視化している研究は存在しない．

明している授業資料のテキストにハイライトをつける．そそこで本研究では，学習者が説明中に注目している箇所のため教員の負担は，筆記内容を直接把握するよりも少ない．しかし，教員が学習者の書き込みを把握するタイミン1a)b)

明星大学 情報学部 情報学科
16j5027@stu.meisei-u.ac.jp
kazutaka.maruyama@meisei-u.ac.jp© 2020 Information Processing Society of Japan

グが，説明中と演習中とでは大きく内容が異なるため，教員の負担について厳密に比較することはできない．

660

情報処理学会 インタラクション 2020
IPSJ Interaction 20202B-48
2020/3/9

教員にフィードバック
教員

集約して ヒートマップ化
図 2 学習者の書き込み

学習者

学習者

・・・

学習者の書き込みを収集• RSはRとSがこの順で出現することを示す(連接)学習者• R | SはRまたはSが出現することを示す(選択)• R * はRが0回以上繰り返して出現することを示す(閉包)図 1 システムのイメージ図
図 3 教員に対するフィードバック例

発表者に聴衆がフィードバックを行なう研究 [8] が存在する．この研究では，即時的にアノテーションを付与して• RSはRとSがこの順で出現することを示す(連接)いる．発表者にフィードバックする内容は，本研究と同様• R | SはRまたはSが出現することを示す(選択)にハイライトである．また，聴衆が発表者に行なうフィー
ドバックのレベルを「即時的」，「随時的」，「遅延的」の 3段階に分けている，本研究でも今後，学習者から得られる• R * はRが0回以上繰り返して出現することを示す(閉包)図 4

想定した箇所 (「連接」，「選択」) に書き込みが少ない例

フィードバックのレベルを段階分けする必要があると考える．

者がその位置に注目しているかという情報である．図 2 の松本ら [9] は manaba と respon を授業中に活用する方法

ような書き込みを複数の学習者が行なった情報が得られたを提案している．この研究では，respon を用いたアンケー

場合，それらを合算して図 3 のような形で，書き込みが行

ト機能によって学習者の授業理解度を把握している．教員

なわれた文字をハイライトして提示する．この時ハイライが任意のタイミングで，学習者にアンケートを実施するた

トされている色はそこに書き込んだ人数に応じて，ヒートめ，その時注目していた内容を把握することが可能である

マップのように人数が多ければ赤色，少なければ青色になといえる．本研究では，学習者が書き込んだものをフィーるように決められる．

ドバックし，教員は説明を行なっている最中に注目している箇所を把握できる．

3. 提案手法
本研究は図 1 に示すように，学習者の書き込みを収集し，それらを集約してヒートマップ化し，教員にフィードバックする．
学習者が授業資料中に書き込みを行なった場合，その書これにより，教員は説明中のページ上で学習者の注目箇所を把握することができる．例えば，図 4 は図 3 と比べて連接と選択への学習者の書き込みが少ないと判断できる．
このような場合，教員は書き込みが少ないと感じた箇所に対して，補足説明や用語の説明を追加で行なうことが可能になる．

4. 実装

き込みを取得する．この時，取得した書き込みに関連する提案手法を実現するために，HTML/CSS/JavaScript を文字を抽出する．そして，取得した書き込みと抽出した文用いた Web アプリケーションとして実現した．これらを字を関連付けて，1 つの情報として教員に送信する．メモ用いた理由は，学習者それぞれが個人の ICT 機器を用いたや内容を補足する字が書き込まれた場合，学習者はその字場合に OS による制約を排除するためである．に関連する文字列に引出し線を引くことで，情報を関連付けることが想定される．そのような引出し線が引かれた位置と関連する文字列を取得し，可視化の対象とする．

4.1 学習者サイド
今回，授業資料は PDF 形式のデータに限定する．その本研究では，議論を簡単にするために，1 行の文字に対ため，PDF 形式のデータを表示するために PDF.js を用する下線や囲みを教員にフィードバックする．図 2 のよういた．また，書き込みを行なうために Fabric.js を用いてなものがあった場合，「連接」，「選択」，「0 回以上」，「閉包」いる．これら 2 つはいずれも HTML5 の Canvas API をの文字が取得されて教員に送信される．

用いている．そのため，PDF.js 用の Canvas レイヤーと教員に対してフィードバックを行なうのは，何人の学習© 2020 Information Processing Society of Japan

Fabric.js 用の Canvas レイヤーをそれぞれ用意し，PDF が661

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

2B-48
2020/3/9図 6

教員側の画面

図 5 学習者側の画面表示される範囲に Fabric.js 用のレイヤーを重ね合わせることで，授業資料上で書き込みを行なえるようにしている．
学習者側の画面を図 5 に示す．学習者側の画面では，水色の枠で囲まれている箇所に，ペンの色と太さを変更する
ペン機能，Canvas 上に書き込みを行なわず既にある書き

図 7

込みの移動や拡大を可能にする選択機能，書き込みを選択

リプレイ機能の画面し削除する消しゴム機能，ページ移動を行なう機能を実装

定せず，表示する情報は学習者側で書き込んだものに関連している．消しゴム機能とページ移動を行なう機能以外するテキスト位置のハイライトである．また，水色の枠では，書き込みを行なう学習者のために実装したが，フィー囲まれているところは，1 つは学習側と同様のページ移動ドバックには影響しない．

を行なう機能である．もう 1 つは，ハイライトを決定する

教員にフィードバックするための処理は，学習者が，資ために必要な人数の上限値を決定する機能である．なにも料中にペンやマウスなどで書き込みを行なったタイミング設定しない場合は，授業に参加している学習者全体の人数で開始する．学習者の書き込みに関連する文字を取得するが割り当てられる．説明している箇所によっては，習熟度方法として，PDF ファイルが持つ文字情報を扱う．PDF.jsが高い学習者に向けた内容に触れることも考えらえる．そでは，文字情報が座標情報と共に取得できる．そのため，のような箇所については，全ての学習者の書き込みを把握

PDF.js で取得した文字列から学習者の書き込みと座標がする必要はなく，教員側が決めた人数以上の書き込みは判一致する文字を抽出する．書き込み情報として，「学習者断材料にする必要がないといえる．フィードバックする時の情報」，「座標情報」，「抽出した文字」，「書き込んだペーは，上限値以上の人数の学習者が書き込んだ場合，ハイラ

ジ番号」，「書き込まれた時間」を 1 つにまとめてサーバー

イトは赤色になる．そのため上限値をページごとに任意にに送信する．

設定できるようにしている．上限値はページをまたいで設定することが可能である．

4.2 サーバー
サーバーは Node.js を用いて構築し，学習者が書き込ん4.4 リプレイ機能だ情報を教員側に送信するルーティング制御処理を実現しリプレイ機能を、授業時間外に教員が行なった授業の振ている．サーバーでは受信した書き込み情報の保存と集約

り返りを行なう場合を想定し作成した (図 7)，また，学習を行なう．

者自身が授業内容の振り返りを行なうことも想定し，学習サーバーは，学習者が送信した書き込みに関する情報を受信したタイミングで教員にフィードバックする情報を分者自身がその時間に行なった書き込みを取得することも可能とした．

析する．学習者が書き込んだ文字に対してすでに書き込みリプレイ機能の画面では，水色の枠の中の赤色の部分に，を行なっている学習者の数を数える．そこから文字をハイ

日付と時間を入力してデータ取得ボタンを押すことで，学ライトするための色を決定する．

習者の書き込み情報をサーバーから取得する．学習者個人分析した情報に基づいて，文字ごとに決定した色と分析したページ番号を教員側に送信する．

が振り返りを行なう場合には，その学習者の書き込みのみを取得する．取得した後は，黒枠で囲んでいるスライダーと時間入力機能を使って 1 秒単位で時間操作を行なう．

4.3 教員サイド

この時，そのページについて授業終了時刻まで見ていき，教員に対するフィードバックはサーバーから分析結果を教員側に提示される情報を確認することができるようにす受信したタイミングで発生する．図 6 は教員側の画面の一るため，ページ移動には対応していない．そのため，ペー例である．教員側の画面では，書き込みを行なうことは想ジの移動は手動で行なうことになる．

© 2020 Information Processing Society of Japan662

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

2B-48
2020/3/9

5. 実験
模擬授業形式で提案手法について評価実験を行なった．
授業資料は筆者が作成したものを用い，教員役も筆者が担当して授業資料の説明を行なった．
実験協力者は，大学 4 年生 2 名，大学院生 2 名の計 4 名である．この時，実験協力者のうち 2 名がタブレットを使用し，残り 2 名が PC を使用した，授業資料は，表紙、参考文献を合わせて 21 ページあるスライド形式のものを用いた．実験にかかった時間は約 26 分であった．また、本システムとは別に授業資料を表示するためのツールを用いている．
図 10 説明終了時の教員側の画面状態

6. 結果と考察
実験を行なった結果をリプレイ機能を用いて詳細に分析際に，ここに書き込みを行なった実験協力者は 2 名のみでしていく．あるページについて筆者が説明を行なっているあった．原因として，筆者が文章を読むような説明をして最中の画面の一部を図 8 に示す．このページ中で筆者が注いたため，実験協力者によっては用語よりも文章に線を引目してほしい箇所は，「連接」，「選択」，「閉包」である．こいてしまっていた可能性がある．次の説明に移行した理由の時，注目してほしい箇所に書き込みを行なっている実験としては，注目箇所付近にハイライトが存在するため，実協力者は 1 名だけである．そのため，ハイライトは水色が際に文字が存在する場所まで確認を行なわなず，書き込み多くなっている．リプレイ機能から，この時もう 1 名の実が行なわれていると判断したためである．このことから．

験協力者が連接に書き込みを行なっており，直後に選択や教員が詳しい書き込み位置を把握するには，説明してる箇閉包に対しても書き込みを行なっていることがわかってい所について，システムに一定以上の意識を向ける必要がある．図 9 は，筆者が説明を終えた後の画面の一部である．

ると考える．筆者の主観ではあるが，ヒートマップが説明

この時，筆者が注目してほしい箇所に書き込みを行なってしているページ全体に表示されている時，ヒートマップがいる実験協力者は 3 名である．そのため筆者は，説明を十うっとしいと感じてしまう場面もあり，書き込みの把握に分に行なったと判断し，次のページの説明に移った． この集中できない要因であったと推察される．また，今回の実結果から，図 9 では，実験協力者の注目箇所と筆者が想定

験では，授業資料の説明には別のツールを用いているため，した重要箇所が一致しているか把握することに成功してい本システムの操作と説明用のツールの両方を操作する必要るため，手法として有効に作用したと判断できる．

があったことも書き込みの把握に集中できない要因の 1 つ

しかし，多くのページでは，筆者が注目してほしい箇所であると考えられる．

について書き込みを行なった人数が少ない場合でも，筆者筆者が上限値を設定したのは最初の 1 ページのみで，他は説明を別の箇所に移行していた．図 10 は筆者が注目しのページでは説明しながら上限値を変更することは困難でてほしい箇所に書き込みが少ない場合でも，次の説明に移あった．しかし，上限値の設定に関しては，教員が各ペー行した一例である．このページで筆者が注目してほしい箇

ジについて，ある程度説明する内容を決めることができる所は，「受理する」，「受理しない」の太字部分である．実ため，それぞれのページについて上限値を事前に決定することで，対策が可能であるといえる．

7. まとめ本研究では，学習者が授業資料に対して書き込んだ位置を可視化することで，教員に授業中の学習者の注目度を示
図 8 教員が説明開始から 1 分経過

すフィードバック手法を提案した．実験から，教員が説明している最中に学習者が注目している箇所をフィードバックすることで，教員がリアルタイムに学習者の注目箇所を把握することは可能であった．一方で，学習者の書き込みがどこの位置にあるのかまで授業中に把握し，教員がその場で注目箇所について追加の説明を行なうことは，資料中

図 9

図 8 から 1 分 30 秒経過© 2020 Information Processing Society of Japanにハイライトを提示する方法のみでは，難しいことがわ

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

2B-48
2020/3/9

かった．教員は，学習者が資料中に書き込む人数を見積もることが可能だと考えている．その前提で，資料中にハイ[6]ライトをしないフィードバックが考えられる．上限値を決定する機能があるため，教員が想定した人数以上の学習者が書き込んだかどうか判断するためにも使うことができ[7]る．実験では，筆者は注目してほしい箇所を太字にしていた．今後は，太字の箇所に一定以上の書き込みがあった場合に，次の書き込みに移行するサインを提示する方法を検[8]討していく．
授業時間外に学習者の書き込み状況を振り返るためにリプレイ機能を実装した．これにより書き込みを振り返ることが容易となったため，授業時間外の振り返りについての[9]

ウム論文集，Vol. 2019, pp. 176–183, 2019.
杉原太郎，三浦元喜，國藤進,Practicing on Stage: デジタル
ペンシステムによる授業過程の見える化とインタラクションの増加，情報処理学会インタラクション，pp. 135–142,2010.
角方寛介，加藤直樹，山崎謙介, ほか, タブレット PC を用いた他の生徒のノートを覗ける電子ノートシステムの開発，情報処理学会研究報告ヒューマンコンピュータインタ
ラクション (HCI)， Vol. 2009, No. 10, pp. 1–6, 2009.
井上良太，白松俊，大囿忠親，新谷虎松, ほか, 発表中の資料へのフィードバックに基づくインタラクティブプレゼン
テーションシステムの実現，情報処理学会論文誌，Vol. 56,
No. 10, pp. 2011–2021, 2015.
松本章代，金菱清, 教養科目における manaba および respon の活用，東北学院大学教育研究所報告集， Vol. 19,pp. 33–47, 2019.

評価を述べていく．授業時間外であれば，教員は学習者が具体的に書き込んだ位置を把握することが容易である．ここで教員は授業時間外に 2 つのことを確認できる．1 つは，説明中のヒートマップの変化である．教員が説明している最中のヒートマップを再現可能であるため，教員はどの順番で学習者に内容が伝わっているのか把握できる．そこから教員は，伝え方の改善を行なうことが可能になる．もう1 つは，説明後のヒートマップの状態である．教員が理解してもらいたい箇所に学習者が書き込みを行なっているかどうか判断できる．そのため，教員は説明上の不備を確認でき，必要に応じて資料を修正することが可能になる．
学習者が文字を書き込んだ場合について想定する必要がある．学習者が文字を書き込んだ場合について，長谷川ら [5] のように書き込みを手書き文字認識した上で授業資料中にコメントで流す方法が考えられる．しかし，教員が説明中に流れたコメント読むことができるのかという問題もある．そのため，文字を書き込んだ位置のみを表示し，書き込み内容自体は別の項目として列挙するという方法
や，教員があらかじめ想定した書き込みをページごとに挙げておき，それらの文字を段階的に色分けして表示する方法が考えられる．
今後，文字を段階的に色分けして表示する方法で検討していきたい．
参考文献
[1]
[2]

[3]

[4]

[5]

大学 ICT 推進協議会, 高等教育機関における ICT の利活用に関する調査研究結果報告, 2019.
齋藤ひとみ，源田雅裕, ノートテイキングにおける方略使用の効果に関する検討，日本教育工学会論文誌，Vol. 31,
No. Suppl., pp. 197–200, 2008.
Shimada, A., Konomi, S. and Ogata, H., Real-timelearning analytics system for improvement of on-site
lectures,Interactive Technology and Smart Education,
Vol. 15, No. 4, pp. 314–331, 2018.
足立真乙，中山実，梶井芳明, 有用なハンドアウト作成の評価観点に関する検討，日本教育工学会論文誌，Vol. 40,No. 4, pp. 357–365, 2017.
長谷川達人，森朝春, ほか, 双方向授業の実現に向けたリア
ルタイムコメントスクロールシステム，情報教育シンポジ© 2020 Information Processing Society of Japan664