WISS 2015

Web 技術を活用した柔軟でオープンなディジタルペン筆記共有基盤
三浦 元喜 ∗
概要. これまで我々は，授業内でのコミュニケーションを拡張することを目的として，アノト方式のディジタルペンを使用した筆記共有システム AirTransNote[2] を構築してきた．近年では，教育現場においてもタブレットが普及しつつあり，我々が推進してきた筆記共有に基づく学習活動においても，他者の筆記を参照したり，個別のフィードバックを得たりするためのデバイスとして有効に活用できると考えられる．しかし，タブレットの導入時期や機材選定の判断によって，様々な機種や OS が混在する場合があるため，それらにできるだけ統一的に対応できることが望ましい．そこで我々は，柔軟でオープンな Web 技術を活用することにより，Web ブラウザでリアルタイム性の高い筆記共有が行えるシステム基盤を構築した．Web フ
レームワーク Meteor で作成した筆記共有サイトに対して，ストリーミング対応ディジタルペンの筆記情報を逐次送信することによって，サーバに接続している複数の Web クライアントが筆記をリアルタイムに更新することが可能になる．

1

はじめに教育の情報化が浸透し，一般的な教室においてタブレットやノート PC，スマートフォンなどのディジタル機器を学習者が使用する機会が増えている．これらのディジタル機器は，ディスプレイに教材や講義資料を表示することができたり，教師からのフィードバックを提示することができるため有用性が高い．
こうしたディジタル機器やデバイスは，レスポンスアナライザのように選択的な応答を返したり，データを整理するのには適しているが，従来の授業で主に行われてきた紙に書く／描くことによる学習活動との親和性はそれほど高くない．
紙に書く／描くことによる活動を，学習者に与える負担を最小限にしつつ，取り込み集約する方法として，ディジタルペンによる方法が一般的である[4, 1, 2]．アノト方式のディジタルペンには通常，ディスプレイは付属していないため，学習者が他者の筆記や，筆記に対するフィードバックを参照することはできない．このような参照機能は，近年浸透しているタブレットやノート PC，スマートフォンなどのデバイスを利用することで実現できる．しかし，学校に導入されるタブレットの機種や OS は様々である．そのため，それらのデバイスを筆記参照に活用したいと考えた場合，特定の機種や OS 向けのシステムを構築するよりも，できるだけ統一的に対応可能なシステムのほうが活用の幅が広がるため望ましい．
そこで我々は，柔軟でオープンな Web 技術を活用することにより，リアルタイムな筆記共有が行えるシステム基盤を構築した．
Copyright is held by the author(s).
∗九州工業大学 基礎科学研究系

2

Web 技術を活用することの利点

筆記共有システムを，HTML5 をはじめとするWeb 技術を活用して構築することの利点として，以下が挙げられる．

• 様々な機種やハードウェア，OS で動作させることができるため，動作環境を選ばない．

• Web ブラウザさえあれば，専用のソフトウェアインストールが不要で，URL をひらくだけで利用できるため導入のための敷居が低い．
これまで，我々は遠隔講義を対象とした筆記共有システム WebATN[3] を構築し，上記の利点による有益性を十分に活用してきた．しかしながら，
WebATN では筆記の更新が polling に基づくものであり，また利用していたディジタルペンは学習者が送信チェックボックスをチェックしてから送信を開始するタイプであったため，リアルタイム性に乏しかった．
我々は筆記共有によるアウェアネスの効果を最大限に高めるため，ストリーミングに対応したディジタルペンを使用し，かつ WebSocket を用いてサーバ側の更新をリアルタイムにクライアントに通知する動作を実現する．これにより，従来必要であった，筆記を一旦中断して送信作業を行うための意識の切り替えが不要になるとともに，書いている状況が即座に Web クライアントに反映されるため，専用ソフトウェアに近いインタフェースを Web ブラウザ上で提供できるようになった．

3

実装

我々は，基本的な筆記表示・共有の仕組みを，リアクティブな Web サイトを簡単な記述で構成可能

WISS 2015

構では，ディジタルペンの座標が更新されるたびに，DDP を用いてサーバに接続し，新しい座標を追加する．すると，Meteor がそれを検知し，DDP のメッセージを接続中のクライアントに通知する．これにより，ディジタルペンで書いている内容 (図 1)が即座に，接続しているクライアントの Web ブラウザに表示される (図 2)．ストロークの完了（ペンUp）を待たずに筆記が更新されるため，遠隔から筆記を参照しているときにも，どこに何を追記しているのかがわかりやすい．Meteor は多くのモダンなWeb ブラウザに対応しているため，PC に限らず，AndroidOS や iOS を搭載したタブレットやスマートフォンからも接続し，筆記をリアルタイムに確認することが可能となる．
図 1. ストリーミング対応ディジタルペンによる記入

4

まとめ

複数のディジタルペンの筆記をリアルタイムにサーバに送信し，かつ Web ブラウザ上にリアルタイムに描画することのできるシステム基盤を構築した．
Web 技術を利用しているため多様なデバイスに対応し，柔軟性や拡張性に優れている．また WebSocketを用いてサーバ側からクライアントの表示を更新するため，専用ソフトウェアに近い振る舞いを提供できる．

謝辞
本研究の一部は公益財団法人電気通信普及財団および JSPS 科研費（課題番号 15K00485）の支援によるものです．
図 2. webatn.meteor.com を複数のブラウザで閲覧

な Web フレームワーク Meteor1 で作成した．Meteor は，Node.js を基盤とする Web フレームワークであり，サーバ側の情報が変更されたときに WebSocket を用いてクライアント側の表示を自動的に更新する仕組みが備わっている．またデータベース機能 (MongoDB2 ) やテンプレート機能が同梱されており，導入操作が簡潔で，シンプルな記法で Webアプリケーションを記述できるという特徴がある．
作成した筆記共有サイト (webatn.meteor.com)
に対して，大日本印刷が提供しているアプリケーション開発用 SDK（Streaming SDK for DSPD）を用いてストリーミング対応ディジタルペンの筆記情報を逐次送信する機構を作成した．Meteor では，クライアントがサーバに接続し，MongoDB にデータを追加したり，サーバがクライアントに最新のデータを提供するための DDP (Distributed Data Protocol)と呼ばれるプロトコルを規定している．作成した機
1
2

https://www.meteor.com/
https://www.mongodb.org/

参考文献[1] N. Masahiro and K. Takeshi. Understanding theFeatures of Digital Pen Use in Initial Introductory Lessons. In Proceedings of the 18th International Conference on Computers in Education. Putrajaya, Malaysia: Asia-Pacific Societyfor Computers in Education. Retrieved August,2013.
[2] M. Miura, T. Sugihara, and S. Kunifuji. Improvement of Digital Pen Learning System for Daily
Use in Classrooms. Educational Technology Research, 34:49–57, Oct. 2011.
[3] 三浦 元喜. ディジタルペンによる同期型遠隔講義の活性化システム. 情報処理学会インタラクション 2014, pp. 657–660, 2014.
[4] 今井 順一, 山本 大輔, 小松川 浩. デジタルペンを活用したリメディアル教育での授業デザイン. メディア教育研究, 5(1):57–66, 2008.