SSTエンジニアブログ

SSTのエンジニアによるWebセキュリティの技術を中心としたエンジニアブログです。

リモートでプレゼンテーションするのに最適なツールを作った

こんにちは!Webサイトの大穴を調査していてたまに遭遇する遺物にワクワクする、CTOのはせがわです!

今日は、オンラインでのプレゼンテーションに最適なスライド表示ソフトを自作したのでそれの紹介です。

オンラインプレゼン - 遠隔からの講演

オンラインでのスライド再生の悩み

みなさん、オンラインでセミナーやプレゼンテーションをしようと思ったけど、うまくPowerPointのスライドが再生できず、軽い吐き気や頭痛を感じたことはありませんか?

例えば…

  • PowerPointでプレゼンテーションの再生を開始したらスライドがウィンドウで最大化表示でモニターを占有してしまいZoomやGoogle MeetなどのWeb会議システムの画面が見えない
  • 仕方ないのでモニターをもう1枚増やしたら今度は発表者ツールが最大化表示されてしまった
  • いやいやそうじゃないと思い発表者ツールなしでスライドを再生したけど、やっぱりちょっと発表者ツールも表示させたい

とかです。うっかりするとモニターが3枚欲しくなってしまいます。

スライド再生、発表者ツール、Web会議。モニターが3枚欲しい*1

仕方がないのでPowerPointの編集画面をそのまま共有したりすると、見た目が最高にカッコ悪いので、社内会議など限られたメンバーのときにしかこういうやり方は通用しないでしょう。

PowerPointの編集画面を共有したところ
PowerPointの編集画面を共有したところ

こういうときには、PowerPointに備わっているウィンドウ内でスライドを再生する「閲覧表示」機能が使えます。 ただ、閲覧表示だとPowerPointのウィンドウのタイトルバーやステータスバーも当然共有されて配信されてしまい、参加者に対していかにもPowerPointを操作していますという印象を強く与えてしまいます。また、発表者ツールがないためスライド内に含めておいたノートが見れない等の不都合もあります。

閲覧表示による画面の共有
閲覧表示による画面の共有

それらを全部解決するスライド再生ツール

そんなわけで、先に書いたようなオンラインでのスライド再生にまつわる課題を解決するため、オンラインに特化してPDFでプレゼンするためのツール pp を自作してみました。

  • PDFファイルをフレームレスウィンドウで表示。全画面を占有せず、タイトルバーやステータスバーの表示もない
  • 操作用のウィンドウを別表示
  • あらかじめ作成しておいたノート機能をページに応じて表示可能
  • カメラ画像をスライドに重ねて表示可能
  • マウスカーソルをレーザーポインターとして表示可能

この pp というツールは、起動させるとPDFファイルを選択できます。選んだPDFはフレームレスのウィンドウ内に表示されるので、そのウィンドウだけをWeb会議システムで共有することで、聴講者にはスライドだけに集中して見てもらうことができます。

pp - フレームレスでPDFを表示可能
pp - フレームレスでPDFを表示可能

また、PDF表示ウィンドウの隣には、小さなサイズの操作用ウィンドウが配置され、そこにはあらかじめ用意したページごとのノートの表示も可能です。

f:id:hasegawayosuke:20201208095100p:plain
操作ウィンドウ。ページごとのノートを表示可能

さらに、操作用ウィンドウではカメラを選択することでスライドに重ねて自身の姿も映すことができます。

f:id:hasegawayosuke:20201208095130p:plain
スライドにカメラ映像を重ねて表示可能

スライド上でShiftキーを押しながらマウスカーソルを動かすことで、レーザーポインター風のカーソルをスライド上に表示させることもできます。

f:id:hasegawayosuke:20201208100200p:plain
マウスカーソルをレーザーポインター表示

ページごとのノートは簡単なJSON形式で指定します。

{
  "pdffile": "C:\\tmp\\slide.pdf", // PDFのファイル名
  "notes": {
    "1": "みなさま、お時間頂きありがとうございます。…",  // 1ページ目用のノート
    "2": "新製品の最大の特徴は、設置面積の大幅な削減です。…",  // 2ページ目用のノート
    ...
  }
}

ppの起動時にPDFではなく上記JSONファイルを指定することで、ページと合わせたノートが操作ウィンドウに表示されます。

実装

github.com

pp はElectronで実装されています。

一般的なElectronアプリケーションと異なるもっとも特徴的な点は、PDF表示ウィンドウとしてElectronのフレームレスウィンドウを用いている点です。フレームレスウィンドウはタイトルバーが表示されず(当たり前)、マウスでドラッグしてのウィンドウ位置の移動などができません。そこで、PDF表示ウィンドウの上辺付近に <div style='-webkit-app-region: drag;'> のように指定したdiv要素を配置しています。この -webkit-app-region: drag をスタイルに指定された要素は、フレームレスウィンドウの中に配置してあってもマウスでドラッグすることができるようになり、これによってウィンドウ位置を移動させることができます。

また、ElectronはChromiumを内包しているので、そのままブラウザーウィンドウ内でPDFを表示可能なのですが、この方法で表示させた場合はページ移動などの制御がJavaScriptから行えません。 そこで、今回は PDF.js を用いて自前でCanvas上に1ページずつレンダリングしています。

それ以外にはコード上は特に凝ったこともせず、短時間で実用的なアプリケーションを簡単に作成できるのはさすがElectronという感じです。

まとめ

PDFをフレーム無し、ノート付きでウィンドウ内で表示できるツールを作りました。これを使えば、オンラインでのセミナーやプレゼンテーションでも聴講者にスライドだけに集中して画面を見てもらうことができます。

現状では、以下のような制限や将来への課題などがあります。

  • アニメーションが使えない (PDFなので)
  • 他のアプリ(ブラウザー含む)がカメラを使っているとカメラ使用不可
  • ページプレビューの表示がない (気が向いたら実装するかも)
  • スライドサイズが1280x720固定
  • Google docsのスライドもブラウザープロセス内にレンダリングすることで、フチなし再生できそう

ぜひ使ってみて、感想を聞かせてもらえると嬉しいです!

*1:Google Meetの画面はハメコミ合成です。以降の画面キャプチャも同様