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

発表者の実像を利用した動的なプレゼンテーション操作環境の実現
丹羽 佑輔

片山 真也

白松 俊

大囿 忠親

新谷 虎松

本研究では，発表者の実像を利用して動的にプレゼンテーションを操作するシステム (シルエットシステム) を試作した．本システムは，PowerPoint で作成したアニメーション付きの資料を Web ブラウザ上で表示し，さらに，資料の上に発表者のシルエットを重ねることで，注目度の高いプレゼンテーションを可能にする．また，Web 上に複数のプレゼンテーションを同時に表示することで，プレゼンテーションの動的なマッシュアップも可能である．臨場感のあるプレゼンテーションを支援するために，発表者の身体動作に基づくプレゼンテーションの支援も可能である．本稿では，本プレゼンテーションシステムの実装方法について説明する．

PowerPoint に依存しない点が挙げられる．

1 はじめに

本研究では，動的にプレゼンテーションのストー

効果的なプレゼンテーション支援のためには，プレリーを構成することを支援するための機能を実現

ゼンテーション資料のみならず，発表者自身の身体動する．既存のプレゼンテーションシステムとして，作も重要な要素である．ストリーミング動画などに基PowerPoint(Microsoft 社製)，Keynote(Apple 社製)

づく分散かつ非同期なプレゼンテーションの重要性が等が挙げられる．これらのシステムでは，事前に並べ増している昨今，発表者の動作を活かしたプレゼンられたスライドの順序に従いプレゼンテーションを進テーション支援技術の必要性もさらに増しているとめることは容易であるが，聴講者の興味などに合わせ言える．本研究では，発表者のノンバーバルなコミュて動的にプレゼンテーションのストーリーを構成する

ニケーションを考慮した魅力的なプレゼンテーションのには不向きである．

を可能にするためのプレゼンテーションシステムを

本稿では，PowerPoint により作成された資料をプ開発する．ここでは，発表者の実像とプレゼンテーログラムで制御可能とし，発表者の実像とプレゼンション資料を適切に融合するためのシステムを実現

テーション資料の融合が可能にする新たなプレゼンする．本研究の特筆すべき点として，実用的に利用可テーションの実現方法について述べる．

能なシステムの実現のために，プレゼンテーション資

本稿の以降の構成を示す．2 節では発表者の実像を料を PowerPoint で作成可能とし，かつ，システムの利用したプレゼンテーションについて説明する．3 節

汎用性を高めるためにプレゼンテーションの実施はでは動的なプレゼンテーション操作を実現するためのImplementing a Dynamic Presentation System Usinga Silhouette ImageYusuke Niwa, Department of Scientific and Engineering Simulation, Graduate School of Engineering,Nagoya Institute of Technology, .
Shinya Katayama, Shun Shiramatsu, Tadachika
Ozono, Toramatsu Shintani, Department of Computer Science and Engineering, Graduate School ofEngineering, Nagoya Institute of Technology, .

発表者の表示方法および資料ファイル形式を提案す
る．4 節ではシステムの実装の概略を示す．最後に，5 節で考察し，6 節でまとめる．

2 関連研究発表者とスライドの関係を再考することで，新たなプレゼンテーションのスタイルを提案するための研究2

日本ソフトウェア科学会第 30 回大会 (2013 年度) 講演論文集が行われている．例えば，発表者の実像や動作をスラたインタラクションの研究として Shadow Reaching

イドに反映させることで，Web 上へのプレゼンテーが挙げられる [5]．Shadow Reaching では，発表者のションの配信を改善することが可能である．スライド

腕の先端の影や身体の影の輪郭を認識し，スクリーと発表者を個別に撮影し，それらを合成した映像を配ンに映る影を用いて，入力を行う．ユーザは光源と人信する場合，発表者とスライドを別の領域に分けてそ物の距離を調節することでスクリーンに映る影の大れぞれ表示するか，スライド上に発表者を表示する領きさを変化させることが可能である．ペンの影を用域を設けることが必要である．そのため，スライドのいて OHP 風の指示ができるプレゼンテーションツー

表示領域の減少，もしくは，スライドの一部分が隠れルとして Shadowgraph [3] がある．Shadowgraph でるという問題が発生する．本問題を解決するためのプは，入力デバイスであるタブレットから得た点の情報レゼンテーションシステムとして，発表者の映像を加からペンの影を生成し，スライド資料の上に表示する工し，スライドの背景として表示する Kuroko [1] がことができる．

