WISS2006

描画内容を木構造でまとめた手書きツール
A handwriting tool which organizes the drawing in a tree structure

武井 英人

寺田 実∗

Summary. In drawing tasks such as lectures or discussions both in analog form (paper or blackboard)or digital form (digital ink), the drawings can be organized in a tree structure. Each node in the tree
contains a set of strokes. Common strokes of two nodes are extracted to construct the parent node of
the two child nodes. The merit of this tree organization is as follow: Sharing of common strokes saves
the eﬀort of drawing; Additional comments are added as a child node of the target; Logical relationshipbetween drawings is explicitly represented.
In this paper we propose a handwriting system which supports the creation, browsing and editing ofdrawings through an interface which deals the tree structure explicitly. We evaluated the prototype ofthe system in two ways: Experience of the use of the system and a user test in note taking. We compared
the result of the test with that of Windows Journal. The evaluation suggests us several points to improve
the system: the automatic addition of nodes and the way to present the thumbnails of nodes.

図 2. 同じ図を用いて説明（図 1 と対応）

図 1. システムの説明図を木構造で表現したもの

1

はじめに紙や黒板などのアナログなもの，デジタルインク問わず講義やシステム設計の話し合いなどでの書く∗

Copyright is held by the author(s).
Hideto Takei, 電気通信大学大学院 電気通信学研究科 情報通信工学専攻, Minoru Terada, 電気通信大学 電気通信学部 情報通信工学科という作業において，それらの描画内容は，描画ストロークのあるまとまりをノードとする木構造で表現できる（図 1,3）．
本研究では描画内容の共通部分に注目した．すると，その共通部分を親とし，非共通部分を子とした木構造として扱うことができる．これにより，共通部分は 1 つだけあればよく，コピーをすることなく何度でも同じ図を利用できるようになる．その木構造のノードを選ぶことで描画内容を切り替えることができる．
また描画に共通部分を持つ内容は関連性が強いと考えられる．そのためそれらはまとまっている方が後で閲覧する時にも都合がよい．その点も木構造として扱うことで，木構造の兄弟としてまとめることが可能となる．
さらに描画データを木構造とすることで，GUI の設計において「ここに各ボタンを配置」といった一WISS 2006を本当に消してしまったのでは，後で閲覧することができなくなってしまう．そのため図のコピーを行うことになる．2,3 個程度ならさほど手間ではないが，何度にもわたってその図を利用したい場合などは，必要個数だけコピーしなければならない．
といった不都合を解決できる．

2

関連研究
Illustrator などの描画ソフトのレイヤー機能を利図 3. 回路図の一部分が書き換えられる（直列 → 並列）
内容を木構造で表現したもの

図 4. 一部分だけを書き換えて利用（図 3 と対応）

時的なメモを後から書き足される内容に影響を及ぼすことなく好きな場所に書くという使い方もできる．
どういうことかというと，「ここに各ボタンを配置」というメモ書きはボタンを配置する場所に書かれている．しかし，実際にボタンを書き込む際にはそのメモ書きは不要なものであり，邪魔となる．だがこ
こで，メモ書きを GUI の図に直接書き込むのではなく，GUI の図を親に持つ子ノードとして追加しておけば，GUI の図には影響がなく，ボタンの書き込みもスムーズにできる．メモ書きを消すのに GUI の図の一部まで消してしまうということもなくなる．
本研究ではそのような描画内容の一部をノードとして持つような木構造を明示的に扱うインタフェースによって，描画内容を作成，閲覧，編集を支援する手書きシステムを提案する．
本システムによって，同じ図を用いて説明（図 2），一部分だけを書き換えて利用（図 4）という状況において，• 前者では説明する内容が書き足されていくと余白が減っていき，最終的には書き込めなくなる．また余白に無理に書き込んだ結果，見易さが損なわれてしまう．

• 後者の場合は書き換えるのに過去の描画内容用することでも描画内容に共通部分をもつ複数の描画内容を扱うことは可能である．しかしながら，これらのソフトは各レイヤーについて表示非表示を切り替えることで複数の描画内容を扱っている．そのため描画内容を切り替えるには，表示させたくないレイヤーを非表示設定にし，表示させたいレイヤーを表示設定にするといった手順を踏む必要がある．
それに対し，本システムでは任意のノードを選択するだけで描画内容を切り替えることができる．
本システムと同様に描画データが木構造を形成していくシステムには，ペンの変更や内容の修正を行う等のタイミングで描画内容を区切り，過去の絵を参照，必要に応じて戻って書き直すことができるス
ケッチ支援システムがある [1]．これは一つのものを描き上げることを目的としている．対して，本システムでは，そのような使い方に加えて，それぞれが異なる意味をもつ描画内容を複数保持し，それらの描画内容の閲覧性を高めることで，いくつかの特定の描画内容だけを眺めたりシステムの説明やプレゼンテーションを行ったりできるようにすることを目的としている．
他に描画データが木構造を形成するシステムには，写真や手書きの画像に対して書き足していき，話が分岐していく複数人でのコミュニケーションを行うシステムがある [2]．
ストロークの組み合わせによって描画を行う他の手法として，ストロークの時間情報を利用したものがある [3]．各時間に描かれたストロークから表示するストロークを選ぶことでスケッチを行っていく．

