情報処理学会 インタラクション 2016
IPSJ Interaction 2016

161A092016/3/2

MagicalSheet: PC 画面における特定色を消すための透明シートの実現とその応用
丹羽 佑輔1,a)

大囿 忠親1,b)

新谷 虎松1,c)

概要：本研究では，PC のデスクトップ画面上の指定した領域の特定の色を消すことが可能である MagicalSheet を試作した．ユーザーは，MagicalSheet を用いることで赤シートを用いた暗記学習を PC のデスクトップ画面上で行うことが可能となる．デスクトップ画面上のある領域内の特定の色を消すためには，その領域に表示されたアプリケーションの描画処理を拡張する必要があり困難である．MagicalSheet では，デスクトップ画面を撮影し，撮影した画像から特定色を消す処理を行い，デスクトップ画面上に重ねて表示することで実現した．MagicalSheet のソフトウェアの利点として，コンテンツを作成するアプリケーションの制約は色のみであり，また，既存のアプリケーションの変更は必要無い点である．例えば，プレゼンテーションソフトでスライドを作成しプレゼンテーションモードで表示することで，MagicalSheet のコンテンツとして利用することができる．

MagicalSheet: Realizing a Transparent Sheetto Erase Specified Colors on a PC Screen
Yusuke Niwa1,a)Tadachika Ozono1,b)Toramatsu Shintani1,c)Abstract: We implemented a system to erase specified colors on a PC screen, called MagicalSheet. We
enhanced the drawing process on a PC screen to erase specified colors. Because the system erases specified
colors of an image captured by transparent layers, any modification of existing desktop applications is not
required. We can program the erase operation by using HTML5 technologies on the transparent layer, andit allows for easy and fast prototyping.

1. はじめにを教材として利用し学習する際，赤色の半透明シートと同様の操作により PC のデスクトップ画面上で Web ページ

紙媒体上に赤色で書かれた文字を，プラスチック製の赤の内容を隠すことができると便利である．実際に紙媒体上色の半透明シートを利用して隠すことで記憶学習を行うたに印刷する必要もなく，端末やディスプレイ上で記憶学習めの教材などがある．また，OHP を用いたプレゼンテーを行うことができる．

ションで，黒色のシートを用いて，部分的にスライドの内容

本研究では，PC のデスクトップ画面上の指定した領域を隠す表現がある．これらは，重ね合わせにより，コンテの特定の色を消すことが可能である MagicalSheet を試作

ンツの視覚的情報を合成あるいは遮断する例である．Webした．ユーザーは，MagicalSheet を用いることで赤シート上には，文字による情報資源が豊富である．これらの情報を用いた暗記学習を PC のデスクトップ画面上で行うことが可能となる．赤色の半透明シートを使って赤文字を隠す1a)b)c)

名古屋工業大学大学院 情報工学専攻
Department of Computer Science and Engineering, Graduate School of Engineering, Nagoya Institute of Technology,
Gokiso-cho, Showa-ku, Nagoya, Aichi, 466-8555 Japan
yusuken@toralab.org
ozono@toralab.org
tora@toralab.org© 2016 Information Processing Society of Japan

方法では，その性質上，シートで覆う領域全てが赤くなってしまい他の字も見づらくなり，長時間利用していると視界に余韻が残ってしまう点がある．MagicalSheet では，消去対象の色を透明にするため，対象とする色を持つ部分以

192

情報処理学会 インタラクション 2016
IPSJ Interaction 2016

161A092016/3/2

外の領域はシートで覆う前と後で変化することがないため，現実の赤シートのように見づらくなることはない．
デスクトップ画面上のある領域内の特定の色を消すためには，その領域に表示されたアプリケーションの描画処理を拡張する必要があり困難である．MagicalSheet では，デスクトップ画面を撮影し，撮影した画像から特定色を消す処理を行い，デスクトップ画面上に重ねて表示することで実現した．

MagicalSheet のソフトウェアの利点として，デスクトップ画面を撮影し画像データを処理するため，既存のアプリケーションの描画処理を拡張する必要は無い．例えば，プ