挙げられる．Kuroko では，発表者がスライドを隠さないように発表者とスライドを合成するために，発表キャンバスモデルを用いたプレゼンテーション表現の実現に，SVG を用いた方法 [6] や Prezi†1 はズー

者の輪郭を取得し，輪郭をスライド資料の背後にモノム機能を活用したプレゼンテーションツールがある．

クロ画像として表示している．本手法のメリットとしPrezi は，スライドのようにページの概念がなく，1て，発表者の像が動いていることにより，発表者の像枚のキャンバス上に全ての内容を記述する．ユーザの無いスライドよりも聴講者の注目を集められる可は，表示領域の移動や拡大によって，コンテンツを閲能性がある．さらに，発表者の身体動作を使ったスラ覧する．本研究では，4.2 節で述べるような，Web ブイドのポインティングが可能となる点が挙げられる．

ラウザを利用したマルチビューなプレゼンテーション

本システムでは，Kuroko と同様にスライド内に発表を実現する．

者の映像を合成する手法を用いている．
本研究では，発表者の身体動作によるプレゼンテー

3 動的なプレゼンテーション操作

ション効果を最大限に活用するために，発表者をスラ

3. 1 シルエット

イドの前面に実像として投影しつつ，スライド表示

本研究では，スライド資料と発表者の映像を合成すを阻害しないアプローチを開発している点で異なる．

る手法に関連して，発表者およびポインタの表示方法

スライド表示を阻害しない発表者とスライドの合成手について検討している．このとき，発表者は，スライ法として，MAEDE が提案されている [2]．MAEDE

ド資料上での発表者のシルエットの大きさや表示位

では，発表者の骨格情報から，スライド資料のテキス置，および，シルエットの濃さを制御することで，ストオブジェクトを，発表者を避けるように動的に再配ライド上での多様な表現が可能になる．既存研究 [1]

置することで，発表者がスライド資料を遮ってしまう

では，ユーザの動きを検出して，動いている場合にはと問題を解決している．本研究では，PowerPoint をシルエットを表示し，そうでないにはシルエットを消用いて作成されたアニメーション付きのスライドなどす方法が提案されている．本手法は，シルエットの濃をそのままの見た目で使用することを想定しているさを制御するという点で有効であり，本研究でも同様ため，発表者に応じてスライド内のオブジェクトを動の処理を実現している．動きに基づくシルエットの濃的に再配置するアプローチを取っていない．

さの制御において，ポインタ表示のようにある一点を他にも発表者の身体動作を利用したプレゼンテー示したい場合が課題となる．一点を示す部分以外が動ションシステムとして，発表者の身体動作に連動したいていればよいのだが，ユーザにとってプレゼンテーCG エフェクトと指示棒デバイスの組み合わせによションへの集中の妨げとなる．シルエットの濃さを制る，臨場感のあるプレゼンテーション支援手法の研究が挙げられる [4]．また，スクリーンに映る影に注目し†1 http://prezi.com/

日本ソフトウェア科学会第 30 回大会 (2013 年度) 講演論文集
御するためのリモコンの導入も考えられるが，同様に3

能，の 3 点を実現することが必要である．

煩わしい．常に発表者の映像がスライド資料の上に表動的なプレゼンテーションの実現を目標として上示されると，スライド資料は聴講者から見にくくなる

記 3 点を実現するために，PowerPoint ファイルを制問題がある．そこで，発表者の動きに応じてオーバー御情報付きの動画ファイルに変換する．ここでの制御レイで表示される発表者の映像の透明度を変化させ情報とは，動画ファイル上でのページ境界，および，るようにした．発表者の移動量がある閾値を超えたアニメーションの再生タイミングを表す時刻情報で場合は発表者の映像を表示し，閾値に満たなかった場ある．すなわち，制御情報 c は，3 つ組み ⟨p, a, t⟩ で合は発表者の映像の透明度を時間と伴に減衰させる．

表され，p はページ番号，a はアニメーション番号，t

発表者が一定時間動かないと，発表者の映像は完全は時刻である．制御情報を利用することで，動画化さに透明になりスライド資料の上に表示されなくなる．

