平成23年度卒業論文 Webブラウザを用いた手書きメモ

平成２３年度卒業論文
Web ブラウザを用いた手書きメモ共有
システムの提案
情報通信工学科 情報通信システム学講座
０８１００９９ 平山 拓朗
指導教員 寺田 実 准教授
提出日 ２０１２年 １月２７日
1
概要
目的
手書き入力を活かした電子ホワイトボードシステムはこれまでも様々なものが開発されてきた．
電子ホワイトボードの特徴は，複数人で同時に同じ場所に書き込めない，書き込み領域確保のため
に以前の書き込みを消す必要があるといった，従来のホワイトボードに存在する物理的制約がない
ことである．
従来の電子ホワイトボードシステムは，Flash や Java といったプラグインを必要として携帯情
報端末で動作しないものや，携帯情報端末で動作させることを意図していないものが多い．
また，前述のシステムは，本物のホワイトボードと同様に，描画領域が一枚のシートから構成さ
れる．描画内容の意味的な関連を表現する仕組みがなく，すべての描画内容が同じレベルに書き込
まれてしまい，空きスペースがなくなってしまったり，他の書き込みと干渉してしまうといった問
題が生じる．また，注釈を加えたい対象に矢印等を用いて追記を続けていくと，一覧性が悪くなっ
たり，見返した時に話の流れがわかりにくくなるといった問題が生じる．
そこで，これらの問題点を解決する電子ホワイトボードシステムを提案して，その有用性を評価
した．
方法
本研究では，描画内容の関連を表現する手法として，先行研究で説明する手書き Wiki の手法を
採用したコラボレーションツールを，Android や iOS といった様々な環境で表示，編集できるよ
うに Web アプリケーション化したシステムを提案する．
結論
コラボレーションツールとしての有用性と，タッチパネル端末での使いやすさを評価するための
評価実験を行った．その結果，リンクシステムを持ったコラボレーションツールとしての有用性を
示せたが，携帯情報端末上での使いやすさの面では良い評価を得られなかった．
2
目次
第 1 章 序論
6
6
6
1.1
1.2
背景 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1.3
1.4
手書き Wiki . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
研究目的 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
6
7
1.5
論文構成 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
8
問題点 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
第 2 章 先行研究
2.1
手書き Wiki . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.1.1
概要 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
9
9
2.1.2
配信機能 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
9
第 3 章 関連研究
3.1
ネットワークを利用した手書きメモの同期/非同期共有システム [1] . . . . . . . . .
3.3
本研究との対応 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Livenotes: A System for Cooperative and Augmented Note-Taking in Lectures[2]
3.2.1 概要 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
11
11
3.2.2 本研究との対応 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
スプライトモデルを用いた絵地図型の Web コンテンツ構築システム [3] . . . . . .
3.3.1 概要 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
11
12
12
本研究との対応 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
12
3.3.2
概要 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
第 4 章 提案システム
4.1
4.2
システムモデル . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
4.3
共同作業を支援する機能 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
画面構成 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
5.2
14
14
15
4.3.1
4.3.2
シート移動追従機能 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
複数リンク作成 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
16
16
16
4.3.3
サムネイル表示 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
16
第 5 章 実装
5.1
10
10
10
11
3.1.1
3.1.2
3.2
9
20
システム構成 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
5.1.1
サーバ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
5.1.2
クライアント . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
サーバ・クライアント間の通信 . . . . . . . . . . . . . . . . . . . . . . . . . . . .
5.2.1
ユーザ入力に対する処理 . . . . . . . . . . . . . . . . . . . . . . . . . . . .
20
20
20
20
21
3
5.2.2
5.2.3
5.3
5.5
シート移動追従機能の実装 . . . . . . . . . . . . . . . . . . . . . . . . . . .
サーバの実装 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
描画情報の取得 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
5.3.2 サーバで保持する接続クライアント情報 . . . . . . . . . . . . . . . . . . .
データ形式 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
5.4.1 オブジェクトが保持する情報 . . . . . . . . . . . . . . . . . . . . . . . . .
22
22
23
5.4.2 シート名 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
サムネイル表示機能の実装 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
23
23
第 6 章 評価実験
6.1
6.2
6.3
評価方法 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
6.1.1
6.1.2
6.1.3
被験者 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
6.1.4
6.1.5
実験 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
使用した端末 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
実験 1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
アンケート内容 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
実験結果 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
25
25
25
25
25
26
26
6.2.1
6.2.2
Q1 の理由 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Q2 の理由 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
27
28
28
6.2.3
6.2.4
Q4 の自由記述 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Q6 良かった点 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
28
28
6.2.5 Q7 悪かった点 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
6.2.6 Q8 意見，感想等 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
考察 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
29
29
30
6.3.1
6.3.2
実験 1 について . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
実験 2 について . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
30
31
6.3.3
システム全般について . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
31
第 7 章 結論
7.1
7.2
21
22
22
22
5.3.1
5.4
オブジェクト消去の同期 . . . . . . . . . . . . . . . . . . . . . . . . . . . .
35
結論 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
7.2.1
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
機能の拡張 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
35
35
35
7.2.2
UI の改善 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
35
今後の課題
参考文献
38
4
図目次
2.1
手書き Wiki のリンクシステム . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3.1
併合共有の概念図 ( [1] より)
. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
10
3.2
3.3
Livenotes の動作画面 ( [2] より) . . . . . . . . . . . . . . . . . . . . . . . . . . .
PositLog 動作画面 ( [3] より) . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
11
12
4.1
4.2
システム構成 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
14
15
4.3
4.4
4.5
図 4.2 のボタン部拡大図 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
複数リンク存在時の移動先選択画面 . . . . . . . . . . . . . . . . . . . . . . . . . .
15
17
18
4.6
サムネイル表示例 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
19
5.1
システム構成 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
21
5.2
順序なしリストによる木構造の記述と jOrgChart によるレンダリング結果 . . . . .
24
6.1
実験 1 で書かれたシート例 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
30
6.2
6.3
シート上でのコミュニケーション . . . . . . . . . . . . . . . . . . . . . . . . . . .
31
32
6.4
6.5
個人のシートでマインドマップを描いた例 . . . . . . . . . . . . . . . . . . . . . .
クライアント側の操作画面 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
シート移動追従機能の概念図 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
個人のシートでリンクを用いた例 . . . . . . . . . . . . . . . . . . . . . . . . . . .
グループ内，遠隔グループ間でのコミュニケーション . . . . . . . . . . . . . . . .
9
33
34
5
表目次
6.1
6.2
6.3
実験 1 に対するアンケート ( Q1 ，Q2 ) の結果
. . . . . . . . . . . . . . . . . . .
実験 2 に対するアンケート ( Q3 ) の結果 . . . . . . . . . . . . . . . . . . . . . . .
システム全般に対するアンケート ( Q5 ) の結果 . . . . . . . . . . . . . . . . . . .
27
27
27
6
第1章
1.1
序論
背景
近年，Android や iOS を搭載した携帯情報端末が急速に普及してきた．学生でも，講義中にこ
れらの携帯情報端末を使って講義資料を参照するといった場面を目にすることが多くなった．
一般的にこれらの端末はタッチパネルを搭載しており，画面上に表示されるソフトウェアキーボ
ードのタッチによって文字入力を行う．この手法による文字入力は慣れが必要であり，ハードウェ
アキーボードに比べてユーザに負荷が生じる．メモなどアイデアを手軽に表出する手段として，手
書き入力はより直感的で有効であると考えられる．手書き入力は図や文字を自由なレイアウトで記
述することができる．
手書き入力を活かした電子ホワイトボードシステムはこれまでも様々なものが開発されてきた．
電子ホワイトボードの特徴は，複数人で同時に同じ場所に書き込めない，書き込み領域確保のため
に以前の書き込みを消す必要がある，といった従来のホワイトボードに存在する物理的制約がない
ことである．
電子ホワイトボードシステムの主な例として，Scribblar1 ，skrbl2 ，Scriblink3 ，Twiddla4 ，
Conceptboard5 などがある．これらのシステムは情報を共同編集する場として利用される．
1.2
問題点
前述のシステムは，Flash や Java といったプラグインを必要として携帯情報端末で動作しない
ものや，携帯情報端末で動作させることを意図していないものが多い．
また，前述のシステムは本物のホワイトボードと同様に，描画領域が一枚のシートから構成され
る．描画内容の意味的な関連を表現する仕組みがなく，すべての描画内容が同じレベルに書き込ま
れてしまう. そのため，例えば多人数で意見を書き込むときには，空きスペースがなくなってしま
ったり，他の書き込みと干渉してしまうといった問題が生じる．また，注釈を加えたい対象に矢印
等を用いて追記を続けていくと，一覧性が悪くなったり，見返した時に話の流れがわかりにくくな
るといった問題が生じる．
1.3
手書き Wiki
本研究の先行研究に，手書き Wiki6 がある．手書き Wiki は，従来の電子ホワイトボードのシー
トにリンクを導入して複数のシートを双方向結合させることができるシステムである．この仕組み
1 http://www.scribblar.com/
2 http://www.skrbl.com/
3 http://www.scriblink.com/
4 http://www.twiddla.com/
5 http://conceptboard.com/
6 http://pr.ice.uec.ac.jp/∼terada/tegakiwiki/
第 1 章 序論
7
を用いることで，描画内容の関連をわかりやすく表現できる．手書き Wiki の詳細については第二
章の先行研究で説明する．
本研究では，描画内容の関連を表現する手法として，手書き Wiki の手法を採用する．
1.4
研究目的
本研究では，携帯情報端末のブラウザでも動作する，リアルタイム共有可能な手書き Wiki を提
案，実装してコラボレーションツールとしての有用性を検証する．
第 1 章 序論
1.5
論文構成
この章では，序論として，本研究の背景・問題点・目的について述べた．
第 2 章では，本研究の先行研究である手書き Wiki について述べる．
第 3 章では，本研究の関連研究を紹介する．
第 4 章では，システムの実装について述べる．
第 5 章では，評価実験について述べる．
第 6 章では，結論について述べる．
8
9
第2章
先行研究
本研究の先行研究である手描き Wiki について説明する．
2.1
2.1.1
手書き Wiki
概要
手書き Wiki は，本研究室の寺田が作成した電子ホワイトボードシステムである．従来の電子ホ
ワイトボードにリンクシステムを導入したことが特徴である．複数のシート間にリンクを作成する
ことで，シートに書かれた内容の関連をわかりやすく表現することができる．
講義でのホワイトボードとして，または手書き入力を利用したメモ帳として利用される．
2.1.2
配信機能
手書き Wiki には描画情報を他者へ配信する機能として，専用ビューアへのネットワーク配信機
能や画像変換により Web ページとして公開する機能がある．
図 2.1: 手書き Wiki のリンクシステム
10
第3章
3.1
関連研究
ネットワークを利用した手書きメモの同期/非同期共有システ
ム [1]
3.1.1
概要
増子の研究では，サーバを用いない分散方式により，描画内容を同期的又は非同期的に共有する
手法が提案されている．
同期的に描画情報を共有する同時共有は，描画情報と消去や元に戻すといったユーザアクション
の情報を，同じプログラムを実行しているユーザ間でリアルタイムに共有することで実現している
．
非同期的に描画情報を共有する併合共有は，共有を行なっていない状態で複数のユーザが各々に
編集した描画情報を，ネットワーク接続時に一つに併合することで実現している．
図 3.1: 併合共有の概念図 ( [1] より)
第 3 章 関連研究
3.1.2
11
本研究との対応
増子の研究では，サーバを使用せずにユーザ同士で描画情報を直接やり取りする分散方式で共有
を実現している．そのため，同時共有，併合共有のどちらの場合も共有したいユーザ全員が同時に
端末を起動している必要がある．また，併合共有を行う場合，2 ユーザ間で併合作業を行う必要が
ある．これらの性質から，比較的少人数での共同作業に向いていると考えられる．
本研究は，サーバがすべての描画情報を管理する方式で共有を実現している．そのため，サーバ
が起動していればいつでも併合作業なしに編集を行うことができ，より大規模な共同作業にも適応
できると考えられる．
3.2
3.2.1
Livenotes: A System for Cooperative and Augmented
Note-Taking in Lectures[2]
概要
Livenotes は，授業における少人数チームでの協調学習支援を目的としたシステムである．プレ
ゼンテーションのスライドを背景に設置したホワイトボードを，学生チーム間でリアルタイム共有
できることが特徴となっている．チームでのインタラクションにより，協力して講義ノートを取る
，学生同士で疑問点を解決するといったことが可能になっている．
図 3.2: Livenotes の動作画面 ( [2] より)
3.2.2
本研究との対応
Livenotes は，授業スライドの余白に学生がアノテーションを書き込むことができる．
第 3 章 関連研究
12
本研究では，教師の手書き資料にリンクを作成して，別のシートにアノテーションを加えるとい
った使い方も考えられる．
3.3
スプライトモデルを用いた絵地図型の Web コンテンツ構築シ
ステム [3]
3.3.1
概要
久保田らの研究では，スプライトモデルという規約を提案している．スプライトモデルとは，手
書き入力イラストやテキスト，画像といったさまざまなコンテンツをカプセル化して統一的な手法
で取り扱えるようにするためのデータ記述のモデルである．
またこの研究では，スプライトモデルを用いて Web ページ上のひとつひとつのコンテンツを再
利用可能にしつつ，任意な位置に配置できるようにした PositLog と SaasBoard というシステムを
実装している．このシステムでは，広さ制限のないページに自由にコンテンツを配置した「絵地図
型」の Web ページを作成できる．
図 3.3: PositLog 動作画面 ( [3] より)
3.3.2
本研究との対応
久保田らが実装したシステムは，広さ制限のないシートに自由にコンテンツを配置した絵地図型
のシート構造を特徴とする．
本研究は，リンクを用いた固定サイズシートの接続によるシート構成を採用している．
第 3 章 関連研究
13
また，久保田らのシステムでは複数人での共同作業が可能であるが，Web ブラウザの更新ボタ
ンを押さないと他人の編集結果が反映されない．
本研究では，シートの編集結果がユーザ全体でリアルタイムに反映されるので，より柔軟な使い
方ができる．
14
第4章
提案システム
本研究で提案するシステムの概要について説明する.
4.1
システムモデル
本研究では，手書き Wiki を従来の PC だけでなく Android や iOS といった様々な環境で表示，
編集できるように Web アプリケーション化したシステムを提案する．
本システムでは，全シートの描画内容及びリンクの木構造はサーバが保持し，クライアントはサ
ーバに接続してシートを作成，編集する．
提案システムの概要は以下のとおりである．
• クライアント・サーバ方式
• 様々なデバイス上で使用できるように，クライアントはブラウザ上で実現
• 複数人で編集できるように描画内容をリアルタイム共有
• 全クライアントは平等
• 指定した相手のリンク移動追従機能
図 4.1: システム構成
第 4 章 提案システム
4.2
15
画面構成
図 4.2: クライアント側の操作画面
図 4.3: 図 4.2 のボタン部拡大図
Web ブラウザから本システムのサーバに接続すると，図 4.2 の画面が表示されて，線幅 5px ，黒
色で入力可能なモードになる．図 4.3 の左のボタンから順にその機能を説明する．
線幅ボタン 入力する線の太さを変更する．ボタンを押すごとに，1px ，5px ，10px ，17px の 4 種類の太
さが順に切り替わる．
色ボタン 入力する線の色を変更する．ボタンを押すごとに，赤，緑，青，黒の 4 色が順に切り替わる．
リンクボタン 新たにリンクを作成する時やリンクを選択するときに使用する．このボタンを押したあとに
，リンクを作成したい領域をドラッグで指定するとリンクが作成され，既存のリンク領域を
クリックするとそのリンク先のシートへ移動する．操作が終わった後，元の入力するモード
に戻る．
消すボタン 既存のストロークやリンクを消去するモードに切り替える．このモードの時に消したいオブ
ジェクトをドラッグ，タッチパネル端末の場合はなぞると消すことができる．対象がリンク
の場合はリンク領域の輪郭線を横切ると，ストロークの場合は一定距離以内をなぞった時に
消える．もう一度ボタンを押すと元の入力するモードに戻る．
第 4 章 提案システム
16
拡大，縮小ボタン キャンバスの表示サイズを拡大・縮小する．
編集モード/スクロールモード切替ボタン このボタンを押した後にタッチパネルをなぞると，ビューポートをスクロール ( 移動 ) でき
る．拡大ボタンでキャンバスの表示サイズを拡大した時，画面からはみ出した領域を表示さ
せるために使う．このボタンはスクロールバー等が使用できない携帯情報端末のみで表示さ
れる．
4.3
4.3.1
共同作業を支援する機能
シート移動追従機能
本システムでは，リンクにより複数のシートが接続した構造をとる．そのため，複数のユーザが
シートを移動してそれぞれ別のシートを表示することができる．しかし，特定のユーザが共同作業
の進行を制御したいといった状況も考えられる．そこで，設定したユーザのシート移動を追従でき
る機能を作成した．
シート移動追従機能で使用するユーザの名前は，クエリ文字列で指定する．指定した状態の URL
は，http://{ サーバのホスト名 }/wb?name={ 設定する名前 }&target={ シート移動追従の対
象となる相手の名前 }となる．名前に使用できる文字は半角英数字のみである．
4.3.2
複数リンク作成
同じ場所に複数のリンク領域が存在した場合，サムネイル画像から移動したいシートを選択する
画面を表示するようにした．同じ項目について複数のユーザが記述したい場合や，違う観点からシ
ートを作成したい場合などに使用できる．
4.3.3
サムネイル表示
複数人でリンクを用いてシートを作成していくと，自分以外のユーザが作ったシートが増え，全
体の構造が把握しづらくなることが考えられる．そこで，シート間のリンク接続を木構造で表現し
たサムネイル表示機能により，シートの接続関係の理解を支援するようにした．さらに，サムネイ
ル画像の下に，そのシートを表示しているユーザの名前を列挙して，各ユーザの居場所が分かるよ
うにした．サムネイル画面は http://{ サーバのホスト名 }/wbThumb にアクセスして表示する．
第 4 章 提案システム
17
図 4.4: シート移動追従機能の概念図
第 4 章 提案システム
18
図 4.5: 複数リンク存在時の移動先選択画面
第 4 章 提案システム
19
図 4.6: サムネイル表示例
20
第5章
実装
システム構成
5.1
5.1.1
サーバ
Java Servlet により構成した．Web サーバ・Servlet コンテナとして Jetty1 ，描画情報を格納する
データベースとして MongoDB2 を選択した．また，Java 上で JSON ( JavaScript Object Notation
) を扱うライブラリとして JSON-lib3 ，UUID ( Universally Unique Identifier ) を扱うライブラリ
として UUID4 を用いた．
5.1.2
クライアント
HTML と JavaScript により構成した．ストロークやリンク矩形を描画するキャンバスは HTML
の Canvas 要素を用いた．また，JavaScript 上での UUID の生成には UUID.js5 を用いた．
5.2
サーバ・クライアント間の通信
リアルタイム共有を行うためにはサーバ・クライアント間で双方向通信を行う必要がある．本シ
ステムでは WebSocket により双方向通信を行う．通信は以下の手順で行われる．
1. サーバからクライアントの HTML ファイルや JavaScript ファイル等のリソースを取得
2. 5.3.1 に述べるように，URL に指定されたシート名を JavaScript で取得し，そのシートの描
画情報を XMLHttpRequest によりサーバから全てダウンロードしてキャンバスに描画
3. WebSocket 接続を確立する．URL に 5.2.3 で述べるように name や target が指定されている
場合はサーバにその値が格納される．以後の通信は WebSocket 上で行う
4. 手順 2 で指定されたシート名を送信する．ここで送信されたシート名を利用して，サーバは
送られてくる描画情報がどのシートに属するのかを特定し，描画情報を通知するクライアン
トを限定する
5. ユーザ入力を待ち受ける．並行してサーバから送られてくる他クライアントの描画情報を待
ち受けして，受信次第キャンバスに描画する
1 http://www.eclipse.org/jetty/
2 http://www.mongodb.org/
3 http://json-lib.sourceforge.net/
4 http://johannburkard.de/software/uuid/
5 https://github.com/LiosK/UUID.js
第 5 章 実装
21
図 5.1: システム構成
5.2.1
ユーザ入力に対する処理
ユーザにより入力がなされた場合の処理を説明する．
ストローク，リンク入力の場合
新しく入力されたストロークやリンクといったオブジェクトにはクライアント側で固有の UUID
を付与して，5.4.1 で述べる情報を記述した JSON 文字列に変換されてサーバへ送信される．受信
したサーバは，同じシートを表示している他のすべてのクライアントへ通知する．同時にサーバ上
のデータベースへ記録する．
リンクが選択された場合
シート移動が行われる．選択されたリンクが参照するシート名を 5.3.1 で記述する形式で新しい
シート名に設定して，手順 2 以降を行う．ただし，WebSocket 接続は切断しないで継続する．
5.2.2
オブジェクト消去の同期
入力されたすべてのオブジェクトは固有の UUID を有している．それを利用して以下の手順で
オブジェクト消去の同期が行われる．
1. 消去されたオブジェクトの UUID の配列をサーバに送信
第 5 章 実装
22
2. サーバから同じシートを表示している他のすべてのクライアントに通知，同時にサーバ上の
データベースから消去
5.2.3
シート移動追従機能の実装
シート移動追従機能は以下の手順で行われる．
1. シート移動時に自分を追従対象にしているクライアントを探索
2. 1 で発見されたクライアントに対して移動すべきシート名を通知
3. 通知を受け取ったクライアントのプログラムがシート移動
5.3
5.3.1
サーバの実装
描画情報の取得
http://{ サーバのホスト名 }/wb#{ シート名 }にアクセスすることで指定したシートの入力
画面を表示する．URL 末尾の#{ シート名 }を省略すると FRONTPAGE を表示する．
この#{ シート名 }の部分は JavaScript により解析，取得され，サーバのデータベース上にある
描画情報のリソースを表す http://{ サーバのホスト名 }/wb/resources/{ シート名 }へ XML-
HttpRequest によりリクエストを発行することで描画情報が取得される．
5.3.2
サーバで保持する接続クライアント情報
サーブレットは，コネクションごとにインスタンスが作成されるシステムモデルになっている
．本システムのサーバは，WebSocket コネクションの各インスタンスごとに URL に指定された
name と target の値，表示中のシート名を保持する．また，static フィールド (クラス変数) の配列
で全コネクションの name と target の値，表示中のシート名を共有している．各コネクションで表
示中のシート名を利用して描画情報を送信するクライアントを決定する．
5.4
データ形式
ストロークやリンクといったオブジェクトを表記するデータ記述言語として JSON を用いた．同
様なデータ記述言語である XML ( Extensible Markup Language ) と比較して記法が簡潔であり，
通信量が削減できるといった利点がある．
本システムでは，サーバ・クライアント間の通信，データベースにおいて JSON 形式が用いら
れる．
第 5 章 実装
5.4.1
23
オブジェクトが保持する情報
すべてのオブジェクトは種類を識別するための定数と，各オブジェクトを一意に識別する UUID
を保持している．
• ストローク
– オブジェクト種別識別用定数
– UUID
– 色
– 太さ
– ストロークを構成する点の座標配列
• リンク
– オブジェクト種別識別用定数
– UUID
– 参照シート名
– 始点 X 座標
– 始点 Y 座標
– リンク領域の幅
– リンク領域の高さ
5.4.2
シート名
接続時に表示されるシートの名前は FRONTPAGE とする．リンクを作成することにより新し
く作られるシートには，13 桁のシート作成時間の先頭に ‘ F ’ を付加した名前が付与する．
5.5
サムネイル表示機能の実装
4.3.3 で述べた URL に接続すると，サーバは FRONTPAGE から深さ優先探索でリンクを辿り，
サムネイル画像を生成する．木構造は HTML の順序なしリスト ( ul ) とリストアイテム ( li ) を
用いて表現される．また同時に，各ページに接続中のユーザの名前を 5.3.2 で述べた static 変数か
ら取得してサムネイル画像の下に列挙する．
クライアント側におけるサムネイル画面の木構造表示は JavaScript ライブラリの JQuery6 とそ
のプラグイン jOrgChart7 を用いて実現した．
6 http://jquery.com/
7 https://github.com/wesnolte/jOrgChart
第 5 章 実装
図 5.2: 順序なしリストによる木構造の記述と jOrgChart によるレンダリング結果
24
25
第6章
評価実験
コラボレーションツールとしての有用性と，タッチパネル端末での使いやすさを評価するために
評価実験を行った．
6.1
評価方法
本システムを用いて実験を行った後，アンケートによる評価を行った．
6.1.1
被験者
本学の学生を対象に，実験 1 は 7 人，実験 2 は 5 人で実験を行った．
6.1.2
使用した端末
実験 1 はスレート PC ( FMVTB10B ) 3 台，コンバーチブル型タブレット ( Thinkpad X200 )
PC1 台，ペンタブレット ( CTE-650 ，CTH-661 ) を接続した PC2 台，iPad1 台を使用した
6.1.3
実験 1
本システムを利用して指定したテーマに沿ってグループディスカッションを行ない，コラボレー
ションツールとしての有用性を評価した．
各テーマごとに司会者を一人定めて話し合いの進行を依頼した．予め実験前に，すべての被験者
の端末には，target=sikai という設定を施した Web ブラウザを起動しておいた．さらに司会者
の端末には，シート移動追従の対象とするために name=sikai という設定を施した司会用の Web
ブラウザを追加で起動しておき，2 つのウィンドウを切り替えて使用してもらった．話し合いを行
う時間として，各テーマ 50 分程度の時間を要した．
テーマ 1 ∼無人島に持っていくもの
このテーマでは，以下のような指示を与えた．
• このテーマについては，全被験者は同室で話し合いを行う
• まず，本システム上で個人ごとに 3 つの案を考える時間を取り，個人のシートに書きこむ
• 次に，追従機能を用いて一人ひとりの案を見ながら簡単に全被験者で話し合いを行い，挙が
った案の中から最終的に 3 つ決定
第 6 章 評価実験
26
テーマ 2 ∼研究室の机配置について
このテーマでは，以下のような指示を与えた．
• まず，2 つのグループを決めて別室に分かれて，本システム上でグループとしての案を考え
る．グループ相互のコミュニケーションはシステム上で行う
• 次に，全被験者は同室に集まり，どちらか良い案を決定する
6.1.4
実験 2
ペンタブレット，スレート PC ，iPad を用いて学部，学科名を書いてもらい，それぞれのデバイ
ス上での使い勝手の差異を評価した．
6.1.5
アンケート内容
( 実験１について )
Ｑ１. 意見は出しやすかったですか？
( 出しにくかった ) １ ・ ２ ・ ３ ・ ４ ( 出しやすかった )
理由を記述してください．
Ｑ２． このシステムは話し合いにおいて役に立ちましたか？
( 役に立たなかった ) １ ・ ２ ・ ３ ・ ４ ( 役に立った )
理由を記述してください．
( 実験２について )
Ｑ３．以下の環境での使いやすさを評価してください．
ペンタブレット
( 使いにくかった ) １ ・ ２ ・ ３ ・ ４ ( 使いやすかった )
スレート PC
( 使いにくかった ) １ ・ ２ ・ ３ ・ ４ ( 使いやすかった )
タッチパネル端末 ( iPad )
( 使いにくかった ) １ ・ ２ ・ ３ ・ ４ ( 使いやすかった )
Ｑ４．タッチパネル端末 ( iPad ) とその他の環境を比較して，どのような違いを感じましたか？
( システム全般について )
Ｑ５．このシステムの使いやすさはどうでしたか？
( 使いにくかった ) １ ・ ２ ・ ３ ・ ４ ( 使いやすかった )
Ｑ６．このシステムの良かった点を記述してください．
Ｑ７．このシステムの悪かった点を記述してください．
Ｑ８．最後に意見、感想等がありましたら記述してください．
第 6 章 評価実験
6.2
27
実験結果
表 6.1: 実験 1 に対するアンケート ( Q1 ，Q2 ) の結果
評価（ 悪 1 ⇔ 4 良 ）
1
2
3
4
平均
Q1
0
0
3
4
3.6
Q2
0
0
5
2
3.3
表 6.2: 実験 2 に対するアンケート ( Q3 ) の結果
評価（ 悪 1 ⇔ 4 良 ）
1
2
3
4
平均
ペンタブレット
0
1
3
1
3.0
スレート PC
0
2
1
2
3.0
タッチパネル端末 ( iPad )
1
1
2
1
2.6
表 6.3: システム全般に対するアンケート ( Q5 ) の結果
評価（ 悪 1 ⇔ 4 良 ）
1
2
3
4
平均
Q5
0
0
6
1
3.1
第 6 章 評価実験
28
自由記述欄で得られた主な意見は以下のようになった．
6.2.1
Q1 の理由
• 図や文字を書くことにより自分の意見をまとめられた
• 他人の発言を遮らずに自由に書きこんで意見を主張できた
• リアルタイムに意見が返ってくることが期待できた
6.2.2
Q2 の理由
• 各々の意見をまとめやすい
• 多数決の集計などがリアルタイムに見えて，かつ記録に残せる
• 追従機能により全員同じシートを表示させることができて，話の流れがわかりやすい
• 会話のほうが早い場面もあった
6.2.3
Q4 の自由記述
• 書く位置とペンの位置が一致しているので，ペンタブレットよりスレート PC のほうが直感的
• タッチパネルだとどうしても字が大きく，または汚くなりがち
• タッチパネルは指で筆記面が見えず難しい
• 指での入力に慣れておらず書きづらい
6.2.4
Q6 良かった点
• 追従機能や共有機能で遠隔地からでもリアルタイムに内容を追える
• 気軽に他人の書き込み過程が覗ける
• ペンの太さ，色の切り替えが楽，画面がシンプルでわかりやすい
• 普通の Wiki と比べると文字入力の煩わしさが不要で手軽に使えると思う
• 様々な環境で使えるため汎用性が高い
第 6 章 評価実験
6.2.5
29
Q7 悪かった点
• 手書き入力しかできない
• 入力中でも確認なしにシート追従してしまう
• 追従機能の有効無効の切り替えが容易にできない．切り替えるには同時に 2 つのウィンドウ
を開かなくてはならなく操作が煩雑になる．
• 消去モードやリンクモード等の状態表示が不十分で使いにくい
• バグにより意図しないシート移動があった
6.2.6
Q8 意見，感想等
• シート移動の度にリンクボタンを押すのが大変だった
• サムネイル画面を別のページではなく編集画面と同画面に表示できたほうが良い
• サムネイル画面ですべてのページの更新状況をリアルタイムに表示できたほうが良い
• 濁点が打つ，リンク領域指定するときなど正確な操作が難しい
• ディスカッションにおいて最も効果を発揮すると思う
第 6 章 評価実験
30
図 6.1: 実験 1 で書かれたシート例
6.3
考察
6.3.1
実験 1 について
Q1 の意見の出しやすさの評価の平均値は 3.6 であり，意見を出しやすいという評価を受けたと
考えられる．主な理由として，図や文字を書くのが容易であるという手書き入力の特性と，他人の
発言を遮ることなく自分の意見が書けるといったリアルタイム共有機能の特徴に関する意見が複数
あった．
図 6.3 のようにリンクを用いて意見をまとめる，図 6.4 のようにマインドマップを描くなど，リ
ンクを用いて個人のシートを作成することで，様々な意見の表現方法が可能になっていると言える
「！
？ 」といった感嘆符など積極的に発言するまでもないこと，直接
．また，図 6.2 や図 6.5 では，
には話し合いには関係無いコメントなども書くことで表されていることが分かる．このことから，
より積極的なコミュニケーションが促進されていることがわかる．
Q2 の有用性の評価の平均値は 3.3 であったことから，役に立ったという評価であると考えられ
る．シート追従機能により被験者全員が同じシートを追いながら話し合いができることが便利だっ
たという理由が複数あった．
第 6 章 評価実験
31
図 6.2: シート上でのコミュニケーション
6.3.2
実験 2 について
ペンタブレットとスレート PC の使いやすさの平均値は 3.0 と同じとなった．一方，タッチパネ
ルは 2.6 と他に比べて使いづらいという評価になった．主な理由として，指で筆記することに慣れ
ていない，指で筆記面が見づらい，書く字が大きくなってしまうといった意見があった．スタイラ
スを使う，拡大縮小機能をうまく使うといった対策をとればより良い結果になるのではという意見
もあった．
被験者が入力している様子を観察していると，画面の小さなタブレット端末で使用することを想
定していたキャンバス表示の拡大縮小機能を使っている人がおらず，縮小された状態のキャンバス
に大きな文字を書いて書き込みスペースが足りなくなる場面があった．現在のところ，ボタンを押
すことで拡大縮小操作を行う実装になっている．この操作をジェスチャ操作などで直感的に使いや
すくすれば，使用する人が増えると思われる．
6.3.3
システム全般について
システムの使いやすさの評価の平均は 3.1 であり，概ね使いやすいという評価であった．システ
ムの良かった点を見ると，シート移動追従機能，リアルタイム共有機能等，提案したシステムの機
能の基本的な仕組みについては良い評価を得られているが，悪かった点を見ると，実験中に発覚し
た不具合や手書き入力しかできないという機能の不足，追従機能の設定の切り替えができない，ユ
ーザの確認なしに追従処理を行う実装，押したボタンの状態表示が不十分といったユーザインタフ
ェースの設計に使いづらさを感じさせる点があったとわかる．
追従機能については，追従機能の設定用の画面を作成する，シート移動前にダイアログ等でユー
ザに問い合わせる，現在のクエリ文字列を使った実装とは別の実装を考えるといった改善が必要だ
と思われる．これらの改善点を解消することで，より使いやすいシステムにすることができると考
えられる．
第 6 章 評価実験
32
図 6.3: 個人のシートでリンクを用いた例
第 6 章 評価実験
33
図 6.4: 個人のシートでマインドマップを描いた例
第 6 章 評価実験
図 6.5: グループ内，遠隔グループ間でのコミュニケーション
34
35
第7章
結論
結論
7.1
本研究では，携帯情報端末のブラウザでも動作する，リアルタイム共有可能な手書き Wiki を提
案，実装した．また，コラボレーションツールとしての有用性と，タッチパネル端末での使いやす
さを評価するための評価実験を行った．
その結果，リンクシステムを持ったコラボレーションツールとしての有用性を示せたが，携帯情
報端末上での使いやすさの面では良い評価を得られなかった．
今後の課題
7.2
より良いシステムにするために，評価実験の結果から，以下のような改良を施す必要があると考
えられる．
7.2.1
機能の拡張
• テキスト入力，画像貼り付け機能
既存のテキストや図表を貼り付けることが出来れば，適応可能な場面が更に広がると考えら
れる．また，手書き入力ができない又は困難な端末でもテキスト入力により利用可能になる．
• 元に戻す ( undo ) ，やり直し ( redo ) 機能
間違えて入力してしまった文字を消すといった直近の操作を取り消す操作は非常に重要であ
り，必要な機能である．
• サムネイル表示のリアルタイム化
現在のところ，サムネイル画像はサムネイル表示画面にアクセスした時点での静止画像であ
り，その後の描画情報は反映されない．サムネイル表示画面でも描画情報がリアルタイムに
反映されれば，全ユーザの描画過程を覗くことができて便利である．
7.2.2
UI の改善
• シート移動追従機能の設定画面の作成
現在のところ，URL 中のクエリ文字列で指定する name と target の値を用いて設定を行
なう仕組みになっているが，この方法では設定のたびにキーボードによるテキスト入力が必
要となってしまう．それを解消するために，別途 name と target の値を設定する画面を作成
する．また，その画面で設定の有効・無効の切り替えを可能にする．
第 7 章 結論
36
• 追従時のシート移動前確認画面の表示
ユーザが入力途中にシートが移動してしまうことを防ぐために，クライアント側プログラム
で移動前に確認画面を表示する．
• ボタンの動作の改善
実験の様子を観察していたら，何かを書こうとしたら消すボタンを押して消去モードだった
，リンクを選択しようとしたらリンクボタンを押していなかった，といった場面が多く見ら
れた．押したボタンの状態表示や，ボタンの動作の吟味，改善が必要である．
• 携帯情報端末のマルチタッチ機能を用いたユーザインタフェースの設計
機能を増やしていくとボタンが多くなり，キャンバスの表示領域が小さくなる．近年の携帯
情報端末で一般的になったマルチタッチを利用したジェスチャ操作を，拡大縮小操作やリン
ク作成などに取り入れることで，画面構成の簡素化やボタン操作を多用することから生じる
操作性の低下を軽減でき，タブレット端末上での使い勝手を向上できると考えられる．
37
謝辞
本研究は，電気通信大学電気通信学部情報通信工学科情報通信システム学講座寺田研究室におい
て，寺田 実准教授の指導の下で卒業研究として行われました．寺田 実准教授には卒業研究のアイ
デア, アドバイス, 参考論文の探し方や論文の書き方, 発表時の方法や注意など様々な部分でご指導
頂きました. 心から感謝を申し上げます.
東京大学 情報基盤センターに所属している丸山 一貴 助教にも研究室輪講時などにおいて, 様々
なご意見, ご協力を頂戴いたしました. 深い感謝を申し上げます.
修士課程二年の田中 英人さん, 修士課程一年の伊藤 亜樹さん，猪俣 順平さん，大井 彩香さん,
太田 侑介さん，学部四年の石川 斉さん，井上 尚亮さん，河上 惟人さん，小沢 美香さん，佐々木
佳祐さんには，評価実験や研究についての様々な助言や研究室での生活に関することなど，他にも
様々な点でお世話になりました．本当にありがとうございました．
38
参考文献
[1] 増子直樹, 寺田実, “ネットワークを利用した手書きメモの同期/非同期共有システム”, 電気通
信大学 情報通信工学科 卒業研究論文, 2010.
[2] Matthew Kam, Jingtao Wang, Alastair Iles, Eric Tse, Jane Chiu, Daniel Glaser, Orna
Tarshish and John Cann, “Livenotes: A System for Cooperative and Augmented Note-Taking
in Lectures”, CHI ’05 Proceedings of the SIGCHI conference on Human factors in computing
systems, 2005.
[3] 久保田秀和, 前川博文, 西村拓一, “スプライトモデルを用いた絵地図型コンテンツ構築システ
ム” , 情報処理学会論文誌, Vol.51, No.3, pp.796-809, Mar. 2010.