Bone Flow #054 週報サンプル 使い方ガイド

1. 最初にやること

2. JS / CSS / Data の設置方法

Installer後の基本配置は次です。すべて同じディレクトリに置くのが最も簡単です。

boneflow/
└─ sample/054/weekly-report/
   ├─ index.html
   ├─ boneflow-weekly-report.js
   ├─ boneflow-weekly-report.css
   ├─ weekly-report-data.json
   ├─ holiday.csv
   └─ weekly-report-guide.html

HTMLではCSSを <head>、JSを </body> の直前で読み込みます。

<link rel="stylesheet" href="./boneflow-weekly-report.css">
...
<script src="./boneflow-weekly-report.js"></script>

このJSはサンプルConsumerと必要なBundled Runtimeを含みます。#054側ではCalendarへ移したデータ編集UIを複製せず、#040/#118を必須依存にしません。#022は選択強調に利用できる場合だけ任意利用し、バージョン完全一致で起動を止めません。CDNやクエリ文字列によるキャッシュバスターは使いません。

HTML Functional Classの中心

<div id="bf-weekly-calendar" class="bf-calendar"></div>
<div id="bf-weekly-table" class="bf-table"></div>

Display Timelineは週報TableのCell Renderer 054 として入り、各行の中に bf-display-timeline が生成されます。

3. weekly-report-data.json の全体構造

{
  "schemaVersion": 12,
  "selectedDate": "2026-09-14",
  "dayRemarks": {},
  "settings": { ... },
  "types": [ ... ],
  "records": [ ... ]
}

表示設定の例

"settings": {
  "theme": "dark",
  "startTime": "00:00",
  "endTime": "23:59",
  "timeBarHeightPx": 58,
  "calendarIconSizePx": 14,
  "timelineStepMinutes": 180,
  "timelineSnapMinutes": 15,
  "timelineShowGrid": true,
  "colorPickerTransition": "teleport-up"
}

4. Taskデータの作り方

通常Taskは recordType: "schedule" です。

{
  "id": "mon-meeting",
  "recordType": "schedule",
  "date": "2026-09-14",
  "label": "週次ミーティング",
  "content": "週次進捗と課題を確認",
  "start": "10:00",
  "end": "10:30",
  "typeId": "meeting",
  "displayType": "shapeComment",
  "icon": "",
  "backgroundColor": "",
  "backgroundOpacity": null,
  "textColor": "",
  "showInRemarks": true,
  "commentOffsetX": 0,
  "commentOffsetY": 0,
  "commentWidth": 120
}

種別マスタの例

{
  "id": "meeting",
  "label": "会議",
  "kind": "meeting",
  "icon": "●",
  "backgroundColor": "#B45309",
  "backgroundOpacity": 100,
  "textColor": "#FFF7CC",
  "textOpacity": 100,
  "showCalendarIcon": true
}

showCalendarIcon がtrueの種別だけ、Calendar日付セルへTask Iconを表示します。

5. 祝日データの使い方

国民の祝日は holiday.csv へ分離します。JSへ祝日をハードコードしません。

国民の祝日・休日月日,国民の祝日・休日名称
2026/9/21,敬老の日
2026/9/22,休日
2026/9/23,秋分の日

読込後、Calendarには 🎌 を使って表示し、週報Tableでは右端の備考へ 🎌 敬老の日 の形式で表示します。

6. #024 Calendar の設置・データ連携・表示

設置

<div id="bf-weekly-calendar"
     class="bf-calendar"
     data-week-start="monday"
     data-theme="dark"
     data-show-tasks="true"></div>

データとの関連

Calendarの祝日は holiday.csv、Taskは weekly-report-data.json.records の date で同じ日付に結び付きます。

Icon表示

• 祝日: 必ず 🎌
• Task: Task個別Iconがあればそれを使用。空欄なら種別Icon。
• 種別の「カレンダーへアイコン表示」OFFなら、その種別TaskはCalendarへIconを出しません。
• Iconサイズは「Calendar アイコンサイズ（px）」で8〜24px。

