#021 Bone Shape — 文章表現 Preview

Integration Candidate v1.0.83 / BoneShape Runtime v1.0.64

通常の文章の中に直接HTMLクラスを記述した例です。読み込むJavaScriptは bone-shape.js のみです。追加のJSONチャート、独自の描画・検査スクリプトはありません。既存Shape定義用の bone-shapes.json は#021 Runtimeが使用します。図形が見えない場合は赤い「Shape未描画」が表示され、図形の代わりにPASS表示はしません。

HTML Functional Class 使用ガイド / v1.0.83（Candidate）

① CSS： <link rel="stylesheet" href="../css/bone-shape.css">

② HTML： <span class="bf-inline-shape" data-shape-type="PROCESS" data-theme="neon" data-inline-size="40">処理</span>

③ JS： <script src="../js/bone-shape.js"></script> （これ1本。描画用の追加スクリプトは不要）

④ サイズ： data-inline-size="18"（小）/ "40"（中）/ "70"（大）、高さ8～160px。data-inline-font-size-offset で周囲文字に追随。data-inline-text-size="14" でShape内文字の画面上の目標pxを指定（既定は周囲のfont-sizeを参照）。小さなShapeに長い文字は物理的に収まりません。

⑤ テーマ： data-theme="light" / dark / neon。

Markdown形式の詳細ガイドをダウンロード（別AIにも利用可能）   JSをダウンロード   CSSをダウンロード

⑥ 最小文字サイズ：data-inline-min-font-size="8"。6～16pxの希望下限を指定。物理的に収まらない場合ははみ出させず、未達を明示します。

⑦ サイズは上部のリスト1個で40種類へ一括反映します。Shapeとコピー用HTMLも同時に更新されます。最小文字サイズも共通設定です。警告用の点線枠は表示しません。

Shape定義 JSONダウンロード · アセット処理テスト

文章内でのテーマ指定

文章の途中に 処理 を表示します。 [light]

文章の途中に 処理 を表示します。 [dark]

文章の途中に 処理 を表示します。 [neon]

Shape内の文字FIT / IN・OUTラベル非表示

文字FITは、図形内部の表示文字だけを枠内へ自動調整する機能です。実表示のShapeサイズとSVG viewBoxの比率を反映します。Shape全体のサイズではありません。文章内Shapeでは既存の displayTextStyle.fit=true と portLabelVisibility.in/out=false を適用します。

文章の途中に 長い処理ラベルを図形内部に収める を表示します。

<span class="bf-inline-shape" data-shape-type="PROCESS" data-theme="neon" data-inline-size="120" data-inline-text-size="15">長い処理ラベルを図形内部に収める</span>

Shape TYPE：40種類（文章表示＋そのまま使えるHTML）

Shape 80px / 最小文字 8px / 描画待機中（40種類共通）

印鑑の文字・データ印の設定（HTMLクラス）

No.33〜37 の入力欄で文字を変更できます。データ印（No.36）は上段・日付・下段・表示形式を個別に設定できます。下のHTMLコードは入力に合わせて変化し、コピーして利用できます。

<span class="bf-inline-shape" data-shape-type="STAMP_CIRCLE" data-stamp-text="山田" data-inline-size="80">丸印</span>
<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>

01. 開始 START

この工程で 開始 を使用します。

<span class="bf-inline-shape" data-shape-type="START" data-theme="light" data-inline-size="80" data-inline-min-font-size="8">開始</span>

02. 終了 END

この工程で 終了 を使用します。

<span class="bf-inline-shape" data-shape-type="END" data-theme="light" data-inline-size="80" data-inline-min-font-size="8">終了</span>

03. 処理 PROCESS

この工程で 処理 を使用します。

<span class="bf-inline-shape" data-shape-type="PROCESS" data-theme="light" data-inline-size="80" data-inline-min-font-size="8">処理</span>

04. 条件分岐 DECISION

この工程で 条件分岐 を使用します。

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

05. 入出力 INPUT_OUTPUT

この工程で 入出力 を使用します。

<span class="bf-inline-shape" data-shape-type="INPUT_OUTPUT" data-theme="light" data-inline-size="80" data-inline-min-font-size="8">入出力</span>

06. サブプロセス SUB_PROCESS

この工程で サブプロセス を使用します。

<span class="bf-inline-shape" data-shape-type="SUB_PROCESS" data-theme="light" data-inline-size="80" data-inline-min-font-size="8">サブプロセス</span>

