6 - 寺田研究室

平成 21 年度修士論文
手書きストロークを用いた動画上にお
ける非同期コミュニケーション
情報通信工学専攻 情報通信システム学講座
０８３００５０ 平山 慧
指導教員 寺田 実 准教授
提出日 ２０１０年 １月２９日
1
目次
第 1 章 序論
1.1
1.2
1.3
1.4
1.5
1.6
背景 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
ネットワーク上のコミュニケーション . . . . . . . . . . . . . . . . . . . . . . . . .
1.2.1 同期的 ⇔ 非同期的コミュニケーション . . .
1.2.2 言語情報 ⇔ 非言語情報 . . . . . . . . . . .
動画上コミュニケーションの流行とインタフェース
着目点 . . . . . . . . . . . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
研究目的 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
本論文の構成 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
第 2 章 関連研究
2.1
2.2
2.3
2.4
ネットワーク上コミュニケーション . . . . . . . . . . . . . . . . . . . . . . . . . .
2.1.1
2.1.2
MSN メッセンジャー [6] . . . . . . . . . . . . . . . . . . . . . . . . . . . .
TangibleChat[16] . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.1.3
電子黒板・電子ノートシステム [15] . . . . . . . . . . . . . . . . . . . . . .
11
11
12
12
12
13
2.2.1
2.2.2
2.2.3
Feel AIR[17] . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Stickam[8] . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
13
14
14
14
15
2.2.4
2.2.5
2.2.6
2.2.7
2.2.8
CollaboraTV[13]
CWaCTool[14] .
AmigoTV[12] . .
Synvie[18] . . . .
FeelTag[10] . . .
.
.
.
.
.
15
17
18
19
21
2.2.9
2.2.10
その他
2.3.1
字幕.in[9] . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Weisz らの研究 [11] . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
21
21
21
21
2.3.2 Sequential Graphics[21] . . . . . . . . . . . . . . . . . . . . . . . . . . . .
本研究に向けて . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.4.1 手書き情報の使用 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
22
23
23
動画上再生時間を用いた非同期共有 . . . . . . . . . . . . . . . . . . . . . .
23
動画へのアノテーションを行うシステム . . . . . . . . . . . . . . . . . . . . . . .
2.4.2
ニコニコ動画 [7] . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
大盛らのシステム [19] . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
第 3 章 システムの提案
3.1
3.2
6
6
6
6
7
7
11
システム概要 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
動画上アノテーション共有システムの要件 . . . . . . . . . . . . . . . . . . . . . .
24
24
24
2
3.3
3.4
3.5
システムの構成 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3.6
3.7
使用方法 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
インタフェース上考慮すべき点 . . . . . . . . . . . . . . . . . . . . . . . . . . . .
画面構成 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
各機能の詳細 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3.7.1
3.7.2
ログイン . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3.7.3
3.7.4
3.7.5
手書きストロークの再生 . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3.7.6
3.7.7
3.7.8
3.7.9
手書きストロークの補間・補正 . . . . . . . . . . . . . . . . . . . . . . . .
手書きストロークを動画上に描く機能
. . . . . . . . . . . . . . . . . . . .
手書きストロークの削除 . . . . . . . . . . . . . . . . . . . . . . . . . . . .
動画共有機能 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
動画プレイヤーとしての機能
. . . . . . . . . . . . . . . . . . . . . . . . .
手書き数グラフの提示 . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
手書き入力検索 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
第 4 章 実装
4.1
4.2
4.3
4.4
4.5
26
26
27
27
29
29
30
30
31
31
32
33
33
33
36
システム全体 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
サーバ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
4.2.1 構成 . . . . . . . . . . . . . . . . . . .
4.2.2 ログインについて . . . . . . . . . . . .
クライアント . . . . . . . . . . . . . . . . . .
4.3.1 構成 . . . . . . . . . . . . . . . . . . .
4.3.2 ユーザインタフェースにおける層構造
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
手書きストロークの再生の詳細 . . . . . . . . . . . . . . . . . . . . . . . . . . . .
ストローク情報について . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
4.5.1
送受信における情報形式 . . . . . . . . . . . . . . . . . . . . . . . . . . . .
4.5.2
4.5.3
ストローク情報の中身 . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
ストローク情報の座標変換 . . . . . . . . . . . . . . . . . . . . . . . . . . .
第 5 章 考察
36
36
36
37
37
37
37
38
39
39
39
40
5.1
5.2
5.3
5.4
手書き自体の効用 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
言語的表現には不向き . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
42
42
42
43
43
5.5
勢いのある手書き表現の難しさ . . . . . . . . . . . . . . . . . . . . . . . . . . . .
43
5.6
5.7
ストローク量の増加による負荷の増大 . . . . . . . . . . . . . . . . . . . . . . . . .
43
44
手書きアノテーションの種類 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
非同期インタフェースによるアノテーション数の増加 . . . . . . . . . . . . . . . .
ストローク検索について . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
第 6 章 結論
6.1
6.2
6.2.1
6.2.2
評価 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
他種メディアを並列して用いる . . . . . . . . . . . . . . . . . . . . . . . .
45
45
45
45
46
6.2.3
線の美化 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
46
まとめ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
今後の課題
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3
6.2.4
6.2.5
負荷の低減 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
検索性能の向上 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
46
47
4
図目次
1.1
1.2
1.3
ニコニコ動画のインタフェース 投稿されたコメントが左方向に流れていく . . . .
YouTube 左：YouTube のインタフェース 右：コメント投稿の手順 . . . . . . . .
ニコニコ動画におけるテキストコメントによる表現例「ISAS ロゴ」 . . . . . . . .
8
9
10
2.1
MSN メッセンジャーの対話画面 テキストや手書き図を送信することができる . .
12
2.2
2.3
2.4
2.5
[16] より TangibleChat のシステム構成 .
電子黒板・電子ノートシステム . . . . .
Feel AIR[17] の外観 . . . . . . . . . . . .
CollaboraTV の外観 (2007 年の論文より)
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
13
13
15
16
2.6
2.7
2.8
2.9
2.10
CollaboraTV のアノテーションと Virtual Audience[13]
Interest Point と時間の関係を表したグラフ . . . . . .
CWaCTool のインタフェース . . . . . . . . . . . . . .
CWaCTool における編集ツール . . . . . . . . . . . . .
AmigoTV のフレンド (buddy) リスト . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
16
17
17
18
18
2.11
2.12
2.13
2.14
2.15
AmigoTV のエモティコン表示 . . . . . . .
Synvie シーンテキストアノテーション . .
Synvie シーン領域テキストアノテーション
Synvie シーンボタンアノテーション . . .
FeelTag のインタフェース . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
18
19
20
20
21
2.16 リアルタイム注釈入力による動画内検索 [19] . . . . . . . . . . . . . . . . . . . . .
2.17 SequentialGraphics[21] におけるストローク描画時の時間変化 . . . . . . . . . . .
22
22
3.1
3.2
3.3
3.4
3.5
3.6
動画上手書きアノテーション共有システム . . . . . . . . . . . . . . . . . . . . . .
24
26
27
27
28
ると、 左のプレイヤーにて再生される . . . . . . . . . . . . . . . . . . . . . . . .
28
3.7
3.8
3.9
3.10
3.11
各種ウィンドウの呼び出しメニュー . . . . . . . . . . . . . . . . . . . . . . . . . .
29
29
30
30
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
システム構成 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
時間経過によるストロークのズレ . . . . . . . . . . . . . . . . . . . . . . . . . . .
画面構成 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
ログイン画面 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
動画リストとプレイヤー, 右の動画のリストの中から動画を選びダブルクリックす
ストローク検索ウィンドウ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
手書きストロークのスタイル変更ツール . . . . . . . . . . . . . . . . . . . . . . .
時間と共に現れるストローク . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
時刻 t では線は t2 と t3 の間の点を補間して線を描画, 時刻 t3 になるに従いスムー
ズに線が t3 に延びる . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
31
5
3.12 左:補正をかける前の手書きストローク、 一部の点が突出しうねって見える 右:平滑
化フィルタ後の手書きストローク、 うねりが減少し滑らかな曲線となっている . .
3.13 描画毎にストローク中の点にランダムなゆらぎを加えている . . . . . . . . . . . .
32
33
3.14 動画プレイヤーにおける制御パネル . . . . . . . . . . . . . . . . . . . . . . . . . .
3.15 ストローク検索ウィンドウ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3.16 ストローク検索ウィンドウ, 候補の線にマウスカーソルを乗せるとストロークの時
間とその時の手書き描画状況を提示する . . . . . . . . . . . . . . . . . . . . . . .
33
35
システム構成図 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
36
38
41
4.1
4.2
4.3
層構造 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
クライアントアプリケーションにおける座標系 . . . . . . . . . . . . . . . . . . . .
35
6
第 1 章 序論
1.1
背景
インターネットは爆発的に普及し、 現在ではもはや人類にとって欠かせないものとなっている。
検索エンジンなどを用いた情報入手の手段としても非常に有効だが、 それだけではなく娯楽のた
めの手段としても有効に機能している。 例えば、 平成 21 年度版情報通信白書 [1] によると、 動
画共有サイトの利用者数は全世界で 1 億 9000 万人を超えている。 これはネットワークが娯楽のた
めに世界的にも大きく使われていることに他ならない。 また、 ネットワーク上でのコミュニケー
ションも日常的に行われるようになってきた。 例えば、 巨大電子掲示板システム 2 ちゃんねるは
非常に活発に利用されており、 ネットレイティングス社の記事 [2] によれば 2008 年 12 月 24 日の
時点で 1170 万人もの利用者がいるという。 他にも、 ソーシャルネットワーキングサービスであ
る mixi1 や Weblog などの利用者も非常に増加しており、 ネットワークを介したコミュニケーショ
ンはもはや無くてはならないものとなっている。
1.2
ネットワーク上のコミュニケーション
ネットワークは今では人と人を繋ぐ重要な基盤となっている。現在多くの人々が用いているネッ
トワークツールには、 電子掲示板システムやチャット、 インスタントメッセンジャーや Skype な
どの音声チャット、 あるいは Web カメラなどを用いたビデオチャット、 またお絵描きチャット [5]
などの協調して絵をかけるキャンバスを用意したチャットシステムなど様々な種類があり、 多種多
様なコミュニケーションが行われている。
本研究ではこれらのようなコミュニケーションツールを 2 つの軸を用いて分類する。 第一に、
コミュニケーションの時間性に焦点を置いた分類、 第二に情報伝達を行うための情報形態（ 例え
ばテキストであるか音声であるかなど）によって分類する。
1.2.1
同期的 ⇔ 非同期的コミュニケーション
コミュニケーションは、 発言と応答の間の時間間隔に応じて分類が可能である。 例えば人と人
の会話では、 発言と、 その発言に対する応答はリアルタイムに行われ、 時間の間隔は短い。 それ
と比較し、 書置きを残す、 掲示板などに書いておくなどのコミュニケーションでは発言と応答の
時間間隔が長くなる。 このような性質の違いによって、 前者を同期的なコミュニケーション、 後
者を非同期的なコミュニケーションと呼ぶ。 同期的なコミュニケーションを行うツールでは、 テ
キストチャットシステムや MSN メッセンジャー [6] などのインスタントメッセンジャー、 Skype
等の音声チャットシステムなどが存在し、 非同期的なコミュニケーションを行うツールでは、 電
子掲示板システム、 Weblog のコメント投稿などが存在する。
1 mixi:
http://mixi.jp
第1章
序論
7
なお、 この分類において明白に分けられない部分があることも付け足しておきたい。 例えば、
電子掲示板システムがあまりにも活発である場合には発言と応答の時間間隔が狭くなり、 性質が
同期的コミュニケーションに酷似するようになる。 インスタントメッセンジャーの類では発言・応
答がウィンドウを閉じない限りは保持されるため、 コミュニケーションの頻度が低い場合に非同
期的なコミュニケーションの様相を呈す。 また、 Twitter2 といった同期的・非同期的どちらにも
対応できるようなサービスも存在する。 そのため、 このような分類は一意に定まる絶対的なもの
ではないことを明記しておく。
同期的コミュニケーションと比べ、 非同期的コミュニケーションでは サーバ上にコミュニケー
ションの記録が残されるため、 より多くのユーザの情報を利用できるという利点がある。 一方 非
同期的なコミュニケーションの場合には発言に対して応答が返るまでの時間が長くなり、 あるい
は返答が返ってくるかどうかも定かではない。 したがって 他者の存在を感じづらいといった欠点
がある。 出来るだけ早く発言に対する意見が欲しい場合などには非同期的なシステムは向いてい
ないと言える。
1.2.2
言語情報 ⇔ 非言語情報
他者とコミュニケーションを行う際に、 どのような情報を用いるかによってコミュニケーショ
ンツールは分類できる。 MSN メッセンジャーや電子掲示板システム、 Weblog コメントなどでは
ユーザ間で言語情報のやりとりを行うシステムとなっている。 一方、 Skype における音声チャッ
トやお絵描きチャットにおける共有のキャンバス、 研究システムである TangibleChat[16] では非
言語情報のやりとりを行っている。
非言語情報は、 言語では伝えられないような、 あるいは伝えようとしないような情報を伝える
ことに適している。 例えば、 テキストで「来てほしい」と表現した場合にはどの程度そのように
思っているのかはわからないが、 電話などにおいて音声で「来てほしい」と言われた場合、 その
抑揚や調子によって急いで来てほしいのか、 あるいはそうでないのか等、 様々な情報が伝えられ
る。 非言語情報はこういった言語情報のみでは伝わらない情報を伝えることができる点において、
言語情報よりも優れている。
しかし、 非言語情報は情報を保存する際にテキスト情報よりも遥かに容量を必要とする場合が
多い。 例えばテキストを音声化する場合、 やはりテキストよりも遥かに容量を必要とするだろう。
そのため、 システムとして非言語情報を扱う際にはアプリケーションの実行・あるいは作製の敷
居が高くなると言える。 特殊なデバイスを用意する必要があることもある。 情報の一覧性におい
ても非言語情報は不利である。 言語情報に比べて音声や手書き、 あるいは力覚情報などは同時に
確認できる量が少ない。 したがってそういった情報を言語情報によって補うといった場合が多い。
1.3
動画上コミュニケーションの流行とインタフェース
Web 上において動画情報を共有し、 閲覧することができる動画共有サイトが現れた。 最初に盛
んに利用されるようになったのは 2005 年 2 月にサービスを開始した YouTube3 である。 動画とい
うリッチなコンテンツは昔から TV という形で触れられていたので、 馴染みが深かったこと、 そ
して動画をアップロードする機能が非常に手軽であったことから YouTube は非常に発達し、 現在
では 1 億を超える人間が楽しむほどとなった [3]。
2 Twitter:http://twitter.com/
3 YouTube:
http://www.youtube.com
第1章
序論
8
その一方で、 現在日本国内で最も一人当たりの利用時間が長い動画共有サイトは世界最大の動
画数を誇る YouTube ではなく、 ニコニコ動画 [7] となっている [3]。 ニコニコ動画は YouTube と
比べ、 次のような不利な点が存在した。
• ニコニコ動画のサービス開始は 2006 年 12 月であり、 YouTube の後追いである
• ニコニコ動画の動画数は YouTube よりも少ない (元々YouTube の動画を情報源としていた)
• 動画の画質に基本的に差はない
上記のような要素を考慮すればニコニコ動画サービスが YouTube よりも支持される理由は無いが、
日本国内ではニコニコ動画が支持されている。 その理由は、 ニコニコ動画におけるアノテーショ
ンインタフェースにあると考えられる。
図 1.1: ニコニコ動画のインタフェース 投稿されたコメントが左方向に流れていく
ニコニコ動画では動画再生中にコメントアノテーションを行うことによって、 その再生時間に
対してのアノテーションを行う。 コメントは再生時に図 1.1 のように動画上に描画され、 ネット
ワーク上の、 別の人間が今まさにコメントをしたかのような 疑似的なリアルタイムコミュニケー
ション感覚をもたらす。ニコニコ動画における成功点を分析すると次のようになる。
動画閲覧と分離しないアノテーションインタフェース
動画共有サイトの YouTube では、 ある動画コンテンツ全体に対してコメントアノテーションを
行う。 投稿時には図 1.2 のように、 テキストコメントを行うためのフォームを開き、 フォームに
入力を行い、 投稿を行うようになっている。 そのため、 動画から目を離してコメントの入力に移
る必要があり、 動画閲覧と並行してコメントアノテーションを行うことは難しい。 また、 動画の
どの部分に対してつけられたコメントなのかを明確にする必要があるため、 文章をある程度考え
る必要がある。 コメントを閲覧する場合においても、 動画を見終わった後に満足してしまった場
合、 コメントは見られず、 コメントの有効性が下がっていると言える。
一方、 ニコニコ動画では動画の再生時間に対してのコメントアノテーションを行う。 図 1.1 に
あるコメント入力欄にマウスでフォーカスを合わせ、 付けたいコメントを入力してエンターを押
第1章
序論
9
図 1.2: YouTube 左：YouTube のインタフェース 右：コメント投稿の手順
すことで即座に投稿が可能である。 このようなインタフェースにより、 動画閲覧とコメントのア
ノテーションを容易に並行して行え、 動画に表示されている情報自体がコメントの文脈となるた
め、 コメント自体に文脈の情報を含ませる必要が無い。 このようなインタフェースにより、 ユー
ザにより作成されるアノテーションの数が増大し、 現在の流行の一因になっているのではないか
と推測される。
同様に動画へのアノテーションを行っている Synvie[18] においても、 やはり YouTube のような
コンテンツ単位に付与するアノテーションよりも、 動画再生中にその時間に対して投稿するタイ
プのアノテーションの方が多数利用されているという結果となっている。
実況風のテキストアノテーション表現
コメントが動画上に上書きする形で表現されることにより、 閲覧者が容易にコメントの文脈を
知ることができる上、 入力者の入力手間も低減する。 例えば、 猫が多数出現する動画において、
あるユーザが「2 分 20 秒に出てくる茶色の猫が可愛い」という情報を付与したいとする。 この場
合、 投稿者はニコニコ動画においては、 2 分 20 秒付近において「茶色の猫が可愛い」とアノテー
ションを行えば良い。 そして、 閲覧者においてもその猫がどの猫なのか、 テキストが表示された
時点で明らかである。 このようにコメント投稿者、 閲覧者両名ともに非常に高い恩恵がある。
また、 ある時間に対して非常に多くのコメントが行われている場合、 ユーザはその動画におけ
る盛り上がりのようなものを感じられるだろう。 すなわち、 他視聴者達により作られる雰囲気、
非言語的なものが YouTube などのコメントシステムよりも伝わる。 川井ら [17] はこのように、 他
の閲覧者の感情を感じ取ることができる、 あるいは人に感情を伝えることができることを一体感
として定義している。
第1章
序論
10
動画上へのオーバーレイによる表現の多様化
動画上にテキストコメントを描画することによって、 ユーザの創意工夫が様々な表現を生み出
していった。
• 歌詞や動画の説明などの字幕
• 動画上の任意の位置へのアノテーション
• アスキーアート表現
技巧を凝らしてテキストメッセージを作成することによって、 上記のような表現が可能なことが、
ニコニコ動画における利点や魅力となっている。 例えば、 ニコニコ動画におけるテキストコメン
トを用いてアスキーアートを作成した例が図 1.3 である。
図 1.3: ニコニコ動画におけるテキストコメントによる表現例「ISAS ロゴ」
図 1.3 における動画領域上に見えるものは全てテキストコメントである。 改行・空白による調
整、 いくつかのコメントの同時投稿、 適切な文字の選択、 いくつかの基本的なコマンドの類を駆
使することでようやく実現することができる、 いわば職人芸とも言える表現である。
匿名性の高いコミュニケーション
本論文における匿名性とは、 実際にその人が現実世界における誰であるかを知りやすいかどう
かではなく、 ネット上の人格としても特定されないという意味の匿名である。 例えば、 ハンド
ルネームなどを常に表現している場合にはそれはネットワーク上における 1 人格を表現しており、
匿名性が少ない、 とする。 このような匿名性が高く設定されている場合、 ユーザはその場限り
の人間として発言を行うことができるため、 社会性を必要以上に気にする必要が無く、 コミュニ
ケーションが活発になる傾向にある。
ニコニコ動画ではコメントにはユーザ名などは表示されないため、 匿名性が高いと言える。 こ
れにより ユーザ一人一人が自身を特定される恐れなど抱くことなく発言を行うことができる。 ま
た、 Nathan ら [13] は同様に動画に対しアノテーションを行うシステムを作成したが、 評価実験
の中で匿名でアノテーションなどを行いたいなどの意見が得られたと記述している。 このことを
鑑みると、 ニコニコ動画における匿名性の高さが支持の一因となっていることがわかる。
第1章
序論
1.4
着目点
11
動画上にアノテーションをオーバーレイ表示することにより、 非同期的でありながら他者と同時
に閲覧しているかのような感覚、 一体感を得ることが出来るニコニコ動画のインタフェースは非常
に有効であるが、 テキストのみのアノテーションであり、 非言語的なアノテーションのアプロー
チは行われていない。 非言語情報のアノテーションを行う動画共有システム [12][13][14][17][18] は
存在するものの、 ニコニコ動画のような非同期情報共有や手軽なアノテーション、 表現力、 匿名
性を兼ね備えたものは存在していない。
そこで、 本研究では手書きストロークを用いた動画上非同期共有アノテーションシステムを開
発する。 既存インタフェースに比べ、 入力の自由度が向上するほか、 ユーザの描く勢いなどの非
言語的な情報も他ユーザに伝わり、 動画閲覧とコミュニケーションの新しい形を示せると考えら
れる。
1.5
研究目的
手書きアノテーションの非同期的共有の有効性を示すため、非同期的な動画上での手書きアノ
テーションを共有・再生可能なインタフェースを作成する。 また、 著者がシステムを作成する間
に見つけた問題点や、 システムを使用した際の評価や問題点について議論する。
1.6
本論文の構成
論文の構成について簡単に説明する。
本章では「序論」として本研究をはじめた背景と着目点、 そして目的について述べた。
第 2 章では、既存のネットワークアプリケーションや動画共有アプリケーションを挙げ、 本研
究との比較などを行う。
第 3 章では、 研究開発したシステムが持つ機能を説明し、 システム全体の概念を提示する。
第 4 章では、 システムの実装について述べる。
第 5 章では、 実際に運用した際の手書きストローク共有や非同期共有の効果、 発見された問題
点について考察を述べる。
第 6 章では、 結論と今後の課題について述べる。
12
第 2 章 関連研究
本研究と関連するシステムを、 動画上コミュニケーションとは関わりのないネットワーク上コ
ミュニケーションシステム、 動画上アノテーションシステム、 その他の関連システムに分類し、
紹介する。
ネットワーク上コミュニケーション
2.1
ネットワークを用いてコミュニケーションを行うシステムという意味での関連研究を挙げる。
2.1.1
MSN メッセンジャー [6]
図 2.1: MSN メッセンジャーの対話画面 テキストや手書き図を送信することができる
MSN メッセンジャーはインターネットに接続している他ユーザと対話を行うことのできるシス
テムであり、 全世界的に広く利用されている。 このシステムの特徴的なところは単にテキストメッ
セージの送受信を行えるだけでなく、 相互の手書き入力の送受信やファイルの送受信、 領域を共
有して用いることが出来るホワイトボード機能など様々なコミュニケーションを行うことが出来る
点である。 本研究とは手書き情報を用いることが出来る点で共通している。
第2章
関連研究
2.1.2
TangibleChat[16]
13
図 2.2: [16] より TangibleChat のシステム構成
TangibleChat は 1 対 1 のチャットを行うと同時に、 キーボードを打鍵した際の振動を相手に伝
えるというシステムである。 図 2.2 のように、 キーボードに設置された加速度センサがキーボー
ドへの打鍵振動を感知し、 ネットワークを介して振動情報を送信、 相手側で振動情報が受信され
ると、 椅子に設置された振動子が振動するという仕組みになっている。 チャットにおいて文字情
報を送信する以前に打鍵振動情報が送信されるため、 相手がチャットの入力に込める感情などが相
手に伝わる。 非言語情報を使用しているといった点において、 本研究の 関連研究として挙げた。
2.1.3
電子黒板・電子ノートシステム [15]
図 2.3: 電子黒板・電子ノートシステム
石田らは対話型電子白板とペン入力端末を連携させ、 生徒・教師間での黒板と板書をより密接
に連携したものとするシステムを作成した。 図 2.3 の左側が教師側で、 電子教材とその周辺に板
書を行うことや、 問題の配信を行うことができる (図は左右が同期したものではない)。 右側の生
徒側では板書のノート取りが可能な他、 教師の配信した問題を受信し、 そこに解答を書き込んで
教師に送り返すことなどが可能となっている。 このように教師側と生徒側をネットワーク上で結
第2章
関連研究
14
びつけることにより、 既存の黒板と板書を用いた状態よりも遥かに効率よくノート取り・解答な
どを行うことができる。
本研究とは手書き入力情報をサーバとクライアントで送信しあい、 利用している点で共通して
いるが、 任意のユーザの手書き情報が 1 つの領域で共有される点、 入力した手書き情報がネット
ワーク上で永続化される点が異なる。
動画へのアノテーションを行うシステム
2.2
動画に対してアノテーションを行う関連研究を挙げる。 ネットワークの使用の有無には関わら
ない。
2.2.1
ニコニコ動画 [7]
現在、 日本国内でのユーザの利用時間が最も長いと言われる動画共有サイトである [3]。ニコニ
コ動画では現在観ている動画の現在の再生時刻に対してコメントを付与し、 他ユーザと共有する。
付与されたコメントは図 1.1 のように投稿された動画上に投稿した再生時間に描画され、 あたか
も他のユーザと動画を同時に視聴し、 コミュニケーションを行っているような感覚を得ることが
出来る。
本研究でも動画上の再生時間を用いてアノテーションを行い、 非同期的なコミュニケーション
を実現する。 ただし、 アノテーションとして共有する情報は手書きストローク情報である。 この
ことにより、 一部の技術の高いユーザに依らずとも幅の広い表現を容易に入力することが可能と
なる。
2.2.2
Feel AIR[17]
川井らはコンテンツを共有するコミュニケーションにおける「一体感」を次のように定義した。
ユーザが, コンテンツを共有した他の複数ユーザの, その場その場の思考や感情・意見
や評価を自然に読み取ることができる. また, ユーザ自身も同じ様に参加でき, それら
を他の複数ユーザに表現することができる. そして, それらに対する反応が他のユー
ザからなされ, 自然に読み取ることができる. このように, 複数ユーザ間でのインタラ
クションが存在するシステムの中において, 臨場感やコミュニケーションから生まれ,
ユーザが享受できる感情
川井らはニコニコ動画における上記のような一体感について議論し、 この感情を高める試みを行っ
た。 具体的にはニコニコ動画のような非同期動画上コミュニケーションシステムにおいて、 付与
されたアノテーションを他ユーザが容易に評価可能であり、 その評価が画面上に効果として表れ
るようにすることで、 他者の思考や感情・意見をより動画閲覧時に反映されるシステムを構築し
た。図 2.4 において (a) が動画再生部分であり、 コメントが再生されている。 多くのユーザがコ
メントをクリックすることによってコメントの色が変化し、 そのコメントが評価されたコメント
であるかそうでないかを示す。 このような仕組みにより、 コメントを評価されたユーザはコメン
ト投稿を行うモチベーションが向上し、 また他者からの同意感覚を得ることができる。 このよう
にして動画閲覧時の一体感を向上させることに成功している。
第2章
関連研究
15
図 2.4: Feel AIR[17] の外観
2.2.3
Stickam[8]
Stickam はライブカメラのストリーミング配信と同時にチャットを行うことのできる Web サー
ビスである。 ニコニコ動画とは違い、 リアルタイムチャットであることと、 ユーザ名などを表記
するためにより実名の感覚である。 ライブカメラ映像とリアルタイムチャットの組み合わせとい
うこともあり、 どちらかと言えば小さなコミュニティ向けのシステムとなっている。 Stickam は
一般的にはアノテーションシステムとは言えないが、 本研究では同期的に他者からテキストアノ
テーションを行うことができるシステムとして捉える。
本研究ではこのようなリアルタイムな同期的システムを採用せず、 非同期的なシステムを採用
する。
2.2.4
CollaboraTV[13]
CollaboraTV はオンライン上の共有された動画を見ているユーザどうしでコミュニケーション
を行うシステムである。 個々の機能について説明する。
テキストアノテーション
ユーザはテキストコメントを動画に対して作成することができる。 作成されたコメントは他ユー
ザが後に動画を見た際に、 コメントが再生された時間に数秒表示される。 なお、 他の友人と同
期的に閲覧するモードの場合には、 コメント情報は各ユーザのクライアント上で直ちに表示され
る。 この場合にもやはりコメントは保存され、 この動画を話題として行われたチャットなどが別
のユーザの画面においても再現される。 テキストの提示方法はユーザのアバターが喋ったかのよ
うな吹き出しを提示する (図 2.6)。
第2章
関連研究
16
図 2.5: CollaboraTV の外観 (2007 年の論文より)
図 2.6: CollaboraTV のアノテーションと Virtual Audience[13]
Virtual Audience
Virtual Audience は他者と共に動画を見ている感覚を生み出すため表現されるアバターである。
ある動画を閲覧している際、 その動画に対して過去にコメントやその他のアノテーションを行った
ユーザのアバターとユーザ名が図 2.6 のように出力される。 また、あらかじめ用意された「happy」
などの感情表現のセットを用いることで、 アバターの顔によって感情を表現することができる。
例えば図 2.6 では中心のユーザのアバターが顔による感情表現を行っている。
Interest Point
CollaboraTV では「良い」、「悪い」の反応をアノテーションすることができる。 これを Interest
Point と呼ぶ。 Interest Point はテキストアノテーションと同様に同期的・非同期的に共有され、
ユーザのアバターの腕によって表現される。 「良い」の アノテーションを行った場合には図 2.5 の
左下や図 2.6 右下のアバターの右腕のように、 親指を上方向に立てた表現がされる。 一方、 「悪
い」のアノテーションの場合には親指を下に突き出す表現となる。 これにより動画上の雰囲気を
より感じることができる。
第2章
関連研究
17
図 2.7: Interest Point と時間の関係を表したグラフ
また、 図 2.7 のような、 利用者全体の Interest Point とユーザの Interest Point のグラフを提示
し、 多く反応を返されている動画上の時間などを表現する。 これにより動画上で盛り上がってい
る時間を容易に認識することができる。
2.2.5
CWaCTool[14]
図 2.8: CWaCTool のインタフェース
Nathan ら [14] は動画コンテンツ上に手書き入力を行い、 作成されたコンテンツを共有するシス
テムを構築した。 図 2.8 がシステム CWaCTool のインタフェースである。 左上の動画再生部にお
いて動画再生を行い、 アノテーションを行いたい動画上時間となった場合に動画再生部をクリック
すると、 その画面内容がアノテーション部にキャプチャされる。 その後アノテーション部におい
て手書きやツールによる図形の描き込みを行うことで、 動画内コンテンツに対するアノテーショ
ンを行うことができる。 このようにしてつけられたアノテーションは再生時には描き込んだタイ
ミングで表示され、 数秒間の後に消える。
また、 このアノテーション作成を他者と共同で行う機能も備わっている。 その際、 議論を行
うためにチャットが備わっており、 コンテンツをより充実させるための仕組みとして実装されて
いる。
本研究では同様に手書きアノテーションを行うが、 次の点において異なる。
第2章
関連研究
18
閲覧とアノテーションの融合
本研究システムでは動画上への描き込みはユーザが勢いで描き込むことができるよう、 再生と
同時に行える。 これによりアノテーションの量の増加を図る。
シンプルなツール
図 2.9: CWaCTool における編集ツール
CWaCTool は編集のためのツールが豊富である。 図 2.9 のように 様々なツールアイコンが備
わっており、 整ったアノテーションを行うことができる。 例えば左下には円、 矩形などを入力
するためのツールアイコンが備わっているため、 図形を組み合わせた整った図などが非常に作成
しやすい。しかし、 このように整えるための描画ツールが豊富である場合、 各ユーザがアノテー
ションの編集に時間をかけることが当たり前になってしまい、 結果的にアノテーションの数が減
少してしまう。
したがって本研究システムは編集のためのツールを豊富にしない。 その代わり、 手間をかけず
とも綺麗な線を引くための補正機能などを追加する。
他者と同期的に編集を行うインタフェースは提供しない
他者の存在により思うように描けないなど 様々な弊害も考えられるため、 本研究では同期的編
集・閲覧が可能なインタフェースとはしていない。
2.2.6
AmigoTV[12]
図 2.10: AmigoTV のフレンド (buddy) リスト
図 2.11: AmigoTV のエモティコン表示
第2章
関連研究
19
AmigoTV はブロードキャスト TV 配信サービスと同期し、 ネットワーク上の他ユーザと音声
を用いたチャットや、 エモティコン (感情をアイコンで表現したもの、 図 2.11 の左下や右下のア
イコン) の表現を行うことができるシステムである。 他ユーザはフレンドリストにユーザを登録
し、 その相手を図 2.10 のようなリストから選択し、 同じコンテンツの閲覧や音声チャットの開始
を行う。
2.2.7
Synvie[18]
山本らは映像コンテンツと関連する Weblog コミュニティから映像コンテンツに関するアノテー
ションを取得する仕組みを提案した。 Synvie では動画コンテンツに対し、 次のようなアノテー
ションを行うことができる。
シーンテキストアノテーション
図 2.12: Synvie シーンテキストアノテーション
映像内の特定の部分に対してテキストアノテーションを行うのがシーンテキストアノテーション
である。 このアノテーションはニコニコ動画において行われるアノテーションと意味としては等
価と言える。
映像シーン領域へのテキストアノテーション
映像シーン領域へのテキストアノテーションでは 映像を一時停止して行わなければならないが、
図 2.13 のように映像シーン中に矩形領域を選択し、 テキストアノテーションを施すことができる。
これにより、 映像における再生時刻と映像中の矩形領域を指定した、 対象が明確なアノテーショ
ンを行うことができる。
映像シーンへのボタンアノテーション
映像シーンに対しての簡易なアノテーションとして、 2 種類のボタンによるアノテーションを
行うことができる。 一つ目は映像に対してマーキングを行う機能で、 マークした映像を後々引用
第2章
関連研究
20
図 2.13: Synvie シーン領域テキストアノテーション
図 2.14: Synvie シーンボタンアノテーション
する際などのために用いる。 この機能は個人的な使用のための機能であり、 他ユーザとの共有は
行われない。 二つ目にシーンボタンアノテーションである。 これは、 映像の任意の時間に対し
てマウスクリックで閲覧者の主観的な印象を表すためのアノテーションである。図 2.14 のように
「Nice」と「Boo」の 2 種類のうちのボタンを押すことによって、 その映像シーンを評価すること
が出来る。 図 2.14 にあるように、 この情報は統計的に出力されそのシーンの評価が他者からもわ
かる。
これらアノテーションシステムを用いることにより、 既存のシステムよりも質の高いアノテー
ションの抽出を行うことに成功した。
ここで行われたアノテーションを筆者らは次のように分類している。
• 主にシーンの内容を説明・解説するコメント
• 主にシーンに対する直接的な意見や感想で、 シーンに関するキーワードが含まれる
• 主にシーンの内容から派生した話題に関するコメント
• 感嘆符や形容詞のみなど あるいは話題と関係ないもの
本研究でも動画上に書かれたアノテーションが何を意味したものかを評価・分類する。
第2章
関連研究
2.2.8
FeelTag[10]
21
FeelTag は 2007 年 7 月 19 日から 2007 年 10 月 31 日まで α サー
ビスとして配信していた、 TV 閲覧時の感情を共有するためのサー
ビスである。 TV を閲覧している際に「楽しい」、 「悲しい」な
どの 4 種類感情を感情タグボタンから選択し、 送信することで同
じ地域の同じチャンネルを見ている他ユーザがどんな気持ちで TV
を見ていたのかを一覧できるシステムとなっている。 図 2.15 にお
いて、 中央の部分がユーザが表現した感情タグと時間の関係のグ
ラフとなっている。 現在の時刻が赤い線の時間である。 ユーザが
感情タグボタンを押して感情を表現すると、 この赤い線上に新し
い感情タグが追加される。 このようにして TV を見ている遠隔の
他者と、 盛り上がりの共有、 感情の同調などを行うことができる。
図 2.15: FeelTag のインタ
フェース
2.2.9
字幕.in[9]
字幕.in は動画共有サイトの YouTube の動画上にテキスト字幕を作成し、 できた 1 つの作品を
公開するサービスである。 投稿者は動画を再生しながら画面下に字幕を入力することで、 動画に
対して字幕を付けることができる。
ニコニコ動画とは違い、 動画の内容と密着したアノテーションを行うことに主眼を置いたアノ
テーションシステムとなっている。 例えば、 英語が用いられ、 日本語の字幕も吹き替えもついて
いないような動画に対し、 その翻訳テキストを字幕として作成するような用途に用いられる。 あ
るいは、 全く嘘の字幕を作成することによって動画とのミスマッチによる面白さを追求するよう
に使われる。
2.2.10
大盛らのシステム [19]
大盛らは動画閲覧時に手書きの注釈を動画の外に付与することで、 付与した情報を栞として用
いて動画内検索を行うシステムを開発した。 例えば、 図 2.16 では動画上の (a) が表示されている
時間に「明るすぎ」のようなアノテーションを施した。 (b) はその 5 秒後で、 動画上時間と注釈
のずれを起こさないよう動画に被さる部分のアノテーションは消えている。 この際、 動画画面の
外である「明るすぎ」の部分をクリックすることで、 (a) の時間をシークすることができる。
2.3
2.3.1
その他
Weisz らの研究 [11]
Weisz らは動画閲覧時にチャットを行うシステムをプロトタイプ実装し、 動画コンテンツ閲覧
とコミュニケーションを並行して行う場合にどのような効果が見られるかの実験を行った。 なお、
実験のチャットでは各個人で名前を表示する。
具体的には 85 人の被験者にアニメーションを閲覧させ、 コミュニケーションを行った場合にア
ニメーションを見ない場合に比べてどの程度の変化があるか、 実験を行った。 その結果次のよう
な事実がわかった。
第2章
関連研究
22
図 2.16: リアルタイム注釈入力による動画内検索 [19]
• 友人どうしで使う場合の方が発言数が多い
• 面白くないコンテンツほどコミュニケーションによって評価が上がる傾向にある
• 半数以上がチャットを面白いものとして肯定的に捉えている
また、 論文中でチャット内容が閲覧しているコンテンツの内容であるか、 それ以外であるかなど
の比率も分析している。
本研究の想定している環境は、 非同期的で匿名のコミュニケーションであるため、 この研究の
指標から言えばコミュニケーションは活発にはならないとなる。 しかし、 Weisz らの実験環境で
は各ユーザは名前が提示され、 容易に発言を行った人物を特定できてしまう。 そういった状態で、
全く親しくもない人間が一同に会した場合には互いに内容について警戒し、 発言が控えめになっ
てしまう可能性が高い。
2.3.2
Sequential Graphics[21]
図 2.17: SequentialGraphics[21] におけるストローク描画時の時間変化
櫻井らは描画時の臨場感を反映すべく、 キャンバス自体を循環する時間軸としてその上に描画
時の動きを保持した線を描画するペイントソフトを開発した。 図 2.17 のように、 実際にペイント
第2章
関連研究
23
を行った際の情報を元に、 時間変化に応じて軌跡を描画する。 これにより、 実際に描いた際の勢
いや手順などが画面の中に反映された、 新しい美術の形を生むことに成功した。
本研究ではその臨場感への考え方を取り入れ、 動画上に対して再生しながらのアノテーションを
行え、 さらにそれが出来る限り滑らかに再生されるよう、 描画時の時間補間を行う機能を設けた。
2.4
2.4.1
本研究に向けて
手書き情報の使用
本研究では手書き情報を使用することとした。 その理由は大きく分けて次の 2 つである。 関連
研究と絡めて述べる。
手間が少ない
テキストアノテーションは何か意見を述べる際には有効であり、 意味を含ませやすい形態では
あるが、 動画上のアノテーションは言葉にせずとも様々表現できることがある。 例えば、 ある場
所を見てほしいといった場合のアノテーションの場合ならば矢印などを描きこむことで事足りる。
Synvie のように領域を指定して テキストを入力するといった手順は必要が無くなる。 キーボード
を使用する必要が無いのでマウスやタブレットで完結し、 デバイス遷移が少なく済むといった利
点もある。
表現力が高い
手書き情報は視覚的な表現力で言えば最大のものであると言える。 原理的には太さ・色の要素
を調節すればあらゆる表現が可能であるためだ。 そのため、 手書きのインタフェースは様々なシ
ステム [5][6][13][14][19][21] で利用されている。
2.4.2
動画上再生時間を用いた非同期共有
本研究では動画上再生時間を用いて手書き情報の非同期共有を行う。 Stickam や AmigoTV な
どの同期共有を行うシステムに比べ、 ニコニコ動画や Feel AIR、 CollaboraTV や CWaCTool な
どの非同期共有システムでは情報の蓄積が起こる。 これにより、 ユーザ提示されるアノテーショ
ンの量が大幅に増加し、 そして多くのアノテーションが行われていることによってアノテーショ
ンを行う意欲が増すといった好循環が見込める。
手書き情報を非同期共有する例として CWaCTool[14] を挙げたが、 このシステムはアノテーショ
ンを個人で完成させる、 あるいはある程度の知人のグループによって完成させることを目的とし
ており、 匿名集団によるアノテーションには向いていない。 また、 動画上への描き込みも動画
再生と同期して行うことができず、 手書きを行った際の勢いなどを再現することは出来ない。 そ
こで、 本システムは動画情報閲覧と同時に手書きを行うことが可能であり、 描かれた手書きスト
ロークは Sequential Graphics[21] のように 書いた際の勢いなどを再現できるシステムを構築する。
24
第 3 章 システムの提案
図 3.1: 動画上手書きアノテーション共有システム
3.1
システム概要
本研究では、 動画閲覧時に手書きの入力をアノテーションとして行い、 それらを共有できるシ
ステムを開発する。 動画再生時に動画上に線を引くと、 その線はサーバ上に保存され、 その他の
ユーザが動画を閲覧した際にも同様に再生されるようになる。
実際の使用では、 次のようになる。 ユーザはクライアントアプリケーションを起動する。 す
ると動画リストが提示されるので、 ユーザはその中から動画を選択し、 動画の再生・閲覧を開始
する。 動画閲覧時にもし何か描画してみたいと思った際には動画上に対し、 マウスのボタンを押
し、 動かすことによって手書きを加えることができる。 図 3.1 では、 動画上に対し、 赤く「ズ
ザー」や効果線のようなものを加えている。 このような手書きのアノテーションはネットワーク
を通じて共有され、 他者がこの動画を閲覧した際に描画される。
3.2
動画上アノテーション共有システムの要件
本研究で目指すアノテーションシステムは、 大規模の人間が使用し、 多くのアノテーションが
動画上に施され、 そのアノテーションを基にさらなるアノテーションが生まれるシステムである。
第3章
システムの提案
25
そのためには、 次のような点を満たす必要があると考えられる。
非同期共有
同期したコミュニケーションインタフェースでは情報の蓄積が行われず、 より多くのユーザに
よるコミュニケーションの発展などが望めない。 またアノテーションを行うユーザ数が少なくな
りやすいということもあり、 動画上のアノテーションを非同期共有することが重要であると考え
られる。 本研究では手書きストローク情報を動画上時間に対して付与し、 ネットワークを用いて
共有する。
容易なインタラクションによるアノテーション
ユーザは入力のためのインタラクションが複雑であればあるほど、 アノテーションの意欲が下
がると考えられる。 したがって、 インタラクションが複雑にならぬよう注意する必要がある。 本
研究では動画画面上に書き込むという容易なインタラクションによってアノテーションを行うこと
ができる。
動画閲覧とアノテーションの融合
動画閲覧とアノテーションの閲覧・編集を分離させてしまうと、 動画を見ている最中に感じた
こと、 思ったこと、 そういったものをすぐに表現することができない。 したがって動画閲覧と同
時にアノテーションを提示し、 そして動画閲覧を行いながらのアノテーションが行えなければな
らない。 本研究では動画上に手書き線アノテーションを描画し、 また動画画面上に見たままのア
ノテーションを施すことができる。
自由度の高いアノテーション
表現力を高め、 ユーザの表現したいものをより表現できるようにしていくことで、 アノテーショ
ンの量・質が向上する。 ただし、 表現力の高さとインタラクションの容易さは多くの場合相反す
るため、 慎重にシステムのデザインを行う必要がある。 本研究では手書き情報を用い、 表現力を
高める試みを行っている。
高い匿名性
アノテーションを行う際、 どのようなユーザがそのアノテーションを行ったのか、 他ユーザか
らわからないようにしておくことが必要である。 匿名性が低い場合、 他ユーザからどのように評
価されるのかについて必要以上に思い悩むなどの弊害が起こり、 アノテーションの意欲が減少し
てしまう。 本研究では引かれる線がどのユーザの線であるのかを判別されない。
第3章
システムの提案
26
図 3.2: システム構成
3.3
システムの構成
本システムは手書きストローク情報や動画情報、 ユーザ情報などを格納する中央サーバと、 ユー
ザの手元で動作し 動画の再生や手書きストロークの送受信を行うクライアントで構成されている。
クライアント上でユーザは動画閲覧や手書きアノテーションを行う。サーバではユーザが行った
手書きアノテーション情報を取得し、 データベースに格納する。 ユーザからアノテーションが行
われた動画のリストや動画のアノテーション情報の要求があった場合には、 その送信を行う。
3.4
インタフェース上考慮すべき点
本研究システムを作成する途上、 手書き情報の非同期的共有において考慮すべき点をいくつか
見出した。
手書き自体の難しさ
手書きを用いるアノテーションは、 インタラクションとしては容易であるが思うように描画す
ることは難しい。 実世界での字の習熟度と同様に、 手書きを用いたアノテーションもまた個人差
が大きいため、 手書きを行うことへの抵抗感はテキストアノテーションよりも遥かに大きい。
この問題に対して、 本システムでは綺麗な曲線を引きやすくする補正・補間を行う。 詳しくは
3.7.6 節にて述べる。
時間と表現のズレ
2.2.7 節の Synvie[18] におけるシーン領域アノテーションでも触れたが、 動画上の表現に対して
直接アノテーションを行う場合、 時間とのズレをどこまで許容するかが問題となる。 わずかな時
間がずれただけで、 そのアノテーションが正確な表現ではなくなってしまう。 例えば図 3.3 の場
合、 ある時間に猫の耳部分にアノテーションを行ったとしても、 その表現を 1 秒も提示し続けた
場合には、 図の右のように動画上の耳の位置とストロークの位置にズレが生じてしまう。
本システムでは時間の経過した表現を少しずつ半透明にすることで、 時間のズレに対する抵抗
感を和らげる試みを行っている。
第3章
システムの提案
27
図 3.3: 時間経過によるストロークのズレ
3.5
画面構成
図 3.4: 画面構成
本システムの画面は図 3.4 ように、 3 つのウィンドウで構成される。 なお、 メインの動画再生
画面以外は非表示にすることも可能である。
(a) 動画再生・描き込み画面 動画とストローク情報の再生や、 動画への描き込みなどを行う。 動
画上でマウスボタンを押し、 動かすことによって線を引くことが可能。
(b) 動画リスト・YouTube 検索 再生する動画を選択、 あるいは検索し選択する。 また、 動画
共有サイトである YouTube から動画を検索し、 再生することも可能である。
(c) 動画内ストローク検索 ストロークを入力し、 動画内の類似するストロークを検索していくつ
か提示する。
3.6
使用方法
実際に使う際の手順は次のようになる。
第3章
システムの提案
28
図 3.5: ログイン画面
1. ログイン
本システムを起動すると、 メインウィンドウ上にまずユーザ名とパスワードを入力するフォー
ムが表示される。 ユーザ名とパスワードはサーバ側との認証を行うため、ユーザ名とパスワード
を入力し、 ログインを行う。 なお、 現在のところ新規ユーザ登録のためのインタフェースはクラ
イアントには実装されていない。
2. 動画の選択と閲覧
図 3.6: 動画リストとプレイヤー, 右の動画のリストの中から動画を選びダブルクリックすると、 左
のプレイヤーにて再生される
図 3.6 のように動画リストから動画を選択し、 ダブルクリックを行うことで好きな動画を再生
することができる。 なお、 この時点で動画に付与されている手書きストローク情報も自動的に受
信され、 図 3.6 では「ゴゴゴゴゴ」と提示されているように、 ストロークも再生される。
第3章
システムの提案
29
3. 手書きストロークの描き込み
動画再生領域に対してマウス左ボタンを押し、 マウスを移動することで手書きストロークを現
在の時間に描き込むことができる。 そしてマウスボタンを放した時点でストローク情報の送信を
行う。 このインタラクションは多くのペイントアプリケーション等と同様のため、 直感的に行う
ことができると予想される。
4. 手書きストロークの検索
図 3.7: 各種ウィンドウの呼び出しメニュー
図 3.8: ストローク検索ウィンドウ
手書きストロークを行いたい時にはインタフェース上方のメニューバーから線検索ウィンドウの
表示 (図 3.7) をクリックし、 ストローク検索ウィンドウ (図 3.8) を呼び出す。 図 3.8 において左部
分が検索したいストロークを入力するキャンバス、 右部分が検索によって見つけられたストロー
ク情報である。 左部分にストロークを入力すると、 その動画において付与されたストローク情報
から最も入力されたストロークに類似しているものを抜き出し、 右部分に提示する。 見つかった
ストロークをクリックすることでそのストロークが実際に付与された時間をシークすることがで
きる。
3.7
3.7.1
各機能の詳細
ログイン
動画に対して引かれるストロークを一人一人判別するため、 本システムではユーザログインを
義務付けた。 これは後述する自分のストロークを削除する機能のために必要である。クライアン
第3章
システムの提案
30
トの起動後、 ユーザ名とパスワードを入力するとその情報をサーバに送信し、 その結果をクライ
アントに返すことで認証を行う。 なお、 ログインに成功した際にはその情報をローカルファイル
に保存し、 次の起動時にはフォームの初期値を保存した情報とする。
3.7.2
手書きストロークを動画上に描く機能
本システムでは図 3.4 の (a) の領域において、 動画上でマウスボタンを押しながら動かすことに
よって、 動画上、 その時間に対して手書きストロークによるアノテーションを付加することが可
能である。
図 3.9: 手書きストロークのスタイル変更ツール
線の表現もある程度の自由度を与えるため、 色と太さをある程度任意に指定することが出来る。
図 3.9 内のように、 色選択ボタンを押下しパレットを表示し色の選択を行い、 太さ調節スライダ
を用いることで線の太さを調節する。
3.7.3
手書きストロークの再生
図 3.10: 時間と共に現れるストローク
第3章
システムの提案
31
本システムでは保存された手書きストロークを動画上に再生する。 図 3.10 では左上が動画上の
線の始まりの時間で、 時間が経過するにつれ少しずつ線が延長されていく。 これは、 ユーザがか
つて実際に動画を見ながら線を引いた際と同様のタイミングで引かれる。
図 3.11: 時刻 t では線は t2 と t3 の間の点を補間して線を描画, 時刻 t3 になるに従いスムーズに線
が t3 に延びる
なお、 手書きの線は点と点を結ぶ線分の集合として表現されている。 例えば図 3.11 が実際に動
画上の再生時間 t0 から t3 の間に書かれた線とすると、 各点の間の線分 1 本 1 本が連結して 1 つ
の手書きストロークとなっている。 このような線分 1 本 1 本に動画上でいつ付与されたかの情報
があり、 動画上の再生時間に近づいた際に順次描画される。
そういった構造であるため、 点と点の間の動画上時間は離散的な値となっており、 これをその
まま再生した場合には滑らかな再生とは言い難いことになる。 そこで、 図 3.11 左のように動画
上時間と中間点を補間し、 線を描画する。 その式は、 ある時間 t0 の点 (x0 , y0 ) と時間 t1 の点
(x1 , y1 ) の間の時間である t(t0 < t < t1 ) の時、 求める点 p とその座標 (x, y) は
x =
y
=
t1 − t
t − t0
x0 +
x1
t1 − t0
t1 − t0
t1 − t
t − t0
y0 +
y1
t1 − t0
t1 − t0
(t0 ̸= t1 )
これらによって点と時間を適宜補間することで、 より滑らかな線の再生が可能となった。
3.7.4
手書きストロークの削除
自らが行った手書きストロークを削除することができる。 動画再生画面内において右クリック
を行い削除モードに移り、 この状態において自分が手書きを行った線をマウスクリックを行いな
がら横切ることで削除を行うことができる。 なお、 そのユーザが作成した手書きストロークには
若干赤いエフェクトを施し、 それとわかるようになっている。
3.7.5
動画共有機能
動画情報を容易に探し手書きアノテーションを行えるようにするため、動画情報源として YouTube
Data API[4] を用いることにした。YouTube Data API には次のような特徴がある。
• 世界最大級の動画情報源
• 動画情報の検索が容易
• 動画タイトルや付与されているタグなどメタデータ情報が豊富
第3章
システムの提案
32
• XML 形式で結果が返され様々なシステムから利用できる
この API を通して検索し、 得られたリストの中から動画の再生を行う。 再生時にはクライアン
トは動画情報をサーバに送信し、 サーバは自身の持つデータベースに登録を行う。 このようにし
て登録された動画のリストは動画リストウィンドウ (図 3.4 の (b)) に表示される。
また、 検索機能だけでは動画の指定に不便があるため、 YouTube 上の動画 ID を直接指定する
機能と、 FLV 形式の動画を指定してアップロードし、 タイトルとタグをつけて手書きされた動画
のリストとして登録する機能を設けた。
3.7.6
手書きストロークの補間・補正
手書きの入力は一般的に難しく、 例え直線を引こうとしても曲がってしまうことが多い。 熟練
したユーザであれば綺麗な線を引くことが可能ではあるが、 そのような技能を持たないユーザで
あれば書き込みを躊躇してしまい、 アノテーションの活発化の妨げとなる。 そこで、 多くのユー
ザが特殊な技能を持たずとも使用できるようにするためには、 線を描画する際に補正する機能が
必要である。 そこで、 手書きストロークを補正し、 綺麗にし描画するようにする。
平滑化フィルタの導入
手書きされた線に対して平滑化フィルタを施し、 線を滑らかにする。 図 3.12 がそのフィルタを
施した例である。 手書きの線の場合、 例えなだらかな曲線を引こうとしても一部の点が曲線に対
して突出してしまう。 そこで、 各点の座標をその付近と自身の座標で平均化することによりそう
いった突出した点を抑えることが出来る。
図 3.12: 左:補正をかける前の手書きストローク、 一部の点が突出しうねって見える 右:平滑化フィ
ルタ後の手書きストローク、 うねりが減少し滑らかな曲線となっている
座標のゆらぎによるエフェクト
線の部分部分の座標を描画されるたびにランダムに散らし、「うねうね」と動くような表現手法
を試験実装した。 この手法の目的は、 各ユーザ間の技術差による問題を解決するため、 あまり厳
密な線を引けないようにすることである。 また、このように線の表現を工夫することによって多
くの線を引きたいという欲求を引き出せないかと考えた。 図 3.13 では元々のストロークが左にあ
る赤い線であり、 毎時間ごとに変化している。
第3章
システムの提案
33
図 3.13: 描画毎にストローク中の点にランダムなゆらぎを加えている
図 3.14: 動画プレイヤーにおける制御パネル
3.7.7
動画プレイヤーとしての機能
動画プレイヤーとして機能させるため、 図 3.14 のようにプレイヤーとしての最低限の機能を備
えた。 具体的には、
• 再生
• 一時停止
• 停止
• シークバーによるシーク
の 4 つをサポートする。 シークバーを用いたシークの際には、 現在の時間を表すつまみをドラッ
グすることにより、 つまみの移動先での時間の手書きストロークを素早く表示する。 これにより、
さっとどのような手書きストロークが描きこまれているのかを確かめることに役立つ。
3.7.8
手書き数グラフの提示
川井ら [17] は動画に付けられた再生時間上のコメントをグラフ化することによって、 動画上の
どの部分においてコミュニケーションが活発であるか等を知ることを支援した。 本研究において
も、 動画上においてどの部分で最も手書きストロークが多く記入されているかを知ることによっ
て最もユーザの手の加えられた部分を抽出し、 閲覧することが出来るよう、 動画上の線の量と時
間を対応させた。 図 3.14 のシークバーの背景において提示されているグラフが手書き数グラフで
ある。
3.7.9
手書き入力検索
大盛らの研究 [19] のように動画内の描き込み内容を用いて、 どの時間に描いたかを知り、 シー
クする機能があれば 既存システムに比べて望んだ動画内位置に対して描き込みを行うことが容易
になる。 例えば、 ニコニコ動画のインタフェースではコメントリストにおいてダブルクリックを
第3章
システムの提案
34
行うことによって、 その動画再生時間をシークすることが可能である。 しかし、 大盛らの手法は
基本的に個人で用いることを想定したシステムであり、 匿名の複数人数に付与される場合には線
の数が膨大となり適切に機能しない。
そこで、 本システムでは手書き入力を検索する機能を提供する。 検索対象となる手書きスト
ロークはその動画に対して付与された手書きストローク全てである。
ユーザが検索のために入力した手書きストロークと、 動画内に描きこまれた手書きストローク
に対してそれぞれ類似度を算出し、 類似度の高いものを候補として提示する。 手書きストローク
の類似度の計算には Wobbrock ら [20] のアルゴリズムを本システムに合うように一部変更し、 用
いる。
Wobbrock ら [20] の認識手法
Wobbrock ら [20] は JavaScript による、 Web ページ上で動作する軽量かつ精度の高いストロー
クの認識手法を開発した。 このアルゴリズムでは、 まず初期段階として比較したい線の登録を行
う。 なお、 比較する手書きストロークのデータは線が連結している点の集合であり、 不連続な線
分を比較することはできない。 本システム内の場合は動画を再生する際にサーバから取得した手
書きストローク全てがこれに当たる。 これらのストロークに対して次の処理を施した後、 それら
をテンプレートとして保持する。
1. ストロークの点数を N にするよう、 等間隔距離に振り直す (N は精度に応じて調整)
2. 書き出しの位置が手書きストロークの重心の右に来るよう回転
3. 手書きストロークがある矩形領域に合うように座標の調節
4. 重心が原点座標となるように移動
このようにして保持したテンプレートと実際に検索を行うために記入した手書きストロークを比
較する。 検索のためのストロークをクエリストロークと呼ぶ。 クエリストロークを C 、 テンプ
レートの集合を T とし、 i 番目のテンプレートを Ti と表現する。 Ti [k] は i 番目のテンプレート
における、 k 番目の点 (x,y) を表している。 同様、 クエリストロークの C[k] は C における k 番
目の点である。 これらを用いて、 距離 di は次のように算出される。
√
(C[k]x − Ti [k]x)2 + (C[k]y − Ti [k]y )2
ΣN
k=1
di =
N
この距離が近しいものを選択することでストロークの検索が完了する。
インタフェース
手書きストローク検索のインタフェースは図 3.15 のようになっている。 左がクエリストローク
を入力するキャンバスで、 右がその結果を出力するキャンバスである。 左部分に手書きストロー
クを入力すると最も距離の小さいストロークを検索し、 その上位 3 つを右のキャンバス内に緑色
で提示する。 提示する位置は動画内で表示される位置と等しい。 この際、 図 3.15 のように最も
近い候補ほど色が濃く提示されるようにしている。 そのストロークが提示される部分を動画内で
閲覧したい場合には、 ストロークをクリックすることで、 動画プレイヤー内でシークを行う。
第3章
システムの提案
35
図 3.15: ストローク検索ウィンドウ
図 3.16: ストローク検索ウィンドウ, 候補の線にマウスカーソルを乗せるとストロークの時間とそ
の時の手書き描画状況を提示する
実際にそのストロークが目的としたものなのかを容易に判別できるよう、 マウスオーバー時に
その候補の手書きストロークと同時に描画されるストロークを提示する。 それが図 3.16 である。
図では第三候補のストローク上にマウスカーソルを乗せている。 すると、 そのストロークが描画
された時間の手書き状況が再現された線が出現し、 候補のストロークが「あ」の 3 画目の部分で
あったことがわかる。
36
第 4 章 実装
4.1
システム全体
図 4.1: システム構成図
本研究システムはサーバ・クライアントによって構成されている。
4.2
サーバ
4.2.1
構成
本システムにおいて手書きストロークや動画の情報などを管理しているサーバアプリケーション
は PHP+MySQL を用いて作成した。 クライアントに情報を渡す、 あるいはデータを受け取る部
分を PHP によって記述し、 ストローク情報や動画の URL 情報、 ユーザ情報などをバックボーン
となる MySQL データベースに格納する。 この設計であると、 リアルタイムに他者が描きこんだ
線を現在の画面上に適用するなどは不可能だが、 HTTP 接続を用いるため容易にどこからでも接
続を行うことが可能となっている。サーバにおいて作成されたスクリプトは次のような構成となっ
ている。
auth.php 認証を行うスクリプト。 データベース内のユーザリストを参照し POST されたデータ
が適切であればユーザ ID を返す
list.php システムに登録された動画情報を JSON 形式で送信 検索のための文字列を POST する
ことで検索も可能
add strokes.php 手書きストローク情報を JSON 形式で POST しデータを送るスクリプト
get annotaton.php 動画の YouTubeID や URL を POST することで、 その手書きストローク
データを得られる
第4章
実装
37
delete stroke.php 手書きストロークの ID を POST すると線の削除を行うことができるスクリ
プト
upload.php ファイルや動画タイトル・タグを POST することで動画を追加することが出来る
4.2.2
ログインについて
ユーザ認証はユーザ名とパスワードの対を入力することで行う。 その際に送信されたパスワード
は SHA-1 ハッシュ関数を用いて変換し、 データベースと照合する。 このようにすることで、 実
際にデータベースの内部を第三者に見られた場合でもパスワード漏えいの心配が無い。
例： hoge → 7a5409b01c4188b41e6b43c8b5d3c72c5231610b
4.3
4.3.1
クライアント
構成
動画情報の再生や線情報の再生などを行うクライアントは Adobe 社の Flash を基盤とした
Flex3.0+AS3 を用い、 AdobeAIR 実行環境で動作するデスクトップアプリケーションとして実
装した。 この開発環境を用いた理由は次のようなものである。
• マルチメディア (フラッシュビデオなど) の再生が容易
• UI 部品の多さからプロトタイプシステムの作成が容易
• ネットワーク機能の実装が容易
4.3.2
ユーザインタフェースにおける層構造
クライアントインタフェースでは、 Flex3 における UIComponent というクラスを用いている。
これはあらゆる UI 部品の基礎となるクラスで、 UI 部品として動作するための最低限の関数やプ
ロパティ、 様々なイベントの仕組みなどを保持している。 このクラスによって線の描画や手書き
のためのマウスイベントの受け取りなどを行うが、 マウスイベントを受け取りにおいて次の事柄
に気を配る必要があった。
• 何も描画されていない UIComponent にはマウスイベントは起こらない
• 上位に配置された層にのみマウスイベントが発生する
そのため、 線を描画したい層において線を描くためにマウスイベントを取得させようとしても、
何も描画されていない時には発生しない。
また、 ユーザが自身の描いた線を消す機能のために 1 つ 1 つのストローク自体に対してイベン
トを発生させ、 削除のための関数を呼び出すことを考えた。 しかし、 そのようにするためには最
上位の層に対してユーザのストロークを描画しなくてはならない。 しかし常に最上位に配置して
いたのでは線の描画自体ができなくなる。
そこで、 本システムでは動画再生とストロークの描画を行っている領域において図 4.2 のよう
に層を形成した。
第4章
実装
38
(1) 動画再生層 動画を提示する層。
(2) 線再生層 動画情報に付与された手書きストローク情報を描画する層。
(3) ユーザ線層 自身が描いたストロークを描画する層。 ストロークを削除するモードでは最上位
の層となる。 この層に配置されたストロークがマウスイベントを受け取るとその線を削除す
るように働く。
(4) 線描画層 ユーザが手書きを行う際のマウスのイベントを取得するための層。 ストロークを描
くモードでは最上位に配置される。 極めて薄い色によって全体を塗っておくことでマウスイ
ベントの取得を行う。
図 4.2: 層構造
線描画層はユーザがストロークの削除を行うモードではユーザ線層の下位に配置され、 ストロー
クを描くモードにおいては最上位に配置される。 このようにすることで、 ユーザのストロークの
削除のイベントが各ストロークにおいて受理されるようになる。
4.4
手書きストロークの再生の詳細
単位時間 (本システムでは 100ms) 毎に次のような手順によって再生される。 なお、 手書きスト
ロークは 1 本 1 本が配列に格納されているとする。
0. 描画されているストロークグラフィックの消去
現在描画されている手書きストロークのグラフィックを全て消去する。
1. 現在時間に表示するストロークの抜き出し
現在の動画上時間 +3 秒の間に線を描画する必要のあるストロークを配列から抜き出す。 3 秒は
本システムにおいて動画上で描き終わった線を半透明にして消滅させるまでの時間である。
2. 実際に描画する部分点の抜き出し
ストローク中から描画すべき部分点を抜き出す。 ストローク中において現在時刻よりも以前に
描画する部分点を抜き出した後、 節 3.8 のような次に描画すべき点の算出を行い、 描画すべき点
として追加する。
第4章
実装
39
3. ストロークの不透明度の決定
ストロークの不透明度 α(0∼1) を次のような式で決定する。 現在の時刻 t とストロークの終点で
の動画上時間 te において、 α は次のように計算される。

