日本ソフトウェア科学会第 34 回大会 (2017 年度) 講演論文集

実世界型電子付箋システムにおける漂流型情報共有機
構について
伊藤 栄俊

大囿 忠親

新谷 虎松

我々は，物理付箋と電子付箋を用いた発想支援のための実世界型電子付箋システム Mahoca の開発を行っている．本
研究では，Mahoca を使用している各ユーザの画面上に，テキストや画像情報を表示する漂流型オブジェクトを用いた漂流型情報共有機構を開発した．漂流型オブジェクトは，各ユーザの画面間を漂うことで，情報の共有とコミュニケーションを支援し，ユーザ間のインタラクションを活発化させることが目的である．深層学習を始めとする機械学
習 API を呼び出すためのメッセージ通信を開発した．これにより，機能の拡張性を高める．また本システムは，シングルウィンドウアプリケーションとして開発した．シングルウィンドウアプリケーションは，マルチウィンドウアプリケーションに比べメモリ使用量を抑えることができ，拡張性も高い．本稿では本システムの概要と有効性を示す．

We are developing a reality-based e-sticky notes system “Mahoca” for idea support using physical sticky
notes and electronic sticky notes. In this research, we developed a floating mechanism with a floating object
that displays text and image information on the screen of each user using Mahoca. The floating object
supports information sharing and communication by walking between the screens of each user, and activateinteraction among users to lead to idea support. We also developed machine learning API, including deeplearning, based on message passing for improving the scalability. Additionally, our system employs a single
window application because a single window application uses less memory than a multi window application.
Moreover, the single window architecture achieves high extendibility. This paper presents its outline andits eﬀectiveness.

たり，直接電子付箋を作成したりするシステムであ1 はじめにる．Mahoca を用いて会議を行う際，過去の会議の情会議を行う際に，付箋の紙を用いられることがあ

報を用いて関連情報を推薦することは，アイディアる．アイディアを付箋に書き出し，ホワイトボード出しなどにおいて特に重要である．そこで，我々は，などに貼り付ける．付箋は自由に記述，配置ができ，Mahoca における関連情報を提示するためのシステム

チーム内でアイディアを共有しやすいという利点がを開発している [2]．アイディア出しを支援する情報とある．過去に行われた会議における，紙の付箋の内容して，過去の会議の情報をもとに，関連する語や画像だけでなく，配置方法や付箋のグループといった情報を推薦することで，アイディアの広がりを支援した．

は，現在の会議の参考にするときに有益である．しかMahoca における関連情報の推薦において，以下のし，再利用を考えた場合，電子化された付箋の方が，3 点が課題となった．一つ目は，提示された関連情報過去の状態を保存，管理できる点で優れている．我々が作業の妨げにならないことである．例えば，関連情は実世界型電子付箋システム Mahoca [1] を開発した．

報として画面上にキーワードを提示する場合，提示さMahoca は，物理付箋を取り込み，電子付箋に変換しれたキーワードにより他の情報の視認性が悪くなれ

A Floating Mechanism for Information Sharing on a
Reality-based e-Sticky Notes System
Eishun Ito, 名古屋工業大学工学研究科情報工学専攻,
Department of Computer Science, Graduate Schoolof Engineering, Nagoya Institute of Technology.

ば，作業の妨げになる．また，価値が低い情報が画面上に残り続ける状況は避けなければならない．二つ目は，グループ間で情報が共有されることである．ブレ
インストーミングなどを用いた会議の場合，グループで作業に取り組むことになる．こうした作業を行ってにて，本稿を締める．

いるグループ内において情報共有は重要である．三つ目は，提示される情報に対する機能の拡張性である．

1. 1 関連研究

テキストだけでなく，画像や音楽など様々な形式の情

Mahoca のような実世界とのインタラクションを報を関連情報として提示する場合，それぞれの形式考慮したシステムの関心は高まっている．Shi らのに沿ってユーザに情報が提示できること，また，関連

IdeaWall [3] では，ブレインストーミングを用いた会情報を生成するための機構の機能拡張が重要となる．

議中における音声入力情報をリアルタイムにビジュア

こうした課題に対して，本研究では漂流型情報共有機ライズ化するシステムを開発した．IdeaWall では，音構を開発した．

声入力を元にテキストや画像による情報推薦を行い，本システムでは，漂流型オブジェクトを用いた自由アイディアを広げる支援を図った．会議中の音声入力

度の高い表現オブジェクトの提供，グループでの送受を元にした関連情報推薦の研究は他にもされており，信が可能な通信システム，拡張性の高い，学習モデル

Andolina らの InspirationWall [4] などが挙げられる．