図 1 透明シートの内部の赤色を隠している様子．

レゼンテーションソフトでスライドを作成してプレゼン

Fig. 1 The transparent sheet hides red colored characters un-

テーションモードで表示したり，イラストソフトでのイラ

der the sheet.

スト作成し画像ファイルとして出力して画像閲覧ソフトでフルスクリーン化して表示することで，MagicalSheet のコンテンツとして利用することができる．

2. 関連研究
半透明の GUI を他のアプリケーションの GUI に重ね，重なった部分の視覚的な情報の取得や変化させる研究が存在する [1]．MagicalSheet では，デスクトップ画面のスクリーンショットを取得しラスタデータを取得する処理を行う為，既存のアプリケーションとイベント情報のやりとりを行わない．

Apple 社の AppleScript など OS に特化したアプリケーション間通信機能は古くから実現されており，プログラミ

図 2 MagicalSheet の操作メニュー．

ングなしでアプリケーション間通信を可能としている例もFig. 2 The action menu of MagicalSheet.

挙げられる．ここでは，事前に定められたプロトコルに従い，プログラムされたアプリケーション間での柔軟な連携再生，巻き戻しの制御を行う研究がある [5]．MagicalSheetが可能である．しかしながら，近年では Web アプリケーは，PC のデスクトップ画面上のスクリーンショット情報ションが広範囲に利用されており，デスクトップ画面アプを用いて，画像処理によって，既存のアプリケーションのリケーションおよび Web アプリケーション間での連携にGUI に応じて表示する内容を変更することが可能である．

関しても考慮する必要がある．例えば，InterTwine[2] でタブレットデバイスの画面上または空中に重ねた物理は，既存アプリケーションを改変することで，アプリケーデバイスの位置に応じた情報を表示する研究がある [6][7]．

ション間連携を実現しているが，非専門家には容易ではな

SWB は，PC のデスクトップ画面上で Web コンテンツのい．複数のアプリケーションを協調的に利用することで，重畳表示を可能とし，Web コンテンツの表示位置に応じてそれぞれのアプリケーションを単純に組み合わせるのみでコンテンツの内容を変えることが可能である．

は得ることができない機能を実現することが可能である．
異なるアプリケーションの情報を取得する方法として，

3. MagicalSheet の機能と実装アプリケーションの GUI の情報を利用する方法がある．既

本節では，MagicalSheet の機能と実装を示す．Magical-

存アプリケーションの GUI で用いられているアイコンな

Sheet は，本研究室で開発した Silhouette Web Browser

どのスクリーンショットによって，目的の GUI を検索し(SWB) を用いて作成した．SWB は，Mac OS 上で動作す操作の自動化を行う研究もある [3] [4]．アプリケーション

る WebKit ベースの Web コンテンツビューア環境であり，の操作に関するチュートリアルビデオは，操作方法を覚え

Web コンテンツの背景を透明にしデスクトップ画面上に表る上で便利であるが，チュートリアルビデオを見ながら対示することが可能である．HTML5 によって記述されたコ象とするアプリケーションを操作するのは困難である．アンテンツを表示することが可能であるため，JavaScript にプリケーションが提供する GUI の情報およびユーザの操よる動的なコンテンツを表示することも可能である．Mag-

作情報を利用しチュートリアルのビデオの一時停止およびicalSheet が利用する SWB の機能は，スクリーンショット© 2016 Information Processing Society of Japan

193

情報処理学会 インタラクション 2016
IPSJ Interaction 2016

図 3161A09
2016/3/2

図 4

透明シートの縮小．

Fig. 3 Shrinking the transparent sheet.

透明シートの拡大．

Fig. 4 Expanding the transparent sheet.

ある．透明シートのサイズは，透明シートの境界部分をド機能と，レイヤー順序制御である．
図 1 は，PowerPoint スライドショー中の画面上の一部ラッグすることで変更可能である．図 3 は，透明シート縮小した様子，図 4 は，透明シート拡大した様子である．に MagicalSheet の透明シートを重ね，シートの内部の赤色を隠している様子である．図中の背面は PowerPoint に3.2 色の透明処理よって描画されているスライドの内容である．図の中央部

