Vol.2009-HCI-133 No.2
2009/5/15

情報処理学会研究報告
IPSJ SIG Technical Report

ターネット上には膨大な量の情報が蓄積されており，日常的にインターネット上で知りWeb 上への手書きメモが共有可能なブラウザ
PerowserEx の開発たい情報について検索し閲覧するようになった．このとき，検索した情報を吟味し，考えながら読むためには，ただ単語を目で追っていくというだけでなく，紙上で行なうよ
うに，原文の上に下線を引いたり，線で囲むなど強調したり，余白にコメントを残すと

浜 口 拡 輝† 加 藤 直 樹† 山 崎 謙 介 †いう手書きアノテーションが自然に行なえることが重要である[2][3]．本や雑誌のような概要：タブレット PC を用いることを前提とした，Web 上への手書きメモが共有可能なブラウザ PerowserEx の開発を行なった．通常，Web の閲覧は受身の状態で行なわれているが，Web 上への手書きメモを共有することにより，他者との相互作用から，新たな気づきや発見を促し，より豊かな状態で情報を得ることが期待できる．また，タブレット PC に特化したユーザインタフェースを提供することにより，快適にブラウジングと手書きメモの共有が行なえることを目指した．

紙のメディアは手書きのメモ書きが可能で，後から情報を閲覧するときに重要な部分が一目でわかったり，他人の残したメモ書きから間接的な情報が得られたりする場合がある．このようなことから，紙の良さに近づけるための，手書きアノテーションシステムに関する研究が行なわれるようになった．
また，Web サイトのうち，電子掲示板やチャット，SNS（Social Network Service）

Development of a pen-based web browser ‘PerowserEx’
sharable hand-written memoranda on the web

や動画共有サイトなど，ユーザ参加型の Web サイトは，アクセスが頻繁にされており，活気に満ちている．これは，情報が迅速に変化する Web サイトであるのと同時に，他者†††

Hiroki Hamaguchi , Naoki Kato and Kensuke Yamazakiとの相互作用から，新たな気づきや発見を促し，豊かな状態で情報のやりとりができるからだと考えられる．しかし，多くの Web サイトは静的，つまり Web ページ作成者かAbstract: We have developed a web browser ‘PerowserEx’, which is available forhand-written memoranda on the web supposing when we use tablet PCs. In many cases,browsing a web is in a passive manner. However, it is conceivable that new awareness anddiscovery would be expected from interactions among people by sharing hand-written
memoranda on the web. Moreover, this system is aimed to be able to do web-browsing andshare hand-written memoranda comfortably by preparing user interfaces that are specializedin tablet PCs.

ら閲覧者への一方向な情報伝達を念頭に構築されており，閲覧者から作成者，あるいは，閲覧者同士で情報を交換することができない．このような問題を解決するために，多方向で情報交換可能な Web アノテーションシステムに関する研究が行なわれている[4][5][6]．
たとえば，Commons Marker は，Web ページのテキストに，マーカーペンで引くよ1. はじめにうにマークをつけ，そのマークとマークに対応したメモを共有することができる[7]．し日本における平成 19 年末のインターネット人口普及率は 69.0％であり，直近 10 年で，かし，テキスト形式のメモしか残すことができない．また，ページ中の全てのメモは画約 7 倍の普及率となっている[1]．このようなインターネットの普及・発展に伴い，イン面の指定した場所に 1 つのオブジェクトとしてまとめて表示されるため，マークとメモが離れている場合，マークとメモとの視覚的な対応がとりづらくなる．

†東京学芸大学†Tokyo Gakugei University

また，Nayuta はブラウザ・オーバレイ技術をコアとするブラウザ拡張技術で，ブラウ1ⓒ2009 Information Processing Society of Japan

Vol.2009-HCI-133 No.2
2009/5/15

情報処理学会研究報告
IPSJ SIG Technical Report

