ARKHAM(アーカム)は、TRPG(テーブルトークRPG)のシナリオ作成、管理、プレイ支援のために設計されたWebベースツールです。ノードベースのビジュアルインターフェースを使用して、複雑に分岐する物語の構築、変数の管理、そしてリアルタイムでのゲーム状態の追跡を行うことができます。
- ビジュアルシナリオエディタ: ノードベースのグラフエディタを使用してシナリオを作成します。
- イベントノード (Event): ストーリーのイベントやシーンを定義します。
- 要素ノード (Element): 道具、装備、知識/情報、スキル、ステータスの増減タイミングを定義します。
- 分岐ノード (Branch): 条件に基づいた複雑な分岐ロジック(If/Else、Switch)を作成します。
- 変数ノード (Variable): 変数の値を動的に更新します。
- グループノード (Group): 折りたたみ可能なグループでグラフを整理します。
- メモノード (Memo): キャンバス上に独立したメモを追加します。
- ジャンプノード (Jump): ダブルクリックで離れたノードへフローを飛ばします(参照ジャンプ)。
- 登場人物 / リソース管理: サイドバーでキャラクターやリソースを定義し、ノードとしてドラッグ＆ドロップで配置できます。
- 付箋: クリックメニューから、特定のノードに紐づく注釈や自由配置の付箋を追加できます。
- 変数管理: グローバル変数(真偽値、数値、文字列)を定義・追跡します。
- 編集モード: シナリオを編集できます。
- 進行モード: シナリオをインタラクティブにテストできます。グラフを進みながら、所持品、知識、変数の変化を追跡します。
- 多言語対応: 日本語と英語に完全対応しています。
- テーマ対応: ライトモードとダークモードを切り替え可能です。
- エクスポート: シナリオをテキストまたはMarkdown形式で出力できます。
- ショートカットキー: 一般的な操作に対応したホットキーで効率的に作業できます。
- Node.js (v18以上推奨)
- npm または yarn
-
リポジトリをクローンします:
git clone https://github.com/c-ardinal/ARKHAM.git cd arkham -
依存関係をインストールします:
npm install
-
開発サーバーを起動します:
npm run dev
-
ブラウザを開き、
http://localhost:5173にアクセスします。
本番環境用のビルドを作成するには:
npm run build出力ファイルは dist ディレクトリに生成されます。
- ノードの追加: サイドバーからキャンバスにノードをドラッグ＆ドロップします。
- ノードの接続: ノードのハンドル(丸い点)からドラッグして、別のノードに接続します。
- プロパティの編集: ノードをクリックすると、プロパティパネルでラベル、説明、ロジックを編集できます。
- コンテキストメニュー: ノードやキャンバスを右クリックすると、複製、削除、グループ化などのオプションが表示されます。
- ヘッダーのボタンで 進行モード に切り替えます。
- プレイヤーに開示したノードを右クリックから「開示済」状態に変更し、ストーリーを進めます。
- 「ゲーム状態」パネルで変化(所持品、変数など)を確認します。
開発環境、またはデバッグモード有効時に利用可能な機能です。
- デバッグパネル: ヘルプメニューから起動します。
- ログ: システムログの閲覧、フィルタリング、エクスポートが可能です。
- パフォーマンス: レンダリング性能やメモリ使用量を監視します。
- アサーション: シナリオの整合性（孤立ノード、変数異常など）をチェックします。
- スナップショット: 特定時点の状態を保存・比較できます。
- 保存:
Ctrl + S - 元に戻す:
Ctrl + Z - やり直し:
Ctrl + Y - ノード削除:
Del - ノード複製:
Ctrl + C - 再複製:
Ctrl + V - 開示/未開示切替:
Ctrl + R - 拡大:
Ctrl + + - 縮小:
Ctrl + -
- React
- TypeScript
- Vite
- React Flow - ノードベースのグラフライブラリ
- Zustand - 状態管理
- Tailwind CSS - スタイリング
- Lucide React - アイコン
本プロジェクトは MIT ライセンスの下で公開されています。詳細は LICENSE ファイルをご確認ください。
- Created by c-ardinal with Google Antigravity