Portapad紹介プレゼンテーション

u22プログラミングコンテスト一次審査用の動画に使用するプレゼンテーションです。
出来がいいのでアップロードします。

Transcript

1. ニッチで便利なインプット。
2. Portapadとは？ Portapadは、スマホのブラウザからPCを操作すること ができる「手軽に」をコンセプトとした遠隔操作用の ソフトウェアです。
3. 制作背景
4. 制作背景 ①ガジェットの代用 「ペンタブレットは高価で買いにくい」という問題を解決するた めに、手持ちの機器で代用できないかと考えました。
5. 制作背景 ②めんどくさい ①の問題を解決するために、ほかの団体や個人が作ったソフトも 使用してみましたが、インストール操作や認証処理が複雑で、め んどくさがり屋の僕には使うことが億劫だったので「簡単な操 作」を求めてPortapadを制作しました。
6. 制作背景 ③自由度が低い 僕が試した既存のソフトは自由度が低かったです。 自由度はそのまま操作性に直結すると考えているので、webアプ リという形をとることで、リアルタイムでの機能追加が容易であ ると考え、この形式にしました。
7. 液晶画面で代用 様々なUIを制作できる より「面白い」操作方法や、「欲しい」と思った機能が実装可能に
8. システム構成
9. システム構成 ホストとクライアントのWebRTC接続をする ためのSDPやIDEを仲介するサーバー シグナリングサーバー クライアントからのWebRTC経由での操作指 示に基づき、マウス・キーボードを操作する ホストPC タッチ操作を解析し、PCへ操作指示を出す。 クライアント WebSocket WebRTC 全体の概要
10. システム構成 ホスト 設定画面 本体 接続とWebRTC通信 主にクライアントとの通信、それの制御を行います。 一時的なコードと永続的なコードを分けることで、セキュリティ性能 やユーザーの操作性が向上しました。 また、自動再起動などのエラー処理を確実に行うことにより高信頼性 を保っています。 Enigoによるデバイス操作 クライアントから受信したコードを識別し、操作を読み取り実際に操 作します。 低レベル処理は、安定性・安全性を考え、外部ライブラリに依存しま した。 遅延を最小限に抑えるため、可能な限り処理を軽量化しています。例 えば、通信にJSONを使わず、「mm1923,1002」のようなシンプルな 文字列形式で送受信し、それを分解して操作を行うことで、変換時の 遅延を抑える工夫をしています。 高速化 安定性 ＆ 設定画面は、クライアント側のほうが操作の比重が大きいため、PCサ イドでしか設定できない内容のみに絞って配置しています。 &アピールポイント
11. システム構成 クライアント 接続処理 WebSocketでホストの一覧を取得し、 リスト表示にしています。 又、設定画面はここに統合されています。 認証処理 後述するed25595を使用した認証処理で す。 カメラを使用することで人為的なミスを 減らし、接続処理の簡略化に努めていま す。 操作画面 操作性に直結するためUIは作りこまれて います。 現在はトラックパッドとテンキーのみで すが将来的にキーボードやその他のニッ チなUIを実装する予定
12. システム構成 クライアント FetchAPI JavaScript modules × シンプルで高速な ページ移動 &アピールポイント
13. システム構成 セキュリティ ed25519 P2P接続 × Ed25519は、楕円曲線デジタル署名アルゴリズムの一種で、高い安全性と効率性があります。 P2P接続は、中央集権的なサーバーを介さず直接通信するため、 特定のサーバーにデータが収集されることはありません。 なりすまし耐性 耐障害性 通信の秘密 プライバシー保護 機密性 通信の秘密 &アピールポイント