07. ドキュメント DOCUMENT

この工程で ドキュメント を使用します。

<span class="bf-inline-shape" data-shape-type="DOCUMENT" data-theme="light" data-inline-size="80" data-inline-min-font-size="8">ドキュメント</span>

08. データベース DATABASE

この工程で データベース を使用します。

<span class="bf-inline-shape" data-shape-type="DATABASE" data-theme="light" data-inline-size="80" data-inline-min-font-size="8">データベース</span>

09. データストア DATA_STORE

この工程で データストア を使用します。

<span class="bf-inline-shape" data-shape-type="DATA_STORE" data-theme="light" data-inline-size="80" data-inline-min-font-size="8">データストア</span>

10. 手動入力 MANUAL_INPUT

この工程で 手動入力 を使用します。

<span class="bf-inline-shape" data-shape-type="MANUAL_INPUT" data-theme="light" data-inline-size="80" data-inline-min-font-size="8">手動入力</span>

11. 手動処理 MANUAL_OPERATION

この工程で 手動処理 を使用します。

<span class="bf-inline-shape" data-shape-type="MANUAL_OPERATION" data-theme="light" data-inline-size="80" data-inline-min-font-size="8">手動処理</span>

12. 準備 PREPARATION

この工程で 準備 を使用します。

<span class="bf-inline-shape" data-shape-type="PREPARATION" data-theme="light" data-inline-size="80" data-inline-min-font-size="8">準備</span>

13. 遅延 DELAY

この工程で 遅延 を使用します。

<span class="bf-inline-shape" data-shape-type="DELAY" data-theme="light" data-inline-size="80" data-inline-min-font-size="8">遅延</span>

14. 接続 CONNECTOR

この工程で 接続 を使用します。

<span class="bf-inline-shape" data-shape-type="CONNECTOR" data-theme="light" data-inline-size="80" data-inline-min-font-size="8">接続</span>

15. ページ外 OFFPAGE_CONNECTOR

この工程で ページ外 を使用します。

<span class="bf-inline-shape" data-shape-type="OFFPAGE_CONNECTOR" data-theme="light" data-inline-size="80" data-inline-min-font-size="8">ページ外</span>

16. テーブル TABLE

この工程で テーブル を使用します。

<span class="bf-inline-shape" data-shape-type="TABLE" data-theme="light" data-inline-size="80" data-inline-min-font-size="8">テーブル</span>

17. ビュー VIEW

この工程で ビュー を使用します。

<span class="bf-inline-shape" data-shape-type="VIEW" data-theme="light" data-inline-size="80" data-inline-min-font-size="8">ビュー</span>

18. API API

この工程で API を使用します。

<span class="bf-inline-shape" data-shape-type="API" data-theme="light" data-inline-size="80" data-inline-min-font-size="8">API</span>

19. ファイル FILE

この工程で ファイル を使用します。

<span class="bf-inline-shape" data-shape-type="FILE" data-theme="light" data-inline-size="80" data-inline-min-font-size="8">ファイル</span>

20. JSON JSON

この工程で JSON を使用します。

<span class="bf-inline-shape" data-shape-type="JSON" data-theme="light" data-inline-size="80" data-inline-min-font-size="8">JSON</span>

21. XML XML

この工程で XML を使用します。

<span class="bf-inline-shape" data-shape-type="XML" data-theme="light" data-inline-size="80" data-inline-min-font-size="8">XML</span>

22. CSV CSV

この工程で CSV を使用します。

<span class="bf-inline-shape" data-shape-type="CSV" data-theme="light" data-inline-size="80" data-inline-min-font-size="8">CSV</span>

23. オブジェクト OBJECT

この工程で オブジェクト を使用します。

<span class="bf-inline-shape" data-shape-type="OBJECT" data-theme="light" data-inline-size="80" data-inline-min-font-size="8">オブジェクト</span>

24. 画像 IMAGE

この工程で 画像 を使用します。

<span class="bf-inline-shape" data-shape-type="IMAGE" data-theme="light" data-inline-size="80" data-inline-min-font-size="8">画像</span>

25. アイコン ICON

この工程で アイコン を使用します。

<span class="bf-inline-shape" data-shape-type="ICON" data-theme="light" data-inline-size="80" data-inline-min-font-size="8">アイコン</span>

26. ラベル LABEL

この工程で ラベル を使用します。

