Web上に、自分だけのデスクトップ空間を作ることができます。 メモやアプリ、フォルダを使って情報を整理するだけでなく、ポートフォリオやブログとして公開し、世界に向けて発信することもできます。
「OSPACE」は、Web上で自分だけのデスクトップ空間を作れるサイトです。開発にあたっては、「実際のデスクトップの使用感をどうWeb上で再現するか」という点で、かなり試行錯誤しました。一般的なWebサイトとは大きく異なるデザインだったため、参考になる事例がほとんどなく、AIによる補完も十分に機能しませんでした。それでも、その分だけオリジナリティのあるサイトに仕上がったと思っています。
メモ帳やフォルダといった基本機能に加えて、PCのデスクトップにはない独自の機能も実装しています。たとえば、Webサイトをアプリのように開いてサイト内で閲覧できる「アプリ化機能」や、デスクトップの画面をデコることができる「スタンプ機能」です。デスクトップの便利さはそのままに、そこへ「ワクワク感」をプラスするイメージで機能を追加しています。今後は、閲覧者がデスクトップにコメントを残して、作成者と交流できる機能も作っていく予定です。また、たくさんの人に使ってもらいたいという思いから、言語は英語をベースに作っています。今は、LPとオンボーディング部分だけ日本語にも対応していて、さらに多言語対応を広げていく予定です。
「OSPACE」は、「OS」と「SPACE」を組み合わせた造語です。SPACE には「空間」だけじゃなく「宇宙」という意味もあり、サイト全体のコンセプトとして採用しています。ユーザーがログインして自分の惑星（デスクトップ空間）を作って、それをOSPACEという宇宙に公開する、そんなイメージで設計しています。
技術的には、フロントエンドに Next.js、バックエンドには Next.js の API Routes に Hono をマウントして使っています。HonoのRPC機能を使うことで、フロントエンドとバックエンドの間で型を共有し、型安全かつ効率的に開発ができるようにしています。フロントエンドに関して、複数のタブを同時に開いたり、アプリを自由にドラッグ＆ドロップできるようにするため、多くの状態を保持しています。これまでに作ったことのないタイプの状態管理が必要なサイトだったこともあり、開発にはかなり苦労しました。今後は少しずつリファクタリングを進めていきたいと考えています。
CI/CDでは、GitHub Actions上でBiomeを動かしていて、developブランチにプルリクを出すとプレビュー環境が自動で立ち上がり、マージされるとステージング環境が作られるようになっています。プレビュー・ステージング・本番でそれぞれ別のDBを使っているので、安心してテストしながらリリースの準備ができます。