テキストと数値の「ピース」をキャンバスに自由に置き、集計ゾーンで囲むだけで計算できるビジュアルボード「Sethera Piece（セセラピース）」が v1.0.0 になりました。初公開の v0.1.0 から約1週間、ほぼ毎日アップデートしてきた到達点です。MIT ライセンスの OSS。
リポジトリ: https://github.com/cuculhart/sethera-piece
デモ（インストール不要・英語UIもあり）: https://cuculhart.github.io/sethera-piece/
v1.0.0 の新機能
色だけの条件付き集計（SumIf / CountIf）
集計ゾーンのペインに「条件」が付きました。ピース色を指定するとその色のピースだけが集計対象になります。
「交通費だけ合計したい」のような用途では、該当ピースを複数選択して一括で色を変え、ゾーンの条件にその色を指定するだけ。透過を除く8色＝8カテゴリー分の同時集計ができます。ラベル照合ではなく色で条件にしたのは、「〇〇を含むものを数える」は色付けと同じことができる上に、目で見て条件が分かる方がこのツールらしいからです。
フォント対応
文書全体の既定フォントと、ピース個別のフォントを選べるようになりました。同梱フォントは Noto Sans JP／Shippori Mincho（明朝）／BIZ UDPゴシック／等幅。見出しを明朝にする、数字だけ等幅にする、といった使い分けがオフラインで確実に効きます。カスタム書体名も指定でき、環境に無い場合は ⚠ を表示して既定書体にフォールバックします。
多言語対応（日本語 / English）
タイトル下の JA/EN トグルでUI言語をワンクリック切替できます（設定の「言語」＝自動/日本語/English）。海外のユーザーにもそのまま見せられるようになりました。
v0.1.0 からの到達点
初公開からの積み上げも含めて、今こんなことができます。
- 集計ゾーン — 囲んだピースを Sum/Count/Avg/Max/Min でライブ集計。ピースを動かすだけで全ゾーンの合計が即更新。はみ出したピースは赤破線で警告
- 計算ピース — ＋−×÷と端数処理。ゾーン結果も線で繋げて「小計→税→合計」を結線
- 罫線・図形 — 水平/垂直/矩形/楕円/円弧/曲線/斜線。グリッド吸着で隣接枠の辺が完全に重なる。矢印・● の端点装飾でフローチャート風も
- カスタムピース＆テンプレ — 複数部品をまとめてグループ化、名前付きテンプレートとして使い回し
- CSV/TSV — Excel の範囲コピーを貼るだけでピース化（SJIS/EUC-JP も自動判定）。数値列はその瞬間から集計対象
- 用紙＆印刷 — A4/B5/A3 の用紙枠をキャプチャして印刷/PDF
- 完全ローカル — localStorage と JSON ファイルのみ。外部への送信なし、テレメトリーなし
見積書の作り方（実例）
冒頭の画像は A4 用紙上に米国式見積書を再現したものです。
- 矩形罫線で明細表の枠を引き、テキスト・数値ピースをセル位置に置く
- AMOUNT 列を Σゾーンで囲む → SUBTOTAL 4,800 が即表示
- 税額ピースとゾーンの出力を計算ピースに配線 → TOTAL 5,196
明細を増やしたり金額を変えたりするたびに、小計と合計が勝手に付いてきます。印刷すれば配線やゾーンの枠は写らないので、そのまま帳票として出せます。
技術構成
- React 19 + TypeScript + Vite
- キャンバス基盤は @xyflow/react（React Flow、MIT）
- 集計は「矩形包含判定＋条件フィルタ」のみ。配置そのものを式にする設計
- 完全ローカル（localStorage + JSON）
現状と今後
v1.0.0 でもひとりで使う道具のままです。共同編集は未だ構想中ですが、OSS としては今後も育てていきます。
対象は「ちょっと絵をかいて計算したい」「ペライチ帳票を Excel や CAD で無理やり作っている」人。フィードバック・コントリビューション歓迎です。