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

A74
2015/3/5

電 子 黒 板 を 基 幹 と し た ICT 活 用 学 習 環 境 の 構 築比留間雄大†	  小林信輔†	  瀬田川愛実†	  稲葉朋也†	  広津都義†	  高野允佑†
加藤直樹†
概要：本稿では，電子黒板と学習者用端末を用いる学習環境を構成するソフトウェア群（システム）の開発について述べる．本システムでは，一枚の板書面，紙面を基本単位としたデータ交換を軸に，電子黒板ソフトウェアと学習者用端末上で動作するソフトウェアの連携を強化することを目標としている．

Development of the Learning Environment with ICT
Centered on the Interactive Whiteboard
YUDAI HIRUMA† NOBUSUKE KOBAYASHI† AIMI SETAGAWA†TOMOYA INABA† TSUYOSHI HIROTSU† MITSUSUKE TAKANO†NAOKI KATO†
Abstract: This paper describes the development of the software group constituting the learning environment with an interactive
whiteboard and digital devices for learners. This system is targeted to be to enhance the cooperation of an interactive whiteboard
software and software running on digital devices for learners by defining a whiteboard or a digital device surface as a basic unitof data exchange.

1. は じ め にとで学習の個別化をはかることができ，また，子ども同士で相互に学び合う機会が増え，子ども主体の授業が促進さ	  学校現場ではプロジェクターや大型液晶モニタなどの拡れる．この学習者用端末を有効に活用するためのソフトウ

大表示器，書画カメラ，電子黒板や指導者用デジタル教科

ェアも数々製品化されているが，電子黒板などの既存のシ書の導入がはじまり，新しい学びの形があらわれはじめてステムとの連携が弱く，学習環境として一体化が不十分ないる．また文部科学省は学びのイノベ―ション事業[1]等部分が見受けられる．

を通して，児童生徒一人が一台のタブレット端末を持つ学	  本稿では，上記問題点の解消を目標として進めている，習環境の実証研究を進めている．第二期教育振興基本計画

電子黒板と学習者用端末を用いる学習環境を構成するソフ[2]でも，「ICT の活用などによる協働型・双方向型学習トウェア群（以下，本システムと記す）の開発について述の推進」を進めるよう進言しており，情報通信技術

べる．

（ICT : Information and Communication Technology）を活用した学習環境が身近になってきている．

2. シ ス テ ム コ ン セ プ ト

ICT を活用した学習環境で，まず注目される機器が電子	  本システムでは，電子黒板や学習者用端末の表示面に表黒板である．SMART Board，StarBoard，BIGPAD など名示される一枚の板書面（筆記紙面）を基本単位（ページ）

前を挙げればきりがないほど数多くの製品がある．しかしとして扱い，各機器間，各ソフトウェア間の情報交換もこながら，これら既存の製品（ソフトウェア）を実際に利用の単位で行う．たとえばスクロールを可能とすることで，してみると，製品としてより多くの人に興味を持ってもら大きさに制限のない仮想的な板書面（筆記紙面）を基本単うために機能を多くすることや，他のメーカとは違うもの位とすることも可能であるが，この場合，板書やノートテにすることに重点が置かれているため，めったに使わないイクが無秩序になる危険があり，原則一度に表示できる大機能がメニューに並び使い難くなっていたり，その一方できさを基本単位にするべきと考えた．

他メーカの製品で評判の良い機能が盛り込まれていなかっ	  既存の製品では，この基本単位がオープンになっているたり，教育用として十分に洗練されていない部分が多い．

ものが無いため，別会社の製品間，ときには同一会社の製	  また，今まさに注目の的となっている機器が，先にも記品間でさえも情報交換ができない問題がある．たとえば，した児童・生徒一人が一台を持つタブレット端末（学習者電子黒板ソフトウェアで書き上げた板書面を学習者用端末用端末）である．一人一人が一台のコンピュータを持つこに送るためには，画面をキャプチャして画像ファイルとして保存した後に，学習者用端末を連携するソフトウェアで† 東京学芸大学
Tokyo Gakugei University© 2015 Information Processing Society of Japan

