テキストと数値の「ピース」をキャンバスに自由に置き、集計ゾーンで囲むだけで計算できるビジュアルボード「Sethera Piece（セセラピース）」を作りました。MIT ライセンスの OSS です。
リポジトリ: https://github.com/cuculhart/sethera-piece
デモ（インストール不要）: https://cuculhart.github.io/sethera-piece/
何ができるか
キャンバスに「セル」は存在しません。代わりに3つの部品があります。
- ピース — テキスト / 数値 / 付箋＋数値。複数行・揃え・色・サイズ・枠なし表示に対応
- 集計ゾーン（Σ） — 囲んだピースを Sum / Count / Avg / Max / Min でライブ集計
- 計算ピース — ＋−×÷と端数処理。被演算子は線で接続
ポイントは、ピースを動かすだけで計算が変わることです。
| 移動前 | ゾーンに入れた瞬間 |
|---|---|
 |
 |
ゾーンの結果自体も計算ピースの入力にできるので、「小計 × 税率 = 消費税」という連鎖も線を引くだけで組めます。
帳票も組める
罫線（水平・垂直）と A4/B5/A3 の用紙枠を用意したので、見積書のような帳票レイアウトがそのまま組めます。印刷・PDF 化も可能（計算の配線は印字されません）。
文書は JSON で保存・読み込みできるので、テンプレート化して使い回せます。
用途の例
- 予算配分・工数アサインのシミュレーション（ピースを動かすたびに各部門の合計が変わる）
- ワークショップ・ふりかえりの投票集計（付箋をゾーンに移すだけ）
- 見積書・概算書などレイアウト自由度が必要な帳票
技術構成
- React 18 + TypeScript + Vite
- キャンバス基盤は @xyflow/react（React Flow、MIT）
- フォントは Noto Sans JP をバンドル
- 完全ローカル。データは localStorage と JSON ファイルのみ、外部送信なし
現状と今後
v0.1.0 のプレリリースです。マルチユーザー対応はまだありません。
今後は共同編集、ピース構造をそのまま渡す AI 分析（集計漏れ・未投票の指摘）、投票ボタンなどを構想しています。
フィードバック・コントリビューション歓迎です。