3

木構造表現の利点

描画データを木構造として表現することの利点は以下の通りである．

• 共通部分を共有することで，– 描画の手間の削減– 関連性の強い内容のグルーピング• 注釈の付記を子ノードとして付加可能• 図の論理的構造の明示

A handwriting tool which organizes the drawing in a tree structure

図 5. 本システム（プレゼンテーションに利用しているところ）

図 7. 木構造表示

図 8. サムネイル一覧表示（葉のみ表示）書き込みを行い新規書き込みボタンを押すと，今書き込んでいた描画内容を持つノードが現在選択（表示）中のノードの子として追加される．この操作を繰り返すことで徐々に木構造が形成されていく．既に選択中のノードに子ノードが存在する場合は，末弟として追加される．また，ルートノードに戻って全く新しい書き込みを行い，ノードを追加すること
で，共通部分が全くない描画内容を複数扱うことができる（プレゼンテーションの各セクション等）．
図 6. 描画の仕組み

5.2

4

本システム

本システムの概観を図 5 に示す．
提供するユーザインタフェースは以下の通りである．

• 描く
• 見る
• 編集する
描画データは木構造を成しており，1 ノードが Illustrator などにおける 1 レイヤーに対応している．
現在選択中のノードからルートノードまでを辿り，経由したノードを重ねて描画する（図 6）．

55.1

同ノードへの追記・修正

既に存在しているノードへの追記・修正（書き忘れ・書き間違いなど）を行いたい場合は，追記・修正したい描画内容を持つノードへ移動し，書き込みをした後に追記ボタンを押すことでそのノードの内容が更新される．
子を持つノードを修正する場合，子ノードの描画内容を表示しながらの追記修正が可能となっている．

5.3

既存ノードの分割

一つのノードにまとめて描いてある図の一部分を利用したい場合に対応するために，選択したストロークを子ノードに分割できるようにした．これによってノードを分割し忘れたとしても，後から任意の部分ごとに分割できる．

描くノードの追加

本システムを起動すると始めはルートノードだけが存在している．ルートノードは常に白紙となっており，まずはルートノードで書き込みを行う．適当な

66.1

見る
選択ノードの変更

選択ノードを変更することで描画内容を切り替えることができる．選択ノードの変更方法は 3 種類あWISS 2006

る．1. ボタン操作による移動，2. 木構造表示から選択，3. サムネイル一覧表示から選択となっている．

6.1.1

ボタン操作による移動

ノード移動ボタンを押すことで選択ノードを切り替える．ボタンには親子間の移動，兄弟間の移動に加え，ルートノードへ移動するボタンがある．前述の利用例におけるシステムの説明などのような兄弟間の連続した移動を行う際にはよいが，木構造的に離れたノードを切り替える時には不向きである．

6.1.2

木構造表示から選択（図 7）

描画データの実際の構造である木構造から直接ノードをクリックすることで切り替える．ノードを折りたたむことができるので，見たくない内容は折りたたむことで非表示にできる．

6.1.3

サムネイル一覧表示から選択サムネイル一覧表示から描画内容をクリックことでノードを選択する．サムネイル一覧表示については以下で詳しく説明する．

6.2

らのノードは葉ノードではないために表示させるためには少し手間がかかる．そこでノードをブックマークすることで素早くそれらのノードを表示できるようにした．なお，サムネイルの表示する順序を任意に変更することもできる．プレゼンテーションにおいて有効である．

サムネイル一覧表示（図 8）

