web 上への手書きメモが共有可能なブラウザ PerowserEx の開発
浜口拡輝†

加藤直樹†

山崎謙介†

Development of a pen-based web browser ‘PerowserEx’
sharable handwritten annotation on the web
HIROKI HAMAGUCHI†

1.

NAOKI KATO†

はじめに

日本における平成 20 年末のインターネット人口普KENSUKE YAMAZAKI†

表示されるため，マーク箇所とメモオブジェクトが離れている場合，マークとメモとの視覚的な対応がとりづらくなる．

及率は 75.3％であり，なかでも 13 歳から 49 歳までの伊藤ら[7]は，学習者が印刷された教材に書き込む

利用率は 9 割を超えている[1]．このようなインターのと同様に web 教材に直接メモが書き込めるシステ

ネットの普及・発展に伴い，インターネット上には膨ム WebMemo を実現している．この研究では，web 教大な量の情報が蓄積されており，日常的にインターネ材に直接メモを書き込むことの有用性を示し，特に学ット上で知りたい情報について検索し閲覧するように習者が web 教材へ書き込んだ内容を見直すことによなった．このとき，検索した情報を吟味し，考えながる学習効果を明らかにしている．加えて，WebMemo

ら読むためには，ただ単に単語を目で追っていくといシステムはスタンドアロンで動作するため，書き込んうだけでなく，紙上で行なうように，原文の上に下線だメモを他者と共有することができるようにすることを引いたり，線で囲むなど強調したり，余白にコメンと，紙への書き込みと比較した結果，ユーザインタフトを残すという手書きアノテーションが自然に行なえェースの改良が必要であると述べている．

ることが重要である[2][3]．

本稿では，既存の研究で不十分な，紙上で行なうよ

また，web サイトのうち，電子掲示板やチャット，うな手書きのメモを web ページに自由に書き込み，SNS や動画共有サイトなどユーザ参加型の web サイ

書き込んだメモを他のユーザと共有できることを目標

トは，アクセスが頻繁にされており活気に満ちている．にした web ブラウザ PerowserEx の設計と開発につい

これは，情報が迅速に変化するサイトであると同時に，て述べる．この開発では，タブレット PC における他者との相互作用から，新たな気づきや発見を促してweb ページの閲覧に適したユーザインタフェースの確いるからだと考えられる．しかし，多くの web サイ立を試みる．

トは静的，つまり web ページ作成者から閲覧者への

2.

基本設計

ら作成者，あるいは，閲覧者同士で情報を交換するこ

2.1

機能設計とができない．このような問題を解決するために他方先に記した目標を達成するため次の機能を提供する．

一方向な情報伝達を念頭に構築されており，閲覧者か向で情報交換可能な web アノテーションシステムに2.1.1 web ページ上への手書きメモ関する研究が行われている[4][5]．

本ブラウザでは，web ページ上に，紙上で行なうよ

たとえば，Commons Marker[6]は web ページのテキうな手書きによる書き込みをできるようにする．手書

ストに，マーカーペンで引くようにマークをつけ，そきのメモを残すことの利点として，手で書く作業によのマークとマークに対応したメモを残し共有することってメモの内容が記憶に残りやすいこと，直接的な入ができる．しかし，テキスト形式のメモしか残すこと力が可能であるためキーボードからのテキスト入力やができないこと，また，ページ内の全てのメモは画面マウス操作による入力に比べて入力作業による思考のの指定した場所に 1 つのオブジェクトとしてまとめて妨げが少ないこと，メモを文字や図を混在させた形で残すことが可能であるという点が挙げられる．

† 東京学芸大学
Tokyo Gakugei University

また，メモを残そうとするとき，新たにウィンドウ情報処理学会 インタラクション 2010

を開いた場合，別の情報が視覚に入ってきて，メモをきるようにする．こうすることにより，共有したくな残そうとした内容を忘れてしまったり，表示されていいような，個人的な内容のメモを残すことができるよる web ページの情報が隠れてしまったりする恐れがうになる．