そのファイルを選択するといった，手数の多い操作をしなければならない．なお，ページを基本単位とすることで，434学習環境として十分な情報交換が可能であるかを検証する

電子黒板上で提示する情報を一貫して扱えるように，webことも本研究の目的の一つである．

ブラウザで資料を提示した状態などのデスクトップ画面や，	  このページの表現はオブジェクトの集合として表現する．

画像データファイル，板書面の任意の一部分を，新たなペこれは１枚のラスタ画像データではなく，たとえば手書きージとして取り込む機能を提供する．また，学習者用端末の筆跡はそれを表す筆点列の集合として表現することを意の紙面（後述するデジタルノートのページ）の取り込みを味する．このことで，教育においてその有用性が示されて可能にする．複数枚の画像の取り込みや数十人の児童生徒いる筆跡を書いた順番に表示する（筆跡再生）機能や，一の端末の紙面を受け取った際には，単なる線形的なページ枚のページ上に複数の画像を自由に配置・編集することが管理だけでは面倒なことがある（取り込んだ後のページか可能になる．

ら，前のページヘの移動をしようとすると，何十ページも3. 詳 細 設 計

戻ることが必要になるなど）．そこで一度に多くのページが生成された場合，それを自動でグループ化し，たとえば3.1 電 子 黒 板 ソ フ ト ウ ェ ア

ページ移動において 1 グループを１ページとして扱うこと	  電子黒板ソフトウェアは，大型表示面へのペン入力やタを可能とする．

ッチ入力が可能なハードウェアを，学習環境の一つとして	  学習者用端末の紙面を取り込んだ場合には，複数の（児構成するソフトウェアである（図 1）．

童生徒の）紙面を同時に表示して，比較しながら授業を進	  先のコンセプトに従い，電子黒板の表示面と同じ大きさめることがある．複数の画像（を取り込んだページ）を同の板書面（ページ）を持ち，新しい板書をしたい場合は新時に表示したい場合なども含めて一般化するために，任意たなページを生成する，前後のページに移動する等の機能の複数ページを表示する機能を提供する．もちろん，表示を提供する．ノートを模倣するソフトウェアでは当然の機した状態を，新たなページとすることを可能とする．

能であるが，製品化されている電子黒板ソフトウェアでこ	  一つの授業内で利用したページの集合は，授業開始時にの機能を有しているものは少ない．

指定する時程や教科などの属性と共に保存し，後日，閲覧	  ページは後述するデジタルノートや指差しインタフェーや追記などの再利用時の検索を容易にする（図２）．このスのために学習者用端末に送ることを可能にする．加えて，ような属性は，時間割情報を持たせ，自動的に保存するものが多い．しかし，特に小学校などでは，突然教科が変わったりすることもあるため，授業開始時に簡単に指定する方式とした（図３）．
3.2 学 習 者 用 端 末 ソ フ ト ウ ェ ア
3.2.1 デジタル教科書ビューア	  教育の情報化ビジョン[3]では，学習者向けデジタル教科書の必要性を強く打ち出している．それを受け，文部科学省は，学びのイノベーション事業で学習者用デジタル教科書・教材の在り方（以下「在り方」）を示し，現在，こ図 1	  電子黒板の利用シーンの「在り方」をふまえた学習者用デジタル教科書の標準化を目指した取り組みを進めている．今後，文科省の事業から報告される標準化の指針と，各教科書出版社が来年度春に発売する学習者用デジタル教科書を元に，標準化が進められていくことが予想される．	  本研究では，この標準化に対する一つの提起という側面も持ちながら，特に教科書への書き込み活動に着目し，そ図 2	  過去の板面を開く際のダイアログの活動に対応できる学習者用デジタル教科書を提案し，ビューアの開発を進めている．	  デジタル教科書の標準化は始まったばかりで，データフォーマットさえ決まりがない段階である．文科省事業や来春発売されるデジタル教科書では EPUB3 を採用するものが多いため，本研究でも EPUB3 を採用する．つまり，デジタル教科書ビューアは基本的には EPUB ビューアとなる．デジタル教科書の紙面をリフローレイアウトで表現す