JavaScript で SWB の機能を呼び出すことでデスクトッ分に影付きの枠が表示されている部分が，MagicalSheet のプ画面の画像データを得ることができる．その画像データ透明シートの領域である．

を，HTML5 で定義された Canvas 関連の API を用いてラ

図 2 は，MagicalSheet の操作メニューと透明シートが表スタデータの処理を行う．

示されている状態を示す．MagicalSheet を起動するとデス透明処理を行うに際して，RGB 空間を HSV 空間に変換

クトップ画面の左下に MagicalSheet の操作メニューが表後，各画素と特定色の差分を取り，その差分がある範囲に示される．操作メニューには 7 つのボタンがあり，上から，収まっている場合は透明にする色であるとみなし背景色に選択色透明ボタン，赤透明ボタン，緑透明ボタン，青透明置き換える．HSV 空間上で透明処理を行う理由として，Hボタン，シート反転ボタン，シート追加ボタン，シート削成分が人の色覚と類似しているためである．

除ボタンである．選択色透明ボタン，赤透明ボタン，緑透明ボタン，青透明ボタンをクリックすることで，透明シー

RGB 空間の点 (R, G, B) から HSV 空間の点 (H, S, V ) への色変換は次の式を用いた．

トによって透明にする色を設定するボタンであり，透過のR′ = R/255, G′ = G/255, B ′ = B/255

有効または無効を切り替えることができる．赤透明ボタンを押した場合は，透明シート内の赤色が透明になる．これCmax = max(R′ , G′ , B ′ ), Cmin = min(R′ , G′ , B ′ )らのボタンの領域からマウスカーソルが離れてから 5 秒経

∆ = Cmax − Cmin
 ◦0,∆=0(1a)

′′

G−B

◦′

mod 6, Cmax = R(1b) 60 ×∆

過すると，操作メニューが自動的に非表示になる．画面の左下の灰色のバー上の部分をクリックすることで，操作メニューが表示される．

MagicalSheet は，デスクトップ画面を撮影し，撮影した画像から特定色を消す処理を行い，デスクトップ画面上に重ねて表示することで実現した．MagicalSheet の透明シー
トを常に最前面に表示するためにレイヤー順序制御を利用する．

3.1 透明シートの移動・サイズ変更
MagicalSheet で表示している透明シートは SWB で管理している 1 つのレイヤー上で表示している．このレイヤーは SWB の機能により，常に最前面表示されているため，このレイヤーで表示している透明シートや設定ボタンのWeb コンテンツは常に最前面に表示されるようになる．
透明シートの位置は，ドラッグ操作によって変更可能で© 2016 Information Processing Society of Japan

H=′′

B −R′

60◦ ×+2, Cmax = G(1c)∆′′
′ 60◦ × R − G + 4, Cmax = B(1d)∆, Cmax = 0(2a) 0S=∆, Cmax ̸= 0(2b)Cmax
V = Cmax

各色の差分の有効範囲は以下の通りである．

(dH, dS, dV ) = |(H, S, V ) − (Hp , Sp , Vp )|dH ≤ 0.15, dS ≤ 0.80, dV ≤ 0.80
赤 の 場 合 ，(Hp , Sp , Vp ) = (0, 1, 1) で あ る ．緑 の 場194

情報処理学会 インタラクション 2016
IPSJ Interaction 2016161A09
2016/3/2

図 7 透明シートの内部の赤色を表示している例．

Fig. 7 The transparent sheet shows red colored characters un図 5

画像処理前 (左) と後 (右) の例

der the sheet.

Fig. 5 Left: before the processing; Right: after the processing.