ある．しかし，web ページ上に直接書き込めることで，2.1.4 書き込みを行なった web ページなどのサムネイル表示

このような問題を解消できる．さらに，メモを任意の位置に書き込めるためメモを付けたい部分とメモの視

本ブラウザでは，書き込みを行なった web ページ覚的な対応が取りやすい．

やお気に入りに追加したページ，web ページの閲覧履

2.1.2 手書きメモの共有

歴のサムネイル表示ができるようにする．こうするこ

本ブラウザでは，任意の web ページに残した書きとにより，目的とする web ページをすぐに見つける込みを，他のユーザと共有できるようにし，さらに，ことができたり，書き込みを行なったときの状況を思それらの書き込みに対して，誰でも書き込みを追記すい出すことができたりすることが期待できる．

ることができるようにする．書き込みを共有できるこ

2.2とによって，従来の web ページ作成者から閲覧者へ

PerowserEx は，手書きメモの書き込みに適していの一方向の情報伝達ではなくなり，閲覧者同士を含めるタブレット PC での利用を前提としている．次に，た多方向のやりとりが可能になる．そのため，今までペン入力での操作に適すことを目標としたユーザインは気づくことのできなかった視点で情報を獲得するこタフェースの設計について述べる．

ユーザインタフェース設計とができたり，ユーザ同士でサービスやサイトについ2.2.1 モードの切り替えによる操作ての情報交換を行なったり，web ページ中のどの部分ペンによる入力が，リンクをクリックするなどのに注目すればよいのか一目で分かったりする効果が期

web ブラウザに対する操作なのか，それとも，メモの待できる．

書き込みなのか操作を区別することはできない．そこ

また，書き込んだメモは，誰でも自由に編集ができで，本ブラウザでは，書き込みを行なうことができるるようにし，メモを表示するときは，誰の書き込みな「筆記モード」と web の操作を行なう「web 操作モのか明らかにせず，web の特徴でもある匿名性を維持ード」の二つのモードを用意する．

するものとする．こうすることにより，対等な立場で2.2.2 ペンジェスチャによる操作アノテーションがなされ，活発な議論が行なわれるこ

ペンジェスチャとは，通常はメニューやボタンからとが期待できる．一方，共有メモの編集を誰でも行な実行を指示する機能を，ペンによる動きだけで行なうえることにより，“荒らし”が起きる可能性がある．

機能である．本ブラウザでは，タブレット PC で快適

しかし，wiki はネットワーク上のどこからでも，いに操作できることを目指しているため，キーボード・つでも誰でも文書を書き換えて保存することが可能でショートカットを用いる代わりにペンジェスチャによあるが，“荒らし”によってシステムが成り立たないる操作ができるようにする．ユーザは，ペンジェスチということは少ない．むしろ，ユーザの自由度を高めャを覚える必要があるが，一度覚えてしまえば，特定ることにより情報の自然淘汰がなされると考えられての作業を効率よく，かつすばやく実行できるようにないる．また，ニコニコ動画[8]では，1 つの動画に最大表110 個のタグをつけることができ，動画投稿者が指定ジェスチャコマンドした特定のタグ以外は，誰でも自由につけたり消した操作りすることができ，ニコニコ動画におけるタグはユー「筆記モード」と「web 操作モーザによって淘汰されるものであると主張し，タグ同士ド」を切り替えるの関係に注目した研究も行なわれている[9]．本研究

検索フォームの表示をするでも同様の立場のもと，情報の自然淘汰が可能な環境

ブラウザ右端の，サイド領域の表を用意することにする．

示を切り替える2.1.3 メモの共有範囲の設定

表示している web ページを新しい

本ブラウザでは，web ページに残した書き込みを他タブで複製するのユーザとする共有する「パブリックモード」と，他のユーザへ書き込みの内容を見せることのない「プライベートモード」の 2 種類のモードでメモの保存がで表示している web ページを閉じる
表示している web ページをお気に入りに追加する

