推しアイデア
遠隔会議の「そこじゃない、右上のボタン！」のもどかしさを解消する、画面直接描画ツールです。指示出し側はブラウザから、受ける側はデスクトップアプリを介して、相手の画面上にオーバーレイで落書きやレーザーポインターを表示可能。登録不要ですぐに使える「速さ」にこだわりました。
Grease Trace
声だけじゃ伝わらない瞬間に、 “線で指せる”遠隔サポートを。
作った背景
テーマ「SPARK」から「速さ」に着目。チーム開発中、画面共有越しに「右上のボタン！」と口頭で指示しても伝わらず、時間を浪費する課題がありました。このコミュニケーションロスをなくし、開発スピードを加速させるため、直感的に画面を指し示せるツールを開発しました。
推し技術
描画側はオーバーレイ実現のためRust、指示側はReactを採用し、異種プラットフォーム間をPeerJSで繋ぐハイブリッド構成です。認証サーバーはGoで実装し、バックエンドはDocker化してProxmox上で稼働。技術選定でも「速さ」と「機能性」を両立させました。
プロジェクト詳細
grease-Trace
ダウンロードはこちら：https://grease-trace.kirimaru.org/
1. 開発のきっかけ（テーマ：SPARK）
テーマの「SPARK（光・電気）」から連想した「速さ」。 そこから**「開発におけるスピード」**に着目したとき、私たちのチーム開発でよく起きるタイムロスが話題になりました。
「その隣のボタン！」 「右上のボタン押して、そこじゃないもっと右上！」
遠隔で画面共有をしながら指示を出す際、このようなやり取りで時間を浪費してしまうこと、ありませんか？ 私たちはこのコミュニケーションコストを「速さ」で解決するためにプロダクトを開発しました。
2. 製品概要
相手の画面に、遠隔で落書きができる「grease-Trace」
指示出し側はWebブラウザから、指示を受ける側はデスクトップアプリを介して接続し、画面上に直接オーバーレイで描画を行います。
- 指示を受ける側 (Desktop App): 自分のPC画面上に、相手が書いた線が直接浮かび上がります。
- 指示する側 (Web App): 相手の画面を見ながら、レーザーポインターやペンで直感的に指示を出せます。
3. 技術構成 (Architecture)
WebとデスクトップアプリをPeerJSで繋ぐハイブリッド構成を採用しました。各領域で「速さ」と「体験」を最大化するための技術選定を行っています。
1. Desktop App (Receiver): Tauri (Rust)
「常駐しても重くない、現代的なデスクトップアプリ」 受信側アプリには、軽量で高速なフレームワークTauriを採用しました。 Electronと比較して圧倒的にバイナリサイズが小さく、メモリ使用量も少ないため、開発者のPCリソースを圧迫しません。 UI構築にはReact + TypeScriptを使用し、Web側と技術スタックを統一。 一方で、ウィンドウの透過処理や、マウス操作を裏側に流す**「クリックスルー」の制御はバックエンドのRust**で実装し、パフォーマンスと安全性を担保しています。
2. Frontend (Sender): React
「伝えるための表現力」 指示出し側はReactで構築し、Canvas操作の自由度を高めました。 単純なペン描画だけでなく、正確な指示のための「円描画」、イメージを伝える「画像配置」、一瞬の注目を集める「レーザーポインター」など、エンジニアのコミュニケーションに必要な機能を網羅しています。
3. Backend: Go & Clean Architecture
「ハッカソンだからこそ、学びの機会に」 バックエンドにはGo言語を採用し、アーキテクチャにはClean Architectureを導入しました。 バックエンドのタスクが少なく、すぐにタスクが完了してしまいそうだなと感じたので、簡潔に終わらせるのではなく、チームメンバーの一人が興味のあったクリーンアーキテクチャを採用しました。 また、通信にはWebRTCラッパーであるPeerJSを採用し、サーバー負荷を抑えた低遅延なP2P通信を実現しています。 また、問題として、P2Pは、大学や企業などの厳しいネットワーク環境（NAT）では繋がらないことがある」という問題です。
私たちはこれを解決するため、OSSのTURNサーバーであるCoturnを自前で構築しました。 STUNサーバーだけで接続できない場合でも、自前のTURNサーバーを経由させることで、「どんな環境でも確実に繋がる」堅牢な通信網を確保しています。
https://github.com/toma1128/GreaseTrace-backend
4. Infrastructure: Proxmox & Docker & Cloudflare
「柔軟でセキュアな基盤構築」 バックエンド環境はDockerでコンテナ化し、Proxmox上の仮想サーバーで運用することで、リソース管理の柔軟性とポータビリティを確保しました。 また、外部公開にはCloudflare Tunnelを採用。ルーターのポート開放を行うことなく、セキュアかつ高速にサービスを公開するネットワーク構成を実現しています。
5. Official Site: Astro.js
配布用の公式サイトはパフォーマンスを最優先し、Astro.jsを採用しました。npmエコシステムを活用しながら、軽量で高速なWebサイトとして構築しています。 https:grease-trace.kirimaru.org/
4. AIの活用
本プロジェクトでは、以下の用途でAIを活用しました。
- ドキュメント作成: Topa'z用の紹介文作成や、文章構成の整理に使用しました。
- トラブルシューティング: デスクトップアプリ開発における環境固有のトラブルや、コードのエラー対処に活用しました。
- 技術学習（壁打ち）: クリーンアーキテクチャの概念やPeerJSの仕様など、新しく導入する技術を学習する際の壁打ち相手として使用しました。
5. こだわりポイント
「面倒なフローを極限まで削ぎ落とす」 アプリのインストールが必要な側（Receiver）であっても、「ユーザー登録」や「ログイン」といった手間を一切省きました。
アプリを起動してIDを共有するだけで即座に繋がる設計にすることで、「今すぐ画面を見てほしい」という開発現場のスピード感を損なわないようにしています。
