Skip to content

Latest commit

 

History

History
153 lines (108 loc) · 6.9 KB

README.md

File metadata and controls

153 lines (108 loc) · 6.9 KB

スマートポインター

CI deploy version

IMAGE ALT TEXT HERE

製品概要

共同プレゼンテーション × 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