# Bone Flow #021 Bone Shape — HTMLクラス実装・設定ガイド

> **作業版:** 2026-10-15 / #021 文章表現統合 Candidate v1.0.80 / Runtime Candidate v1.0.59。**Completed・Frozenの新規承認を意味しません。**
> このMarkdownは別のAIにも渡して実装を再現できるように記述しています。特定のチャット、非公開のJavaScript、実装済みサンプルのJSONデータに依存しません。

## 1. 最初に知ること

- 通常Shapeは `class="bf-shape"`、**文章内の小さなShapeは `class="bf-inline-shape"`** を使います。両者は描画サイズとTooltipなどの扱いが異なるため、文章内に通常Shapeを使ってはいけません。
- HTMLクラスの自動描画には **`bone-shape.css` と `bone-shape.js`** が必要です。このCandidateではHTMLクラスの起動処理を `bone-shape.js` 側に統合しています。利用ページで別のHTMLクラス補助JS、JSONチャート、`run()` / `scan()` の独自スクリプトを読み込まないでください。
- #021 Runtime内部で既存の `/boneflow/data/bone-shapes.json` を読み取ります。**このJSONは #021本体の40種類のShape定義（Registry）であり、#001文章表現向けに勝手に作ったJSONチャートではありません。** `/boneflow/data/` の設置と配信は必要です。存在しない場合は描画できません。
- CSS・JS・Registryはすべてローカル配信。CDNや外部URLへの依存を追加しません。

## 2. 必須の設置ファイル

```text
WebRoot/
└─ boneflow/
   ├─ css/bone-shape.css             # #021既存のCSS
   ├─ js/bone-shape.js               # #021 Runtime / 本CandidateのHTMLクラス処理
   ├─ data/bone-shapes.json          # #021既存Registry（消さない）
   ├─ docs/021-Shape-HTML-Class-Usage.md
   └─ test/bone-shape-sentence.html
```

ApacheのDocumentRootが `C:\work\pcsr\pcsr.net\public` の場合、確認URLは `http://localhost/boneflow/test/bone-shape-sentence.html` です。実ファイルの場所とHTTP配信先が一致する必要があります。

## 3. HTMLの最小構成（JavaScriptの独自記述不要）

```html
<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="/boneflow/css/bone-shape.css">
</head>
<body>
  <p>申請を <span class="bf-inline-shape" data-shape-type="PROCESS"
    data-theme="light" data-inline-size="40">処理</span> しました。</p>

  <div class="shape-box">
    <div class="bf-shape" data-shape-type="DECISION">承認判定</div>
  </div>

  <!-- ページ末尾で1回だけ読み込み。画面側の独自JSは不要です。 -->
  <script src="/boneflow/js/bone-shape.js"></script>
</body>
</html>
```

`/boneflow/...` は「DocumentRootのboneflowディレクトリを指すURL」です。相対URLも利用可能です。`/boneflow/test/` に置く場合は `../css/bone-shape.css` / `../js/bone-shape.js` となります。**ブラウザでローカルファイルを直接開かず、http://localhostからアクセスしてください。**

## 4. HTMLクラスの属性（実コードで検証した仕様）

| クラス | 属性 | 指定例 / 仕様 |
|---|---|---|
| `bf-inline-shape` | `data-shape-type` | `PROCESS`, `START`, `DECISION` などRegistry登録済のTYPE（全40種は後述）。省略時 `PROCESS`。 |
| `bf-inline-shape` | 内側テキスト | SVGの表示名。空ならTYPE文字列。 |
| `bf-inline-shape` | `data-theme` | `light` / `dark` / `neon`。 |
| `bf-inline-shape` | `data-inline-size` | Shapeの**高さ(px)**。`8～160` を受け付け、範囲外はClamp。SVGの横幅は縦横比に追随。 |
| `bf-inline-shape` | `data-inline-font-size-offset` | `-8～32` px。`data-inline-size` を指定しないときの**周囲文字のフォントサイズ＋補正**。既定値は `+3px`。 |
| `bf-shape` | `data-shape-type` | 登録済TYPE。省略時 `PROCESS`。 |
| `bf-shape` | 内側テキスト | 表示名。 |
| `bf-shape` | `data-port-label-lr-x/y` | 左右方向のIN/OUTラベルオフセット。`-80～80` px。 |
| `bf-shape` | `data-port-label-tb-x/y` | 上下方向のIN/OUTラベルオフセット。`-80～80` px。 |