3.4 画面上から透明にする文字色を選択
操作メニュー上の「赤」「緑」「青」のボタンを押すことで，透明にする色を選択する．選択後に透明シートをクリックすると，選択した色が透明になる．これら以外の色をの文字を透明にしたい場合は，デスクトップ画面上から色を選択して，それを透明にする色として扱うことができる．「無」のボタンを押すと画面が赤枠で囲まれた状態になり，この状態で画面上をクリックすると，そのクリックした位置の色が取得され，色選択ボタンに色の名前が設定される．再度ボタンを押すと色を確定した状態になる．確
定した状態で再度ボタンを押すと，選択が解除される．
図6

透明シートをフルスクリーン化して，スライド中の全ての赤色を隠している様子．

Fig. 6 The transparent sheet covers the whole slide and hides
red colored characters in the slide.

3.5 透明シートの反転
反転モードで透明シートを用いた場合，透明シートの外部の特定色が透明になる．操作メニューのシート反転ボタンを押すとことで，シートの内側/外側の対象色を透明にするかどうかを設定できる．反転ボタン中に「■」が表示= (3/10, 1, 1) で あ る ．青 の 場 合 ，されている場合はシートの内側の対象色を透明にし，「■」(Hp , Sp , Vp ) = (6/10, 1, 1) である．図 5 は，画像処理前が表示されていない場合はシートの外側の対象色を透明に合 ，(Hp , Sp , Vp )(左) と後 (右) のスペクトラムの例である．図中の左は，透する．図 7 は，シートの内部の赤色を表示している例であ明シートで覆っていない状態である．図中の右は，OS がる，図 1 の状態でシート反転ボタンを押した結果である．

提供する色選択インタフェース上に表示された色のスペク反転モードを実現するために 2 つのシートを用いる．1

トラム上に透明シートを重ねて画像処理を行った結果であ

つ目の透明シートは，フルスクリーン化してデスクトップる．赤・緑・青を特定色として設定しているため，それら画面上に固定する透明シートであり，デスクトップ画面全の色に類似した部分が白色に置き換えられていることが確

体を画像処理した画像を表示する．2 つ目の透明シートは，認できる．白く変化している 4 つの部分のうち，上から 1ユーザーが自由に動かせる透明シートであり，画像処理しつめと 4 つ目の領域が赤色，2 つ目が緑色，3 つ目が青色ていないデスクトップ画面の画像を表示する．の画像処理によるものである．

3.6 シートの追加・削除
3.3 フルスクリーン化

操作メニューの「＋」が書かれた透明シート追加ボタンをフルスクリーン化したい透明シートを選択して Ctrl +押すと，画面上に透明シートが追加される．操作メニュー

Shift + F キー を押す．元に戻す時は再度，同じキーを押の「×」が書かれた透明シート削除ボタンを押すと，全透明

す．図 6 は，透明シートをフルスクリーン化して，スライシートに「×」ボタンが表示されるので，削除したいシード中の全ての赤色を隠している様子である．

ト上の「×」ボタンをクリックすると，そのシートが画面© 2016 Information Processing Society of Japan

195

情報処理学会 インタラクション 2016
IPSJ Interaction 2016

図8

複数の透明シートを表示して，それぞれの緑色の部分を隠している例．

Fig. 8 The transparent sheets hide green colored characters

161A092016/3/2

図 10

複数シートを組み合わせ「覗き穴」を実現した例

Fig. 10 Two transparent sheets realizing a peephole.

under the sheets.

4. 考察
MagicalSheet と現実の赤シートを視覚的，領域的の側面から比較した．視覚的な側面では，現実の赤シートを使って赤文字を隠す方法では，その性質上，シートで覆う領域全てが赤くなってしまい他の字も見づらくなる，隠す
文字はシートの色に類似した色でなければならない，長時間利用していると，視界に余韻が残ってしまう点がある．

MagicalSheet では，対象とする色を背景色で塗りつぶすため，対象とする色を持つ部分以外に影響しない．対象とする色を持つ部分以外の領域は，シートで覆う前と後で変化
図9選択した透明シートを黒色に塗りつぶして，背後のコンテンツすることがないため，現実の赤シートのように見づらくなを隠している例．

ることはない．対象とする色は，任意に設定可能であるたFig. 9 The user can change the transparent sheet to a blackcolored sheet.