に対するメッセージ通信といった，これらの機能を実関連情報を提示する上で，IdeaWall では，3 種類の装することで課題の解決を行った．これらの機能は，情報提示手法が提案された．IdeaWall は，Mahoca

Mahoca だけでなく，様々なシステムの開発を支援すと同じように，ブレインストーミングなどを行っていることが期待される．

る最中に議論に関連する情報を提示することで，ア

本研究における課題を解決するために，漂流型情報イディア出しを支援している．しかし，Mahoca とは共有機構はシングルウィンドウ方式を採用している．

違い，電子付箋などの情報は画面上に存在しない．そ本システムを実装するにあたり，マルチウィンドウアのため，提示方法は限定されないが，例えば，会話のプリケーションとして開発するか，シングルウィンド様子を画面上に提示しながら議論を行う状況等では，ウアプリケーションとして開発するかが一つの争点と本研究で取り組んだ問題と同様の問題が発生する．

なった．システムをシングルウィンドウ方式とマルチ

Martinez-Maldonado らは，様々な対話型のインタウィンドウ方式としてそれぞれ実装し，評価実験を行フェースを用いたグループ作業に対して，Activity-い，パフォーマンスの評価を行った．結果，シングルCentred Analysis and Design(ACAD) フレームワー

ウィンドウ方式の方がメモリ使用量を抑えることがでクを利用した分析のための実用可能なアプローチを提き，開発における拡張性も高いため本システムでは，案した [5]．Martinez-Maldonado らは，様々な物理的シングルウィンドウ方式を採用した．シングルウィンないしデジタルな機器が利用できる空間におけるグドウ方式を採用するにあたり用いたアルゴリズムの紹ループ作業を想定し，実験を行った．ACAD フレーム介と，マルチウィンドウ方式と違いを示す．加えて，ワークに基づく 4 種類の要素を用いて分析を行うこと

本システムを用いて作成されたアプリケーションを紹で，様々なインタフェースを用いたグループ作業を評介することで，本システムの有効性を示す．

価している．グループワークにおける評価方法は他に本稿の構成を述べる．1. 1 節では，関連研究の紹介を行い，他の研究との比較により本研究の立ち位置をもあり，例えば，Activity-Based Computing(ABC)framework [6] などが挙げられる．

示す．1. 2 節では，実世界型電子付箋システムである小林らの Chatplexer [7] では，発表中におけるチャッMahoca の紹介を行う．2 章では，開発した漂流型情トや Twitter などの口頭質問に注目し，重要な発言報共有機構の機能について述べる．3 章では，2 章にだけを抽出する試みを行った．Chatplexer におけるて提案したアルゴリズムに基づくパフォーマンスの評研究で特筆すべき点は，発表における口頭質問と，価を行ったので，その結果を示す．4 章では，評価実チャット上におけるテキスト情報を収集し，クロス験にもとにした考察，および，開発したシステムに関チャネル返信という概念に基づき，対応関係を明確化して応用例をしながら有用性について言及する．5 章

し，記録を行っていることである．議論中には口頭による発言が存在している．口頭による議論中有の情プロジェクター

報とシステム上の情報との対応関係は，議論の活発度や成果を分析する上で重要な要因である．発表中におけるこうした，発言を発表に活用することは，発表支援につながり有用である．しかし，チャットのテキスト情報などを発表画面上に提示する方法として，スライド画面の最前面や側に関連する情報を提示することが挙げられる．ここで，提示される情報が発表の妨げになってはならない．議論や発表における作業画面の妨げにならない，情報推薦のための提示機構の必要性があげられる．

スクリーン

クライアントこうした，会議中における情報を元に関連情報を提示し，議論を活発化させる研究は現在でも多く取り組

図1

Mahoca を使用している様子

まれている．スクリーンや大画面ディスプレイを用いることで情報共有を図るケースが多いが，本研究で想に，メタ情報としてテキストのメモと任意の URL を定するユースケースは，情報共有するためのスクリー入力して付加できる.

ンや大画面ディスプレイの他に，参加者各個人が端末

Mahoca では，会議参加者は，クライアントを利用を所持しており，物理的な付箋情報の取り込みや情報して自分の意見を書いた電子付箋を作成する．作成しの閲覧を行う状況を想定している．こうした状況であた電子付箋をスクリーンで表示したベースボード上にる場合，共有画面だけでなく，各個人が使用している公開することで，他の会議参加者に意見を共有する．

端末ごとの作業画面に対する情報推薦が重要となる．

ベースボード上の電子付箋で他者の意見を確認し，議論をすることで会議を進行できる．