**注意:** `data-width` / `data-height` / `data-display-rate` を通常の `bf-shape` の正式HTML属性として使うことは、この実装ではサポートされていません。ページ表示幅はCSSで親の幅を設定し、より詳細な `displayRate` やProperty設定が必要なら #021のPublic APIまたは既存Property Editorを使います。存在しないHTML属性を新設・想像して使わないでください。

## 5. サイズを変える（コピーして使える例）

### 固定ピクセル（推奨）

```html
<p>小: <span class="bf-inline-shape" data-shape-type="START" data-inline-size="18">開始</span></p>
<p>中: <span class="bf-inline-shape" data-shape-type="PROCESS" data-inline-size="36">処理</span></p>
<p>大: <span class="bf-inline-shape" data-shape-type="DECISION" data-inline-size="64">判定</span></p>
```

### 文章のフォントサイズと連動

```html
<p style="font-size:22px">
  次は <span class="bf-inline-shape" data-shape-type="PROCESS"
  data-inline-font-size-offset="6">処理</span> です。
</p>
```

上例のShape高さは基本 `22+6=28px`。`data-inline-size` が設定されている場合はその値が優先されます。フォントサイズは **描画時に決定**されるため、描画済みShapeの親フォントだけ後から変更しても自動再マウントは保証しません。

### 通常のShapeのレイアウト幅をCSSから指定

```html
<style>
  .shape-box { width:320px; max-width:100%; }
  .shape-box > .bf-shape { width:100%; }
</style>
<div class="shape-box">
  <div class="bf-shape" data-shape-type="PROCESS">処理ブロック</div>
</div>
```

この幅指定は通常Shapeの**表示領域**の設定です。SVGの細かな内部表示率（`displayRate`、25～200%）とは別です。文章の途中で大きな通常Shapeを表示するとTooltipやCommentが重なることがあるので、文章には `bf-inline-shape` を使用します。

## 6. テーマ（Light / Dark / Neon）

```html
<p>Light: <span class="bf-inline-shape" data-shape-type="PROCESS" data-theme="light" data-inline-size="38">処理</span></p>
<p>Dark: <span class="bf-inline-shape" data-shape-type="PROCESS" data-theme="dark" data-inline-size="38">処理</span></p>
<p>Neon: <span class="bf-inline-shape" data-shape-type="PROCESS" data-theme="neon" data-inline-size="38">処理</span></p>
```

**実装済の挙動:** 文章内ShapeはTooltip / Comment / Portラベルを無効化して重なりを避け、SVGをインラインで表示します。通常Shapeへの `data-theme` は文章内用と同じ扱いにはならない場合があります。通常Shapeのテーマは既存Property/APIに従ってください。

## 6.1 文章内Shapeの文字FITとIN/OUT非表示（実装値）

通常ShapeのPropertyに既に存在する `displayTextStyle.fit` を文章内描画でも `true` に設定します。**図形内のラベルの文字サイズを、自動的に枠内へ収まるように調整**する設定です。`data-inline-size` はShape自体の表示高さであり、文字FITとは別です。

文章内Shapeでは #021の既存 `portLabelVisibility: { in: false, out: false }` を設定します。誤った `inLabelVisible` / `outLabelVisible` プロパティを使いません。通常のShapeのIN/OUT表示は維持します。

### 実ファイルのダウンロード

#021の文章表現サンプル画面から、使用している `bone-shape.js` と `bone-shape.css` を直接ダウンロードできます。リンク先は `../js/bone-shape.js` / `../css/bone-shape.css` で、**URLにパラメータを付加しません**。配布ZIPにも両ファイルを同梱しています。

## 7. JSを使った制御（HTMLだけでは足りない場合のみ）

#021のPublic APIを呼び出す場合の**別モード**です。HTMLクラスだけで文章を表示するなら、この節のJSは不要です。

```html
<div id="shape-api-area"></div>
<script src="/boneflow/js/bone-shape.js"></script>
<script>
  // 他のShape定義や独自Registryを作らず、既存の#021 Registryを読み込む。
  BoneShape.load('/boneflow/data/bone-shapes.json').then(() => {
    const node = BoneShape.createNode({ type:'PROCESS', label:'処理' });
    node.render(document.getElementById('shape-api-area'));
    // ライフサイクルの詳細は #021 Public API（getValue/setValue/destroy）に従う。
  });
</script>
```

