環境
このページで使用しているフレームワークやライブラリのバージョンは、以下のとおりです。
| vue.js | 3.2.31 |
| vue3-sfc-loader | 0.8.4 |
| frappe-gantt | 0.6.1をベースに機能拡張 |
| moment | 2.29.3 |
| sweetalert2 | 11.4.17 |
| vue-select | 4.0.0-beta.3 |
| @lk77/vue3-color | 3.0.6 |
| encoding-japanese | 2.0.0 |
frappe-ganttとは？
「frappe-gantt」は、マウスでドラッグしてグラフィカルに編集できるガントチャートのJavaScriptライブラリです。
センスの良いデザイン、わかりやすいユーザーインターフェースが魅力的です。
ただ、アップデートが停滞気味で、機能的にも足りない部分があるので、「frappe-gantt」を独自に機能拡張したライブラリを作成することにしました。
追加した機能は、以下のとおりです。
- タスクの担当者入力
- タスクの工数配分入力
- タスクや進捗度の色の編集
- タスクに入力した担当者 / 工数配分を基に、積み上げ工数グラフを表示
作成したJavaScriptライブラリを「Vue3.x」から利用して、WordPressの投稿にガントチャートを実装します。
実装したガントチャート
実装したガントチャートです。
初回は、本日の位置に［初期タスク］が1つ配置されます。
スクロールバーを本日の位置に動かしてください。
この状態から、ガントチャートを編集していきます。
次回以降は、前回の編集途中のガントチャートが自動的に読み込まれます。
ガントチャートの編集方法
-
タスク情報を変更する
タスクをダブルクリックすると、タスク情報を編集するダイアログが表示されます。
ダイアログにタスク情報を入力し、OK ボタンを押します。
タスク名だけは、入力が必須の項目です。
タスクの詳細は、複数行テキスト、HTMLタグも入力できます。
担当者は、そのタスクを担当する人の情報（名前やID、メールアドレスなど）を入力します。
工数配分は、そのタスクに配分する工数の割合を入力します。
プログレスの色 / タスクバーの色を指定したい場合は、色指定ボタン（小さい長方形 ）を押し、カラーピッカーを起動して色を選びます。
色指定ボタンを押すたびに、カラーピッカーの表示 / 非表示が切り替わります。
-
タスクの開始日 / 終了日を変更する
タスクにマウスカーソルを合わせると、タスクの左端 / 右端にハンドルが表示されます。
左端 / 右端のハンドルをドラッグし、タスクの開始日 / 終了日を変更します。
タスクを左右にドラッグすると、開始日 / 終了日の間隔を維持したまま、タスクの日程を変更できます。
［Shift］キーを押しながら左右にドラッグすると、移動方向は左右のみに固定され、上下の位置は変わりません。
-
タスクの進捗度を変更する
タスクにマウスカーソルを合わせると、三角形のハンドルが表示されます。
三角形のハンドルをドラッグし、タスクの進捗度を変更します。
-
タスクを追加する
ボタンを押すと、新規のタスク情報を入力するダイアログが表示されます。
ダイアログにタスク情報を入力し、OK ボタンを押すと、新しいタスクが一番下に追加されます。
タスク名だけは、入力が必須の項目です。
-
タスクを削除する
タスクを右クリックすると、タスクの削除を確認するダイアログが表示されます。
ダイアログの OK ボタンを押すと、選択したタスクが削除されます。
-
タスクの依存関係（親子関係）を変更する
［Alt］キーを押したまま、「親タスク」をクリックします。
赤い矢印が表示されます。
その後、依存関係を設定したい「子タスク」をクリックします。
「親タスク」から「子タスク」に矢印がつながり、依存関係が設定されます。
既に、依存関係が設定されている場合は、依存関係が解除されます。
-
タスクの上下位置を変更する
タスクを上下にドラッグすると、タスクの上下位置を変更できます。
［Shift］キーを押しながら上下にドラッグすると、移動方向は上下のみに固定され、左右の位置は変わりません。
「子タスク」を「親タスク」の上に移動することはできません。
ドラッグ後のタスクの位置は、「親タスク」「子タスク」の上下関係を優先して調整されます。
を有効にした状態でタスクを上下にドラッグすると、上下位置を自由に変更できます。
この状態では、「親タスク」「子タスク」の関係も無視され、タスクを移動した後の上下位置の整列も行いません。
-
ビューモードを変更する
ボタンを押して、ビューモードを変更します。
-
ガントチャートをリセットする
ボタンを押すと、ガントチャートのリセットを確認するダイアログが表示されます。
ダイアログの OK ボタンを押すと、ガントチャートを初期状態にリセットします。
-
ガントチャートを保存 / 読込む
ボタンを押すと、ガントチャートの保存を確認するダイアログが表示されます。
ダイアログの OK ボタンを押すと、作成中のガントチャートを自分の使っているブラウザに一時的に保存します。
ボタンを押すと、ガントチャートの読込みを確認するダイアログが表示されます。
ダイアログの OK ボタンを押すと、保存したガントチャートを読込みます。
ブラウザを閉じても、保存したガントチャートはブラウザに残ります。
-
ガントチャートをダウンロード / アップロードする
ボタンを押すと、作成中のガントチャートをローカルファイルにダウンロードできます。
ボタンを押し、ダウンロードしたガントチャートファイルを指定すると、このファイルがアップロードされ、ガントチャートが更新されます。
工数グラフ
-
タスク情報を変更する
タスクをダブルクリックすると、タスク情報を編集するダイアログが表示されます。
ダイアログにタスク情報を入力し、OK ボタンを押します。
タスク名だけは、入力が必須の項目です。
タスクの開始日時 / 終了日時のボックスをクリックするとカレンダー / 時計のユーザーインターフェースが表示され、開始日時 / 終了日時を変更できます。
タスクの詳細は、複数行テキスト、HTMLタグも入力できます。
担当者は、そのタスクを担当する人の情報（名前やID、メールアドレスなど）を入力します。
工数配分は、そのタスクに配分する工数の割合を入力します。
プログレスの色 / タスクバーの色を指定したい場合は、色指定ボタン（小さい長方形 ）を押し、カラーピッカーを起動して色を選びます。
色指定ボタンを押すたびに、カラーピッカーの表示 / 非表示が切り替わります。
-
タスクの開始日 / 終了日を変更する
タスクにマウスカーソルを合わせると、タスクの左端 / 右端にハンドルが表示されます。
左端 / 右端のハンドルをドラッグし、タスクの開始日 / 終了日を変更します。
タスクを左右にドラッグすると、開始日 / 終了日の間隔を維持したまま、タスクの日程を変更できます。
［Shift］キーを押しながら左右にドラッグすると、移動方向は左右のみに固定され、上下の位置は変わりません。
タスク情報を編集するダイアログでも、カレンダー / 時計のユーザーインターフェースを使って、タスクの開始日時 / 終了日時を変更できます。
-
タスクの進捗度を変更する
タスクにマウスカーソルを合わせると、三角形のハンドルが表示されます。
三角形のハンドルをドラッグし、タスクの進捗度を変更します。
-
タスクを追加する
ボタンを押すと、新規のタスク情報を入力するダイアログが表示されます。
ダイアログにタスク情報を入力し、OK ボタンを押すと、新しいタスクが一番下に追加されます。
タスク名だけは、入力が必須の項目です。
-
タスクを削除する
タスクを右クリックすると、タスクの削除を確認するダイアログが表示されます。
ダイアログの OK ボタンを押すと、選択したタスクが削除されます。
-
タスクの依存関係（親子関係）を変更する
［Alt］キーを押したまま、「親タスク」をクリックします。
赤い矢印が表示されます。
その後、依存関係を設定したい「子タスク」をクリックします。
「親タスク」から「子タスク」に矢印がつながり、依存関係が設定されます。
既に、依存関係が設定されている場合は、依存関係が解除されます。
-
タスクの上下位置を変更する
タスクを上下にドラッグすると、タスクの上下位置を変更できます。
［Shift］キーを押しながら上下にドラッグすると、移動方向は上下のみに固定され、左右の位置は変わりません。
「子タスク」を「親タスク」の上に移動することはできません。
ドラッグ後のタスクの位置は、「親タスク」「子タスク」の上下関係を優先して調整されます。
を有効にした状態でタスクを上下にドラッグすると、上下位置を自由に変更できます。
この状態では、「親タスク」「子タスク」の関係も無視され、タスクを移動した後の上下位置の整列も行いません。
-
ビューモードを変更する
ボタンを押して、ビューモードを変更します。
-
ガントチャートをリセットする
ボタンを押すと、ガントチャートのリセットを確認するダイアログが表示されます。
ダイアログの OK ボタンを押すと、ガントチャートを初期状態にリセットします。
-
ガントチャートを保存 / 読込む
ボタンを押すと、ガントチャートの保存を確認するダイアログが表示されます。
ダイアログの OK ボタンを押すと、作成中のガントチャートを自分の使っているブラウザに一時的に保存します。
ボタンを押すと、ガントチャートの読込みを確認するダイアログが表示されます。
ダイアログの OK ボタンを押すと、保存したガントチャートを読込みます。
ブラウザを閉じても、保存したガントチャートはブラウザに残ります。
-
ガントチャートをダウンロード / アップロードする
ボタンを押すと、作成中のガントチャートをローカルファイルにダウンロードできます。
ボタンを押し、ダウンロードしたガントチャートファイルを指定すると、このファイルがアップロードされ、ガントチャートが更新されます。
まとめ
「frappe-gantt」を独自に機能拡張したJavaScriptライブラリを作成し、WordPressの投稿にガントチャートを実装しました。
ガントチャートを使うと、視覚的に業務計画を立てることができます。
また、進捗度も変更できるので、業務の進み具合いもビジュアルに把握しやすくなります。
タスクに担当者と工数配分を入力すれば、積み上げ工数グラフで、担当者ごとの毎日の業務負荷を確認できます。
以下のページは、少し広い画面でガントチャートを編集できます。
ちょっとした業務計画の作成に利用ください。
コメント