1. 2 実世界型電子付箋システム Mahoca

ここで，Mahoca における課題について述べる．1

実世界型電子付箋システム Mahoca は，アイディア章にて Mahoca における課題を三つ挙げた．一つ目の再利用のために電子付箋にアイディアを入力し，会は，作業の妨げにならないことである．例えば，関連議参加者間共有するためのシステムである．Mahoca

情報として画面上にキーワードを提示する場合，提では，会議参加者が「スクリーン」と「クライアン示されたキーワードにより他の情報の視認性が悪くト」の二つのアプリケーションを利用することで，電なれば，作業の妨げになる．また，価値が低い情報子付箋を利用した会議を行う. 図 1 に Mahoca を使が画面上に残り続ける状況は避けなければならない．

用している様子を示す．スクリーンは，公開された電この課題を解決するために，我々は，透明ウィンドウ子付箋を画面に表示し，会議参加者に共有するアプを用いた漂流型オブジェクトによる情報提示によりこリケーションである．スクリーンでは，会議に対応すの問題の解決を図った．

る「ベースボード」と呼ばれる画面を全面に表示す二つ目は，グループ間で情報が共有されることである．ベースボード上には会議参加者が公開した電子付る．ブレインストーミングなどを用いた会議の場合，箋が表示される．

グループで作業に取り組むことになる．作業を行ってクライアントは，電子付箋を作成，または編集しているグループ内での情報共有は重要である．スクリー

ベースボードに公開するために利用されるアプリケーンや大画面ディスプレイに表示されるような情報共ションである．クライアントは，各会議参加者が持つ有だけでなく，参加者間の端末ごとの作業画面上におスマートフォンやタブレット端末上で動作する．電子いて，関連情報やチャットのようなメッセージを共有

付箋には，付箋に入力したテキストや手書きメモの他することで，議論の活発化が期待される．こうした，参加者間のコミュニケーションや情報共有を支援する

漂流型情報共有機構は Electron†1 と呼ばれるフための通信システムを設計することで，問題の解決をレームワークを用いて開発を行った．Electron は，デ図った．

スクトップアプリケーションに Web アプリケーショ

三つ目は，提示される情報に対する拡張性の向上でンの開発手法を応用すること可能である．そのため，ある．テキストだけでなく，画像や音声など様々な形漂流型オブジェクトの形状は，HTML と CSS で定義式の情報を関連情報として提示する場合，それぞれのできる．これにより，漂流型オブジェクトで表示で形式に沿ってユーザに情報が提示できる機構が必要きる媒体として，テキスト情報だけでなく，画像やである．そこで，Web ページのレイアウトで利用さURL，音声や映像も表示することができる．HTML

れている HTML と CSS を用いることで表現の幅をや CSS は Web サイトのデザインなどに用いられて確保した．また，インタフェースだけでなく，関連情おり，漂流型情報共有機構は Web アプリケーション報を生成するための機構のスケーラビリティの向上の提供も可能である．

も重要である．Mahoca における関連情報推薦では，漂流型オブジェクトは，透明ウィンドウ上に表示さWeb ニュースコーパスや Wikipedia コーパスを元にれる．透明ウィンドウとは，デスクトップ上に表示さした学習モデルを使用している．こうした学習モデルれる透明なウィンドウである．ウィンドウレベルが調をより簡単に拡張するための仕組みと，ユーザが暗黙節されており，デスクトップ上において最前面になる的に利用できるサービス形態を考案した．

よう配置される．そのため，他のウィンドウよりも優先されてコンテンツが画面上に表示される．漂流型オ

2 漂流型情報共有機構

ブジェクトを透明ウィンドウ上に割り当てることで，章にて提示した課題を解決するために，漂流型情報常に最前面でユーザに情報を提示することが可能と共有機構を開発した．漂流型情報共有機構には三つなる．の特徴がある．一つ目は，ユーザに対してディスプレ漂流型オブジェクトを用いてのシステムの実装を行イの最前面に表示される漂流型オブジェクトである．

う際に，オブジェクトの割り当て方として 2 種類の二つ目は，一対一やグループでの通信を可能にする通方法を検討した．一つは，漂流型オブジェクト一つに信システムである．三つ目は，深層学習を始めとする対して，ウィンドウを一つ割り当て，デスクトップ上機械学習 API を呼び出すためのメッセージ通信であに複数のウィンドウが生成されるマルチウィンドウ方る．それぞれの特徴に関して述べる．

式である．もう一方は，全ての漂流型オブジェクトをウィンドウを一つ割り当て，デスクトップ上には単一

