kintoneでカンバン形式のタスク管理を使う場合、有料のプラグインを使うか、無料の場合はjava scriptでコードを作成する必要があります。
前者のプラグインを使う場合はArcesさんのプラグインを使うのが良いかと思いますが、今回はcybozu developer network内にて公開されているツールをカスタマイズして「ちょっと便利」にしちゃおうと思います。
無料でkintoneにガントチャートとカンバンを設置する方法
手っ取り早く進めていきましょう。
無料でカンバンを設置する方法は以下のリンク先を確認ください。
https://cybozudev.zendesk.com/hc/ja/articles/7505492467225
kintoneアプリの準備
まずはアプリの準備として、以下のフォームを作成しておくことが必要です。
| フィールドの種類 | フィールド名 | フィールドコード | 備考 |
|---|---|---|---|
| ドロップダウン | 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
GITHUBを使っていない方は、緑色の「code」ボタンを押して「Download ZIP」にてZIP形式のファイルをダウンロードし、ローカル環境で解凍していただければ使用可能です。
GITHUBを使っている方は、URLをコピーし、cloneして使用しましょう。
続いて「SAMPLE-ganttchart-kanban」ディレクトリで次のコマンドを実行してください。
npm install
npm run buildコマンドを実行したら、「dist」フォルダの中にファイルが生成されます。
- 「js」以下
- app.js
- commons.js
- 「css」以下
- app.css
- commons.css
これらをkintoneのアプリに登録することでガントチャートとカンバンが使用できるようになります。
【課題】カンバンの見た目が若干不親切
cybozu developer network内の画像を見ていただければと思いますが、以下の点がちょっとだけ残念なポイントです。
- 担当者の名前が小さすぎて見づらい
- 担当者の背景色が全員同じで分かりにくい
なので、これらのポイントを修正して見やすい状態にしてみたいと思います。
課題を解決して見やすいカンバンにする
①コードの修正をする
今回手入れをするファイルは以下の1ファイルのみです。
- SAMPLE-ganttchart-kanban\src\components\Card.tsx
修正箇所①
30行目にアイコンの背景色を設定している箇所があります。
backgroundColor: '#15dad2',「#15dad2」というカラーコードを指定しています。
これを、ユーザー毎に個別の色を設定したいと思います。
今回の方法は、ユーザー名をハッシュ化し、数値化し、その数字をRGBに変換する方法となります。
いくつかポイントがあります。
- R・G・Bはそれぞれ16進数で00～FFまでを指定する
- 白(#FFFFFF)に近い色は使わない(文字が白なので)
ということで、ユーザー名をハッシュ化し、数値化し、その数字をR/G/Bそれぞれ異なるパラメーターで掛け算/割り算し、16進数に直すコードを書いて実現したいと思います。
backgroundColor: '#' + String(('00' + (((Array.from(element.name).map(ch => ch.charCodeAt(0)).reduce((a, b) => a+b)) * 33 % 200)).toString(16)).slice( -2 )) + String(('00' + (((Array.from(element.name).map(ch => ch.charCodeAt(0)).reduce((a, b) => a+b)) * 34 % 200)).toString(16)).slice( -2 )) + String(('00' + (((Array.from(element.name).map(ch => ch.charCodeAt(0)).reduce((a, b) => a+b)) * 35 % 200)).toString(16)).slice( -2 )),長くなりましたが、先頭にカラーコードの#を置き、R用のコード「String(('00' + (((Array.from(element.name).map(ch => ch.charCodeAt(0)).reduce((a, b) => a+b)) * 33 % 200)).toString(16)).slice( -2 ))」を入れています。
ユーザー名をハッシュ化し、数値化したデータに対して33倍(なんでもOK)し、200で割った余り(FFに近い数字を排除)にし、0埋め2桁の16進数にしているコードです。
R/G/Bそれぞれの数字がばらけるように、元データを33倍/34倍/35倍していますが、この辺りについては各々で好きな数字を使ってもらって構いません。
修正箇所②
ユーザー名がすべて表示されているため、34行目のコードを書き替えて1文字目だけ表示する様にします。
{element.name.charAt(0)}.charAt(0)を入れることで、1文字目だけを指定しています。
②ビルドしてコードを再生成する
以下のコードをターミナルに入力して実行します。
npm run build「dist」フォルダに生成されたファイルをkintoneに登録してください。
まとめ
cybozu developer networkにあがっているサンプルコードを一部改修することで、とても見やすいアプリに仕上がったかと思います。
kintoneを運用するうえで、便利なプラグインはいくつもありますが、すべて有料で導入していくわけにはいきません。
無料のものを活用する中でも、カスタマイズが出来るものは積極的に使っていくべきです。
コードが分からない方も、本記事の通りにやってもらえれば問題なく使えると思いますので、ぜひお試しください。
