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

Index

• はじめに
• デモ環境
• 完成イメージ
• アプリの準備
• サンプルコード
• サンプルコードの解説
• おわりに

はじめに

タスクやプロジェクトの管理で kintone を利用している方も多いと思います。

ガントチャートとカンバンの機能で kintone のデータを可視化できたら、より効率的にタスクを管理できます。

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

デモ環境

こちらのデモ環境から実際に動作を確認できます。
https://dev-demo.cybozu.com/k/339/

デモ環境の利用は、事前に cybozu developer network のメンバー登録が必要です。画面右上の「サインイン」ボタンよりご登録ください。
デモ環境アカウントとパスワードは、サインイン後にこちらのページでご確認ください。

完成イメージ

今回のカスタマイズを適用することで、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	同じ親タスクのレコードを表示します。 参照するアプリ：このアプリ 表示するレコードの条件：Parent Task＝Parent Task 表示するフィールド：レコード番号、Summary、Assignee
スペース		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

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

「SAMPLE-ganttchart-kanban」の「src」フォルダ内に、ビルド前のファイルがあります。
ソースコードに変更を加えたい方は、そちらのファイルを編集し、ビルドした上で環境に適用してください。
ビルド作業の仕方については「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

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

App.tsx

ガントチャート、カンバンの表示を切り替えるボタンを生成する処理です。

デフォルトでは、カンバンの画面を表示する設定になっています。

AddSub.tsx

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

index.tsx

画面にボタンやコンポーネントを表示します。

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

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

GanttCharts.tsx

ガントチャートで表示するときのコンポーネントを定義しています。

このコンポーネントでは、次の処理ができます。

• レコードのデータをガントチャートで表示する
• タスクをドラッグ＆ドロップして、「開始日付」「完了日付」を更新する
• タスクをダブルクリックして、レコードの詳細画面に遷移する

GanttViewSwitcher.tsx

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

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で確認したものになります。