手書きストロークを用いた動画上における非同期コミュニケーション

平成

21

_{年度修士論文}

手書きストロークを用いた動画上にお

ける非同期コミュニケーション

情報通信工学専攻 情報通信システム学講座

０８３００５０ 平山 慧

指導教員 寺田 実 准教授

提出日 ２０１０年 １月２９日

1

目 次

第 1 章 序論 6 1.1 背景 . . . . 6 1.2 ネットワーク上のコミュニケーション . . . . 6 1.2.1 同期的⇔ 非同期的コミュニケーション . . . . 6 1.2.2 言語情報⇔ 非言語情報 . . . . 7 1.3 動画上コミュニケーションの流行とインタフェース . . . . 7 1.4 着目点 . . . . 11 1.5 研究目的 . . . . 11 1.6 本論文の構成 . . . . 11 第 2 章 関連研究 12 2.1 ネットワーク上コミュニケーション . . . . 12 2.1.1 MSNメッセンジャー [6] . . . . 12 2.1.2 TangibleChat[16] . . . . 13 2.1.3 電子黒板・電子ノートシステム [15] . . . . 13 2.2 動画へのアノテーションを行うシステム . . . . 14 2.2.1 ニコニコ動画 [7] . . . . 14 2.2.2 Feel AIR[17] . . . . 14 2.2.3 Stickam[8] . . . . 15 2.2.4 CollaboraTV[13] . . . . 15 2.2.5 CWaCTool[14] . . . . 17 2.2.6 AmigoTV[12] . . . . 18 2.2.7 Synvie[18] . . . . 19 2.2.8 FeelTag[10] . . . . 21 2.2.9 字幕.in[9] . . . . 21 2.2.10 大盛らのシステム [19] . . . . 21 2.3 その他 . . . . 21 2.3.1 Weiszらの研究 [11] . . . . 21 2.3.2 Sequential Graphics[21] . . . . 22 2.4 本研究に向けて . . . . 23 2.4.1 手書き情報の使用 . . . . 23 2.4.2 動画上再生時間を用いた非同期共有 . . . . 23 第 3 章 システムの提案 24 3.1 システム概要 . . . . 24 3.2 動画上アノテーション共有システムの要件 . . . . 24

2 3.3 システムの構成 . . . . 26 3.4 インタフェース上考慮すべき点 . . . . 26 3.5 画面構成 . . . . 27 3.6 使用方法 . . . . 27 3.7 各機能の詳細 . . . . 29 3.7.1 ログイン . . . . 29 3.7.2 手書きストロークを動画上に描く機能 . . . . 30 3.7.3 手書きストロークの再生 . . . . 30 3.7.4 手書きストロークの削除 . . . . 31 3.7.5 動画共有機能 . . . . 31 3.7.6 手書きストロークの補間・補正 . . . . 32 3.7.7 動画プレイヤーとしての機能 . . . . 33 3.7.8 手書き数グラフの提示 . . . . 33 3.7.9 手書き入力検索 . . . . 33 第 4 章 実装 36 4.1 システム全体 . . . . 36 4.2 サーバ . . . . 36 4.2.1 構成 . . . . 36 4.2.2 ログインについて . . . . 37 4.3 クライアント . . . . 37 4.3.1 構成 . . . . 37 4.3.2 ユーザインタフェースにおける層構造 . . . . 37 4.4 手書きストロークの再生の詳細 . . . . 38 4.5 ストローク情報について . . . . 39 4.5.1 送受信における情報形式 . . . . 39 4.5.2 ストローク情報の中身 . . . . 39 4.5.3 ストローク情報の座標変換 . . . . 40 第 5 章 考察 42 5.1 手書き自体の効用 . . . . 42 5.2 手書きアノテーションの種類 . . . . 42 5.3 非同期インタフェースによるアノテーション数の増加 . . . . 43 5.4 言語的表現には不向き . . . . 43 5.5 勢いのある手書き表現の難しさ . . . . 43 5.6 ストローク量の増加による負荷の増大 . . . . 43 5.7 ストローク検索について . . . . 44 第 6 章 結論 45 6.1 まとめ . . . . 45 6.2 今後の課題 . . . . 45 6.2.1 評価 . . . . 45 6.2.2 他種メディアを並列して用いる . . . . 46 6.2.3 線の美化 . . . . 46

3

6.2.4 負荷の低減 . . . . 46 6.2.5 検索性能の向上 . . . . 47

4

図 目 次

1.1 ニコニコ動画のインタフェース 投稿されたコメントが左方向に流れていく . . . . 8 1.2 YouTube左：YouTube のインタフェース 右：コメント投稿の手順 . . . . 9 1.3 ニコニコ動画におけるテキストコメントによる表現例「ISAS ロゴ」 . . . . 10 2.1 MSNメッセンジャーの対話画面 テキストや手書き図を送信することができる . . 12 2.2 [16]より TangibleChat のシステム構成 . . . . 13 2.3 電子黒板・電子ノートシステム . . . . 13 2.4 Feel AIR[17]の外観 . . . . 15 2.5 CollaboraTVの外観 (2007 年の論文より) . . . . 16

2.6 CollaboraTVのアノテーションと Virtual Audience[13] . . . . 16