書くことだけではなく描画内容の閲覧性の良さも重要である．そして用途に応じて閲覧したい内容（全体に渡って閲覧したい・ある部分にしぼって閲覧したいなど）は変わる．そのため木構造をそのまま表示するだけではなく，利用者の用途に応じた描画内容だけを閲覧できるように多様なサムネイル一覧表示が必要になる．現在は以下の 5 種類が実装されている．サムネイルの順番は前順走査に従っている．
全て表示 全てのノードを中間ノードも対象に加えて木構造そのままを表示する．
葉のみ表示 木構造における葉ノードのみを表示する．ここで葉ノードのみを表示というのは，葉ノードが保持している描画内容だけでなく，ルートから葉ノードまでの重ね合わせを表示するという意味である．葉ノードの描画内容は各々，現時点における描画の書き上がりとなっている．無駄なく全ての描画内容を閲覧できる．
ルートから現ノードまでを表示 現在表示中の描画内容がどのような順序で描画されたのかが把握できる．バックトレースとして利用できる．
部分木を表示 部分木はある特定の描画内容がまとまっている．特定の内容に注目して閲覧したい場合に利用する．
ブックマークしたノードを表示 何度も利用したい図や，説明の際に注釈等が表示される直前の描画内容を表示したい時がある．しかし，これ7編集する描画内容が増えていくにつれ，ノードの数も増えてくる．そして，不要な描画内容を持つノードというのも出現してくる．また，不要ではない描画内容であっても，GUI の外枠と中身を別ノードに分けて描いたが１つのノードにまとめてしまっても差し支えないという風に，複数ノードに分かれた描画内容を１つのノードにまとめられる場合，意味のあるノードというのはそのうちの１つだけ（階層が一番下のノードだけ）であり，他のノードというのは中途半端で意味をなさないノードになっているのである．
以上のような無駄なノードが多くなると，それらがノイズとなり目的のノードを選択するのが大変になる．サムネイル一覧表示の表示するサムネイルの種類を変えることである程度は軽減できるが，それでも不要な描画内容を持つノードが表示されてしまうことは避けられない．
また，無駄なノードを減らすだけでなく，ノードを追加する位置を誤った場合にノードを移動したい場合や子ノードの順番を入れ替えたい場合もあるだろう．
そこで，描画内容を追加していくことで形成された木構造を後から再編集できるようにした．現在は木構造表示の各ノード上で右クリックメニューから操作を行う．将来的にはドラッグ＆ドロップといった操作で処理が行えるようにすることを考えている．
削除 削除操作を行ったノードを根とした部分木を削除する．
切り取り・貼り付け まず切り取り操作を行ったノードを根とした部分木が切り取られる．そして，別のノード上で貼り付け操作を行うとそのノードの子として部分木が貼り付けられる．貼り付け対象のノードに既に子が存在する場合，末弟として追加される．
統合 ２つのノードを統合する．統合操作を行ったノードがその親ノードに統合される．

8

その他の機能削除したストロークやノードをバッファリングしておくことで，過去に描画した内容を再利用することが可能となっている．

A handwriting tool which organizes the drawing in a tree structure

また，ストロークの選択機能においてはストロー
クの移動，コピーといった一般的な機能に加えて，前述したように選択中のストロークを子ノードにするといった機能が実装されている．

9

利用例

9.1

システム設計・説明

新しいシステムを設計するのに，図の中に処理の流れや注釈をどんどん書き足していったり，書いては消してを繰り返したりすることはよくある．注釈は別ノードにしたり，設計が確定した所までを共通部分として未確定部分を練っていくという使い方ができる．複数人数で設計について話し合う時も，各自の意見がきちんとわけられるし，同じ図への書き込みにも対応できる．
また，GUI の各パーツ（ボタンなど）の説明をGUI の図中に直接書き入れる時に，パーツの数が多いと同じ図の中に全てパーツの説明を書くことは難しい．GUI の図を親として各パーツの説明をそれぞれ子にすればそれぞれの説明のためのスペースは十分に確保でき，兄弟でまとまっているので切り替えもしやすい（図 1）．
そして，サムネイル一覧表示によってスムーズに目的の描画内容を提示することができる．システムの一部分に注目した説明をする場合には部分木表示にすることで該当する内容だけを一覧表示させることができる．

9.2

プレゼンテーション（図 5）

スライドの作成においては，セクションごとに部分木でわけられ，さらにサブセクションが兄弟でまとめられるため，本システムとは相性がよい．そしてプレゼンテーションではサムネイル一覧表示で順にスライドを表示していける．プレゼンテーションの途中で補足説明等を書き込む場合も，新規ノードに追加することで，元の資料には影響を与えることなく追記した内容を保存しておくことができる．

10

評価実験

10.1

概要

4 人の被験者に本システムを利用する者と Windows Journal を利用する者とにそれぞれ 2 人ずつにわかれてもらい，本システムの木構造再編集機能についての説明の実際のホワイトボードでの板書を書き取ってもらった．そして書き上がった作成物を比較した．なお，本システムにおける作成物はサムネイル一覧表示の葉の表示で表示されるものを作成物の各ページとする．