め，現実の赤シートのように，隠す文字はシートに類似した色である必要はない．
領域的な側面では，現実の赤シートでは，シートのサイズから削除される．再度，透明シート削除ボタンを押すと全が決まっており，変更することができない．MagicalSheet

透明シート上の「×」ボタンが消える．図 8 は，複数の透では，シートのサイズを縮小・拡大，シートの追加・削除

明シートを表示して，それぞれの緑色の部分を隠しているが可能である．例えば，複数行あるコンテンツの中から一例である．

行だけ隠したい場合は，現実の赤シートでは，その行に合う様にシートを切るなどして別に用意する必要があるが，3.7 黒シート化

MagicalSheet のシートはその行に合う様にサイズを変更

黒シート化したいシートを選択して Ctrl + Shift + Wすることで対応できる．複数のシートを用いて，穴埋め問

キー を押す．元に戻す時は再度，同じキーを押す．図 9

題のような利用方法も可能である．具体的には，単一色のは，選択した透明シートを黒色に塗りつぶして，背後のコ文字のみで作成されたコンテンツであっても，隠したい場ンテンツを隠している例である．

所ごとに，シートを追加・配置して，単一色を透過対象の色に設定することで，シートを重ねた部分のみが消え，穴3.8 複数シートを組み合わせた応用

埋め問題のように利用できる．MagicalSheet のシートは，2 つの透明シートを利用して，一部分だけ表示するといシートの領域内の対象色を透明にするモードだけでなく，う利用も可能である．方法は，1 つの透明シートを黒シーシートの領域外の対象色を透明にするモードもあるため，ト化してフルスクリーン化し，もう 1 つの透明シートを覗シートで覆った部分だけ対象色を表示するといった利用もき穴として利用する．図 10 は，複数シートを組み合わせ可能である．

「覗き穴」を実現した例である．

MagicalSheet のソフトウェアの利点として，既存のアプリケーションの変更は必要無い点である．デスクトップ画© 2016 Information Processing Society of Japan196

情報処理学会 インタラクション 2016
IPSJ Interaction 2016

161A092016/3/2

面を撮影し画像データを処理するため，既存のアプリケー存在するため，画像データ取得し透明処理を行い表示するションの描画処理を拡張する必要は無い．例えば，プレゼことは可能である．ただし，デスクトップ画面撮影機能をンテーションソフトでスライド作成しプレゼンテーショ提供する Web ブラウザはフルスクリーン表示でない限り，ンモードで表示，イラストソフトでのイラスト作成し画像OS のウィンドウ枠が表示されてしまう問題がある．

ファイルとして出力して画像閲覧ソフトでフルスクリーン化して表示することで，MagicalSheet のコンテンツとして5. おわりに利用することができる．MagicalSheet は，背景色は単色，本研究では，PC のデスクトップ画面上の指定した領域

文字色は赤・緑・青であるコンテンツを対象とするが，文の特定の色を消すことが可能である MagicalSheet を試作

字色については赤・緑・青以外の色に対応させるため，デした．ユーザーは，MagicalSheet を用いることで赤シースクトップ画面上の任意箇所の色を抽出して，それを対象

トを用いた暗記学習を PC のデスクトップ画面上で行うの色とすることができる．一般的な資料作成ソフトウェアことが可能となる．デスクトップ画面上のある領域内のでは印刷機能および印刷プレビューもあるため，その機能特定の色を消すためには，その領域に表示されたアプリを用いて表示したプレビュー内容を MagicalSheet のコンケーションの描画処理を拡張する必要があり困難である．

テンツとして利用することもできる．また，Web ブラウ

MagicalSheet では，デスクトップ画面を撮影し，撮影したザ上で表示しているインターネット上に存在する既存のリ画像から特定色を消す処理を行い，デスクトップ画面上にソースを MagicalSheet のコンテンツとして再利用するこ重ねて表示することで実現した．今回は PowerPoint を暗ともできる．Web カメラとプレビュー用のソフトウェアを記学習用コンテンツの作成環境として利用したが，文字の用いて，メモ帳，ホワイトボードに手書きした内容や既存配置，文字色・背景色の編集操作できるアプリケーションの印刷物を Web カメラで撮影しデスクトップ画面上に表であれば同じく作成環境として利用可能である．