<span class="bf-inline-shape" data-shape-type="LABEL" data-theme="light" data-inline-size="80" data-inline-min-font-size="8">ラベル</span>

27. パネル PANEL

この工程で パネル を使用します。

<span class="bf-inline-shape" data-shape-type="PANEL" data-theme="light" data-inline-size="80" data-inline-min-font-size="8">パネル</span>

28. グループ GROUP

この工程で グループ を使用します。

<span class="bf-inline-shape" data-shape-type="GROUP" data-theme="light" data-inline-size="80" data-inline-min-font-size="8">グループ</span>

29. 複数ドキュメント MULTI_DOCUMENT

この工程で 複数ドキュメント を使用します。

<span class="bf-inline-shape" data-shape-type="MULTI_DOCUMENT" data-theme="light" data-inline-size="80" data-inline-min-font-size="8">複数ドキュメント</span>

30. コレクション COLLECTION

この工程で コレクション を使用します。

<span class="bf-inline-shape" data-shape-type="COLLECTION" data-theme="light" data-inline-size="80" data-inline-min-font-size="8">コレクション</span>

31. テーブル詳細 TABLE_DETAIL

この工程で テーブル詳細 を使用します。

<span class="bf-inline-shape" data-shape-type="TABLE_DETAIL" data-theme="light" data-inline-size="80" data-inline-min-font-size="8">テーブル詳細</span>

32. 内部表現 INTERNAL_DETAIL

この工程で 内部表現 を使用します。

<span class="bf-inline-shape" data-shape-type="INTERNAL_DETAIL" data-theme="light" data-inline-size="80" data-inline-min-font-size="8">内部表現</span>

33. 丸印 STAMP_CIRCLE

この工程で 丸印 を使用します。

印面文字を変更すると、印影と下のHTMLコードへ反映します。

<span class="bf-inline-shape" data-shape-type="STAMP_CIRCLE" data-theme="light" data-inline-size="80" data-inline-min-font-size="8" data-stamp-text="山田">丸印</span>

34. 角印 STAMP_SQUARE

この工程で 角印 を使用します。

印面文字を変更すると、印影と下のHTMLコードへ反映します。

<span class="bf-inline-shape" data-shape-type="STAMP_SQUARE" data-theme="light" data-inline-size="80" data-inline-min-font-size="8" data-stamp-text="株式会社">角印</span>

35. 楕円印 STAMP_OVAL

この工程で 楕円印 を使用します。

印面文字を変更すると、印影と下のHTMLコードへ反映します。

<span class="bf-inline-shape" data-shape-type="STAMP_OVAL" data-theme="light" data-inline-size="80" data-inline-min-font-size="8" data-stamp-text="営業部">楕円印</span>

36. データ印 STAMP_DATE

この工程で データ印 を使用します。

上段・日付・下段をそれぞれ独立して変更できます。変更後のHTMLコードも自動更新されます。

<span class="bf-inline-shape" data-shape-type="STAMP_DATE" data-theme="light" data-inline-size="80" data-inline-min-font-size="8" data-stamp-top="受付" data-stamp-date="2026-10-16" data-stamp-bottom="担当" data-stamp-date-format="yyyy/MM/dd">データ印</span>

37. 訂正印 STAMP_CORRECTION

この工程で 訂正印 を使用します。

印面文字を変更すると、印影と下のHTMLコードへ反映します。

<span class="bf-inline-shape" data-shape-type="STAMP_CORRECTION" data-theme="light" data-inline-size="80" data-inline-min-font-size="8" data-stamp-text="田中" data-stamp-correction-text="訂正箇所">訂正印</span>

38. スケジュール起点 SCHEDULE_TRIGGER

この工程で スケジュール起点 を使用します。

<span class="bf-inline-shape" data-shape-type="SCHEDULE_TRIGGER" data-theme="light" data-inline-size="80" data-inline-min-font-size="8">スケジュール起点</span>

39. ジョブ JOB

この工程で ジョブ を使用します。

<span class="bf-inline-shape" data-shape-type="JOB" data-theme="light" data-inline-size="80" data-inline-min-font-size="8">ジョブ</span>

40. ジョブネット JOBNET

この工程で ジョブネット を使用します。

<span class="bf-inline-shape" data-shape-type="JOBNET" data-theme="light" data-inline-size="80" data-inline-min-font-size="8">ジョブネット</span>

#021 Bone Shape 本体に戻る