ザ上に仮想レイヤーを作成し，ユーザの操作に合わせてレイヤーを動的に切り替えるこるようにする．手書きのメモを残すことの利点として，手で書く作業によってメモの内とができる[8]．これを利用することにより，任意の Web ページで，任意の部分を指定し容が記憶に残りやすいこと，直接的な入力が可能であるためキーボードからのテキストてクリップとして切り出したり，任意の位置にメモ情報を付加したりして，ブラウザ上入力やマウス操作による入力に比べて入力作業による思考の妨げが少ないこと，メモをで他のユーザとコミュニケーションをとることができる．Nayuta では，メモを任意の位文字や図を混在させた形で残すことが可能であるという点が挙げられる．

置に付加することができるため，メモを付けたい部分とメモとの視覚的な対応がとりやまた，メモを残そうとするとき，新たにウィンドウを開くなどした場合，別の情報が視覚に入ってきて，メモを残そうとした内容を忘れてしまったり，表示されている Webすいが，共有できるメモは，テキスト形式のものだけである．
さらに，伊藤らは，学習者が印刷された教材に書き込むのと同様に Web 教材に直接メページの情報が隠れてしまったりする恐れがある．しかし，Web ページ上に直接書き込モが書き込めるシステム WebMemo を実現している[9]．この研究では，Web 教材に直接めることで，このような問題を解消できる．また，メモを任意の位置に書き込めるため，メモを書き込むことの有用性を示し，特に，学習者が Web 教材へ書き込んだ内容を見直メモを付けたい部分とメモとの視覚的な対応がとりやすい．

すことによる学習効果を明らかにしている．また，書き込んだメモを共有することがでまた，描画ツールとして，紙上に書き込みを行なうとき，一般的に用いると考えられきないこと，紙への書き込みと比較した結果，ユーザインタフェースの改良が必要である，ペン，蛍光ペン，消しゴム機能を本ブラウザにも同様に備える．ペンの色や太さは，ることを課題として挙げている．

実世界で用いる筆記具を参考にして，黒・白・赤・青・緑・黄の 6 色，太さは，三段階本研究では，既存の研究で不十分な，紙上で行なうような手書きのメモを Web ページとする．なお，筆記にかかる圧力の強さによって，ペンの太さを，既定値の 50〜150％に自由に書き込み，書き込んだメモを他のユーザと共有できることを実装した Web ブラ

で変化させるものとすることで，より自然な書き込みになるようにし，書き込みを行な

ウザ PerowserEx を試作する．この試作を通して，紙上で行なうような書き込みが Webうことができる「筆記モード」と Web の閲覧を行なう「Web 閲覧モード」を切り替える

ページに行なえるようにする機能，Web ページを通した他者とのコミュニケーションをことにより，Web ページへの書き込みを行なう．

円滑に行なえるようにする機能，タブレット PC における Web ページの閲覧に適したユ(2) 手書きのメモの共有ーザインタフェースの確立を試みる．

本ブラウザでは，任意の Web ページに残した書き込みを，他のユーザと共有できるようにし，さらに，それらの書き込みに対して，誰でも書き込みを追記することができる

2. 基本設計ようにする．書き込みを共有できることによって，従来の Web ページ作成者から閲覧者

2.1 機能設計への一方向の情報伝達ではなくなり，閲覧者同士を含めた多方向のやりとりが可能にな先に記した目標を達成するために，次の機能を提供する．

る．そのため，今までは気づくことのできなかった視点で情報を獲得することができた(1) Web ページ上への手書きメモ

り，ユーザ同士でサービスやサイトについての情報交換を行なったり，Web ページ中の本ブラウザでは，Web ページ上に，紙上で行なうような手書きによる書き込みをできどの部分に注目すればよいのか一目で分かったりする効果が期待できる．

2ⓒ2009 Information Processing Society of Japan

Vol.2009-HCI-133 No.2
2009/5/15

情報処理学会研究報告
IPSJ SIG Technical Report

また，書き込んだメモは，誰でも自由に編集ができるようにし，メモを表示するとき計について述べる．

は，誰の書き込みなのか明らかにせず，Web の特徴でもある匿名性を維持するものとす(1) ペンジェスチャによる操作

る．こうすることにより，たとえば，上下関係があるグループで書き込みを共有する場ペンジェスチャとは，通常はメニューやボタンから実行を指示する機能を，ペンによ合でも，対等な立場でアノテーションがなされ，活発な議論が行なわれることが期待でる動きだけで行なう機能のことである．本研究では，タブレット PC で快適に操作でききる．