2. 1 漂流型オブジェクトと透明ウィンドウのウィンドウのみ存在するシングルウィンドウ方式で漂流型情報共有機構では，漂流型オブジェクトといある．図 2 に，シングルウィンドウ方式とマルチウィう画面上を漂うように動くものを用いて情報を提示

ンドウ方式のイメージ図を示す．図 2 中の外側の矩形する．画面上を漂うように動くことで，背後の情報がで示されるのがユーザの作業領域を表し，雲のデザイ隠れてしまう状況を防ぐことができる．必要な情報をンが漂流型オブジェクトを表し，矩形に囲まれた斜線持つ漂流型オブジェクトをユーザが選択し，選択され部分が透明ウィンドウである．右下に示されているのなかったオブジェクトは，一定時間毎に画面上から消がマルチウィンドウ方式である．左下で示されている

える．漂流型オブジェクトは，漂流型情報共有機構にのが，シングルウィンドウ方式である．

おける通信モジュールを用いて，グループ間で共有さ

図 2 の右下に示されているのがマルチウィンドウれる．そのため，画面上だけでなく，通信システム上方式である．マルチウィンドウ方式では，漂流型オブにおいて，メッセージのやり取りによりユーザ間で情ジェクト毎に透明なウィンドウを生成し，情報を提示報が伝達され，モバイルエージェントのような働きをする．

†1 https://electron.atom.io/

ため，データサイズが膨らみメモリ使用量が増える
作業領域

漂流型オブジェクト

透明ウィンドウと考えられる．また，シングルウィンドウ方式では，最初のウィンドウ生成時以降，ウィンドウを新たに生成する必要がなく，漂流型オブジェクトのデータサイズはウィンドウに比べ小さいためメモリ使用量が抑えられると沿い即される．

2 点目の理由は，マルチウィンドウ方式の場合，CSSシングルウィンドウ方式

図2

マルチウィンドウ方式

シングルウィンドウ方式とマルチウィンドウ方式

アニメーションなどの表現に制約がかかるためである．マルチウィンドウ方式の場合，漂流型オブジェク
トの位置情報は各ウィンドウの位置に依存する．つする．マルチウィンドウ方式の利点は，ユーザとウィまり，オブジェクトの並行移動に関しては，ウィンドンドウ間でのインタラクションの管理が容易で．ユー

ウの位置情報を制御する必要があり，平行移動のアザが注目したオブジェクトを一意に見つけられる点ニメーション制御するための処理が追加で必要になである．複数のオブジェクトを同一のウィンドウに割る．シングルウィンドウ方式の場合，ウィンドウサイり当てる場合，各オブジェクトを区別するための IDズを作業領域全体とすることで，オブジェクトの位が必要となる．マルチウィンドウ方式の場合は，ウィ置情報を制御することで，領域内であればどこでもンドウ毎に区別されるため，内部でオブジェクトを区配置することができる．また，オブジェクトのアニ別する機構が不要となり，ウィンドウ内には単一のオメーションの設定が CSS アニメーションで制御できブジェクトしか存在しないため，HTML や CSS などるため，様々な既存の CSS アニメーションライブラの設定が単純化できる．また，ウィンドウサイズは，リを利用することができる．本システムにおいても，
TweenMax.js†2 という CSS アニメーションのライブ表示するオブジェクトの大きさ程度で十分となる．
図 2 の左下で示されているのが，シングルウィンラリを利用している．

ドウ方式である．シングルウィンドウ方式では，作業シングルウィンドウ方式の場合，透明ウィンドウを領域全体に透明ウィンドウを生成し，その上に，漂流作業領域の大きさで，常に最前面に存在させることに型オブジェクトをそれぞれ割り当てている．シングルなる．つまり，ユーザから行われるマウスやキーボー

ウィンドウ方式の利点は，単一のウィンドウの生成のドによる入力が他のウィンドウよりも優先されて伝えみを行い，そのウィンドウ上でオブジェクトを生成すられることになる．透明ウィンドウが表示されているるため，メモリ使用量がマルチウィンドウ方式に比べ間は他のウィンドウの操作の妨げとなるため，漂流型抑えられると期待されることである．また，シングル

情報共有機構で生成されるウィンドウはユーザに情報

ウィンドウ方式の場合，ただし，オブジェクトの配置を表示する機能のみとし，ユーザからの入力は背面に範囲に合わせてウィンドウの大きさを決めなければな存在する他のウィンドウに透過するようにした．これらない．