ジェスチャ
w（write の頭文字）
s（search の頭文字）
v（visible の頭文字）
c（clone の頭文字）
d（dispose の頭文字）
b（bookmark の頭文字）

web 上への手書きメモが共有可能なブラウザ PerowserEx の開発
ペンの停留

筆記

ジェスチャ入力

ペンジェスチャ入力領域
筆記

手書きメモ入力

サイド領域

図1

ペンジェスチャ入力領域とサイド領域

図2

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

る．Microsoft では，ユーザの生産性を向上させるためのペンジェスチャの設計条件として，ペンの他の用途と干渉しないこと，通常の操作で発見できること，カーソルがカーソルを追随領域に入る習得が簡単で覚えやすいこと，一般的な作業，または予期される作業を容易にすることを挙げている[10]．

ペンジェスチャ

本研究ではこの設計指針を念頭におき，ペンジェスチ領域の拡大表示

ャの設計を行なう．
まず，ペンジェスチャの形状は，習得を容易にする

図3

ために，機能を表す英単語の頭文字とする（表 1）．
そして，ペンジェスチャの入力を筆記と区別するために，次の三つの手法を提案する．

ペンを追随して動くペンジェスチャ入力領域供する．
これは，web ページ上に書き込みを行なうことがで(1) ペンジェスチャ入力領域による操作

きる「筆記モード」において，筆記の前に一定時間ペ

ペンジェスチャによる操作は，ブラウザ上にペンジンを任意の位置で停留した場合，そのときの入力をペェスチャの入力に特化した領域を設け，その領域にジンジェスチャだと判断するインタフェースである（図ェスチャを入力できるようにする．こうすることで，

2）．

ペンジェスチャ入力領域以外に手を動かす必要がなくなるため，ユーザの負担が軽減できると考えられる．

(3) ペンを追随して動くペンジェスチャ入力イン
タフェース

また，操作時に手が元の web ページを隠してしまう

ペンの停留による入力は，手書きメモが残せる「筆という問題に対しては，利き手側にペンジェスチャ入記モード」において行なうことができるが，「web 操力領域を配置することにより解決する（図 1）．

作モード」では，ペンの入力はテキストの選択などの(2) ペンの停留による手書きメモ入力とペンジェスチャ入力の区別

コンテンツの操作にとられるため，ペンの停留によるペンジェスチャ入力を行なうことができない．そこで，本ブラウザでは，ブラウザの右端にある，ペンジェペンカーソルのすぐ右上を一定間隔で追随して動く矩スチャ入力領域を含むサイド領域（図 1）の表示・非形領域を表示し，ペンがその領域に入ると領域を拡大表示を切り替えることができるようにする．タブレッ表示し，そこからペン入力を開始すると，ペンジェス

ト PC の画面が充分に大きい場合，サイド領域を表示チャ入力となるインタフェースを提供する．こうする

しても web ページの閲覧や書き込みを快適に行なうことにより，モードに依存せず手書きメモの書き込みことができるが，タブレット PC の画面が小さい場合，と web ブラウザの操作ができるようになる（図 3）．

サイド領域を表示すると，web ページを表示する領域

2.2.3 スクロール操作が狭くなり，快適に閲覧できなくなると考えられるか

一般の web ブラウザにおける web ページのスクロらである．このため，タブレット PC の画面が小さい

ールは，ブラウザの右端，あるいは，下端にあるスク

場合は，サイド領域を表示しなくても，ペンジェスチロールバーを上下左右に動かすことによって行なわれャ入力ができるようにしなければならない．この方法ている．ペン入力ユーザインタフェースにおいて同様として，ペンの停留[11]を用いたインタフェースを提の方法でスクロール操作を行なった場合，手の移動に情報処理学会 インタラクション 2010

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

タブへ筆記をした場合は下へスクロール，下から上へ筆記操作メニューをした場合は上へスクロール，左から右へ筆記をした
場合は右へスクロール，右から左へ筆記をした場合は左へスクロールする．スクロール量は，入力する筆記の長さに比例する．

3.

手書きのメモがメ モを した

