WordPressの投稿にガントチャートを実装する

Vue3
スポンサーリンク
スポンサーリンク

 

 

 

環境

このページで使用しているフレームワークやライブラリのバージョンは、以下のとおりです。

vue.js3.2.31
vue3-sfc-loader0.8.4
frappe-gantt0.6.1をベースに機能拡張
moment2.29.3
sweetalert211.4.17
vue-select4.0.0-beta.3
@lk77/vue3-color3.0.6
encoding-japanese2.0.0

frappe-ganttとは?

frappe-gantt」は、マウスでドラッグしてグラフィカルに編集できるガントチャートのJavaScriptライブラリです。
センスの良いデザイン、わかりやすいユーザーインターフェースが魅力的です。

ただ、アップデートが停滞気味で、機能的にも足りない部分があるので、「frappe-gantt」を独自に機能拡張したライブラリを作成することにしました。

追加した機能は、以下のとおりです。

  • タスクの担当者入力
  • タスクの工数配分入力
  • タスクや進捗度の色の編集
  • タスクに入力した担当者 / 工数配分を基に、積み上げ工数グラフを表示

作成したJavaScriptライブラリを「Vue3.x」から利用して、WordPressの投稿にガントチャートを実装します。

実装したガントチャート

実装したガントチャートです。

初回は、本日の位置に[初期タスク]が1つ配置されます。
スクロールバーを本日の位置に動かしてください。
この状態から、ガントチャートを編集していきます。

次回以降は、前回の編集途中のガントチャートが自動的に読み込まれます。

・別のPCやブラウザを使った場合
・ブラウザのデータをクリアした場合
は、前回の編集途中のガントチャートや一時保存したガントチャートを読み込むことができなくなります。
重要なガントチャートは、ローカルファイルにダウンロードしてください。

キーボード操作が必要なため、スマートフォンやタブレットでは、正しく編集できません。

ガントチャートの編集方法

  • タスク情報を変更する
    タスクをダブルクリックすると、タスク情報を編集するダイアログが表示されます。
    ダイアログにタスク情報を入力し、OK ボタンを押します。

    タスク名だけは、入力が必須の項目です。

    タスクの詳細は、複数行テキスト、HTMLタグも入力できます。

    担当者は、そのタスクを担当する人の情報(名前やID、メールアドレスなど)を入力します。

    工数配分は、そのタスクに配分する工数の割合を入力します。

    プログレスの色 / タスクバーの色を指定したい場合は、色指定ボタン(小さい長方形   )を押し、カラーピッカーを起動して色を選びます。
    色指定ボタンを押すたびに、カラーピッカーの表示 / 非表示が切り替わります。
     
  • タスクの開始日 / 終了日を変更する
    タスクにマウスカーソルを合わせると、タスクの左端 / 右端にハンドルが表示されます。
    左端 / 右端のハンドルをドラッグし、タスクの開始日 / 終了日を変更します。

    タスクを左右にドラッグすると、開始日 / 終了日の間隔を維持したまま、タスクの日程を変更できます。
    [Shift]キーを押しながら左右にドラッグすると、移動方向は左右のみに固定され、上下の位置は変わりません。
     
  • タスクの進捗度を変更する
    タスクにマウスカーソルを合わせると、三角形のハンドルが表示されます。
    三角形のハンドルをドラッグし、タスクの進捗度を変更します。
     
  • タスクを追加する
    タスクを追加 ボタンを押すと、新規のタスク情報を入力するダイアログが表示されます。
    ダイアログにタスク情報を入力し、OK ボタンを押すと、新しいタスクが一番下に追加されます。

    タスク名だけは、入力が必須の項目です。
     
  • タスクを削除する
    タスクを右クリックすると、タスクの削除を確認するダイアログが表示されます。
    ダイアログの OK ボタンを押すと、選択したタスクが削除されます。
     
  • タスクの依存関係(親子関係)を変更する
    [Alt]キーを押したまま、「親タスク」をクリックします。
    赤い矢印が表示されます。
    その後、依存関係を設定したい「子タスク」をクリックします。
    「親タスク」から「子タスク」に矢印がつながり、依存関係が設定されます。

    既に、依存関係が設定されている場合は、依存関係が解除されます。
     
  • タスクの上下位置を変更する
    タスクを上下にドラッグすると、タスクの上下位置を変更できます。
    [Shift]キーを押しながら上下にドラッグすると、移動方向は上下のみに固定され、左右の位置は変わりません。

    「子タスク」を「親タスク」の上に移動することはできません。
    ドラッグ後のタスクの位置は、「親タスク」「子タスク」の上下関係を優先して調整されます。
     
  • ビューモードを変更する
    ボタンを押して、ビューモードを変更します。
     
  • ガントチャートをリセットする
    リセット ボタンを押すと、ガントチャートのリセットを確認するダイアログが表示されます。
    ダイアログの OK ボタンを押すと、ガントチャートを初期状態にリセットします。
     
  • ガントチャートを保存 / 読込む
    保存 ボタンを押すと、ガントチャートの保存を確認するダイアログが表示されます。
    ダイアログの OK ボタンを押すと、作成中のガントチャートを自分の使っているブラウザに一時的に保存します。

    読込み ボタンを押すと、ガントチャートの読込みを確認するダイアログが表示されます。
    ダイアログの OK ボタンを押すと、保存したガントチャートを読込みます。

    ブラウザを閉じても、保存したガントチャートはブラウザに残ります。
     
  • ガントチャートをダウンロード / アップロードする
    ダウンロード ボタンを押すと、作成中のガントチャートをローカルファイルにダウンロードできます。

    アップロード ボタンを押し、ダウンロードしたガントチャートファイルを指定すると、このファイルがアップロードされ、ガントチャートが更新されます。

工数グラフ

  • 工数グラフの表示 / 非表示を切り替える
    工数グラフ 表示  工数グラフ 非表示 ボタンで工数グラフの表示 / 非表示を切り替えることができます。
     
  • 工数グラフの見方
    工数グラフは、「ガントチャートの編集方法 – タスク情報を変更する」で入力した担当者ごとに、毎日の工数配分を積み上げたグラフです。
    工数グラフには、
     緑色の実線:工数配分の積み上げが、0%のライン
     赤色の点線:工数配分の積み上げが、100%のライン
    が表示されます。
    工数グラフが、100%のラインを越えている日は、その担当者の業務負荷がオーバーになっていることを表します。

    工数グラフをクリックすると、工数配分の元になっているタスクの情報がポップアップ表示されます。

    工数グラフをダブルクリックすると、「ガントチャートの編集方法 – タスク情報を変更する」と同じダイアログが表示され、タスク情報を直接編集できます。
     

まとめ

「frappe-gantt」を独自に機能拡張したJavaScriptライブラリを作成し、WordPressの投稿にガントチャートを実装しました。

ガントチャートを使うと、視覚的に業務計画を立てることができます。
また、進捗度も変更できるので、業務の進み具合いもビジュアルに把握しやすくなります。

タスクに担当者と工数配分を入力すれば、積み上げ工数グラフで、担当者ごとの毎日の業務負荷を確認できます。

以下のページは、少し広い画面でガントチャートを編集できます。
ちょっとした業務計画の作成に利用ください。

コメント