この例はPublic APIを使うためのものです。文章表現サンプルや `bf-inline-shape` の表示に混ぜる必要はありません。

## 8. 失敗したときの診断方法

1. ブラウザで `http://localhost/boneflow/test/bone-shape-sentence.html` にアクセス。ページの版番号を確認。以前の `34 / 34 ALL PASS` は旧サンプルです。
2. Networkで `/boneflow/js/bone-shape.js`、`/boneflow/css/bone-shape.css`、`/boneflow/data/bone-shapes.json` が **200** になっているかを調べる。
3. 対象の `<span>` に `data-bf-inline-shape-mounted="true"`、内部に `<svg>` があるかを見る。エラー時は `data-bf-inline-shape-status="error"` と `data-bf-inline-shape-error` を調べる。
4. `data-shape-type` が40種の登録TYPEに一致するかを調べる。未登録の値は描画エラー。
5. サイズがおかしい場合、`data-inline-size="40"` をまず指定して実際の表示寸法を調べる。
6. Tooltip/Commentが重なる場合、誤って `class="bf-shape"` を文章内で使用していないかを調べる。
7. ブラウザコンソールに404やSyntaxErrorがあるのに、単純なDOM存在だけでALL PASSと出さない。**実際のSVG表示を確認する。**

## 9. #001文章表現との境界

- 文章内Shapeは **#021が所有**。#001専用のiframe/srcdocカタログと専用の表示・合否判定JSを再実装しない。
- #001からは#021の文章表現サンプルへリンクする構造を採用。#001 A/B/Cプレビュー、E印鑑、既存Realtime Runtimeは保存。
- #001の専用Dセクション内に文字列 `JSON` があっても、それ自体は「JSON TYPEのShape」の名前であり、別の独自JSONファイルが存在する証明にはなりません。実ファイルで削除するのは専用Dテンプレートと専用Dスクリプトの参照です。

## 10. #021 Registry の40種類（既存データから抽出）

| No | `data-shape-type` | 名前 |
|---:|---|---|
| 1 | `START` | 開始 |
| 2 | `END` | 終了 |
| 3 | `PROCESS` | 処理 |
| 4 | `DECISION` | 条件分岐 |
| 5 | `INPUT_OUTPUT` | 入出力 |
| 6 | `SUB_PROCESS` | サブプロセス |
| 7 | `DOCUMENT` | ドキュメント |
| 8 | `DATABASE` | データベース |
| 9 | `DATA_STORE` | データストア |
| 10 | `MANUAL_INPUT` | 手動入力 |
| 11 | `MANUAL_OPERATION` | 手動処理 |
| 12 | `PREPARATION` | 準備 |
| 13 | `DELAY` | 遅延 |
| 14 | `CONNECTOR` | 接続 |
| 15 | `OFFPAGE_CONNECTOR` | ページ外 |
| 16 | `TABLE` | テーブル |
| 17 | `VIEW` | ビュー |
| 18 | `API` | API |
| 19 | `FILE` | ファイル |
| 20 | `JSON` | JSON |
| 21 | `XML` | XML |
| 22 | `CSV` | CSV |
| 23 | `OBJECT` | オブジェクト |
| 24 | `IMAGE` | 画像 |
| 25 | `ICON` | アイコン |
| 26 | `LABEL` | ラベル |
| 27 | `PANEL` | パネル |
| 28 | `GROUP` | グループ |
| 29 | `MULTI_DOCUMENT` | 複数ドキュメント |
| 30 | `COLLECTION` | コレクション |
| 31 | `TABLE_DETAIL` | テーブル詳細 |
| 32 | `INTERNAL_DETAIL` | 内部表現 |
| 33 | `STAMP_CIRCLE` | 丸印 |
| 34 | `STAMP_SQUARE` | 角印 |
| 35 | `STAMP_OVAL` | 楕円印 |
| 36 | `STAMP_DATE` | データ印 |
| 37 | `STAMP_CORRECTION` | 訂正印 |
| 38 | `SCHEDULE_TRIGGER` | スケジュール起点 |
| 39 | `JOB` | ジョブ |
| 40 | `JOBNET` | ジョブネット |