図 3	  利用開始時の属性入力ダイアログ© 2015 Information Processing Society of Japan

るか，固定レイアウトで表現するかも様々なところで議論

435

がされているところである．本研究では，紙の教科書の紙デジタル教科書では書き込みを非表示にすることができる．

面をそのまま再現する固定レイアウトを前提とする．このまた，何度でも容易に書き換えることができるため，試行

場合，教科書紙面の 1 ページを一つの画像で表現すること錯誤が可能になり，多様な考え方を児童生徒自身が実践すも可能であるが，次に述べる機能を実現するために，htmlることができる．

要素，svg 要素の集合として表現する．	  また，紙面上にあるコンテンツ要素を元にノートや発表	  教科書への書き込み活動に対応するための機能として，資料を作ることを可能とするために，そのような作業をす

教科書紙面上に書き込むための手書きアノテーション機能，るためのソフトウェアへ，選択した部分を渡す機能（API）

紙面の適当な部分に余白を生成するスペーシング機能（図を提供する．

４），紙面の一部分だけを取り込んだ新たなページを生成	  加えて，コンテンツリスト表示（本棚機能）では，コンするポップアップ機能（図５）を提供する．紙の教科書へテンツに教科書独自の情報を組み込む方式を提案するととの書き込みは一度書き込むと元に戻すのは困難であるが，もに，その情報を読み取って教科や学年ごとの分類表示や，章順の並び替え表示を可能とする．
3.2.2 デジタルノート	  デジタル教科書ビューアは教科書紙面上に書き込む活動を前提とした設計としているが，学習にノートが不要になるわけではない．さらに，教科書とノートを共にデジタル化することで，先にも述べたように教科書紙面上のコンテンツ要素を利用したノート作り（図６）が容易になることから，本研究では学習者用端末の表示面をノートの紙面とみたてるデジタルノートの開発を進めている．	  電子黒板ソフトウェアと同様に，ページを基本とした紙図 4 スペーシング機能面を持ち，データ形式も電子黒板とのデータ交換を容易とするために同形式とする．	  一般的なノートツールの機能に加えて，デジタルノートの紙面（ページ）を電子黒板へ送る機能，逆に電子黒板から送られてくる板書面をページとして取り込む機能を提供する．これらの機能によって，たとえば教師が電子黒板上で問いを板書し，それを学習者用端末に送り，児童生徒はその上に解答を書き込み，電子黒板に戻す．教師は戻され

図 5 ポップアップ機能

た解答を用いて，授業を展開するといったことが可能になる．	  また，デジタル教科書からコンテンツ要素をペーストしてノート作りをしたときには，そのページが教科書のどの部分を使った学習であるかを復習時など後で容易に知ることができるように，コンテンツ要素の教科書内の位置へのリンクを自動的に張り，そこを開く機能を提供する．
3.3 授 業 を 支 援 す る ツ ー ル	  前節までに述べた基本的なソフトウェアに加え，授業の図 6	  デジタルノートの利用シーン進行をスムーズにするためのツールについて述べる．
3.3.1 指差しインタフェース	  指差しインタフェースは，教師が電子黒板上で提示しているものに対する児童生徒の考えを表す指差し（位置）を，教師と児童生徒全員で共有することで，自分の考えと友達の考えを比較し，様々な考え方があることを認めていく，協働的な学習を支援することを目指したものである[4]．	  具体的には，電子黒板で提示しているもの（ページ）を学習者用端末に送り表示する．学習者がそれに対してタッ

図 7	  指差しインタフェースの利用シーン© 2015 Information Processing Society of Japan

チ操作を行うと，電子黒板にタッチした位置を表すポイン

436

タを表示することで実現する（図７）．には非常に時間のかかる作業となってしまう．	  加えて，予め指定した範囲にいくつの指差しが行われて	  本研究では，上記の操作を容易にするソフトウェアとしいるかを表示する投票機能を提供する．この機能によって，てフォトセレクタを開発している（図９）．SD カードや学習者の意見を容易にグループ化して把握することができ