2.7 Interest Pointと時間の関係を表したグラフ . . . . 17 2.8 CWaCToolのインタフェース . . . . 17 2.9 CWaCToolにおける編集ツール . . . . 18 2.10 AmigoTVのフレンド (buddy) リスト . . . . 18 2.11 AmigoTVのエモティコン表示 . . . . 18 2.12 Synvieシーンテキストアノテーション . . . . 19 2.13 Synvieシーン領域テキストアノテーション . . . . 20 2.14 Synvieシーンボタンアノテーション . . . . 20 2.15 FeelTagのインタフェース . . . . 21 2.16 リアルタイム注釈入力による動画内検索 [19] . . . . 22 2.17 SequentialGraphics[21]におけるストローク描画時の時間変化 . . . . 22 3.1 動画上手書きアノテーション共有システム . . . . 24 3.2 システム構成 . . . . 26 3.3 時間経過によるストロークのズレ . . . . 27 3.4 画面構成 . . . . 27 3.5 ログイン画面 . . . . 28 3.6 動画リストとプレイヤー, 右の動画のリストの中から動画を選びダブルクリックす ると、 左のプレイヤーにて再生される . . . . 28 3.7 各種ウィンドウの呼び出しメニュー . . . . 29 3.8 ストローク検索ウィンドウ . . . . 29 3.9 手書きストロークのスタイル変更ツール . . . . 30 3.10 時間と共に現れるストローク . . . . 30 3.11 時刻 t では線は t2と t3の間の点を補間して線を描画, 時刻 t3になるに従いスムー ズに線が t3に延びる . . . . 31

5 3.12 左:補正をかける前の手書きストローク、 一部の点が突出しうねって見える 右:平滑 化フィルタ後の手書きストローク、 うねりが減少し滑らかな曲線となっている . . 32 3.13 描画毎にストローク中の点にランダムなゆらぎを加えている . . . . 33 3.14 動画プレイヤーにおける制御パネル . . . . 33 3.15 ストローク検索ウィンドウ . . . . 35 3.16 ストローク検索ウィンドウ, 候補の線にマウスカーソルを乗せるとストロークの時 間とその時の手書き描画状況を提示する . . . . 35 4.1 システム構成図 . . . . 36 4.2 層構造 . . . . 38 4.3 クライアントアプリケーションにおける座標系 . . . . 41

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 章 序論 11

1.4

着目点

動画上にアノテーションをオーバーレイ表示することにより、 非同期的でありながら他者と同時 に閲覧しているかのような感覚、 一体感を得ることが出来るニコニコ動画のインタフェースは非常 に有効であるが、 テキストのみのアノテーションであり、 非言語的なアノテーションのアプロー チは行われていない。 非言語情報のアノテーションを行う動画共有システム [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 章 関連研究 13

2.1.2

TangibleChat[16]

図 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 章 関連研究 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 章 関連研究 21

2.2.8

FeelTag[10]

図 2.15: FeelTag のインタ フェース FeelTagは 2007 年 7 月 19 日から 2007 年 10 月 31 日まで α サー ビスとして配信していた、 TV 閲覧時の感情を共有するためのサー ビスである。 TV を閲覧している際に「楽しい」、 「悲しい」な どの 4 種類感情を感情タグボタンから選択し、 送信することで同 じ地域の同じチャンネルを見ている他ユーザがどんな気持ちで TV を見ていたのかを一覧できるシステムとなっている。 図 2.15 にお いて、 中央の部分がユーザが表現した感情タグと時間の関係のグ ラフとなっている。 現在の時刻が赤い線の時間である。 ユーザが 感情タグボタンを押して感情を表現すると、 この赤い線上に新し い感情タグが追加される。 このようにして TV を見ている遠隔の 他者と、 盛り上がりの共有、 感情の同調などを行うことができる。

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 = t1− t t1− t0 x0+ t− t0 t1− t0 x1 y = t1− t t1− t0 y0+ t− t0 t1− t0 y1 (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は次のように算出される。 di = ΣN k=1 √ (C[k]x− Ti[k]x)2+ (C[k]y− Ti[k]y)2 N この距離が近しいものを選択することでストロークの検索が完了する。 インタフェース 手書きストローク検索のインタフェースは図 3.15 のようになっている。 左がクエリストローク を入力するキャンバスで、 右がその結果を出力するキャンバスである。 左部分に手書きストロー クを入力すると最も距離の小さいストロークを検索し、 その上位 3 つを右のキャンバス内に緑色 で提示する。 提示する位置は動画内で表示される位置と等しい。 この際、 図 3.15 のように最も 近い候補ほど色が濃く提示されるようにしている。 そのストロークが提示される部分を動画内で 閲覧したい場合には、 ストロークをクリックすることで、 動画プレイヤー内でシークを行う。

第 3 章 システムの提案 35 図 3.15: ストローク検索ウィンドウ 図 3.16: ストローク検索ウィンドウ, 候補の線にマウスカーソルを乗せるとストロークの時間とそ の時の手書き描画状況を提示する 実際にそのストロークが目的としたものなのかを容易に判別できるよう、 マウスオーバー時に その候補の手書きストロークと同時に描画されるストロークを提示する。 それが図 3.16 である。 図では第三候補のストローク上にマウスカーソルを乗せている。 すると、 そのストロークが描画 された時間の手書き状況が再現された線が出現し、 候補のストロークが「あ」の 3 画目の部分で あったことがわかる。