README.md

スマートポインター

製品概要

共同プレゼンテーション × Tech

あなたのスマホがリモコンに！？

スマートポインターは手元のスマホをリモコン化する、クラウドベースな共同プレゼンテーション支援ツールです。

Note

詳細はPRD (プロダクト要求仕様書)を参照してください

背景(製品開発のきっかけ、課題等）

複数人でプレゼンテーションを行う場合、スライドの切り替え担当者とスピーカーが一致しない場合があります。 しかし、スピーカーが逐一「次のスライドお願いします」と依頼するのは面倒であり、聴衆に煩わしさを与える場合もあるでしょう。

そこで、手元のスマートフォンをリモコン化し、リモートにあるホスト PC のスライドを共同で操作できるプラットフォームを開発しました。

製品説明（具体的な製品の説明）

• ルームの管理
  • スライド投影するホストPCでルームを作成できる
  • 招待リンクを発行し、共同プレゼンターに共有できる
  • 発表が終わったら、ルームを終了できる
  • カスタムポインターを作成できる
  • ポインタータイプを変更できる
• リモコン操作
  • 招待リンクからルームに参加できる
  • 表示名を設定できる
  • タイマーを設定できる
    • 残り時間通知を設定できる
  • スライドを進める/戻すことができる
  • スライド上にポインターを表示できる
  • ポインタータイプを変更できる
  • 上記操作は共同プレゼンター全員に共有される

特長

1. リモートからでも共同でスライド操作できる

ホスト PC に投影されるスライドを、共同プレゼンター全員が操作可能になります。 ホスト PC はルームをホスティングする以外は操作不要で、スマートフォンからのスライド切り替えで発表を行います。

2. 発表をもっと快適に

タイマー設定や現在のスライド番号など、発表に関するステータスが参加者全員に同期されます。 これにより、プレゼンター全員が自分の発表するタイミング、及び残り時間を把握することができます。

3. スライド操作できる人を制限できる

本システムでは同時にスライド操作できる人を制限しています。 これは仮に参加者全員のスマートフォンからスライド切り替え可能だと、押し間違いによる予期せぬスライド操作が懸念されるためです。 現在のスピーカーが次のスピーカーにポインタ渡しすることで、ユーザが安心してプレゼンテーションを行えるよう設計しました。

解決出来ること

類似した既存のサービスは、自分の PC を自分のスマートフォンから操作するところまでしか実現できていません。 スマートポインターを使えば、 背景説明は A さん、技術説明は B さんが発表担当といったプランの場合に「次のスライドお願いします」とスライド担当者に依頼する必要がなくなります。

今後の展望

• スライドのプレビュー表示
  • スライドの進める/戻すボタンにプレビュー表示するとより便利になる
• ポインタ渡しでプレゼンター権限を譲渡
  • 現在は全ルーム参加者が同時に操作可能になっている
  • 操作できるユーザを制限して、自分の発表担当箇所が終わったら次の人にポインタ渡しできるとGood
• Web会議向けに拡張
  • プレゼン以外の場でも使えるプラットフォームにしたい

注力したこと（こだわり等）

• タイマー設定やスライド切り替え依頼などをシステム側で担うことで、既存の共同プレゼンテーションにおける煩わしさを徹底的に排除した
• 想定されるシナリオを網羅した質の高いテスト
• Zoomの仮想背景のように、カスタムポインターを作成することで好きなポインターを表示できる

用語集

• ルーム
  • 共同プレゼンターが参加し、スライドをリモコン操作するためのワークスペース
• ホスト PC
  • デスクトップアプリケーションを実行する
  • スライド投影する PC
  • OS のメニューバーから操作可能
  • リモコンアクションを購読し、パワーポイントなどのプレゼンテーションソフトウェアを操作する
• リモコン
  • リモコン用 Web アプリを実行する
  • プレゼンテーション用のレーザーポインター的な概念
  • 自分のスマートフォンをリモコン化し、リモートにあるホスト PC のスライドを操作できる！
• ポインタ渡し
  • プレゼンター権限を譲渡する行為

開発技術

活用した技術

フレームワーク・ライブラリ・モジュール

• デスクトップアプリケーション
  • Node.js 16
  • Electron
  • React
  • Vite
  • TypeScript
• リモコン用Webアプリ
  • Node.js 16
  • React
  • Vite
  • TypeScript
• APIサーバ
  • Spring Boot 2.7
  • Java OpenJDK 11
  • Spock
  • MySQL 8.0
  • GraphQL
• インフラ
  • Google App Engine
  • Google Cloud SQL
  • Google Cloud Storage
  • Google Cloud Scheduler
• CI/CD
  • GitHub Actions
  • Jenkins

アーキテクチャ

リモコン操作を行うモバイル端末と、ルームをホスティングするデスクトップが、APIサーバを介してGraphQL(over WebSocket)で通信します。

スライドのページ遷移、ポインター表示など、モバイル端末からの操作命令をデスクトップアプリケーションが購読し、パワーポイントなどのプレゼンテーションソフトウェアを操作することでリモート&複数人での共同プレゼンテーションを実現しています。

独自技術

ハッカソンで開発した独自機能・技術

• GraphQLによる双方向通信API
• デスクトップのスライド上にポインタ表示するOverlay window