はじめに

多くのご要望にお応えする形で、「ガントチャートをメニュー位置に表示する」を 2021年7月のアップデートで追加させていただきました。


こちらの記事では、「ガントチャートをメニュー位置に表示する」の基本的な使い方とともに、少し使い勝手を向上させるためのコツも合わせてご紹介します。


カスタマイズのイメージを掴んで頂く為に完成イメージを示します。以下のようなガントチャートを作成いただけます。




想定するアプリ


■使用するアプリ

すぐにお試しいただける例として、kintone アプリストアにある「ToDo」アプリをそのまま使用します。


■使用するフィールド

新たにフィールドを追加していただく必要はありませんが、最初のカスタマイズで使用するのは以下のフィールドです。


フィールドタイプ

フィールド名 

 フィールドコード

文字列(1行)

ToDo名

To_Do

日時

開始日

From

日時

終了日

To



■使用する一覧

ガントチャートを表示するための一覧を新たに作成します。今回は「ガントチャート」という一覧名で以下のような一覧を作成しておきます。一覧に表示するフィールドは自由に設定いただいて構いません。


■使用するレコード

アプリストアから追加した Todo アプリにはレコードが入っていないため、例として以下のようなレコードを kintone に予め登録しておきます。


カスタマイズ作成手順


単純にガントチャートを表示するだけのカスタマイズ自体は非常にシンプルで以下の 2 アクションで作成が可能です。



それぞれのアクションについて見ていきましょう。


まず、アクション:1 で、ガントチャートに表示したいレコードを用意します。


今回の例では「全レコードを取得する」を使用していますが、条件で絞り込んだレコードのみをガントチャートに表示したいときには「キーを指定してレコードを取得する」や「クエリで条件を指定してレコードを取得する」などを使用することも可能です。


また、条件は「一覧画面を表示した時」に加えて追加の条件として「現在の一覧が指定の一覧ならば」を設定しています。後ほど注意点・コツにて詳しく記載しますが、「一覧画面を表示した時」のみを使って常時動く設定にはせずに「現在の一覧が指定の一覧ならば」などを使って、特定条件下でのみ動くようにすることを強く推奨します。


続いて、アクション 2 でガントチャートを表示する設定です。


条件は「他のアクションの実行が完了した時」です。

やること「ガントチャートをメニュー位置に表示する」で設定すべきパラメータとその意味を以下に記載します。


パラメータ名

設定例

設定すべき内容

場所

一覧画面メニューの下側

ガントチャートを表示する位置を指定します。


一覧画面メニューの下側、レコード詳細メニューの上側が選択できます。今回は一覧画面メニューの下側を選択します。

チャートのタイトル

(設定無し)

ガントチャートのタイトルとして表示する内容を設定します


今回は設定しません。

レコード

1

ガントチャートに表示したいレコードのアクション番号を指定します。該当のレコードは予め取得しておく必要があります。


今回は、アクション:1 で取得した全レコードのガントチャートを表示するため、「1」を指定しています。

セクション

(設定無し)

ガントチャートを複数のセクションに区切って表示するときに指定します。


今回は設定しません。

タイトル

ToDo名

ガントチャート内で表示するタイトルとなるフィールドを指定します。

開始日

開始日

ガントチャートの開始日となるフィールドを指定します

終了日

終了日

ガントチャートの終了日となるフィールドを指定します

クリックしたときの動作

別タブで詳細画面に遷移

ガントチャート内で特定のレコードをクリックした際の動作を指定します。


デフォルト値は「同じタブで詳細画面に遷移」ですが、今回は「別タブで詳細画面に遷移」に変更します。

その他、詳細画面ではなく編集画面に直接遷移してレコードを編集することも可能です。



以上で設定は完了です。該当の一覧画面を開くと、以下画像左側のようなガントチャートが表示されるかと思います。また、クリックすると右側のように詳細画面が別タブで開きます。



より便利な使い方

セクションによって表示を区切る

先程は設定していなかったパラメータ「セクション」を使うと、ガントチャート内で表示する領域を区切ることができます。


注意点:セクション名として指定したフィールドでは使用できない文字があります。禁則文字を確認のうえ、セクションとして設定するフィールドを指定してください。



例として先ほどのデータに以下のラジオボタンを追加してみました。



各レコードは以下のように変更します。



そして、カスタマインでは「ガントチャートをメニュー位置に表示する」のパラメータ「セクション」に「タスク種別」を指定します。



以上で設定は完了です。ガントチャートが以下のようにセクションで区切って表示されるかと思います。


レコードを表示せずにガントチャートだけを表示する

ここまでのカスタマイズはレコードの上部にガントチャートを表示していましたが、カスタマイズビューを使用するとレコードを表示させずにガントチャートのみを表示することも可能です。


まず、kintone の一覧でカスタマイズビューを作成しておきます。



続いて、この一覧で表示されるようにカスタマイズを作成します。




これで、以下のようにレコードを表示せずにガントチャートのみを表示することが可能です。



注意点・制約

カスタマイズの条件について

カスタマイズ作成時の説明にも記載しましたが、多くのユーザーが毎日必ず利用するようなアプリの一覧画面で、毎回大量のレコードを取得して表示するようなカスタマイズはお勧めしません。


そのようなカスタマイズを行った場合、一覧画面を開くたびにレコードの取得処理が行われるため結果として
 ・kintone の API 利用回数制限を越えてしまう

 ・カーソル API の同時利用数制限を越えてしまう
などの問題が発生する可能性があります。


そのため、常に動いてしまう「一覧画面を表示した時」のみで動く設定や、一番上の一覧で動く設定は行わないことを強く推奨します。二番目以降の一覧を開いたときに動く設定にする、ボタンを設置してボタンが押された時に動く設定にするなどで作成してください。



表示内容の変更について

ガントチャートに表示する色など見た目の変更はできません。


また、表示期間は該当のレコードが存在する期間に応じて、横幅が自動的に調整されます。

例えば、複数年に渡る Todoと1週間程度の Todo が混在する場合、以下のように最長の期間に合わせて横幅が調整されます。


 

ガントチャート内で表示される期間を調整する機能はありませんので、クエリなどを使用して指定した期間内のレコードのみを取得する、などのカスタマイズをご検討ください。

 

 

 

 

まとめ

いかがでしたでしょうか。今回のカスタマイズでは一覧画面にガントチャートを表示する例でご紹介しましたが、テーブル内のデータを利用して詳細画面にガントチャートを表示することも可能です。


設定としては「テーブル行をレコードとして取得する」を使って、たとえばこのような形になります。



 

タスク管理やスケジュール管理などで様々なアプリで是非ご活用ください。