カテゴリー内の他の記事

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

Index

概要

タスクやプロジェクトの管理で、スプレッドシートなどのツールを利用している方も多いと思います。
ガントチャートとカンバンの機能でデータを可視化できたら、より効率的にタスクを管理できます。
今回の記事は React を使って、ガントチャートとカンバンを Web データベースの kintone に表示するカスタマイズを紹介します。

できること

  • ドラッグ&ドロップで簡単に操作できる
    • タスクの日付やステータスの変更を、ドラッグ&ドロップでインタラクティブに反映できます。
      gantt_kanban.gif
  • カンバンでステータス別の状況を可視化できる
    • ステータスごとに列を分けて、タスクの進捗を見える化できます。
      kanban.png
  • ガントチャートで親子タスクも直感的に管理できる
    • タスクの親子関係を設定できます。親子関係は矢印で、視覚的に分かりやすく表示されます。
      gantt_detail.png

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

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

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

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

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

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

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

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

記事コメントは受け付けていません。