WISS2006

協同作業のための創造支援作図ツール
Drawing Tool for Creative-Collaborative Works

中園 長新三末 和男

田中 二郎∗

Summary. We developed a handwriting drawing tool called CollaboPad. This tool interprets logicalstructures of hand-drawn strokes. Since it was implemented as a web application using Ajax technology,
some people who were in distributed places can perform creative activities all together. We adopted SVG
for the stroke drawing part. User uses a tablet PC connected to the network, and launch and execute thetool on a web browser. A drawn stroke is judged that it is a node or a connector by the tool automatically.
When the user moves a node, other nodes and connectors are also moved concomitantly, agreeable tointerpreted logical structure. As those data histories of operations are saved on a server asynchronously,
other users who watch the same canvas can check the changes at the same time.

1

はじめに

我々は普段から，思いついたアイデアを記録し，それに対して思考を重ねていく知識創造活動を行っている．このような知識創造活動を支援するシステ
ムは，これまで様々なものが開発されてきた [3]．先行研究の多くは，入力デバイスとしてキーボードやマウスを想定したものである．しかしながら一方で，アイデアを書き留める道具としてキーボードやマウスよりも，紙とペンをより自然で手軽なものであると考えている人も多い [1]．このような要求に対応するため，Misue らは手描き入力による創造支援作
図ツール「DiagramPad」を開発した [2]．
DiagramPad は手描きストロークを論理的に解釈し，論理構造を保存したままに図形を変型することができた．しかしながらこのツールはスタンドアロンでの利用に限定されており，遠隔地の複数人による協同的な知識創造活動には生かせない．このような問題を解消するため，我々は DiagramPad をAjax 技術を用いた Web アプリケーションに移植し，Web を通して複数人の協同作業ができるツール「CollaboPad」へと発展させた．

2

Ajax による協同作業の実現

遠隔地の複数人が同時利用できるツールを実装するプラットフォームとしては，通信機能を持つアプリケーション，Java Applet，Flash，Ajax を用いた Web アプリケーションなど様々なものが考えられる．我々はこれらの中から，Ajax を用いた Webアプリケーションとして実装するというアプローチを採用した．Ajax は近年注目を浴びている技術であり，多くの主要なブラウザで利用できる．また，ネットワーク接続環境とブラウザさえあれば，特別なアプリケーションのインストールなどを必要とせず，共同作業者はいつでもどこでもツールにアクセスできるという利点がある．サーバと非同期通信を行うことにより，ある作業者の操作が他の作業者にリアルタイムで伝達されることも協同作業を促進する重要な要素である．

3

CollaboPad は手描きストロークを解析し，論理構造を付加する．描かれた閉曲線はノードを表し，ノードは自由に移動させることができる．ノードとノードを結ぶ図形は関係線として認識され，関係線の始点位置にあるノードと終点位置にあるノードも論理的に区別される．本論文では便宜上，関係線の始点方向を上流，終点方向を下流と表現する．
論理構造に関する以上の制約に基づき，我々はCollaboPad を次のような編集ができるツールとして開発した．関係線始点位置のノードを移動する場
合は，始点位置ノードとそれよりも下流のノード群全体がひとかたまりとして認識され，同時に移動する．
一方で関係線終点位置のノードを移動する場合，それより上流のノード群は移動せず，終点位置のノード群だけが移動する．いずれの場合においても，関係線は始点・終点両方のノードから離れることなく，自動的に変型して付随する．

4
Copyright is held by the author(s).
∗Nagayoshi Nakazono, Kazuo Misue and Jiro Tanaka,
筑波大学大学院システム情報工学研究科コンピュータサイエンス専攻

論理構造の認識

CollaboPad

CollaboPad は Ajax を用いて実装されている．ク
ライアントサイドのプログラム処理は JavaScript を用い，サーバ側のスクリプトと非同期通信を行う．手WISS 2006

描き描画部分は，XML ベースのベクター画像記述言語である SVG1 を採用した．現バージョンでは対応ブラウザとして Mozilla Firefox2 をサポートしている．作業者はネットワークに接続されたタブレッ
ト PC を利用し，ブラウザ上でツールを利用する．
ツールの利用例を図 1 に示す．フリーハンドで描かれたストロークはツールによって自動的にノードであるか関係線 (矢印) であるか判断される．ここでノード B を移動させると，B に対して下流に存在する C は B に付随して移動する (図 2)．一方，全体で最も下流に位置するノード C を移動しても，他のノードは移動しない (図 3)．いずれの場合も，関係線 E1 と E2 はノードの動きにあわせて自動的に変型する．これらのデータはサーバに非同期で蓄積されており，同一キャンバスを閲覧している作業者にも変更が反映されるようになっている．この機能により，ひとつの図を遠隔地の複数人が共同して編集することが可能になった．また，誰によって描かれたストロークであるかは論理的に区別されない．すなわち，ある人 X が描いたノードと他の人 Y が描いたノードを，第三者である Z が関係線で接続するといったことも可能とした．この仕様により，他者のアイデアに自分のアイデアを組み合わせるという，協同作業の特徴をサポートできると考えている．

5

図 1. 3 つのノード A, B, C と 2 本の関係線 E1, E2を描いた例

まとめと今後の課題

我々は論理構造を解釈する創造支援手描き作図ツールである DiagramPad を，Ajax を用いることで複数人の協調作業が実施できるツール「CollaboPad」へと発展させた．今後の課題としては対応ブラウザの拡大，階層的なグラフ構造の認識，自動レイアウト機能との連動などが挙げられる．

参考文献

図 2. ノード B の移動にノード C も付随して移動し，関係線も自動的に変型される[1] J. Lin, M. W. Newman, J. I. Hong, and J. A.
Landay. DENIM: Finding a Tighter Fit Between
Tools and Practice for Web Site Design. In Proceedings of the SIGCHI conference on Human
factors in computing systems (CHI 2000), pp.
510–517, 2000.
[2] K. Misue and J. Tanaka. A Handwriting Toolto Support Creative Activities. In Proceedingsof 9th International Conference on KnowledgeBased & Intelligent Information & Engineering
Systems (KES 2005), Vol. 3684 of LNAI, pp. 423–429, 2005.
[3] 國藤, 山下, 西本, 藤波, 宮田. 知識創造支援システ
ム研究開発の動向と JAIST における開発の現状.
第 1 回知識創造支援システム・シンポジウム報告書, pp. 1–10, 2004.

12

http://www.w3.org/Graphics/SVG/
http://www.mozilla.com/ﬁrefox/

図 3. ノード C の移動は C よりも上流にある A, B に影響しない