自由に書き込めるページ一覧

実装

上述の基本設計に基づいて，ブラウザ PerowserEx

図4

PerowserEx の外観の 試 作 を 行 な っ た （ 図 4 ）． 実 行 環 境 と し て ，Microsoft .NET Framework Version 2.0 を必要とし，17インチタブレット PC（解像度 1280×1024）を推奨す
る．なお，ジェスチャを認識するためのエンジンに，Microsoft Windows XP Tablet PC Edition 2005 Recognizerを用いた．PerowserEx は，参考文献[12]の URL よりダウンロード可能である．

4.

おわりに

本稿では，web 上への手書きメモが共有可能なブラウザ PerowserEx の設計，および実装について述べた．
本ブラウザでは，表示している web ページに，紙上で行なうような書き込みを行なうことができ，書き込みを他のユーザと共有することができる．また，ペン入力に特化したユーザインタフェースの確立を試みた．
今 後 の 課 題 と し て は ， 現 在 ，「 筆 記 モ ー ド 」 と「web 操作モード」を切り替えることにより，書き込みを区別しているが，紙上で行なう操作により近づけるために，モードの切り替え操作を不必要にすることが挙げられる．また，現在の設計ではペンジェスチャ入力とスクロール操作が重なっているため，ペンジェスチャ入力時に画面がスクロールする問題を解決する必要がある．加えて，ペンを追随して動くペンジェス
チャ入力領域インタフェースについて，操作性に関する評価を行なうことも重要な課題である．
さらに，PerowserEx では共有している書き込みの編集を誰もが行なうことが可能であるが，それによって書き込みの内容にどのような変化があるのか，本当

参考文献

1) 平成 21 年版 情報通信白書，2009 年 11 月 16 日
http://www.soumu.go.jp/johotsusintokei/whitepaper/j
j/h21/pdf/l4010000.pdf
2) 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).
3) 野崎 浩成，吉橋 彩菜，梅田 恭子，江島 撤郎：テキストへの自由な書き込み行為が文章理解に及ぼす影響，日本教育工学会論文誌 Vol.29，
No.Suppl，pp.49-52 (2006).
4) 廣津 登志夫，高田 敏弘，青柳 滋己，佐藤 孝治，菅原 俊治：Web アノテーション共有シス
テム Cmew/U の設計と実装，情報処理学会論文
誌，Vol.42，No.10，pp.2466-2475 (2001).
5) 佐野 博之，大囿 忠親，新谷 虎松：付箋アノテーションを用いた情報共有システムの試作，第22 回人工知能学会全国大会 (2008).
6) Commons Marker，2009 年 11 月 16 日
http://commonsmarker.com/
7) 伊藤 清美，柳沢 昌義，赤堀 侃司：Web 教材
へ書き込みを可能とする WebMemo システムの開 発 と 評 価 ， 日 本 教 育 工 学 論 文 誌 ， Vol.29 ，No.4，pp.491-500 ( 2006).
8) ニコニコ動画，2009 年 11 月 16 日
http://www.nicovideo.jp/9) 伊藤 聖修，鈴木 育男，山本 雅人，古川 正
志：ニコニコ動画におけるタグ共起ネットワー
クの特徴抽出，第 80 回人工知能学会知識ベース
研究会，pp.13-18 (2008).
10) Microsoft msdn ジェスチャ，2009 年 11 月 16 日
http://msdn.microsoft.com/ja-jp/library/ms819476.aspxに情報の自然淘汰が起きるのか明らかにしていきたい．

11) 加藤 直樹，大美賀 かおり，中川 正樹：携帯型

本 研究の 一部 は ， 科 学 研 究 費 補 助 金 ・ 若 手研究

ペン入力情報機器におけるペンジェスチャ入力
指示インタフェース，情報処理学会論文誌，
Vol.41，No.9，pp.2413-2422 (2000).
12) PerowserEx，2009 年 11 月 16 日
http://www.gucchan.net/PerowserEx.zip（B）19700112，基礎研究（C）19500787 の補助による．