## 11. AIによる改修時の遵守事項

- #021 Runtime / CSS / Registryは既存仕様を根拠にし、記載のない属性を追加・正式扱いしない。
- #001文章表現の撤去を理由に #021共有Registry・通常Shape・#001 A/B/C/E を削除しない。
- JavaScriptファイルを「1本にする」はコンシューマー側の読み込み本数の話であり、既存の #021 Registry JSONまで削除する意味ではない。
- 修正時は差分限定・現状バックアップ・Version Up・MANIFEST SHA256・既存QA保持・ユーザーlocalhost未検証を明示する。
- この文書は動作方法を説明するもので、**すべてのユーザー環境での検証済みや正式完了を保証しません。**


### #021 文章内Shapeの文字FIT (Candidate 1.0.80)

`data-inline-text-size="14"` は、Shape内部に表示するラベルの画面上の目標文字サイズ（px、8〜24）。省略すると周囲の CSS font-size を参照し、SVG の viewBox と実際の `data-inline-size`（高さ）に合わせて変換します。文字が長い場合は最大3行に折り返して既存の `displayTextStyle.fit=true` で図形の内側に収めます。外側のShapeサイズは変えず、必要なら `data-inline-size` を大きくしてください。例えば `data-inline-size="120" data-inline-text-size="15"`。通常の #021 Shape のFITアルゴリズムは変更していません。


### 文章内FITの字間余裕 (v1.0.80)

文章内の `.bf-inline-shape` の表示文字のみ、FIT演算で得た文字サイズから約10%下げ、枠と文字の間に余白を確保します。Shapeの幅・高さ、通常の `bf-shape`、IN/OUT表示制御、テーマには変更ありません。`data-inline-text-size` による目標値指定は継続して使用できます。


## 40 TYPE全件文字サイズ監査 / v1.0.80

40種類すべてをChromiumのSVG矩形／ラベル寸法で検査します。通常の`bf-shape`は変更しません。文章内Shapeでは条件分岐・接続・テーブル・オブジェクト・パネル・グループ・コレクションに個別の文字サイズ上限を持ちます。パネル／グループの見出し領域からはみ出していた文字は、図形の内部へ移動します。オブジェクト／コレクションは内部の線との重なりを避ける文字背景を使用します。

### Sizeリストと最小文字サイズ

```html
<span class="bf-inline-shape" data-shape-type="DECISION" data-theme="light" data-inline-size="60" data-inline-min-font-size="8">条件分岐</span>
```

- `data-inline-size`: Shape表示高さ。32 / 40 / 48 / 60 / 72 / 80 / 96 / 120 / 160pxから例示ページで選択できます。記入値は8～160pxです。
- `data-inline-text-size`: 目標表示文字サイズ（8～24px）。図形の枠をはみ出さないようFITが優先されます。
- `data-inline-min-font-size`: 最小希望文字サイズ（6～16px）。小さい図形では保証できないため、実測が下回る場合は`data-bf-inline-fit-below-min="true"`と画面表示で示し、文字を枠外へ押し出しません。必要ならShape表示サイズを上げてください。
- サンプル画面のサイズ選択は40種類共通で、#021 Runtimeが処理し、ShapeとサンプルHTMLを同期します。HTML自体に独自描画スクリプトは不要です。
- 特殊形状（画像・アイコン、詳細テーブル、印鑑）には固定の内部表現があります。その部分の意味ある文字を通常の`displayTextStyle.fit`で勝手に置換しません。

- JOB / JOBNETはステータスにより背景が濃い色になるため、文章内表示に限定して文字を明色にしてコントラストを確保します。通常のJob Shapeの配色には影響ありません。


## v1.0.80 — 40種類のShapeサイズ一括選択

文章表現サンプル `test/bone-shape-sentence.html` にはShapeサイズ（32、40、48、60、72、80、96、120、160px）と最小希望文字サイズ（6～16px）の**共通リストが各1個だけ**あります。Shapeごとのサイズリストはありません。初期値はShape高さ80px、最小文字サイズ8pxです。どちらかを切り替えると40種類の文章内Shapeを再描画し、直下のコピー用HTMLをすべて更新します。