れたスライドにおけるページめくりは，適切な時刻か

また，本ツールは，発表者のジェスチャによって発表らの動画再生として実現可能である．

者の映像の手の位置にポインタを常に表示する機能

図 1 は，スライドおよび WWM 形式に変換されたがある．発表者の映像を用いてスライド上のある一点スライド間の関係を表している．図 1 の上部は，3 枚を指している場合，発表者は体を静止させるため移のスライドを表している．ここでは，各スライド間に動量が検出できない．一定時間，発表者の移動量が検はスライド遷移アニメーションが存在し，スライド 2出できない場合，シルエットは完全に見えなくなり，にはアニメーションが含まれている様子を表していシルエットがスライドのどこを示しているのかが分かる．図 1 の下部は，WWM 形式のスライド，すなわらなくなる問題がある．発表者の映像が完全に消えてち，動画化されたスライドの時系列を表している．動

しまった場合でも，常にポインタを表示することでで画の先頭の時刻を 0 とすると，スライド 1 は，動画指し示す場所が分かる様になる．

中の 0〜t1 部分である．t1 〜t2 は，スライド 1 からスライド 2 への遷移アニメーションである．t2 〜t4 は，3. 2 Wisdom Web Media

スライド 2 に該当する．ここで，t2 〜t3 は，アニメー

本節では，動的なプレゼンテーションの実現のたション再生前の状態であり，t3 〜t4 はアニメーションめの，スライド形式である Wisdom Web Media 形実行中の動画である．t4 〜t5 は，スライド 2 からスラ式（以降，WWM 形式）について説明する．プレゼ

イド 3 へのスライド遷移アニメーションであり，t5 〜ンテーションソフトの 1 つである Keynote ではプレt6 は，スライド 3 である．

ゼンテーションファイルを動画形式で書き出す機能がこのようにスライドの先頭，アニメーションの先ある．この機能では，動画に再生・停止の制御情報を頭，および，スライド遷移アニメーションの開始終了付加する機能もある．専用のプレイヤーで書き出さ時刻が得られれば，動画上でスライドの再生を制御すれた動画を閲覧することで，スライドの切り替わるることが可能になる．例えば，スライド 2 への移動時刻とアニメーションが開始される時刻の前で動画は，t1 〜t2 のスライド遷移アニメーションの再生としを停止させることが可能となる．本稿で紹介するプて実現可能である．

レゼンテーション形式は MP4 の動画を利用する．こ

本研究では，PowerPoint ファイルから WWM 形

こでは，PowerPoint のプレゼンテーションファイル式のファイルを生成するための PowerPoint 用アドを解析し，制御情報を付加した．本研究では，スライインを開発した．PowerPoint 用アドインの UI を図ドの作成に PowerPoint を利用しているユーザを対象

2 に示す．変換対象のプレゼンテーションファイルとしている．WWM 形式では，動的なプレゼンテーを PowerPoint 開き，本アドインを起動する．変換ボションの実現のために，1)PowerPoint におけるアニタンを押すことで，プレゼンテーションファイルをメーションを再生可能，2)Web などの汎用的な環境

WWM 形式へ変換する処理が開始される．変換処理で再生可能，および，3) プログラムによる制御が可に関連する各種パラメータを次の通り指定可能であ日本ソフトウェア科学会第 30 回大会 (2013 年度) 講演論文集

4プレイヤー) について説明する．WWM プレイヤーはHTML5 で実装した．WWM プレイヤーは，HTML5に対応したブラウザがインストールされており，H.264形式の動画を再生できる環境であれば利用可能である．そのためプレゼンテーションソフトを必要としな
い．近年の PC や端末には HTML5 に対応したブラウザがインストールされており，H.264 形式の動画再生に対応しているため，多くの環境で再生できる点で実用的である．また <video> 要素のソースとしてWWM 形式ファイルのコンテンツを指定する．プレ
図1

再生タイミングを表す時刻情報

ゼンテーションツールがユーザに対して提供する機能は，プレゼンテーションソフトのスライドショーで一般的な操作である，最初のスライドを表示，前のスライドを表示，次のスライドを表示，最後のスライドを表示，指定のスライドを表示の 5 つである．アニメーションでの停止制御については，現在の再生時刻とチャプター情報の時刻をタイマーによって監視し，次のスライドの時間に達した場合，動画の再生を停止する簡単な実装である．動画再生の停止制御によって，プレゼンテーションでスライドを表示している状