ることを目指しているため，キーボード・ショートカットを用いる代わりにペンジェス

一方，共有メモの編集を誰でも自由に行なえることにより，“荒らし”が起き，議論がチャによる操作ができるようにする．ユーザは，ペンジェスチャを覚える必要があるが，成り立たないということも考えられる．たとえば，Wiki は，ネットワーク上のどこから一度覚えてしまえば，特定の作業を効率よく，かつすばやく実行できるようになる．

でも，いつでも，誰でも文書を書き換えて保存することが可能である．また，ニコニコ

Microsoft では，ユーザの生産性を向上させるためのペンジェスチャの設計条件として，動画では，1 つの動画に最大 10 個のタグをつけることができ，動画投稿者が指定した特ペンの他の用途と干渉しないこと，通常の操作で発見できること，習得が簡単で覚えや定のタグ以外は，誰でも自由につけたり，消したりすることができる[10]．しかし，“荒すいこと，一般的な作業，または予期される作業を容易にすることを挙げている[12]．本らし”によってシステムが成り立たないということは少ない．むしろ，このような Web研究ではこの設計指針を念頭におき，ペンジェスチャの設計を行なう．

サイトでは，ユーザの自由度を高めることにより，情報の自然淘汰が行なわれるという

まず，ペンジェスチャによる操作は，ブラウザ上にペンジェスチャの入力に特化した考えのもと，運用されている．現に，ニコニコ動画におけるタグはユーザによって淘汰領域を設け，その領域にジェスチャを入力することによってできるようにする．通常のされるものであると主張し，タグ同士の関係性に注目した研究も行なわれている[11]．本

メニューを操作する場合，手の移動距離が大きく負担がかかりやすいこと，手によって研究でも，同様の立場のもと，共有している書き込みの編集は誰でも自由に行なうこと

Web ページの情報が隠れてしまうことが問題であるが，ペンジェスチャ入力領域を設けができるようにし，情報の自然淘汰が可能な環境を用意することにする．

ることにより，手の移動による負担を軽減できると考えられる．また，右利きの利用を(3) メモの共有範囲の設定想定し，ペンジェスチャ入力領域を本ブラウザの右端に配置することにより，手によっ

本ブラウザでは，Web ページに残した書き込みを他のユーザとする共有する「パブリて Web ページの情報が隠れてしまうという問題の解決を行なう（図 1）．

ックモード」と，他のユーザへ書き込みの内容を見せることのない「プライベートモー

ペンジェスチャの形状は，習得を容易にするために，機能を表す英単語の頭文字とすド」の 2 種類のモードでメモの保存ができるようにする．こうすることにより，共有しる（表 1）．

たくないような，個人的な内容のメモを残すことができるようになる．

(2) スクロール操作
マウス操作における Web ページのスクロールは，ブラウザの右端，あるいは，下端に2.2 ユーザインタフェース設計
PerowserEx は，手書きメモの書き込みに適しているタブレット PC での利用を前提とあるスクロールバーを上下左右に動かすことによって行なわれている．ペン入力ユーザしている．次に，ペン入力での操作に適すことを目標としたユーザインタフェースの設

インタフェースにおいて同様の方法でスクロール操作を行なった場合，手の移動による3ⓒ2009 Information Processing Society of Japan

Vol.2009-HCI-133 No.2
2009/5/15

情報処理学会研究報告
IPSJ SIG Technical Report

負担が大きく，また，スクロールバーのハンドルをドラッグするのが難しいと考えられペンジェスチャる．したがって，本ブラウザでは，ペンジェスチャ入力領域に上から下へ筆記をした場

入力領域

合は下へスクロール，下から上へ筆記をした場合は上へスクロール，左から右へ筆記をした場合は右へスクロール，右から左へ筆記をした場合は左へスクロールする．スクロール量は，入力する筆記の長さに比例する．
(3) ペンの停留による手書きメモ入力とペンジェスチャ入力の区別
本ブラウザでは，ブラウザの右端にある，ペンジェスチャ入力領域を含むサイド領域（図 1）の表示・非表示を切り替えることができる．タブレット PC の画面が充分に大きい場合，サイド領域を表示しても Web ページの閲覧や書き込みを快適に行なうことができるが，タブレット PC の画面が小さい場合，サイド領域を表示すると，Web ページを表示する領域が狭くなり，快適に閲覧できなくなると考えられる．したがって，タブレット PC の画面が小さい場合は，サイド領域を表示しなくても，ペンジェスチャ入力ができるようにしなければならない．この方法には，ペンの停留[13]を利用する．