`data-bf-inline-fit-below-min` は診断属性として残りますが、赤色・オレンジ色の点線枠は出しません。該当件数はページ上部の文字による状態表示で通知します。最小文字サイズは**希望下限**であり、Shapeの内側から文字をはみ出させることはありません。

独立したHTMLページでは `data-inline-size="80"` を各Shapeに直接指定できます。「一括リスト」は**#021サンプル画面の操作UI**であり、ほかの利用ページに自動挿入されません。必要なJS・CSSは従来どおり `../js/bone-shape.js` と `../css/bone-shape.css` です。通常のShape表示は変更しません。


## v1.0.83：印鑑・データ印をHTMLクラスで設定する

`bf-inline-shape` の印鑑TYPEでは、既存の `BoneShape` Runtimeの `stamp` プロパティをHTML属性経由で設定できます。追加の独自印鑑描画JS、JSONは不要です。

| HTML属性 | 対応する既存プロパティ | 用途 |
|---|---|---|
| `data-stamp-text` | `stamp.text` | 丸印・角印・楕円印・訂正印の印面文字。データ印の既定上段にも利用可 |
| `data-stamp-top` | `stamp.topText` | データ印上段 |
| `data-stamp-date` | `stamp.date` | データ印中央の日付（`YYYY-MM-DD`）。空欄なら当日 |
| `data-stamp-bottom` | `stamp.bottomText` | データ印下段 |
| `data-stamp-date-format` | `stamp.dateFormat` | `yyyy/MM/dd` / `yyyy-MM-dd` / `yyyy.MM.dd` / `yy/MM/dd` など |
| `data-stamp-correction-text` | `stamp.correctionText` | 訂正印の訂正対象文字 |

```html
<link rel="stylesheet" href="../css/bone-shape.css">
<p>捺印：<span class="bf-inline-shape" data-shape-type="STAMP_CIRCLE" data-stamp-text="山田" data-inline-size="80">丸印</span></p>
<p>日付印：<span class="bf-inline-shape" data-shape-type="STAMP_DATE" data-stamp-top="受付" data-stamp-date="2026-10-16" data-stamp-bottom="担当" data-stamp-date-format="yyyy/MM/dd" data-inline-size="80">データ印</span></p>
<script src="../js/bone-shape.js"></script>
```

文字を変更するには、HTML属性値を編集します。実行後にDOMの属性を変更するだけでは自動再描画されないため、サンプルの編集欄では#021 Runtime内の再マウント処理を使用しています。サンプルの共通Shapeサイズリスト（全40件）は引き続き利用できます。印影の赤色・円/角の輪郭・日付の仕切り線は、既存のShape Runtimeが描画します。



## Shapeアセット処理（v1.0.83）

**#021の既存アセットファイルは `data/bone-shapes.json` です。** 新規の `bone-shape-assets.json` を作りません。

- `shapes`: 既存の40種類のShape定義。定義済みTYPE・SVG要素・ポートを保持します。
- `runtimeAssets`: Property初期値、Property Schema、選択肢、印鑑フォントと文字FITルールを管理する同じJSON内のデータ領域です。
- `bone-shape.js` はこの **１ファイルのみ** を読み込みます。Runtimeの初期値やShape定義をJSへJSONとして直書きしません。
- カスタマイズ済みRegistryが存在する場合、Installerは40種類の`shapes`を保持したまま`runtimeAssets`のみ差分更新します。書換前バックアップを取ります。

```html
<link rel="stylesheet" href="../css/bone-shape.css">
<p>手順：<span class="bf-inline-shape" data-shape-type="PROCESS" data-inline-size="80">処理</span></p>
<script src="../js/bone-shape.js"></script>
```

**配置**： `js/bone-shape.js`、`css/bone-shape.css`、`data/bone-shapes.json`。外部CDNは不要です。Script URLへのクエリ文字列も不要です。

**API**：`await BoneShape.load('../data/bone-shapes.json')` の後に `getPropertyDefaults()`、`getPropertySchema()` を使用してください。未読込・JSON破損・40 TYPE不整合は明示エラーです。

**アセットテスト**：`test/bone-shape-assets-test.html`（ブラウザ）、`test/bone-shape-assets-node-test.js`（Node.js）。通常のShape・FIT・印鑑・一括サイズのサンプルは `test/bone-shape-sentence.html` です。