図2

PowerPoint 用のアドイン

況を疑似的に再現できる．

WWM プレイヤーの実装について説明する．WWM
る．UI 中の「出力先」では WWM 形式ファイルの出プレイヤーで再生する WWM 形式ファイルは，URL

力先，「横幅サイズ」では出力動画の横幅サイズ，「フのクエリ文字列によって指定する．プレイヤー内

レームレート」では出力動画のフレームレート，「品部では JavaScript によってクエリ文字列を分解し質」では出力動画の画質を指定可能である．Web 上て WWM 形式ファイルの URL を取得する．local-での小さいサイズに適したダイジェスト版のスライド

host サーバーのドキュメントルートに，WWM プ(以降，パラパラ形式) も生成可能である．パラパラ形

レイヤーである wwmplayer.html と WWM 形式フ式では，アニメーションおよびスライドの開始時刻にァイルがアップロードされている場合，WWM プおける動画フレームのみを取得し，アニメーションのレ イ ヤ ー で presentation.wwm を 閲 覧 す る た め の実行過程を省略することで，ファイルサイズを大幅にURL は http://localhost/wwmplayer.html?url=削減することが可能である．具体的には，「パラパラpresentation.wwm である．今回の実装では，url で版も出力」をチェックすることで WWM 形式ファイ指定されたファイルパスを相対パスとして処理する．

ルを生成すると同時にパラパラ形式ファイル (WWM

この例では http://localhost/presentation.wwm

形式ファイルと同様な構成) も生成される．のファイルを読み込むことになる．url に WWM 形式ファイルが指定されている場合，XMLHttpRequest

4 システムの実装を用いて，その URL に対して GET メソッドを実行

4. 1 Wisdom Web Media プレイヤー

して，WWM 形式ファイルをダウンロードする．ダ