7. #048 週報Table の考え方

週7行は#048 Tableが所有します。現在の列は次の順です。

曜日 / 日付 / 開始時間 / 終了時間 / 休憩時間 / 勤務時間 / Display Timeline / 備考

勤務集計は kind=work の業務区間から、kind=break と重なる休憩を差し引いて計算します。祝日・自由備考・「備考に表示」ONのTaskは一番右の備考へ集約します。

8. #054 Display Timeline の使用方法

このサンプルでは #048のCell Rendererとして #054を使います。主要設定は次です。

{
  start: "00:00",
  end: "23:59",
  step: 180,
  snap: 15,
  barHeight: 58,
  timeAxisMode: "group-first",
  groupIndex: 0,
  showGrid: true,
  editable: true,
  theme: "dark"
}

timeAxisMode="group-first" のため、時間軸ラベルは週7行の先頭行だけに表示します。各行の groupIndex は0〜6です。

直接Runtimeを使う最小例

const host = document.querySelector("#timeline");
const items = [
  {
    id: "work-1",
    label: "勤務",
    kind: "work",
    displayType: "bar",
    start: "09:00",
    end: "18:00",
    backgroundColor: "#245A91",
    textColor: "#FFFFFF"
  },
  {
    id: "meeting-1",
    label: "定例会議",
    kind: "meeting",
    displayType: "shapeComment",
    start: "14:00",
    end: "15:00",
    commentText: "進捗確認",
    commentWidth: 120,
    commentOffsetX: 0,
    commentOffsetY: 0
  }
];
BoneDisplayTimeline.create(host, {
  start: "00:00", end: "23:59", step: 60, snap: 15,
  timeAxisMode: "all", showGrid: true, editable: true,
  theme: "dark"
}, items);

編集

• Bar: Drag / Resize。snapは10 / 15 / 30 / 60分。
• Shape Comment: 自由移動。下へ移動すると週報行の縦幅も必要量だけ拡張。
• Shape Comment幅: Taskごとに72〜240px。
• 縦線: 「縦線を表示」ONで1時間補助線 + step主線。

編集イベント bone-display-timeline:change をConsumerが受けて、Taskの開始/終了やコメント位置を保存します。

9. LocalStorage / JSON Download / Import

外部の weekly-report-data.json + holiday.csv に戻したい場合は「データファイル再読込」を使います。Browser保存内容は置き換わります。

10. 背景色・文字色・#118 Transition

背景色・文字色はConsumer独自Pickerではなく、正式 BoneColorPicker.attachCaller(...) を使用します。

#118 Transitionはページ全体やTimelineへ掛けません。#040 ColorPicker OverlayのOPEN/CLOSEだけに使用します。

11. よく使うサンプル

勤務 + 休憩

{"recordType":"schedule","date":"2026-09-14","label":"勤務","start":"09:00","end":"18:00","typeId":"work","displayType":"bar"}
{"recordType":"schedule","date":"2026-09-14","label":"休憩","start":"12:00","end":"13:00","typeId":"break","displayType":"bar"}

この場合、週報列は開始09:00 / 終了18:00 / 休憩01:00 / 勤務08:00になります。

備考へ会議名を出す

{
  "recordType":"schedule",
  "date":"2026-09-14",
  "label":"顧客定例会議",
  "start":"14:00",
  "end":"15:00",
  "typeId":"meeting",
  "displayType":"shapeComment",
  "showInRemarks":true
}

日付だけの自由備考

"dayRemarks": {
  "2026-09-14": "現地直行 / 17:30 日報提出"
}

v1.0.47 データ責務の分離

同じTask/Typeデータを#054側にもう一つの入力フォームとして持たせません。Calendar Managerの変更イベントを受け、週報TableとDisplay Timelineへ同期します。

12. 困ったときの確認順