インタラクティブなデータ可視化！Reactでガントチャート&カンバンを作る

概要

タスクやプロジェクトの管理で、スプレッドシートなどのツールを利用している方も多いと思います。

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

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

できること

• ドラッグ＆ドロップで簡単に操作できる
  • タスクの日付やステータスの変更を、ドラッグ＆ドロップでインタラクティブに反映できます。
    
    

• カンバンでステータス別の状況を可視化できる
  • ステータスごとに列を分けて、タスクの進捗を見える化できます。
    
• ガントチャートで親子タスクも直感的に管理できる
  • タスクの親子関係を設定できます。親子関係は矢印で、視覚的に分かりやすく表示されます。
    
    

カスタマイズの設定方法とサンプルプログラムは、次のボタンからご確認ください。

設定方法とサンプルプログラムをみる

Web データベースとしての kintone

今回の連携でデータベースとして利用したのは、kintone というサービスです。
複雑なシステム構築いらず、データベース、ワークフロー、コミュニケーションなどの機能を備えながら、豊富な API も用意されているクラウドサービスになります。
今回の例のように、データベースとしてデータの管理を実現しながら、ガントチャートやカンバンなどの機能も、カスタマイズで柔軟に追加できます。

kintoneの機能についてもっと知りたい方は「開発プラットフォームとしてのkintone」をご覧ください。
1年間無料の「開発者ライセンス」もご用意しておりますので、ぜひご利用ください。

開発者ライセンスを申し込む