により，作業を妨げずに情報を提示することが可能と本システムでは，シングルウィンドウ方式を採用しなる．しかし，イベント透過状態では，ユーザは透明た．理由として 2 点が挙げられる．1 点目の理由は，ウィンドウ上に表示されている任意の漂流型オブジェシングルウィンドウ方式の方が，生成するウィンドウクトとのインタラクションを行うことができない．そ数を抑えられるためマルチウィンドウ方式に比べメモこで，ユーザからのイベント情報を監視し，透明ウィリ使用量が抑えられると推測されるためである．生成

ンドウに伝えるためのアルゴリズム提案する．

されたウィンドウの面積の合計を比較すると，マルチシングルウィンドウ方式における，ユーザからのイウィンドウ方式の方は漂流型オブジェクトの数が増えるほどウィンドウの占める総面積の値が大きくなる†2 https://greensock.com/tweenmax

漂流型情報共有機構

Algorithm 1 シングルウィンドウ方式
1: e ← observeEvent()

ユーザ
操作情報

2: p ← getP oint(e)

4:

Hello

5:

if isCollision(o, p) then6:

show(window)

7:

dispatch(window, e)8:hide(window)

10:

propagation()イベント伝播モジュール
操作情報

漂流型オブジェクト

プライベート
アニメーション
イベントハンドラ
モジュール
アニメーション情報

透明ウィンドウ

else

9:

衝突判定

表示情報

3: while o ∈ Objects do

図3

グローバル
イベントハンドラ

透明ウィンドウ生成モジュール
• サイズ
• 位置
• ウィンドウレベル

シングルウィンドウ方式における漂流型オブジェクトとイベント処理

end ifを監視するグローバルイベントハンドラ，入力イベン

12: end while

ト情報中の座標情報を元に，漂流型オブジェクトと衝

11:

突判定を行い，衝突時は透明ウィンドウにイベント情
ベント情報を監視し，透明ウィンドウに伝えるため報を伝えるイベント伝播モジュール，ディスプレイののアルゴリズムを，Algorithm 1 に示す．ユーザから作業領域全体の最前面に透明なウィンドウを生成するの入力イベントを監視し，イベントの発生座標が透透明ウィンドウ生成モジュールが存在する．

明ウィンドウ上のオブジェクト上であった場合，透明漂流型オブジェクトは透明ウィンドウ内で生成されウィンドウにイベント情報を伝達する処理である．まる．漂流型情報共有機構から送られるイベント情報

ず，observeEvent() を用いてイベント情報 e を監視をもとに，対応したアニメーションを選択するプライする．得られたイベント情報 e から座標情報 p を取得

ベートイベントハンドラを持ち，これは透明ウィンドする．座標情報を取得する際は，イベントがディスプウ毎に設定される．アニメーションの例として，画面レイの作業領域や位置情報が得られるため，透明ウィの端を集会する動きや，フリーハンドで描いた軌跡をンドウの座標系に合うよう調整する．取得した座標追跡する運動が可能である．漂流型オブジェクトが行

情報 p を元に，透明ウィンドウ window 上に存在す

うアニメーションは透明ウィンドウ毎に設定されるたる漂流型オブジェクト群 Objects の各オブジェクト

め，使用するユーザごとに動きを変更することが可能

o と衝突判定を行う．イベントが発生した座標 p が漂で，ウィンドウの配置状況やディスプレイの環境に応流型オブジェクト o と衝突していた場合，show() 透じて調整することが可能である．

明ウィンドウのイベント透過状態を解除し，イベント透明ウィンドウおよび漂流型オブジェクトからユーが伝播されるようにし，dispatch() でイベント情報ザに対して情報提示が行われるが，ユーザから透明を透明ウィンドウに伝える．衝突していない場合，透ウィンドウに対して直接イベントを伝えることがな

明ウィンドウにイベントが伝播しないよう hide() でい．そのため，漂流型情報共有機構におけるグローバイベント透過状態とし，背面に存在するウィンドウにルイベントハンドラにおいて，ユーザからの透明ウィpropagation() でイベントを伝播する．

ンドウに対する処理は行われないと定義することで，提案したアルゴリズム Algorithm 1 に基づき，ユー
ザと漂流型情報共有機構を通じて透明ウィンドウと行われるインタラクションにおけるイベント処理について，図 3 を用いて説明する．漂流型情報共有機構には，漂流型オブジェクトの生成とイベント処理の流れに関連するモジュールとして，ユーザの入力イベント一方向の情報伝達機構として使用することも可能である．

2. 2 通信システム
通信には，WebSocket†3 を用いている．WebSocket

漂流型情報共有機構
通信モジュールはサーバ・クライアント間で双方向通信を可能にする通信規約の一つである．WebSocket を用いることで高速な情報伝達が可能である．また，クライアント間を通信管理サーバが取り持つことで，クライアントはレスポンスを必用としない一方向な通信も可能である．本システムにおける通信システムでは，クライBMSG

