EN DE JA
PictShare Book
卒業制作

PictShare Book

バーチャルフォトブックを作成・共有するためのインタラクティブでコラボレーティブなキャンバス。

Tech Stack

Next.js React PixiJS ElysiaJS Prisma TailwindCSS

プロジェクトの範囲

CODE University of Applied Sciencesでの卒業制作(Capstone Project)として、PictShare Bookを開発しました。このプロジェクトは、在学中に培った技術的スキルとデザインスキルを統合したものであり、学士論文に加えて、複雑なリアルタイム・コラボレーション・システムをゼロから構築できることを証明するものです。

機能

このプラットフォームは、バーチャルフォトブックを作成するための無限でインタラクティブなキャンバスを提供します。ユーザーは同時に画像をアップロードし、図形ステッカーを追加し、テキストを配置し、描画ツールを使用して共有された思い出をキュレートできます。リアルタイムのカーソル同期、堅牢な権限設定(ビューアー/エディター)、サイズ変更やレイヤー管理、自由な配置などの複雑な要素操作を備えた包括的なマルチプレイヤー機能を備えています。

実装

パフォーマンスの高いリアルタイム・コラボレーション・キャンバスの構築には、大きな課題がありました。ハードウェアアクセラレーションによるレンダリングにはPixiJSを活用し、数百個の要素があっても60fpsのパフォーマンスを維持できるようにしました。バックエンドにはElysiaJSとWebSocketsを使用して低レイテンシの同期を実現し、PrismaでPostgreSQLによる堅牢なデータ永続化を行っています。カスタム同期ロジックにより、競合のない編集が可能になりました。

学んだこと

PictShare Bookの開発を通じて、高頻度な環境での状態同期の管理方法や、ウェブベースのグラフィックスにおけるハードウェアアクセラレーションの重要性を学びました。フルスタックアーキテクチャ, 特に大規模なWebSocketsの処理や、キャンバスベースのクリエイティブツール向けの直感的なUXデザインに関する知識を深めました。また、複雑なユーザーニーズを、首尾一貫したパフォーマンスの高いアプリケーションに落とし込む能力も磨かれました。