📊 ガントチャート (Gantt Chart)

プロジェクトのタスクとスケジュールを視覚的に管理するためのツールです。

主な特徴

  • タスクリストとタイムライン連携: 左側でタスク情報を編集し、右側で期間を視覚的に確認・操作できます。
  • インライン編集: タスク名、担当者、開始日、終了日、進捗率をリスト上で直接編集できます。
  • バーの直感操作: タイムライン上のバーをドラッグして期間を移動したり、端をドラッグして期間を伸縮できます(日表示のみ)。
  • 進捗表示と操作: バーの上にマウスを乗せると表示されるハンドルで進捗率を直感的に変更できます(日表示のみ)。
  • ビュー切替: 日表示、週表示、月表示を切り替えて、異なる粒度でスケジュールを確認できます。
  • 祝日・今日表示: カレンダーに日本の祝日と今日の日付をハイライト表示します。
  • データ保存/読込: 作成したガントチャートデータをJSONファイルとして保存・読み込みできます。

使い方マニュアル

画面構成

ガントチャート 画面構成
  1. ヘッダー: タスク追加ボタン、ビュー切替、JSON保存/読込ボタンがあります。
  2. タスクリスト (左側): タスクの一覧が表示され、各項目を編集できます。
    • タスク: タスク名。クリックして編集。
    • 担当者: タスクの担当者。クリックして編集。
    • 開始日: タスクの開始日 (YYYY/MM/DD)。クリックして日付ピッカーで編集。
    • 終了日: タスクの終了日 (YYYY/MM/DD)。クリックして日付ピッカーで編集。
    • 進捗率: タスクの進捗率 (0-100%)。クリックして数値入力で編集。
    • 操作: タスク削除ボタンがあります。
  3. タイムライン (右側): タスクの期間がバーとして視覚的に表示されます。
    • ヘッダー: 日付、週、月が表示されます。背景色で土日祝、今日が示されます。
    • ボディ: タスクリストの各行に対応し、タスク期間を示すガントバーが表示されます。背景にも土日祝、今日が色付けされます。
    • ガントバー: タスクの期間を表します。緑色の部分は進捗率を示します。

基本的な使い方

  • タスクの追加: ヘッダーの+ タスク追加ボタンをクリックします。新しいタスク行がリストの最後に追加されます。
  • タスク情報の編集: タスクリストの編集したいセル(タスク名、担当者、日付、進捗率)をクリックします。入力欄が表示されるので編集し、Enterキーを押すか、他の場所をクリックすると保存されます。Escキーでキャンセルできます。
  • タスクの削除: 削除したいタスク行の右端にあるゴミ箱アイコンをクリックします。
  • 期間の変更 (日表示):
    • 移動: タイムライン上のガントバー自体をドラッグ&ドロップします。
    • 開始日変更: バーの左端(少し内側)にマウスを乗せ、左右矢印カーソルになったらドラッグします。
    • 終了日変更: バーの右端(少し内側)にマウスを乗せ、左右矢印カーソルになったらドラッグします。
    ガントバーの期間変更操作
  • 進捗率の変更 (日表示):
    • タスクリストの「進捗率」セルをクリックして数値を入力します。
    • タイムライン上のガントバーにマウスを乗せると、進捗を示す緑色の部分の右端に小さな丸いハンドルが表示されます。このハンドルを左右にドラッグします。
    ガントバーの進捗変更操作
  • 表示のスクロール:
    • タスクリスト部分(左側)を上下にスクロールすると、タイムライン部分(右側)も連動してスクロールします。
    • タイムライン部分(右側)を上下左右にスクロールすると、タスクリスト部分やタイムラインヘッダーも連動します。
    • タイムラインの背景をドラッグすることでも左右にスクロールできます。
  • ビューの切替: ヘッダー右側のボタンで表示の粒度を切り替えます。週・月表示ではバーのドラッグ操作はできません。

データの保存と読込

  • 保存: ヘッダー右側の保存ボタンをクリックします。変更がある場合、ボタンは黄色!で強調表示されます。GANT[日付時刻].jsonというファイル名でダウンロードされます。
  • 読込: ヘッダー右側の読込ボタンをクリックし、保存したJSONファイルを選択します。現在の内容は上書きされます。読み込んだ日時はボタンの隣に表示されます。