クライアントD
漂流型情報共有機構

漂流型情報共有機構

通信モジュール

通信モジュール
メッセージ

クライアントA

通信管理サーバ• id• Site• Token• Deptグループ情報データベース

BMSG
GMSG クライアントC

BMSG
GMSG
DMSG

漂流型情報共有機構
通信モジュール
クライアントB

アントはあらかじめ登録されている，通信管理サーバに対して，識別するための id と，サイト (Site) と

図4

通信システムトークン (Token) を設定する．Site は，通信を行うクライアントを区別するためのもので，Token に応られるメッセージは前述の DMSG，GMSG，BMSG

じてチャンネルが生成される．登録されている正しいの３種類がある．DMSG の場合は，通信相手の id

Site と Token の値でリクエストを要求するユーザのを知る必要がある．GMSG は，事前に登録されていみが通信を行える．

る所属グループの値 Dept を元にメッセージを送る．

クライアント間で通信を行う場合，受信側のクライ

BMSG は図 4 の場合，クライアント A はクライアン

アントに送られてくるメッセージには３種類が存在

ト B の id を知っている．クライアント A とクライア

する．

ント B とクライアント C は同一のグループ Dept に所• 特定の相手に送信する，ダイレクトメッセージ(DMSG)• 所属するグループのメンバー全員に送信する，グループメッセージ (GMSG)

属している．クライアント D は同一の Site，T okenに接続している．そのため，クライアント A はクライ
アント B に対しては DMSG，GMSG，BMSG が送信でき，クライアント C に対しては GMSG，BMSG，• 同じサイトにアクセスしているメンバー全員にクライアント D に対しては BMSG のみが送信でき送信するブロードキャストメッセージ (BMSG)

る．本システムにおけるグループ通信の特徴として，

DMSG は，id を指定したクライアントに対して通信

漂流型オブジェクトという，重畳表示が可能で，動的を行う際に用いられるメッセージで，一対一通信を行なオブジェクトを用いているため，複数グループからう．GMSG は，同じ Site と Token を持つユーザ内のメッセージを同時に表示することが可能である．そでさらにグループを作りたい場合に使用する．あらかのため，例えばクライアント B はクライアント A かじめデータベースに，所属するメンバー等のグルーら送られていくる DMSG，GMSG，BMSG を全てプ情報を登録しておくことで，一対多の通信を実現を同時に画面上に出すことが可能である．

する．BMSG は，同じ Site と Token を持つ全てのユーザに対してメッセージを送る場合に使用する．

2. 3 メッセージ通信

本システムにおける通信のシステム構成図を図 4

関連情報を生成するために学習済みのモデルを利に示す．通信を行う各クライアントは漂流型情報共用することがある．特に，過去のニュース記事など，有機構の通信モジュールを用いて通信を行う．通信モ

学習元のコーパスが大きく，関連度の計算に時間が掛ジュールでは，クライアント同士を区別するための idかるものや，高い処理能力を求める学習モデルが存在の設定と，通信管理サーバの U RL と Site，T oken をする．こうしたモデルを利用する場合，高速な処理が用いて通信の確立，送受信を行う．通信サーバから送可能なサーバを用意し，サーバ側で処理を行うことで高速化を図ることができる．

†3 https://tools.ietf.org/html/rfc6455

漂流型情報共有機構では，こうした学習済みモデルを含むサーバ群を管理し，利用者にサーバ群を意識さMulti window

せず，API を呼び出すためのメッセージ通信を提供

90,000する．メッセージ通信では，利用したい状況と，利用80,000
70,000り，新たな学習モデルを導入する際は，漂流型情報共有機構を管理するサーバに対して，サーバ情報を追加するだけで機能を拡張することが可能となる．
メッセージ通信を用いて利用できる機能として，

Private bytes[kb]

したい状況に応じたデータを JSON 形式のメッセー
ジを送ることで期待する処理を実行する．これによSingle window

60,00050,00040,00030,00020,00010,00000

自然言語処理であれば，MeCab を用いた形態素解

10203040506070
Num. of Objects

8090100110

析，関連語を推薦するために生成した TF-IDF モデルや Word2vec モデルが利用できる．他にも，Mahoca

図5

シングルウィンドウによる実装とマルチウィンドウ

上に投稿された画像に対して，どんな画像であるによる実装に伴うメモリ使用量のか判別し，タグを付与する ResNet50 [8] モデルや行例

Incerption-v3 [9] モデルなどが利用できる．