サイド領域

本ブラウザでは「筆記モード」において，紙上で行なうような書き込みをすることができるが，筆記の前に一定時間ペンを任意の位置で停留した場合，そのときの入力をペ
図1

ンジェスチャだと判断する（図 2）．

ペンジェスチャ入力領域とサイド領域(4) ペンを追随して動くペンジェスチャ入力領域インタフェース
表1

ジェスチャコマンド

ペンの停留による入力は，手書きメモが残せる「筆記モード」において行なうことが操作

ジェスチャできるが，「Web 閲覧モード」では，インクの入力を受け付けないため，ペンの停留によ「筆記モード」と「Web 閲覧モード」を切り替えるw（write の頭文字）

るペンジェスチャ入力を行なうことができない．それで，ペンを追随して動くペンジェ

検索フォームの表示をする

s（search の頭文字）

スチャ入力領域をもうけ，サイド領域を非表示にした場合でも，ブラウザの操作ができブラウザ右端の，サイド領域の表示を切り替えるv（visible の頭文字）

るようにする（図 3）．

表示している Web ページを新しいタブで複製する

c（clone の頭文字）(5) 書き込みを行なった Web ページなどのサムネイル表示

表示している Web ページを閉じる

d（dispose の頭文字）

本ブラウザでは，書き込みを行なった Web ページやお気に入りに追加したページ，

4ⓒ2009 Information Processing Society of Japan

Vol.2009-HCI-133 No.2
2009/5/15

情報処理学会研究報告
IPSJ SIG Technical Report

ペンの停留

筆記

ジェスチャ入力
全履歴表示ボタン

履歴検索ボタン筆記

図2

手書きメモ入力

ペンの停留による入力の区別

デフォルトで最近の 20 件の履歴を表示する

カーソルがカーソルを追随

ジェスチャ領域に入る

図4

Web ページ閲覧履歴

Web ページの閲覧履歴のサムネイル表示ができるようにする（図 4）．そうすることにより，目的とする Web ページをすぐに見つけることができたり，書き込みを行なったときの状況を思い出したりすることが期待できる．
ペンジェスチャ領域の拡大表示図33. 実装
上述の基本設計に基づいて，ブラウザ PerowserEx の試作を行なった（図 5）．実行環

ペンを追随して動くペンジェスチャ入力領域

境として，Microsoft .NET Framework Version 2.0 を必要とし，19 インチタブレット

5ⓒ2009 Information Processing Society of Japan

Vol.2009-HCI-133 No.2
2009/5/15

情報処理学会研究報告
IPSJ SIG Technical Report

操作メニュータブ
手書きメモレイヤー
操作メニューHTML レイヤー
図6

本ブラウザのレイヤー

3.2 手書きメモ共有サーバ
PerowserEx では，「パブリックモード」において書き込んだメモは，利用者が意識しなくても，Web ページを移動するときに，手書きメモ共有サーバに筆記データを自動的メモをした手書きのメモが自由に書き込めるに送信することによって共有できる．

ページ一覧

3.3 ペンを追随して動くペンジェスチャ領域
ペンを追随して動くペンジェスチャ領域は，筆者の主観により，ペン位置のすぐ右上

図5の位置に，縦横 20 ピクセルの大きさの領域を 1 秒ごとに移動して表示する．ペンがそのPerowserEx の外観領域に入ることにより，領域を拡大表示し，ペンがその領域から離れることにより，元PC（解像度 1280×1024）を推奨する．なお，ジェスチャを認識するためのエンジンに，の大きさの表示に戻す（図 3）．

Microsoft Windows XP Tablet PC Edition 2005 Recognizer を用いた．次に，実装の詳
細について述べる．

4. おわりに

3.1 レイヤー構造

