Body-Oriented Notation & Element Character Database
キャラクターを61のパーツで記録・管理する、キャラクターデータベースフレームワーク。
本リポジトリはそのプロトタイプアプリケーションです。
⚠️ 本アプリはプロトタイプ（試作品）です。
キャラクター管理アプリケーションへの実装を想定して制作したものであり、実際のサービスではありません。
機能・デザインの検証を目的としています。
- データはブラウザの localStorage に保存されます。キャッシュクリア・シークレットモード・別端末では引き継がれません。
- 入力したデータは定期的に 「出力」から Markdown で書き出して バックアップすることを強く推奨します。
- 予期しない動作・表示崩れ・データ消失等が発生する可能性があります。これらについて 当方は責任を負いかねます。
app/index.html をブラウザで開く
サーバーサイド処理は不要です。そのままブラウザで動作します。
| ステップ | 操作 | 説明 |
|---|---|---|
| 1 | ギャラリー でパーツを選ぶ | 61種のパーツから必要な項目をチェック。内在（精神・感情）と外在（外見・社会）で色分けされています |
| 2 | エディタ で内容を入力する | 選んだパーツがフォームとして展開されます。テキストエリアに自由に記述できます |
| 3 | 保存 ボタンで一時保存する | ブラウザの localStorage に保存。複数キャラクターを切り替えて管理できます |
| 4 | 出力 ボタンでデータを書き出す | Markdown ファイルとして保存するか、印刷用レイアウトで出力できます |
- 61パーツをグループ・カテゴリ別に閲覧し、必要な項目だけを選択
- クイック選択プリセット：用途別（最小構成 / ライト / イラスト発注 / 小説漫画 / TRPG / R18 / 全部）を1クリックで適用
- 区分フィルタ：ビジュアル / パーソナリティ / ライフスタイル / ナラティブ / 表現 / ソーシャル / メタ・設定 の8区分で絞り込み
- グループ単位での全選択チェックボックス対応
- 選択済みパーツがアコーディオン形式で展開
- フォームの列数を 1〜4列 でリアルタイム切り替え（localStorage で永続化）
- 入力済みフィールドは緑のアクセントボーダーで視覚的に区別
- 内在パーツ（No.1〜35）と外在パーツ（No.36〜61）をヘッダー左ボーダーの色で識別
8種類のプリセットテーマ：
| テーマ名 | 特徴 |
|---|---|
| 台帳 | 羊皮紙風・暖色ブラウン系（デフォルト） |
| シンプル | クリーンホワイト・グレー系 |
| モダン | スレートブルー・ダークヘッダー |
| ダーク | ナイトモード・インディゴ系 |
| ファンタジー | 羊皮紙×魔法書・深森×古金 |
| サイバー | ネオン緑×黒・グロウエフェクト |
| 和 | 墨×朱・明朝体 |
| ポップ | レトロコミック×ビビッド・太枠影 |
カスタムカラーピッカーで 7項目（背景・カード背景・文字・枠線・アクセント・内在パーツ色・外在パーツ色）を個別にカスタマイズ可能。
- ギャラリーで全キャラクターをグリッド表示
- 「新規キャラ」ボタンで即時作成・エディタへ遷移
- キャラクターごとにパーツ選択・入力データを独立して保存
- 確認ダイアログ付き削除（最後の1体は自動で新規作成）
- Markdown ファイルとしてダウンロード
- 印刷用レイアウト出力（
@media printCSS） - 空パーツを含む／含まない の切り替えトグル付き
含まない（デフォルト）：記入済みフィールドが1つもないパーツをまるごとスキップ含む：全パーツ・全フィールドを出力、空欄は「（未記入）」と表示
app/
├─ index.html アプリ本体（エディタ + ギャラリー 2ビュー構造）
├─ README.md このファイル
├─ css/
│ ├─ style.css 全スタイル（8テーマ変数・5段階レスポンシブ・ドロワー等）
│ └─ print.css 印刷用スタイル
└─ js/
├─ parts-data.js 61パーツの定義データ（descriptions含む）
├─ storage.js localStorage 管理（複数キャラクター対応）
├─ export.js Markdown 生成・ダウンロード・印刷
└─ app.js メインアプリ（App / Gallery / Theme / Drawer / ColSwitcher / HelpDrawer）
localStorage に以下のキーで保存されます。
| キー | 型 | 内容 |
|---|---|---|
bonecd_characters |
Character[] |
全キャラクター一覧（JSON配列） |
bonecd_active_id |
string |
現在編集中のキャラクターID |
bonecd_theme |
string |
選択中のテーマID |
bonecd_custom_colors |
object |
カスタムカラー7変数（JSON） |
bonecd_cols |
number |
フォーム列数（1〜4） |
Character {
id : string UUID（ch_xxxxx 形式）
name : string キャラクター名
parts : number[] 選択パーツ No. 一覧
formData : object { "part1_フィールド名": "値", ... }
createdAt : number 作成日時（ミリ秒）
updatedAt : number 更新日時（ミリ秒）
}
| グループ | 範囲 | 概要 |
|---|---|---|
| 内在共通ベース | No.1〜8 | 性格・感情・価値観など精神の核 |
| 内在拡張ベース | No.9〜35 | 思考・記憶・欲求・信念など内面の詳細 |
| 外在共通ベース | No.36〜48 | 外見・識別情報・身体特徴など外見の核 |
| 外在拡張ベース | No.49〜61 | 服装・装飾・生活環境・社会的立場など |
- HTML5 / CSS3 / JavaScript（Vanilla ES6+）
- Tailwind CSS（CDN・ユーティリティクラス補助）
- Font Awesome 6.4.0（CDN・アイコン）
- localStorage（データ永続化）
- Blob API（Markdown ファイルダウンロード）
| 幅 | 対応 |
|---|---|
| 〜767px（スマホ） | ドロワー式サイドパネル |
| 768〜1023px（タブレット） | 左カラム210px・フォーム1列 |
| 1024〜1439px（PC） | 左カラム260px（デフォルト） |
| 1440〜1919px（ワイド） | 左カラム300px・フォーム3列 |
| 1920px〜（QHD/4K） | 左カラム360px・フォーム4列 |
| 2560px〜（ウルトラワイド） | 最大幅2880px・左カラム420px |