ガントチャート（Frappe Gantt）— JSONデータ読み込み

body {
  margin: 0;
  padding: 24px;
  color: #1A2332;
  font-family: sans-serif;
  background: #F4F6F9;
}

.gantt-demo {
  max-width: 960px;
  margin: 0 auto;
  padding: 24px;
  background: #FFFFFF;
  border: 1px solid #D0D7E0;
  border-radius: 8px;
}

.view-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0;
}

.view-controls button {
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid #AFC1D6;
  border-radius: 6px;
  background: #FFFFFF;
  color: #24486F;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.view-controls button[aria-pressed="true"] {
  border-color: #1554A0;
  background: #2B7FE8;
  color: #FFFFFF;
}

.gantt-scroll {
  overflow-x: auto;
  padding: 12px;
  border: 1px solid #D0D7E0;
  border-radius: 8px;
}

#gantt-chart,
#loading {
  min-width: 720px;
  min-height: 220px;
}

#loading {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  color: #5A6A7A;
}

#loading[hidden] {
  display: none;
}

var ganttInstance = null;
var chartElement = document.getElementById('gantt-chart');
var loadingElement = document.getElementById('loading');
var statusElement = document.getElementById('status');
var viewButtons = Array.prototype.slice.call(document.querySelectorAll('[data-view-mode]'));

fetch('./data/data.json')
  .then(function (response) {
    if (!response.ok) {
      throw new Error('HTTP ' + response.status);
    }
    return response.json();
  })
  .then(function (data) {
    if (!Array.isArray(data.tasks)) {
      throw new Error('tasks配列が見つかりません');
    }

    ganttInstance = new Gantt('#gantt-chart', data.tasks, {
      view_mode: 'Week',
      scroll_to: 'start',
      readonly_dates: false,
      readonly_progress: true,
      on_date_change: function () {
        statusElement.textContent = '日程を変更しました。このデモでは変更を保存しません。';
      }
    });

    chartElement.setAttribute('aria-busy', 'false');
    loadingElement.hidden = true;
    statusElement.textContent = 'タスクバーをドラッグまたは端をリサイズして、日程を動かせます。変更は保存されません。';
  })
  .catch(function (error) {
    console.error('ガントチャートのタスク取得に失敗しました:', error);
    loadingElement.hidden = true;
    statusElement.textContent = 'タスクを読み込めませんでした。ローカルサーバー経由で開いているか確認してください。';
  });

viewButtons.forEach(function (button) {
  button.addEventListener('click', function () {
    if (!ganttInstance) return;

    var viewMode = button.dataset.viewMode;
    ganttInstance.change_view_mode(viewMode, true);
    viewButtons.forEach(function (item) {
      item.setAttribute('aria-pressed', String(item === button));
    });
    statusElement.textContent = viewMode + '表示に切り替えました。';
  });
});

{
  "tasks": [
    { "id": "requirements", "name": "要件整理", "start": "2026-08-03", "end": "2026-08-07" },
    { "id": "design", "name": "画面設計", "start": "2026-08-10", "end": "2026-08-19" },
    { "id": "content", "name": "コンテンツ作成", "start": "2026-08-12", "end": "2026-08-28" },
    { "id": "development", "name": "実装", "start": "2026-08-20", "end": "2026-09-04" },
    { "id": "testing", "name": "動作確認", "start": "2026-09-07", "end": "2026-09-11" },
    { "id": "release", "name": "公開", "start": "2026-09-14", "end": "2026-09-15" }
  ]
}