1
(t < te )
α=
1 − ((t − t)/3)2 (t ≥ t )
e
e
このような式にした理由としては、 動画上時間と α 値の変化の関係をより急にし、 動画自体の絵
とストロークのズレを許容しやすくする効果を狙ったためである。
4. 揺らぎの付与
ストロークにおける部分点の座標に小さいランダムな値を付与し、 ストロークが揺らぐ効果を
付与する。 揺らぎの効果をオフにする際にはこの過程を省略する。
5. 座標変換
ストロークの座標は全て 0∼1 に正規化してあるため、 これを現在の動画プレイヤーサイズに応
じて適切な座標に変換する。 具体的には x,y 座標に対して動画プレイヤーのサイズを乗算する。
6. 描画
実際に描画領域へ線の描画を行う。
使用しているユーザの描いた線の場合は、 前節で言うところのユーザ線層に対して描画が行わ
れる。 また、 この際には線 1 本 1 本に対して周囲が赤くにじむエフェクトの付与とマウスイベン
トを受け取るようにする処理を施し削除を行えるようにしている。 使用しているユーザ以外が描
いた線である場合には線再生層に対して描画が行われる。
4.5
4.5.1
ストローク情報について
送受信における情報形式
サーバ・クライアント間でストローク情報をやりとりする際にはストローク情報を JSON(JavaScript
Object Notation) 形式を用いて送受信する。 この形式を採用したのは次のような理由である。
• 使用時の可読性や拡張性が高い
• XML に比べデータ量を減少させることができる
• PHP 上や Flex3 上で容易に用いるためのライブラリが存在する
この 3 つの理由から、 JSON 形式を用いることとした。
4.5.2
ストローク情報の中身
ストローク情報は次のような情報から構成される。
sID ストローク自体のデータベース上での ID
第4章
実装
40
vID ストロークを描いた動画のサーバのデータベース上での ID
uID ストロークを描いたユーザの ID
sx ストローク開始地点の x 座標
sy ストローク開始地点の y 座標
ex ストローク終了地点の x 座標
ey ストローク終了地点の y 座標
t ストロークが描かれた再生時間
color ストロークの色
thick ストロークの太さ
ストローク情報をサーバから受信する際には、 実際には次のような JSON テキストとなる。
[
{
"sID":"1","uID":"3",
"sx":"0.34984375","sy":"0.758888888889",
"ey":"0.34984375","ey":"0.757083333333",
"color":"16711680","thick":"8","t":"12.225"
},
...
]
ストローク情報は動画毎にサーバから受信するため、 動画 ID を受信する必要はない。 したがっ
て上記のようになる。 また、 送信する際にも動画情報は JSON データの中には含めず、 別の情
報としてサーバに送信する。 1 つの動画に対して多くのストロークが送信されるため、 JSON に
含めると容量が増加してしまうためである。
4.5.3
ストローク情報の座標変換
クライアント上における座標系を図 4.3 に示す。 このような座標系からクライアントのサイズ
などが変わった際にも問題なく描き込みが再生されるよう、 ストロークの座標をプレイヤーのサ
イズによって正規化する。
第4章
実装
41
図 4.3: クライアントアプリケーションにおける座標系
42
第 5 章 考察
筆者自身で主観評価を行った。Core Duo1.66GHz、 メモリ 3GB、 解像度は 1280×800 である
環境で使用した。
描き込みを行った動画は次の 3 種類である。
• 画面が動かず音もないテスト用の動画
• 猫の動画
• NG 行動集である面白動画
また、 描き込み量はストローク中の節々の点数にして、 各々約 3000 点程である。 これはストロー
クの本数としては 100∼200 程になる。
5.1
手書き自体の効用
手書きインタフェースにより、 手間が小さくかつ自由度の高いアノテーションが行えたと感じ
た。 特に、 アノテーションを施したい位置に直感的に素早くアノテーションを行うことができる
という点において、 既存のインタフェースより優れている。 例えば猫が何匹も出てくる動画にお
いて「この猫の耳がいい」と表現したければ耳を囲って何らかの描き込みを行えばよい。 他者に
注目してもらいたい部分を表現することに向いたインタフェースと言える。
5.2
手書きアノテーションの種類
著者が行ったアノテーションの種類を分類すると次のようになった。
位置に対するアノテーション 動画上の特定の時間・特定の位置に対してのアノテーション。 例え
ば講義風景において黒板の一部の文字に注目させたいと思った際に、 その部分に線を引く、
矢印をつけるなどを行う場合が該当する。
動画内容に対する言語表現のアノテーション 動画上のある時間に対してのみのアノテーション。
動画上の座標は関係が無いような場合に該当する。
検索のための記号入力 後々にそこにシークしたいと思った際に記号を入力し、 検索して用いた。
使っていく上でアノテーション自体に対するアノテーションも出現することが予想されるが、 そ
の点は多くのユーザに使用してもらい、 例を集める必要がある。
第5章
考察
5.3
非同期インタフェースによるアノテーション数の増加
43
非同期的インタフェースにしたことで、 見る度にアノテーションを増加させることで コンテン
ツの充足を行うことができた。 逆に、 動画閲覧と手書きの情報を他者と同期したインタフェース
であったならば、 5.5 節にて述べるが、 勢いのある線の描画の難しさによってアノテーションは
難しかったと考えられる。
5.4
言語的表現には不向き
動画上の絵に対するアノテーションには有効であるが、 言語的な表現を必要とする場面では不利
な点が多い。 確かに手書きインタフェースは文字を描くことができるが、 次のような問題がある。
• テキスト入力以上の時間がかかりやすい
• テキストと同程度に小さく、 素早く描くことは非常に難しく、 描画領域を圧迫しがちになる
• 位置を定める必要のないアノテーションは描く場所が定まらず躊躇してしまう
例えばある NG シーンを集めた動画を閲覧している際に、 このシーンが面白かった、 という表
現を手書きでどのようにするべきか、 といったことを考えると言語的表現に頼らざるを得ない上、
どこに描くべきか定まらない。
5.5
勢いのある手書き表現の難しさ
動画再生と同期して線を描き、 手書きを行うことができるインタフェースを開発したが、 その
インタフェースを有効活用することは難しいということがわかった。
第一に、 動画再生中にはアノテーションを行いたい対象自体が動くことが多いため、 停止状態
でないと描き込みが難しいことが多かった。 そのためか、 動画再生と同期して線を描くことの一
番多かった動画は無音・静止している動画である。 これはほとんど新しい動画コンテンツを作成
しているに等しい状態である。
第二に、 描いているうちに過去に描いたストロークは消えるという問題である。 例えば「あ」
を描きたいとなった際、 1 画目に横棒を引き、 次に 2 画目を描こうとしていると、 すぐに一画目
は薄く表現されはじめてしまう。 そして 3 画目を描くころには消えてしまっているかもしれない。
そのため、 時間を止めてアノテーションを行わざるを得ないことが多い。
5.6
ストローク量の増加による負荷の増大
本インタフェースを実際に設計し使用してみると、 ストローク数の増大とともに描画が多大な
負荷となってしまった。
ストロークの点の数が 3000 を超える程にアノテーションを行った場合、 線の更新頻度が下がる
現象が見られた。 この現象により、 滑らかに再生できていた線も高負荷環境ではぎこちなくなっ
てしまう。 通常の状態では秒間 10 回の手書きストローク描画を行うようになっているが、 この
ような状態では秒間 3 回程度まで落ちてしまうこともある。 これでは節 3.7.3 のように点と点の間
の時間を補間したとしても無意味となってしまう。
第5章
考察
44
また、 このような高負荷状態ではマウスイベントの認識速度も低下することがわかった。 低負
荷の状態では秒間に 30 点以上の軌跡を利用できたものの、 高負荷環境にあっては秒間 10 点を下
回る。 これにより、 思ったような線を引けなくなってしまう現象が見られた。 したがって、 本
インタフェースにおいてはスケーラビリティを高める工夫も必要があることがわかった。
5.7
ストローク検索について
本システムでは点と点がつながった手書きストロークの検索機能を取り入れた。 この機能は十
分に精度があり、 活用することができたと考えられる。 特に画面上に複数の候補を提示し、 マ
ウスを乗せることでそのストロークが描画された際の状態を確認できる機能によって検索が容易で
あった。 しかし、 いくつかの問題点がある。
いくつかの手書きストロークを組み合わせて 1 つの図形を作ることが多いため、 1 本のストロー
クのみの検索では使いどころが限られてしまう。 例えば文字を手書きストロークによって表現し
ていた場合、 「あ」などは 1 本のストロークでは再現できないため、 検索が困難である。
45
第 6 章 結論
6.1
まとめ
動画共有環境において動画再生中に手書きのストロークを動画上に描き込み、 それを非同期共
有し、 コミュニケーションを行うことのできるシステムを開発した。 このようなシステムを作成
していく中で、 次のような問題点を見つけた。
• 綺麗な曲線を引くことが難しい
• 他者との能力の違いが顕著に出る
これらの問題点に対応するため、 手書きストロークに対して補正を行った。 これにより、 綺麗な
線を容易に引けるようになり、 ユーザのアノテーション意欲を引き出すことができるのではない
かと考えられた。
このシステムを著者自身が使用し描き込みを行った結果、 既存インタフェースよりも直感的に
動画内に対してアノテーションを行うことができることが確認された。しかし、 次のような問題
点があることがわかった。
• 言語的表現を行うには不向きである
• 動画と同期して手書きを加えることは難しい
• 線の増大の負荷に耐えうるシステムの構築が必要
今後これらの要素の克服を行うことによって手書きアノテーションを有効に利用した動画上コ
ミュニケーションが実現できると考えられる。
6.2
6.2.1
今後の課題
評価
本システムを多数のユーザに使用してもらい、 評価を行う必要がある。評価項目は次のような
ものである。
• 手書きインタフェースによってコミュニケーションを行うことができたか
• 補正がない状態と補正がある状態において後者の方が描きたいと思えたか
• 他者が同じ動画に対して描き込んでいることによって描きづらさを覚えたか
• どのような目的で描いたか
– ある位置に注目させるため
第6章
結論
46
– コメントとして
– アノテーション自体へのアノテーションとして
– 検索のための描き込みとして
• 動画を再生しながら描き込むことが必要であったか
• 全体的な使いやすさ
6.2.2
他種メディアを並列して用いる
本研究では手書きストロークのみを共有したが、 手書きストロークで言語的な意味を表現する
のは手間や難易度を考えると無理があるようであった。 そこで、 手書きを行うだけでなく、 文字
によるコメント投稿、 あるいは音声によるアノテーションを同時に共有することで、 より表現力
豊かなインタフェースの作成が出来ると考えられる。 例えば注釈として音声を用いれば、 その場
での雰囲気をより感じやすくなるのではないかと考えられる。 その場合、 入力音声には機械らし
い音声にするなどのフィルタリングが必要となるし、 動画自体の雰囲気を壊さないことを念頭に
置いて構築しなければならない。
また、 他種メディアを用いた際にはその別メディアへのアノテーションといったものも行われ、
より幅広いアノテーションが行われることが想定される。 例えば、 投稿されたコメント自体に対
して手書きストロークを加えることや、 音声に対してのコメントアノテーションなどが有りうる。
こういったアノテーションに対するアノテーションをより支援するインタフェースを作成すること
でコミュニケーションの醸成を行う必要がある。
6.2.3
線の美化
ユーザにとって、 容易に綺麗な線を引くことが出来ればより多くの手書きストロークの描き込
みを行いやすいと考えた場合、 引かれる線をより美しく表現できるようにしていく必要がある。
例えば、 筆のような効果を付け、 本システムで行ったような平滑化フィルタリングを用いれば
達筆風の線を誰でも引くことが出来るようになる。 その他にも効果によって多くのアノテーショ
ンを誘引することが可能ではないかと考えられる。 しかし、 このような考え方も一長一短である。
例えば、 ニコニコ動画 [7] のアノテーションは基本的には色・流れるコメントか上下どちらかに一
定時間現れるコメントか、 の自由しかない。 しかし、 多くのユーザが書き込みを行っているう
ちに「このようにすると狙った位置に表現できる」
「このようにすると重ねることができる」
「空白
を多く入れれば速く流れるコメントを付けることができる」などの数多くの技法が生まれていくこ
とで、 製作者の意図しない表現が生まれていった。 そして現在最も支持されていることを考えれ
ば、 必ずしも表現が大切なわけではないことがわかる。 効果を増やしていくあまり操作が煩雑に
なってしまう、 といったことは避けねばならない。
6.2.4
負荷の低減
本システムにおいて線の量が増えれば増えるほど、 再生中の負荷が増大してしまう。 同一時間
に対して大量の描き込みを行えば、 非常に負荷が高まりユーザの PC に悪影響を及ぼしかねない。
そこで、 本システムでは次のことに取り組む必要がある。
第6章
結論
47
線 1 本 1 本自体の負荷の低減
手書きストロークの点数を出来るだけ減らし、 描画することで負荷を低下させることが必要で
ある。
線数の制限
動画全体で追加される線の数自体に制限を設けることも大切だが、 同一時間内に描きこまれる
線の数も制限する必要がある。
6.2.5
検索性能の向上
現在の手書きストローク検索は一筆書きの検索にしか対応していない。 しかし、 多くの手書き
ストロークは何本かの描き込みを行ってはじめて図形として意味をもつことも多い。 例えば文字
の入力を行うことを考える。 もし文字を入力し、 それを検索したいと考えた際には一筆書きのみ
の検索では無理がある。 そこで、 何本かのストロークによる図形の検索機能を実装することで、
文字検索などが可能となる。 これにより、 より直感的に自分が付与したアノテーションや過去に
見たアノテーションを検索することができる。
48
謝辞
本研究は電気通信大学大学院電気通信学研究科、情報通信工学専攻寺田研究室において、寺田実
准教授の指導の下で、博士前期課程の研究として行われました。寺田実准教授には、研究の指針や
アイデア、修士論文の書き方や発表の方法など、あらゆる面においてご鞭撻を頂き、感謝の念も尽
きません。東京大学情報基盤センターに所属している丸山一貴氏にもまた、発表や論文、レジメ
の書き方についてのご意見や、 その他さまざまな面でご協力を頂きました。心から感謝申し上げ
ます。
D3 の高須賀 清隆氏には論文の校正や研究室内の様々な事柄においてお世話になりました。 さ
らには鍋の作成、 食器類の都合、 ビールの購入など…。 心から感謝申し上げます。
M1 の井桁正人氏には論文の校正やアイデア、 研究室内の料理、 設備管理など、 様々お世話に
なりました。 心から感謝申し上げます。
M1 の佐藤和哉氏には論文の校正、 様々な最新情報の提供などご協力をいただきました。 心か
ら感謝申し上げます。
その他、 実験システムの評価を行っていただいた B4 の卒業研究生の皆様方、 お礼申し上げます。
49
参考文献
[1] 平成 20 年度版 情報通信白書
http://www.soumu.go.jp/johotsusintokei/whitepaper/h20.html .
[2] Nielsen Online, 2008 年 11 月の月間インターネット利用動向調査結果を発表
http://www.netratings.co.jp/New news/News12242008.htm .
[3] Nielsen Online, 2007 年 8 月の月間インターネット利用動向調査結果を発表
http://csp.netratings.co.jp/nnr/PDF/Newsrelease09212007 J.pdf .
[4] YouTube の API とツール - Google Code
http://code.google.com/intl/ja/apis/youtube/overview.html .
[5] お絵かきチャット - Wikipedia
http://ja.wikipedia.org/wiki/%E3%81%8A%E7%B5%B5%E3%81%8B%E3%81%8D%E3%83%81%
E3%83%A3%E3%83%83%E3%83%88 .
[6] MSN Live メッセンジャー
http://messenger.live.jp/ .
[7] ニコニコ動画
http://www.nicovideo.jp/.
[8] Stickam Japan!
http://www.stickam.jp/.
[9] 字幕.in - Wikipedia
http://ja.wikipedia.org/wiki/%E5%AD%97%E5%B9%95.in .
[10] FeelTag
http://www.so-net.ne.jp/web2/feeltag/about.html .
[11] Justin D. Weisz, Sara Kiesler, Hui Zhang, Yuqing Ren, Robert E. Kraut, Joseph A. Konstan,
“Watching together: integrating text chat with video”, Conference on Human Factors in
Computing Systems, pp.877-886. 2007.
[12] Toon Coppens, Lieven Trappeniers, Marc Godon, “Amigotv: towards a social tv experience”,In Proceedings of the European Interactive Television Conference, 2004.
[13] Mukesh Nathan, Chris Harrison, Svetlana Yarosh, Loren Terveen, Larry Stead, Brian
Amento, “CollaboraTV: Making Television Viewing Social Again”, Proceeding of the 1st international conference on Designing interactive user experiences for TV and video, pp.85-94,
2008.
第6章
結論
50
[14] Vivian G. Motti, Roberto Fagá, Renan G. Catellan, Maria da Graca C. Pimentel, Cesar
A.C. Teixeira, “Collaborative synchronous video annotation via the watch-and-comment
paradigm”, Proceedings of the Seventh European Conference on Interactive Television,
pp.67-76, 2009.
[15] 石田準, 坂東宏和, 加藤直樹, 中川正樹, “手書き筆記と電子教材の交換を可能とした電子黒板・
電子ノートシステム”, 情報処理学会研究報告 (CE-67), Vol.2002, No.119, pp.25-32, 2002.12.
[16] 山田裕子, 平野貴幸, 西本一志, “Tangible Chat: 打鍵振動の伝達によるキーボードチャットに
おける対話状況アウェアネス伝達の試み”, 情報処理学会論文誌, Vol.44, No.5, pp.1392-1403,
2003.
[17] 川井康寛, 志築文太郎, 田中二郎, “動画共有に基づいた非同期コミュニケーションの一体感を
向上させるインタフェース” , 情報処理学会第 70 回全国大会論文集 , pp.715-716, 2008.3.
[18] 山本大介, 増田智樹, 大平茂輝, 長尾確, “映像を話題としたコミュニティ活動支援に基づくア
ノテーションシステム” , 情報処理学会論文誌, Vol.48, No.12, pp. 3624-3636, 2007.12.
[19] 大盛善啓, “リアルタイム注釈入力による動画検索システム”, 電子情報通信学会技術研究報告,
HIP, ヒューマン情報処理 100(713), pp.1-8 , 200103.
[20] Yacob O. Wobbrock, Andrew D.Wilson, Yang Lvi, “Gestures without Libraries, Toolkits or
Training: A $1 Recognizer for User Interface Prototypes”, UIST2007.
[21] 櫻井稔, 江渡浩一郎, “Sequential Graphics: 描画時の臨場感を再現するペイントソフト”,
WISS2008, pp. 29-34.