10.2

考察

実際の作成物を図 9,10,11 に示す．Windows Journal では 1 つの図に説明が書かれていたり，同じ図を何度も描いたりしている．一方，本システムではほぼ板書どおりに同じ図を何度も描くことなく書き取れている．しかしながら，本システムを利用した被験者のうちの 1 人はシステムの利用方法に戸惑ってしまったようで，板書がうまく書き取れなかったようだ．また，書き取れた被験者に関しても，やや板書に時間がかかっていた．新しいシステムの利用には多少の慣れが必要ではあるが，直感的にわかりやすく，操作に手間がかからないよう，利用者の負担をできる限り少なくするシステムにする必要がある．ユーザの意見では，「ノードの追加が慣れていなくて戸惑った．
」「サムネイルから目的の描画内容を探すのにやや難がある．
」とまだまだ改善すべき点があるが，「使い慣れれば便利そう・おもしろそう」といった声もあり本システムに価値がある可能性はあると感じた．

11

今後の課題

11.1 ノードの追加，追記・修正
11.1.1 ノード作成の自動処理
現在の本システムではノードの追加並びに書き込
みの追記・修正はユーザが毎回ボタンを押すことによって行う仕様になっている．もしボタンを押し忘れてしまうと，ノードが分けられることなく１つのノードに全ての書き込みがされることになる．一応，後から描画内容の一部を選択して子ノードにする機能は実装してあるが，切り分けたい数だけこの操作を行う必要があり，ユーザへの負担が軽減できるわけではない．
ユーザへの負担を軽減するために，手動ではなく自動的にノードの追加並びに書き込みの追記・修正を行う仕組みの導入を検討する．自動処理を行うタイ
ミングとしては，書き込みと書き込みの間に長時間の空きがあったら別ノードにする，書き込みが近く密集した場所で行われている場合は同じノードに追記して遠く離れた全く違う場所で行われたら別ノードにするなどを考えている．また，自動処理を木構造にすぐ反映させてしまうと，必要以上に描画内容が細かく分割されたノードが増えてしまい，木構造が複雑になってしまう可能性がある．そのため，自動処理は木構造にすぐ反映させるのではなく，自動処理の結果を別の場所に保持しておき，後からユーザが任意に反映できることにする．

11.1.2

複数の子を持つノードの追記・修正

複数の子をもつノードの追記修正を行う場合，一度に１つの子しか表示することができない．そのため，それぞれの子を順に表示して影響が及ばないか

WISS 2006

図 9. 作成物（本システム）

図 10. 作成物（Windows Journal（被験者 A）)

図 11. 作成物（Windows Journal（被験者 B）)を確認しなければならない．この手間を解消するためのシステムを導入する必要がある．

ネイルに収まるように表示するといった方法も考えている．

11.2

参考文献

11.2.1

サムネイル
表示内容の検討

現在の 5 種類の表示内容のうち 3 種類は描画デー
タの木構造に注目した一覧表示である．それらに加えて，表示回数や表示していた時間，描かれた時間などの数値に注目することで重要な描画内容を選出することができるのではないかと思われる．また，これらの数値による描画内容の選出は新たに表示内容の項目として追加するのではなく，表示順序のソーティング方法という形で導入するのがよいだろう．

11.2.2

サムネイルのサイズ

現在サムネイルのサイズ，倍率は固定となっている．しかし，本システムを利用していくと固定サイズ・倍率では内容があまりわからずサムネイルとして意味をなさないという問題が起きた．対処方法としてはサイズ・倍率を可変にするだけでなく，描画内容全体を表示せずにそのノードだけの描画をサム[1] 佐々木 勇介, 田野 俊一, 橋山 智訓, 岩田 満. 発
散・収束型思考を活性化するスケッチ支援システ
ム. 信学技報 vol.103, no.744, pp. 7–12. 電子情報通信学会ヒューマン情報処理研究会, 2004.
[2] 綾塚 祐二. 描き足していくことを強調した手書きコミュニケーションツール. インタラクティブシステムとソフトウェア XII, pp. 9–12. 日本ソフト
ウェア科学会, 2004.
[3] 中小路 久美代, 山本 恭裕, 西中 芳幸, 浅田 充弘.
時間情報を利用した手描きスケッチングツール. イ
ンタラクション 2006, pp. 99–100. 情報処理学会,2006.
[4] 原田 実, 国井 利泰. インタラクティブ設計システ
ム SID −再帰グラフとそのシステム仕様への応用−. Vol.1980 No.19, pp. 1–11. 情報処理学会 ソ
フトウェア工学研究会, 1980.