本節では，WWM 形式ファイルのプレイヤーであウンロードした WWM 形式ファイルから制御情報をる Wisdom Web Media プレイヤー (以降，WWM取得する．WWM プレイヤー HTML 中の <video>日本ソフトウェア科学会第 30 回大会 (2013 年度) 講演論文集

図3

5

図4

マルチビューでの複数プレゼンテーションの表示例

図5

シルエットレイヤーと WWM スライドレイヤーのWWM プレイヤーの実行例

要素に，ダウンロードした WWM 形式ファイルを設定する．WWM プレイヤーでの再生制御の実装について説明する．<video> 要素の currentT ime プ
ロパティを用いることで，video の現在の再生位置を取得することができる．setTimeout 関数によりcurrentT ime プロパティの値を確認する関数を呼び出す．間隔 tcheck で呼び出し，目標となる時刻に達した場合は動画を停止する．今回の実装では tcheck は10ms とした．
4. 2 マルチビュー
本節では，複数プレゼンテーション資料を同時に表関係示するマルチビューについて説明する．マルチビュー
では複数のスライドベースのモデルのプレゼンテー

イヤーは WWM スライドレイヤーの上に重なっていション資料を，キャンバスベースのモデルで同時に表る．このため，ユーザはシルエットレイヤー上の自身示する．マルチビューでの複数プレゼンテーションのの姿を利用して，WWM スライドレイヤー上のコン表示例を図 4 に示す．

テンツを指し示すといったことができる．さらに，スライド上にユーザの姿が投影されているように見え

4. 3 シルエットによるスライドの操作るため，聴講者から発表者の姿が見やすい．

図 5 に本システムを使用した時の簡略図を示す．本
システムにより，ユーザは 2 つのレイヤーを用いてプ5 考察レゼンテーションを行う．WWM スライドレイヤー

WWM 形式の特徴は，PowerPoint を用いたプレは WWM によって生成されたスライドを表示するレゼンテーションと，プログラムによる資料操作の利イヤーである．WWM スライドレイヤーは Web ブ点を両立可能としている点である．PowerPoint 資料

ラウザで表示される．シルエットレイヤーは発表者のを，画像形式，PDF 形式，もしくは，HTML 形式な姿を投影するためのレイヤーである．シルエットレどに変換する既存のアプローチは，プログラムによ日本ソフトウェア科学会第 30 回大会 (2013 年度) 講演論文集

6

る資料操作を可能にする反面，アニメーション効果形式では，80%程度のファイル容量の削減も可能であなどの再現性に課題があった．すなわち，既存のアプる．また，実利用において，通常の WWM 形式におローチは，アニメーションの再生など PowerPoint のいても，フレームレートや画面解像度を調整する等高度なプレゼンテーション機能を再現することがでの最適化処理を行うことで，元のスライドに比べてきない，もしくは，不完全である点が問題であった．

15%以上のファイル容量の削減が可能であった．ここPowerPoint はプレゼンテーションを動画として書出での最適化処理では，アニメーションのスムーズさとす機能を持つ．本機能によりプレゼンテーションのファイルサイズのバランスを考慮したパラメータ設定

再現性を解決することが可能であるが，プログラムを行っており，プレゼンテーションにおいて問題の無による制御によって，例えば，動画をスライドのよいアニメーションの品質が保たれている．主に高解像うにページ移動することができなかった．本研究で度のコンテンツを含むスライドに対しては，スライは，PowerPoint ファイルから生成される動画におけドの投影に適切な解像度による書き出しを行うため，るページ境界の時刻やアニメーション再生時刻を確定

ファイル容量の削減を実現した．WWM 形式を利用し，これらの時刻情報を制御情報として動画に付加すすることにより，PowerPoint ファイルの容量を効果ることで，動画再生によるアニメーション効果の再現的に削減することで，Bluetooth などの狭帯域の通信性とプログラムによるスライドめくり操作の両立を路におけるスムーズなファイル交換が可能になり，ま実現した．

た，スマートフォンなどの携帯端末を利用した効果的

WWM 形式のスライド資料の別の利点としてファなプレゼンテーションが実現可能となった．

イルサイズの小ささが挙げられる．WWM 形式では，フレームレートや画像サイズを適切に設定すること

参 考 文 献で，プレゼンテーションに必要十分な画質を保ちつ[ 1 ] 梅村恭司, 梅村真由, Kuroko:話者シルエットを活用するプレゼンツール, 情報処理学会 インタラクション
2012, pp.281-286, 2012.
[ 2 ] 前田晴己, 黒沢祐也, 栗原一貴, 宮下芳明, MAEDE:
スクリーン前でのプレゼンテーションスタイル, 日本
ソフトウェア科学会研究会 WISS 2011, pp.164-166,
2011.
[ 3 ] 村田雄一, 志築文太郎, 田中二郎, Shadowgraph:ペンの影を用いて OHP 風の指示ができるプレゼンテー
ションツール, 日本ソフトウェア科学会研究会 WISS2008, 2008.
[ 4 ] 山本千裕, 中山晃典, 山本倫也, 渡辺 富夫, CG と指示棒デバイスで身体的インタラクションを促すプレゼンテーション支援システムの開発, インタラクション 2011
論文集, pp. 301-302, 2011.
[ 5 ] Garth Shoemaker, Anthony Tang, and Kellogg
S. Booth, Shadow Reaching: A New Prspective on
Interaction for Large Wall Displays., UIST 07: Proceedings of the 20th annual ACM symposium on
User interface software and technology, pp.53-56,
2007.
[ 6 ] Arvind Krishnaa Jagannathan, Srikrishnan
Suresh, Vishal Gautham Venkataraaman, Sakaya
Milton R, A Canvas-Based Presentation Tool Using Scalable Vector Graphics , 2012 IEEE FourthInternational Conference on Technology for Education, pp.149-152, 2012.

つ，ファイルサイズを元の PowerPoint 資料よりも減らすことが可能である．例えば，スマートフォンやタブレット端末をプレゼン機材として想定する場合は，フレームレートや画像サイズを小さくすることで，処理速度や通信速度の点で扱いやすいプレゼンテーション資料といえる．さらにファイルサイズを小さくする
場合は，パラパラ形式も利用可能である．

6 おわりにWWM 形式を利用することにより，フレームレートや画像サイズを適切に設定することで，プレゼンテーションに必要十分な画質やアニメーション効果などを保ちつつ，ファイルサイズを元の PowerPoint 資料よりも減らすことが可能になった．

PowerPoint の標準機能を用いてスライドを動画化した場合，元のスライド資料よりもファイル容量が増える場合が多い．一方，本システムにおけるパラパラ