図 6 は Mahoca 上における漂流型オブジェクトの3 評価実行例を示している．Mahoca を用いて生成された

2. 1 節において，本システムの実装において，シ電子付箋情報を元に，関連情報を選択し，漂流型オングルウィンドウ方式とマルチウィンドウ方式の 2ブジェクトを用いて Mahoca 上に表示している．図

種類が存在することを示唆した．双方の性能を比較

6 中の漂流型オブジェクトには赤色の雲と黄色の雲でするために評価実験を行った．評価実験として，シ表現された 2 種類が存在する．これは，図 6 中の付ングルウィンドウ方式として実装した際のメモリー

箋の色情報を元に推薦を行っているためである．漂流使用量と，マルチウィンドウ方式として実装した際型オブジェクトの情報を元に，Mahoca 上の電子付箋のメモリー使用量の計測を行った．シングルウィンを生成することが可能である．

ドウ方式で生成されるウィンドウは，作業領域と同じ大きさとなるようにウィンドウサイズを設定す

4 考察と応用

る．マルチウィンドウ方式で生成されるウィンドウ

本システムにおける貢献として，漂流型オブジェ

は，表示する漂流型のオブジェクトの大きさに応じクトを用いた自由度の高い表現オブジェクトの提供，たウィンドウサイズとする．実行環境は，macOSグループでの送受信が可能な通信システム，拡張性

Sierra Version10.12.6，2.7GHz Intel Core i5，8GBのある学習モデルに対するメッセージ通信により，1867MHz DDR3，Node.js Version 6.9.5，Electron

Mahoca だけでなく様々な応用が可能であることが挙Version1.6.8 である．

げられる．その応用例として上記の通りの例を挙げ

図 5 に評価実験の結果を示す．横軸は，表示してた．また，評価実験の結果より，シングルウィンドウいる漂流型オブジェクトの数を表している．縦軸は，方式の方がマルチウィンドウ方式に比べメモリ使用量メモリ使用量 (private bytes) を表しており，単位はを抑えられることが示された．他の利点も考慮した

kb である．図 5 より，10 オブジェクト以上の時，シ結果，本システムではシングルウィンドウ方式を採用

ングルウィンドウ方式の方がメモリ使用量が少ないこした．とが分かる．

透明ウィンドウはレイヤー化することで，デスクトップ上における表現の幅の拡大が期待される．例え

3. 1 Mahoca における漂流型オブジェクトの実ば，作業領域の上に，通知やエフェクトなどの読み込図7
図6

漂流型情報共有機構の用いた楽曲推薦

Mahoca 上における漂流型オブジェクトの実行例:

赤色の雲と黄色の雲で表現された 2 種類の漂流型オブジェある．これは漂流型情報共有機構における通信システクトが最前面に表示されている．漂流型オブジェクトの背ムの応用で実現される．

面に表示されているのは Mahoca のベースボード画面．

二つ目は，楽曲推薦を行うシステムである．本システムで提供している漂流型オブジェクトが用いられみ専用のオブジェクトをもつ透明ウィンドウを配置さている．図 7 に実行例を示す．図 7 では漂流型オブせる．さらにその上に，ポインタなどのユーザとのイジェクトには音声データが付与されており，再生バーンタラクションを反映させるオブジェクトを持つ透明を押すことで，ムードに応じた曲が再生される．これウィンドウを配置することで，ユーザは最上面のオは，漂流型情報共有機構の漂流型オブジェクトやメッブジェクトに対しては操作可能であるが，2 層目のオセージ通信により支援されている．

ブジェクトに対しては権限がなく，閲覧のみとするこ他含めの 16 名が，本システムを応用して開発したとができる．このように，透明ウィンドウを重ねて上アプリケーションを総括する．本システムにおける漂で，本機構における漂流型オブジェクトのような表示流型オブジェクトと通信システムを使うことでチャッオブジェクトを配置することで，デスクトップ上におト機能は容易に実装ができる．加えて，CSS アニメー

けるデザインの幅を広げることができる．

ションによりユーザの興味を惹きつけ，通知機能や関漂流型情報共有機構は Mahoca だけでなく様々な連情報の推薦機能を実装しているものが多かった．こ応用が可能である．本システムは，Mahoca と疎結合うしたインタフェース部分で特に開発者への支援が行で構成される機構であるため，他のシステムへの導えた．また，ユーザとしては，画面上を漂う物体は視入が容易である．本システムを有用性を示すために，覚的効果が大きく，テキストなどの情報だけでなく，20 代成人男性 16 名に本システムを用いて様々なアプ動物やキャラクターなどを用いたアプリケーションのリケーションを作成してもらった．応用例を 2 つ挙方が，ユーザからの評価が高い結果となった．

