オンサイトでの登壇で返しのモニターがなくてもデモをやりやすくするツールを作った

無限に広がる青い空！セキュアスカイ！CTOはせがわです！

最近ようやくオンサイトでの登壇も増えてきたのですが、この数年すっかりオンライン慣れしすぎてしまって、いざオンサイトで登壇となると色々勘所が鈍ってしまったと感じることも少なくありません。特に、Zoom等を使う場合には常に目の前に投影する画面があるのが当たり前すぎて、オンサイトの講演でデモを実演しようという段階になって演台からスクリーンが見えにくい配置なのでうまく操作ができないということに気づき、焦ってしどろもどろになってしまうという失態もありました*1。

そこで、オンサイトでの登壇で少しでもそのような状況を改善するためのツールを作ってみました！

任意のアプリケーションのウィンドウを複製表示、拡大表示するツール

作ったツールは、「任意のアプリケーションウィンドウ(またはデスクトップ全体)を複製表示し、その表示サイズを自由に変えられる」というものです。

ツールといっても、ブラウザー内に他のアプリケーション画面をキャプチャする機能である MediaDevices.getDisplayMedia() を用いて video 要素内にそれを表示するだけの、ほんの数行のJavaScriptです。

• WinMirror – https://utf-8.jp/tool/winmirror.html

使い方

使い方は簡単で、 WinMirror を開き「アプリ選択」ボタンをクリックし画面表示させたいアプリ(またはデスクトップ全体)を選びます。

画面表示させたいアプリ(またはデスクトップ全体)を選択

そうすると、ブラウザー内にアプリの画面が表示されるようになります。

ブラウザー内に選択したアプリの画面が表示される

もちろん、アプリ本体を操作するとブラウザー内に表示されている画面もそれに合わせて更新されます。

アプリの操作に合わせてブラウザー内も更新される

「PiP」ボタンをクリックすると、ブラウザー内のアプリ画面がブラウザー外に飛び出した状態の Picture-in-Picture で表示されます。

アプリをPicture-in-Pictureで表示

Picture-in-Pictureで表示されている画面は、自由に場所や大きさを変更することができますので、登壇時にはプロジェクターに割り当てられているディスプレイに移動させ、見やすい大きさに変更することで、アプリ本体は手元に置いたままスクリーンにアプリ画面を投影することができます。

Picture-in-Pictureの画面は自由に場所や大きさを変更可能

また「フルスクリーン」ボタンをクリックすることで、ブラウザー内のアプリ画面のみをモニターにフルスクリーンで表示させることもできます。Picture-in-Pictureでリサイズしたウィンドウを表示するのと組み合わせてスクリーンに見やすいほうを表示させると良いでしょう。

アプリをフルスクリーンで表示

実際の動きを動画で見てみる

アプリの画面をブラウザーを通じて共有するのは不安だ！

アプリの画面をブラウザーを通じWeb会議でいうところのいわゆる「共有」を行うということに対して不安を感じる方もいるかもしれません。
そういった方は、 WinMirror のソースを確認してもらえればわかるのですが、JavaScriptは非常に短く、特に表示されているコンテンツをリモートに送信するようなコードは一切含まれていません。それでも不安だという方は、HTML全体をローカルに保存しオフライン状態で動作させてもらえばいいかと思います。

document.addEventListener('DOMContentLoaded', () => {
  const v = document.getElementById('video')
  document.getElementById('share').addEventListener('click', async (evt) => {
    const stream = await navigator.mediaDevices.getDisplayMedia({ video: { cursor: 'always' } })
    v.srcObject = stream
  }, false)
  v.autoPlay = true
  document.getElementById('fullscreen').addEventListener('click', (evt) => {
    if (document.fullscreenElement) {
      document.exitFullscreen()
    } else {
      v.requestFullscreen()
    }
  }, false)
  document.getElementById('pip').addEventListener('click', (evt) => {
    if (document.pictureInPictureElement) {
      document.exitPictureInPicture()
    } else {
      v.requestPictureInPicture()
    }
  }, false)
})

まとめ

• 登壇時に演台からスクリーンが見えなくてもデモなどの操作を行いやすくするために、 任意のアプリケーションウィンドウ(またはデスクトップ)を複製表示し、その表示サイズを自由に変えられるツールを作りました
• ツールは数行のHTMLとJavaScriptでできており、手元にHTMLさえあればオフラインでも動作します

というわけで、これでオンサイトの登壇が増えても安心ですね！