KC3Hack2026 / Team 20 ほっかれもん
WikiPlots
WikiとSNSを掛け合わせた、企画書をみんなで育てる共同編集サービス
プロジェクト概要
WikiPlotsは、「こんなプロダクトが欲しい」という企画書を Plot として投稿し、他のユーザーとリアルタイムに共同編集できるサービスです。 Wikipediaのようなオープンな編集、SNSのような発見体験、GitHubのようなスター・フォークを組み合わせ、 個人の頭の中で消えてしまいがちなアイデアを、コミュニティで育てられる場として設計しました。
KC3Hack2026では「本当に欲しいをカタチに」というテーマに対して、 企画書そのものを民主化するプロダクトとして制作しました。
KC3Hack2026
主な機能
セクション単位の共同編集
Plotをセクションに分け、Tiptapベースのリッチテキストエディタで共同編集できるようにしました。 途中へのセクション挿入、削除、タイトル編集など、企画書を育てるための編集体験を意識しています。
SNS風の発見体験
急上昇・新規・人気のセクションから面白い企画を探せます。 スター、コメント、フォークによって、良いアイデアが広がっていく流れを作りました。
履歴と荒らし対策
操作ログとスナップショットの2層で履歴を保存し、差分確認や復元ができる設計です。 誰でも編集できる体験を保ちながら、安全に戻せる仕組みを用意しています。
OAuth認証と検索
GitHub / Google OAuthでログインでき、タグやPostgreSQL全文検索からPlotを探せます。
担当したところ
公開されているcommit履歴をもとに、自分は主にフロントエンドの共同編集体験と、 デプロイに向けたコンテナ構成の修正・調整を担当しました。
リアルタイム共同編集
Tiptap、Y.js、Supabase Realtimeを組み合わせ、セクション単位で編集内容を同期する実装に関わりました。
TiptapEditor、SectionEditor、SectionViewer
や usePlotRealtime などの周辺実装・テストを整えました。
Plot編集の体験改善
タイトル編集、セクションの途中挿入、削除、未保存変更の扱い、Plot詳細の再取得間隔調整など、 編集中に気持ちよく使えるための細かな挙動を詰めました。
API型・ドキュメント整備
フロントエンド側のAPI型定義や docs/api.md の更新に関わり、
バックエンドとの接続部分をチームで合わせやすくしました。
デプロイ・運用準備
チームメンバーが作成した
Dockerfile、docker-compose.yml、Taskfile.yml
を、自宅サーバーで動かすために修正・調整しました。
その上でアプリをCloudflare Tunnel経由で公開しました。
画面
