カテゴリー内の他の記事

React を使って、kintone にガントチャートとカンバンを表示しよう!

Index

はじめに

タスクやプロジェクトの管理で kintone を利用している方も多いと思います。
ガントチャートとカンバンの機能で kintone のデータを可視化できたら、より効率的にタスクを管理できます。

今回の記事は React を使って、ガントチャートとカンバンを kintone に表示するカスタマイズを紹介します。

完成イメージ

今回のカスタマイズを適用することで、kintone に登録したタスクのデータを、
次のように、ガントチャートとカンバンの形式で表示させることができます。

gantt_kanban.gif

できること

  • タスクをガントチャート形式で表示
    • レコード一覧画面では、すべてのタスクを表示します。
      gantt_chart_index.png
    • レコード詳細画面では、関連する親子タスクを表示します。

      gantt_chart_detail.png
    • ガントチャートで表示したときの機能の詳細は、次のとおりです。
      • タスクの「タイトル」「開始日付」「完了日付」などの情報をチャートに表示します。
      • タスクの「タイプ」によって、異なる色で各タスクのチャートを表示します。
      • 「親タスク ID」フィールドの登録で、タスクの親子関係を設定できます。親子関係はガントチャートの矢印で表示されます。
      • タスクのチャートをドラッグすることで、タスクの「開始日付」「完了日付」を変更できます。
      • タスクのチャートをダブルクリックした場合、該当タスクのレコード詳細画面に遷移します。
  • タスクをカンバン形式で表示
    • レコード一覧画面では、すべてのタスクを表示します。
      kanban.png
    • カンバンで表示したときの機能の詳細は、次のとおりです。
      • タスクの「タイトル」「担当者」「開始日付」「完了日付」「タイプ」などの情報をカンバンのカードに表示します。
      • 「ステータス」ごとに列を分けて、タスクを表示します。
      • タスクのカードをドラッグすることで、タスクの「ステータス」(列)を変更できます。
      • タスクの「タイプ」によって、異なる色で各タスクのラベルを表示します。
      • タスクのカードをクリックした場合、該当タスクのレコード詳細画面に遷移します。

アプリの準備

事前準備として、まずはガントチャートとカンバンを表示するための「タスク管理」アプリを作成しましょう。
「はじめから作成」からアプリを新規作成し、次のフィールドをアプリに追加してください。

フィールドの種類 フィールド名 フィールドコード  備考
ドロップダウン Type type タスクのタイプ
ドロップダウン Priority priority タスクの優先度、必須項目
ドロップダウン Status status タスクのステータス(カンバンの列)、必須項目
日付 Start startDate タスクの開始時間、必須項目
日付 End

endDate

タスクの完了時間、必須項目

ユーザー選択 Assignee

assignee

タスクの担当者

文字列(1行) Summary

summary

タスクのタイトル

文字列 (複数行) Detail

detail

詳細情報

数値 Parent Task

parent

親タスク ID

関連レコード一覧 Subtasks

subtasks

子タスク ID

スペース  

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

今回のカスタマイズの適用には、この4つのファイルを利用します。

「SAMPLE-ganttchart-kanban」の「src」フォルダ内に、ビルド前のファイルがあります。
ソースコードに変更を加えたい方は、そちらのファイルを編集し、ビルドした上で環境に適用してください。
ビルド作業の仕方については「webpack入門 ~Babel,Polyfillを使って快適ES6ライフ~」記事をご参照ください。

カスタマイズの適用

「タスク管理」アプリの設定画面を開き、[設定]タブの[JavaScript / CSSでカスタマイズ]をクリックします。
以下の画像を参考に、先ほど生成された JavaScript、CSS ファイルを「PC用のJavaScriptファイル」、「PC用のCSSファイル」からアップロードします。
app_setting.png

設定を保存したら、アプリを更新します。

動作確認

次のサンプルレコードのように、ガントチャートとカンバンに表示させたいデータを「タスク管理」アプリに登録します。

sample_data.png

レコードを登録したら、レコードの一覧画面と詳細画面を表示します。
完成イメージのようにガントチャート、カンバンが表示されれば成功です!

サンプルコードの解説

サンプルコードの解説をしていきます。
今回のカスタマイズは、
ガントチャートとカンバンを kintone アプリに表示する処理に加え、
該当アプリのデータの取得/更新、表示を切り替えるボタンの
生成などの処理があります。

今回のプログラムは React と TypeScript を利用しています。
React と TypeScript の使い方について確認したい方は、次の記事を合わせてご覧ください。
目指せ!JavaScriptカスタマイズ中級者(5)〜TypeScript導入編〜
目指せ!JavaScriptカスタマイズ中級者(6)〜React導入編〜

アプリのデータを取得/更新する処理、ボタンを生成する処理

KintoneAppRepository.tsx

実際に kintone からレコードを取得、更新する処理を定義しています。

App.tsx

ガントチャート、カンバンの表示を切り替えるボタンを生成する処理です。
デフォルトでは、カンバンの画面を表示する設定になっています。

AddSub.tsx

子タスクのレコードを追加するボタンを生成する処理です。

index.tsx

画面にボタンやコンポーネントを表示します。
  • レコード一覧画面
    • ガントチャートとカンバンを切り替えるボタン
  • レコード詳細画面
    • 開いたレコードに関連する、親子タスクのガントチャート
    • 子タスクを追加するボタン

ガントチャートとカンバンを生成する処理

GanttCharts.tsx

ガントチャートで表示するときのコンポーネントを定義しています。
このコンポーネントでは、次の処理ができます。
  • レコードのデータをガントチャートで表示する
  • タスクをドラッグ&ドロップして、「開始日付」「完了日付」を更新する
  • タスクをダブルクリックして、レコードの詳細画面に遷移する

GanttViewSwitcher.tsx

ガントチャートの ViewMode を調整するラジオボタンを生成する処理です。

Kanban.tsx

カンバンで表示するときのコンポーネントを定義しています。
このコンポーネントでは、次の処理ができます。
  • カンバンのカードをドラッグ&ドロップして、ステータスを更新する
  • カードをクリックして、レコードの詳細画面に遷移する

Card.tsx

カンバンのカードを生成する処理と、各タスクの担当者の情報をカードに表示する処理です。

おわりに

今回の記事は、React を使ってガントチャートとカンバンを kintone に表示するカスタマイズを紹介しました。
統計ダッシュボードや、レーダーチャートなどを kintone に表示するカスタマイズを紹介する記事もありますので、興味ある方はぜひ確認してみてください。

この記事で利用しているライブラリ

本Tipsは、2022年6月版 kintoneで確認したものになります。

 

記事に関するフィードバック

記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。

サインインしてコメントを残してください。