本研究では，Web 上への手書きメモが共有可能なブラウザ PerowserEx の基本設計，PerowserEx では，紙上で行なう書き込みに近づけるために，Web ページへの書き込および実装を行なった．本ブラウザでは，表示している Web ページに，紙上で行なうよみは，手書きメモレイヤーに行ない，視覚的な分離がおきないように，Web ページ上にうな書き込みを行なうことができ，書き込みを他のユーザと共有することができる．まオーバ・レイ表示する方法を採用する（図 6）．

6ⓒ2009 Information Processing Society of Japan

Vol.2009-HCI-133 No.2
2009/5/15情報処理学会研究報告
IPSJ SIG Technical Report[9]

た，ペン入力に特化したユーザインタフェースの確立を試みた．
今後の課題としては，現在，「Web 閲覧モード」と「筆記モード」を切り替えることに[10]より，書き込みを行なっているが，モードの切り替え操作を行なわなくても書き込みが[11]できるようにすることが挙げられる．そうすることにより，紙上で行なう操作により近[12]づくことができると考えられる．
[13]

また，PerowserEx では，共有している書き込みの編集を誰もが行なうことが可能で

伊藤 清美，柳沢 昌義，赤堀 侃司：Web 教材へ書き込みを可能とする WebMemo システムの開発と評価，日本教育工学会論文誌，Vol.29 ，No.4 ，pp.491-500（2006）．
ニコニコ動画，2009 年 4 月 1 日
http://www.nicovideo.jp/
伊藤 聖修，鈴木 育男，山本 雅人，古川 正志：ニコニコ動画におけるタグ共起ネットワー
クの特徴抽出，第 80 回人工知能学会知識ベースシステム研究会，pp.13-18（2008）．
Microsoft MSDN ，2009 年 4 月 1 日
http://msdn.microsoft.com/ja-jp/library/ms819476.aspx
加藤 直樹，大美賀 かおり，中川 正樹：携帯型ペン入力情報機器におけるペンジェスチャ
入力指示インタフェース，情報処理学会論文誌，Vol.41 ，No.9 ，pp.2413-2422（2000）．

あるが，それによって，書き込みの内容にどのような変化があるのか，本当に情報の自然淘汰が起きるのか明らかにしていきたい．さらに，新たに考案した，ペンを追随して動くペンジェスチャ入力領域インタフェースについて，操作性に関する評価を行なうことが課題として挙げられる．

謝辞
本研究の一部は，科学研究費補助金・若手研究（B）19700112 の補助による．

参考文献
[1]
[2]
[3]
[4]
[5]
[6]
[7]
[8]

平成 20 年版 情報通信白書 ，2009 年 4 月 1 日
http://www.johotsusintokei.soumu.go.jp/whitepaper/index.html
Schilit , B. , Golovchinsky , G. and Price, M.：Beyond paper: supporting active reading with free form
digital ink annotations ，Proc.HCI’98 ，pp.249-256 （1998）．
野崎 浩成，吉橋 彩菜，梅田 恭子，江島 撤郎：テキストへの自由な書き込み行為が文章理解に及ぼす影響，日本教育工学会論文誌，Vol.29 ，No.Suppl ，pp.49-52（2006）．
廣津 登志夫，高田 敏弘，青柳 滋己，佐藤 孝治，菅原 俊治：Web アノテーション共有シ
ステム Cmew/U の設計と実装，情報処理学会論文誌，Vol.42 ，No.10 ，pp.2466-2475（2001）．
加藤 直孝，上田 芳弘，林 克明，中川 健一，國道 進：ホームページ上の電子メモを用いた情報共有システムの開発，石川県工業試験場平成 17 年度研究報告，Vol.55（2005）．
廣津 登志夫，高田 敏弘，青柳 滋己，佐藤 孝治，菅原 俊治：Web アノテーション共有シ
ステム Cmew/U の設計と実装，情報処理学会論文誌，Vol.42 ，No.10 ，pp.2466-2475（2001）．
佐野 博之，大囿 忠親，新谷 虎松：付箋アノテーションを用いた情報共有システムの試作，第 22 回人工知能学会全国大会（2008）．
Nayuta ，2009 年 4 月 1 日
http://www.nayuta.com/index.do

7ⓒ2009 Information Processing Society of Japan