概要

本プロジェクトは、Web ブラウジングと人間同士のチャットを同一画面上で統合したWebアプリケーションを作りました。ユーザーは Web ページを閲覧しながら、同じ画面内で他のユーザーとリアルタイムにコミュニケーションを取ることができ、 調査・議論・共同作業をスムーズに行えます。

使用技術

React

サイトの描画を楽にするために

electron

開発当初は軽量なデスクトップアプリフレームワークである Tauri を採用していましたが、 本プロジェクトでは ブラウザ表示用 WebView とチャット表示用 WebView を 1 つのウィンドウに合成する必要がありました。 Tauri ではこの構成を実現するために iframe を用いる必要がありますが、 iframe 経由の表示は一部の Web サイトでセキュリティ制限によりブロックされるという課題があり、実用面で問題がありました。そこで本プロジェクトでは Electron へ移行し、複数の WebView をネイティブに 1 つのウィンドウへ統合する構成を採用しました。これにより iframe を使用せず、実際のブラウザに近い挙動を保ったまま、ブラウジングができます。

TypeScript

型安全を確保することで、開発中のバグを減らし、 チーム開発でもコードの可読性・保守性を高めるために採用しました。

AI活用について

本プロジェクトでは、AI をプロダクトの機能としてではなく、開発を加速させるための支援ツールとして活用しました。

主に以下の用途で AI を利用しています。

設計・技術選定の補助

WebView の構成や、Tauri と Electron の違いについて検討する際に、 それぞれのフレームワークの制約や実装方法を AI に相談し、 要件に対してどの技術が適しているかを整理しました。

その結果、iframe 制約による問題を事前に把握でき、 Tauri から Electron への移行という判断を早い段階で行うことができました。

実装・デバッグ支援

Electron・React・TypeScript を用いた実装において、 エラー内容の整理や原因の切り分け、修正方針の検討に AI を活用しました。

学習・情報収集の効率化

新しい技術や API を使用する際、公式ドキュメントと併用して AI を活用し、 概要把握や用語理解を短時間で行いました。

これにより、限られたハッカソン期間の中でも、 実装に集中できる時間を最大化することができました。

使用方法

ログインしてchat ボタンを押すとルーム名を決めてチャットに入れるようになります