示することで，MagicalSheet のコンテンツとして利用することもできる．

MagicalSheet の透明シートを複数利用した応用例とし

参考文献[1]て，透明シートで覆った部分だけコンテンツを表示し，それ以外の部分を黒で塗りつぶす例を挙げた．この応用は，[2]透明シートで覆った部分だけしかコンテンツが見えないため，聴衆などのフォーカスコントロールに利用できる．現
在は黒シート化したシートは不透明だが，透明度を設定して，フォーカスしてほしいとこを明るく表示し，それ以外[3]の部分を暗く表示するといったことも可能である．

MagicalSheet の画像処理では，特定色を消すときに単色に置き換えているため，コンテンツの背景色は単色のみ[4]に対応している．コンテンツの背景色が単色であることを前提とし，文字が画面を占める面積が背景色の占める面積よりも小さい場合，最も面積を占める色を背景色として自動的に設定することが可能である．または，背景色もユー[5]ザーが画面上から選択できるようにすることも可能である．
背景が模様の場合は，コンテンツの表示部分で覆われた部分の背景を推定することができないため利用できない．

MagicalSheet は，シートのクリック時にスクリーンショッ[6]

トを撮影し，特定色を消す画像処理を行う．画像処理後のシートの移動・縮小・拡大では，クリック時に処理した画像を利用する．そのため，MagicalSheet は動画など描画内容が動的なコンテンツには不向きであるが，暗記学習用のコンテンツではコンテンツの性質上，内容が静的であるため，この用途では問題ないと考える．

MagicalSheet は，最前面表示とデスクトップ画面撮影機能を提供できる SWB 上で動作する．Google Chrome はデ[7]

E.A.Bier, M.Stone, K.Pier, W.Buxton, T.DeRose Toolglass and Magic Lenses: The See-through Interface, SIGGRAPH ’93, pp.73-80, 1993.
Adam Fourney, Ben Lafreniere, Parmit Chilana, Michael
Terry: InterTwine: creating interapplication information
scent to support coordinated use of software, UIST ’14:
Proceedings of the 27th annual ACM symposium on Userinterface software and technology, pp.429-438, 2014.
Tom Yeh, Tsung-Hsiang Chang, Robert C. Miller Sikuli:
using GUI screenshots for search and automation, UIST
’09 Proceedings of the 22nd annual ACM symposium on
User interface software and technology, pp.183-192, 2009.
Morgan Dixon, James Fogarty: Prefab: implementing
advanced behaviors using pixel-based reverse engineering of interface structure, CHI ’10 Proceedings of theSIGCHI Conference on Human Factors in Computing
Systems, pp.1525-1534, 2010.
Suporn Pongnumkul, Mira Dontcheva, Wilmot Li, JueWang, Lubomir Bourdev, Shai Avidan, Michael F. Cohen: Pause-and-play: automatically linking screencast
video tutorials with applications, UIST ’11 Proceedingsof the 24th annual ACM symposium on User interface
software and technology, pp.135-144, 2011.
Andrea Bianchi, So-Ryang Ban, Ian Oakley, Designinga Physical Aid to Support Active Reading on Tablets,
CHI ’15 Proceedings of the 33rd Annual ACM Conference on Human Factors in Computing Systems, pp.699708, 2015.
Julian Seifert, Sebastian Boring, Christian Winkler, Florian Schaub, Fabian Schwab, Steﬀen Herrdum, FabianMaier, Daniel Mayer, Enrico Rukzio: Hover Pad: interacting with autonomous and self-actuated displays inspace, UIST ’14 Proceedings of the 27th annual ACM
symposium on User interface software and technology,
pp.139-147, 2014.

スクトップ画面のスクリーンショットを提供する API も© 2016 Information Processing Society of Japan

197