はじめに
今回の記事は React を使って、ガントチャートとカンバンを kintone に表示するカスタマイズを紹介します。
デモ環境
こちらのデモ環境から実際に動作を確認できます。
https://dev-demo.cybozu.com/k/339/
デモ環境アカウントとパスワードは、サインイン後にこちらのページでご確認ください。
完成イメージ
今回のカスタマイズを適用することで、kintone に登録したタスクのデータを、
次のように、ガントチャートとカンバンの形式で表示させることができます。
できること
- タスクをガントチャート形式で表示
- レコード一覧画面では、すべてのタスクを表示します。
-
レコード詳細画面では、関連する親子タスクを表示します。
- ガントチャートで表示したときの機能の詳細は、次のとおりです。
- タスクの「タイトル」「開始日付」「完了日付」などの情報をチャートに表示します。
- タスクの「タイプ」によって、異なる色で各タスクのチャートを表示します。
- 「親タスク ID」フィールドの登録で、タスクの親子関係を設定できます。親子関係はガントチャートの矢印で表示されます。
- タスクのチャートをドラッグすることで、タスクの「開始日付」「完了日付」を変更できます。
- タスクのチャートをダブルクリックした場合、該当タスクのレコード詳細画面に遷移します。
- レコード一覧画面では、すべてのタスクを表示します。
- タスクをカンバン形式で表示
- レコード一覧画面では、すべてのタスクを表示します。
- カンバンで表示したときの機能の詳細は、次のとおりです。
- タスクの「タイトル」「担当者」「開始日付」「完了日付」「タイプ」などの情報をカンバンのカードに表示します。
- 「ステータス」ごとに列を分けて、タスクを表示します。
- タスクのカードをドラッグすることで、タスクの「ステータス」（列）を変更できます。
- タスクの「タイプ」によって、異なる色で各タスクのラベルを表示します。
- タスクのカードをクリックした場合、該当タスクのレコード詳細画面に遷移します。
- レコード一覧画面では、すべてのタスクを表示します。
アプリの準備
事前準備として、まずはガントチャートとカンバンを表示するための「タスク管理」アプリを作成しましょう。
「はじめから作成」からアプリを新規作成し、次のフィールドをアプリに追加してください。
| フィールドの種類 | フィールド名 | フィールドコード | 備考 |
|---|---|---|---|
| ドロップダウン | Type | type | タスクのタイプ |
| ドロップダウン | Priority | priority | タスクの優先度、必須項目 |
| ドロップダウン | Status | status | タスクのステータス（カンバンの列）、必須項目 |
| 日付 | Start | startDate | タスクの開始時間、必須項目 |
| 日付 | End |
endDate |
タスクの完了時間、必須項目 |
| ユーザー選択 | Assignee |
assignee |
タスクの担当者 |
| 文字列（1行） | Summary |
summary |
タスクのタイトル |
| 文字列 (複数行) | Detail |
detail |
詳細情報 |
| 数値 | Parent Task |
parent |
親タスク ID |
| 関連レコード一覧 | Subtasks |
subtasks |
同じ親タスクのレコードを表示します。
|
| スペース |
addSub |
子タスク 追加ボタン |
サンプルコード
サンプルコードは、GitHub に公開されています。
https://github.com/kintone-samples/SAMPLE-ganttchart-kanban
サンプルコードのリポジトリを clone し、「SAMPLE-ganttchart-kanban」ディレクトリで次のコマンドを実行してください。
npm install
npm run build
コマンドを実行したら、「dist」フォルダの中にファイルが生成されます。
- 「js」以下
- app.js
- commons.js
- 「css」以下
- app.css
- commons.css
今回のカスタマイズの適用には、この４つのファイルを利用します。
ソースコードに変更を加えたい方は、そちらのファイルを編集し、ビルドした上で環境に適用してください。
ビルド作業の仕方については「webpack入門 ~Babel,Polyfillを使って快適ES6ライフ~」記事をご参照ください。
カスタマイズの適用
「タスク管理」アプリの設定画面を開き、[設定]タブの[JavaScript / CSSでカスタマイズ]をクリックします。
以下の画像を参考に、先ほど生成された JavaScript、CSS ファイルを「PC用のJavaScriptファイル」、「PC用のCSSファイル」からアップロードします。
設定を保存したら、アプリを更新します。
動作確認
次のサンプルレコードのように、ガントチャートとカンバンに表示させたいデータを「タスク管理」アプリに登録します。
レコードを登録したら、レコードの一覧画面と詳細画面を表示します。
完成イメージのようにガントチャート、カンバンが表示されれば成功です！
サンプルコードの解説
サンプルコードの解説をしていきます。
今回のカスタマイズは、ガントチャートとカンバンを kintone アプリに表示する処理に加え、
該当アプリのデータの取得／更新、表示を切り替えるボタンの生成などの処理があります。
今回のプログラムは React と TypeScript を利用しています。
React と TypeScript の使い方について確認したい方は、次の記事を合わせてご覧ください。
目指せ！JavaScriptカスタマイズ中級者（5）〜TypeScript導入編〜
目指せ！JavaScriptカスタマイズ中級者（6）〜React導入編〜
アプリのデータを取得／更新する処理、ボタンを生成する処理
KintoneAppRepository.tsx
App.tsx
AddSub.tsx
index.tsx
- レコード一覧画面
- ガントチャートとカンバンを切り替えるボタン
- レコード詳細画面
- 開いたレコードに関連する、親子タスクのガントチャート
- 子タスクを追加するボタン
ガントチャートとカンバンを生成する処理
GanttCharts.tsx
- レコードのデータをガントチャートで表示する
- タスクをドラッグ＆ドロップして、「開始日付」「完了日付」を更新する
- タスクをダブルクリックして、レコードの詳細画面に遷移する
GanttViewSwitcher.tsx
Kanban.tsx
- カンバンのカードをドラッグ＆ドロップして、ステータスを更新する
- カードをクリックして、レコードの詳細画面に遷移する
Card.tsx
おわりに
今回の記事は、React を使ってガントチャートとカンバンを kintone に表示するカスタマイズを紹介しました。
統計ダッシュボードや、レーダーチャートなどを kintone に表示するカスタマイズを紹介する記事もありますので、興味ある方はぜひ確認してみてください。
この記事で利用しているライブラリ
- gantt-task-react version 0.2.2
- react-trello version 2.2.11
- ant-design version 4.7.0
- string-to-color version 2.2.2
- @kintone/rest-api-client version 2.0.32
- @kintone/dts-gen version5.0.11
本Tipsは、2022年6月版 kintoneで確認したものになります。
基礎的なところで申し訳ありません。
関連レコード一覧 Subtasks subtasks 子タスク ID
こちちらの関連レコード内設定を記載いただけますでしょうか？
oshin shakudo 様
developer network 運営チームです。
フィードバックありがとうございます。
関連レコード一覧の設定情報について、記事中に追記しました。
今後ともよろしくお願いいたします。
恐れ入ります。
デモ環境を確認したかったのですが、データがないようなので試せませんでした。
データの追加権限もないようです。
ご確認いただけますでしょうか？
ryo okazaki 様
お世話になっております。cybozu developer network 運営局です。
ご指摘いただきありがとうございます。
該当アプリにレコードを追加できるように設定いたしました。
お手数をおかけして恐縮ですが、再度ご確認いただけないでしょうか？
ご確認のほど、よろしくお願いいたします。
迅速な対応ありがとうございます。
無事に確認できました。