HTML Functional Class ― bf-textarea
HTMLに class="bf-textarea" と data-* 属性を書くだけで、正式Runtimeが複数行TextAreaを生成します。 通常の利用では BoneCore.create() / BoneTextArea.create() を自分で呼ぶ必要はありません。
1. まずHTMLにこの要素を置く
<div class="bf-textarea"
data-id="memo"
data-value="1行目 2行目"
data-placeholder="メモを入力"
data-rows="6" data-cols="40"
data-wrap="soft" data-resize="vertical"
data-width="480" data-height="160"
data-commit-shortcut="ctrl-or-meta-enter"></div>
※data-value="1行目 2行目" の はHTML上の改行文字参照です。JS文字列を入れる必要はありません。
2. ファイル読み込み（配置場所：/boneflow/test/ の例）
必要なCSSとJSを既存のBone Flowの配置に合わせて読み込みます。bone-textarea-html-class.js はRuntime本体の後、一番最後に読み込みます。 下の完全HTMLをコピーして試せます。CDN等の外部通信は不要です。
完全なHTMLサンプル（必要なCSS / JSを含む）を表示
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>#028 TextArea HTML Class</title>
<link rel="stylesheet" href="../css/bone-joint.css">
<link rel="stylesheet" href="../css/bone-hover-border-effect.css">
<link rel="stylesheet" href="../css/bone-colorpicker.css">
<link rel="stylesheet" href="../css/bone-textarea.css">
</head>
<body>
<!-- 配置例: /boneflow/test/ のHTMLファイル -->
<div class="bf-textarea" data-id="memo" data-value="1行目 2行目" data-placeholder="メモを入力" data-rows="6" data-cols="40" data-wrap="soft" data-resize="vertical" data-width="480" data-height="160" data-commit-shortcut="ctrl-or-meta-enter"></div>
<script src="../js/bone-normalizer.js"></script>
<script src="../js/bone-lifecycle.js"></script>
<script src="../js/bone-factory.js"></script>
<script src="../js/bone-cloner.js"></script>
<script src="../js/bone-updater.js"></script>
<script src="../js/bone-serializer.js"></script>
<script src="../js/bone-deserializer.js"></script>
<script src="../js/bone-core.js"></script>
<script src="../js/bone-joint-endpoint.js"></script>
<script src="../js/bone-joint-field-resolver.js"></script>
<script src="../js/bone-joint-compatibility.js"></script>
<script src="../js/bone-joint-state.js"></script>
<script src="../js/bone-joint-line.js"></script>
<script src="../js/bone-joint-renderer.js"></script>
<script src="../js/bone-joint.js"></script>
<script src="../js/bone-hover-border-effect.js"></script>
<script src="../js/bone-label.js"></script>
<script src="../js/bone-transition.js"></script>
<script src="../js/bone-transition-functional-class.js"></script>
<script src="../js/bone-colorpicker.js"></script>
<script src="../js/bone-textarea.js"></script>
<script src="../js/bone-textarea-html-class.js"></script>
</body>
</html>
3. HTML属性の設定表（Bridgeの実装にある属性のみ）
| 区分 | HTML属性 | 意味 / 許可値 |
|---|
| 基本 | class="bf-textarea" | 必須。要素を実TextAreaへ置換 |
| 基本 | data-id, data-value | Bone識別子、初期値（改行は ） |
| 基本 | data-placeholder, data-name, data-aria-label | 入力ヒント・名前・読み上げラベル |
| 大きさ | data-rows, data-cols | 行数・列数（1〜1000） |
| 大きさ | data-width, data-height | 幅・高さ（pxの数値のみ） |
| 入力 | data-wrap | soft / hard / off |
| 入力 | data-resize | none / vertical / horizontal / both |
| 入力 | data-scroll | auto / hidden / scroll |
| 入力 | data-commit-shortcut | ctrl-enter / meta-enter / ctrl-or-meta-enter / none |
| 入力 | data-minlength, data-maxlength | 文字数の制約 |
| 入力 | data-readonly, data-disabled, data-required | true / false（属性の有無だけではONにしない） |
| 入力 | data-blur-commit, data-select-on-focus | true / false |
| 入力 | data-spellcheck, data-commit-invalid | true / false |
| 外観 | data-theme | default / light / dark / neon |
| 外観 | data-appearance | normal / flat / borderless |
| 外観 | data-position | top-left / top-center / top-right / middle-left / center / middle-right / bottom-left / bottom-center / bottom-right |
| 外観 | data-align | auto / left / center / right |
| 外観 | data-background | theme / transparent / 安全な色指定 |
| 外観 | data-inherit-parent | true / false |
| Effect | data-effect, data-mouseover-effect | #022のEffect種類。Active / Mouse Over は別指定 |
| その他 | data-autocomplete, data-inputmode | ブラウザの入力支援設定 |
| その他 | data-security-max-length | Securityの最大文字数 |
値を設定していない属性はRuntimeのデフォルトになります。data-*を後から変更しても既存instanceは自動更新されません。動的に変更する場合は正式Runtime APIを使用します。
4. HTML Class 実動作（このページの正式Runtime）
下の入力欄は上の bf-textarea をマウントして生成した実instanceです。実際に入力し、Ctrl/Cmd+Enterでcommitできます。
TextAreaを操作すると状態を表示できます。
5. 動的追加 / エラー検出
// JSで要素を後から追加する場合（通常は自動scan）
const root = document.getElementById("dynamic-area");
root.insertAdjacentHTML("beforeend", '<div class="bf-textarea" data-id="memo-2" data-rows="8"></div>');
BoneTextAreaHTMLClass.scan(root); // 明示的に再走査する場合
root.addEventListener("bone-textarea-html-class-error", e => console.error(e.detail.message));
責務境界：WAIT / FIFO / BLOCKEDは#002 Joint Deliveryの状態です。data-waitやdata-blocked属性を設定して動かす仕様ではありません。#022の色・速度、#040 ColorPicker、#118 Transitionの詳細設定も、このHTML Bridgeに存在しない属性を勝手に付けても効きません。
TextAreaClassSample / JS Classサンプル
TESTで確認済みのBoneTextArea Public APIを利用側Classで包み、JS/CSS部品を実際に使用して表示できることを確認するサンプルです。
Classサンプルコード
BoneTextArea Public APIを利用側Classから使用するサンプルコードです。
利用側Classサンプルコード
Classサンプルコード 実行結果
上のClassサンプルと同じBoneTextArea API経路で生成した実instanceです。
未生成
実行結果 / State
このサンプルはJS Classの利用例です。HTML Functional Class bf-textareaとは別の記述方式です。
1. Public API
TESTで確認しているBoneTextArea Public APIの一覧と、各APIの引数・使用手順・コード例・戻り値・責務境界を確認します。
Public API 一覧
実Runtimeで利用できるPublic APIを一覧表示します。各APIの詳細は一覧の下で確認できます。
Public API 詳細
2. 使用方法
実装で使う代表フローを目的別に確認します。
3. 操作説明
クラス一覧から各クラスの説明へ移動し、実際の使用方法・参照データ・コード・サンプル・結果を確認します。