げる．
一つ目は，回覧板システムである．グループに対5 おわりにして通信を行う場合に，グループのメンバー全員に

本稿では，Mahoca における課題を解決するために送信するのではなく，グループ内で順序関係を決め，漂流型情報共有機構を開発した．漂流型情報共有機メッセージを漸次送信するシステムである．例えば，構には三つの特徴がある．一つ目は，ユーザに対して学生が執筆した論文の添削では，自分の他に他人からディスプレイの最前面に表示される漂流型オブジェクチェックを受けることがある．その際，担当教員に見トである．二つ目は，一対一やグループでの通信を可せる前に，他の同級生や上級生に見てもらうことがあ能にする通信システムである．三つ目は，深層学習をる．このように段階的に添削を行う場合，回覧板シス始めとする機械学習 API を呼び出すためのメッセー

テムのような順序関係を持つメッセージ送信は有効でジ通信である．本システムは，漂流型オブジェクトを用いた自由度の高い表現オブジェクトの提供，グループでの送受信が可能な通信システム，拡張性の高い，学習モデルに対するメッセージ通信により，Mahocaだけでなく様々な応用が可能である．実装において，パフォーマンスの向上のためにウィンドウ管理に関して評価実験を行い，シングルウィンドウ方式の方がメモリ使用量が抑えられたことから，本システムではシングルウィンドウ方式を採用した．また，本システ
ムの有効性を示すために，20 代成人男性 16 名に本システムを用いて様々なアプリケーションを作成してもらったところ，チャット機能や情報推薦において開発者を支援し，ユーザからの関心を惹くシステムであることが示された．
謝辞 本研究の一部は JSPS 科研費 JP15K00422，JP16K00420 の助成を受けたものです．
参 考 文 献[1] 大囿忠親, 丹羽佑輔, 藤江翔太郎, 渡邊正人, 鈴木智也, 伊藤栄俊, 岩田知, 新谷虎松. Mahoca: 議論事例の再利用を可能にする実世界型電子付箋システム. 電子情報通信学会 人工知能と知識処理研究会, 第 116 巻, pp.
33–38, 2016.
[2] 伊藤栄俊, 鈴木智也, 丹羽佑輔, 大囿忠親, 新谷虎松.
ブレインストーミング事例の再利用のための関連情報推薦機構の試作. 2017 年度人工知能学会全国大会（第 31回）講演論文集, 第 31 巻, pp. 1–4, 2017.
[3] Shi, Yang, Wang, Yang, Qi, Ye, Chen, John,Xu, Xiaoyao, Ma, Kwan-Liu. Ideawall: Improving
creative collaboration through combinatorial visualstimuli. In Proceedings of the 2017 ACM Conference on Computer Supported Cooperative Work andSocial Computing, CSCW ’17, pp. 594–603, NewYork，NY，USA, 2017.
[4] Andolina, Salvatore, Klouche, Khalil, Cabral,Diogo, Ruotsalo, Tuukka, Jacucci, Giulio. Inspirationwall: Supporting idea generation through automatic information exploration. In Proceedings of the2015 ACM SIGCHI Conference on Creativity andCognition, Proceedings of the ACM SIGCHI Conference on Creativity and Cognition, pp. 103–106,
New York，NY，USA, 2015.
[5] Martinez-Maldonado, Roberto, Goodyear, Peter,Kay, Judy, Thompson, Kate, Carvalho, Lucila. An
actionable approach to understand group experiencein complex，multi-surface spaces. In Proceedingsof the 2016 CHI Conference on Human Factors inComputing Systems, CHI ’16, pp. 2062–2074, New
York，NY，USA, 2016.
[6] Bardram, E. Activity-based computing: Supportfor mobility and collaboration in ubiquitous computing. Personal Ubiquitous Comput., Vol. 9, No. 5,
pp. 312–322, September 2005.
[7] 智也小林, 一志西本. Chatplexer：チャットを併用する口頭発表における発表者のための重要発言選択支援の試み. 情報処理学会論文誌, Vol. 53, No. 1, pp. 12–21,
jan 2012.
[8] Kaiming He, Xiangyu Zhang, Shaoqing Ren, andJian Sun. Deep residual learning for image recognition. CoRR, Vol. abs/1512.03385, , 2015.
[9] Christian Szegedy, Vincent Vanhoucke, Sergey
Ioﬀe, Jonathon Shlens, and Zbigniew Wojna. Rethinking the inception architecture for computer vision. CoRR, Vol. abs/1512.00567, , 2015.