USB 経由での半自動的な画像ファイル取り込み，サムネる．いわゆるクリッカーと同等の機能であるが，イル表示からの画像選択（グループ化），グループ内でのクリッカーが番号等のラベルを選択肢とすることに対し二順序変更，その順序での表示を可能とする．加えて，この次元的な位置を選択肢にできること，教師が授業進行の中順番で電子黒板のページへの取り込みを可能とする．

で作り上げた板書をそのまま選択肢にできることなどで違いがある．

4. 実 装3.3.2 関数グラフ描画インタフェース	  前章で記したソフトウェアを Microsoft Windows をター	  関数グラフ描画インタフェースは，電子黒板上に手書き

ゲ ッ ト 環 境 と し て 実 装 し た ． 教 育 現 場 で は ， Microsoftで概形を描くだけで，整形された一次関数と二次関数のグWindows，iOS，OSX など様々な OS を搭載したコンピュラフを描くことを可能とするものである（図８）．変化のータが導入されているが，特に電子黒板を制御する PC，割合の補正や位置の移動なども，キーボードを使うことな

いわゆる教卓用 PC には Microsoft Windows が選択される

く，スタイラスペンを用いた手書き，もしくは指によるタことがほとんどのためである．指差しインタフェースと関ッチ操作だけで可能とし，電子黒板に向かったままグラフ数グラフ描画インタフェースは，JavaScript ベースで開発を書き上げられる点が特長である．

し，web ベースアプリケーションとして実装した．

3.3.3 フォトセレクタ

5. お わ り に	  小学校の授業などでは，児童がデジカメを使って，写真を取る活動が見られる．たとえば，理科の実験の様子を班ごとに撮影し，その写真を元に実験結果の説明を行うなどである．時間に余裕が有る場合や考えをまとめて発表する
ことに重きを置く授業では，児童がプレゼンテーションソフトなどにまとめることを行うが，そうでない場合には，教師がデジカメを集め，写真画像を児童の指示に従って選んで表示し，児童が説明をするなどの手順を踏む．	  この手順が意外と面倒である．複数枚の写真画像から数枚を選んだ上で任意の順番に表示する，さらには，それをグループごとに行う．このような操作は，PC に慣れた者であれば，ファイラとフォトビューア等のソフトウェアを組み合わせて行うことができるが，PC に慣れていない者	  本稿では，電子黒板と学習者用端末を用いる学習環境を構成するソフトウェアの開発について述べた．本システム
では，一枚の板書面，筆記紙面（ページ）を基本単位としたデータ交換を軸に，電子黒板ソフトウェアと学習者用端末上で動作するソフトウェアの連携強化を目標とした．	  現状はまだ開発途上であり，特にページのデータフォーマットや通信方式の詳細な検討を行っていない点，教育実習等での試用は始めたものの教育現場での現実的な評価が行えていない点などの課題があり，研究としての成果は十分に出せていない．今後，これらの課題に対する研究を進め，教育への ICT 活用環境の構築に貢献できる知見を創出していきたい．

謝辞	  本研究の一部は，科学研究費・基盤（C）25330228 の助成による．

参考文献

図 8 手書きによる関数グラフの描画

1) 学びのイノベーション事業実証検証報告書，文部科学省
2) 第二期教育振興基本計画，文部科学省（2013/6/14）
3) 教育の情報化ビジョン～21 世紀にふさわしい学びと学校の創造を目指して～，文部科学省（2011.4.28）
4) 稲葉 朋也, 加藤 直樹：板書や掲示物を場とした協働的な学習を支援する指差しインタフェース，ヒューマンインタフェースシ
ンポジウム 2014 論文集，pp.193-196 (2014.9)※SMART Board は SMART Technologies ULC の登録商標です．
StarBoard は日立ソフトウェアエンジニアリング株式会社の登録商標です．BIG PAD はシャープ株式会社の登録商標です.
※図 4,5 の教科書紙面は，東京書籍新しい算数６年上 p.34 を元に作成したものです．

図 9	  フォトセレクタによる写真選択© 2015 Information Processing Society of Japan437