はじめに
この記事では、「ガントチャートをメニュー位置に表示する」の基本的な使い方とともに、少し使い勝手を向上させるためのコツも合わせてご紹介します。
カスタマイズのイメージを掴んで頂く為の完成イメージはこちらになります。
このように、やること「ガントチャートをメニュー位置に表示する」を使用すると、kintoneでガントチャートを作成いただけますので、ぜひお試しください！
今回のカスタマイズで用いるアプリ
使用するアプリ
すぐにお試しいただける例として、kintone アプリストアにある「To Do」アプリをそのまま使用します。
使用するフィールド
※フィールド名とフィールドコードは同じものを指定します
※本カスタマイズに影響のあるフィールドのみ記載しています
使用する一覧
ガントチャートを表示するための一覧を新たに作成します。今回は「ガントチャート」という一覧名で以下のような一覧を作成しておきます。
使用するレコード
アプリストアから追加した To Do アプリにはレコードが入っていないため、例として以下のようなレコードを kintone に予め登録しておきます。
カスタマイズ作成手順
単純にガントチャートを表示するだけのカスタマイズは非常にシンプルで、以下の 2 アクションで作成が可能です。
それぞれのアクションについて具体的に見ていきましょう。
ガントチャートに表示したいレコードを準備する
まず、ガントチャートに表示したいレコードを予め取得します。
今回の例では、やること「全レコードを取得する」を使用していますが、条件で絞り込んだレコードのみをガントチャートに表示したいときには、やること「キーを指定してレコードを取得する」や「条件を組み立ててレコードを取得する」などを使用することも可能です。
また、条件は「一覧画面を表示した時」に加えて追加の条件として「現在の一覧が指定の一覧ならば」を設定しています。
これは後ほど「注意点・制約」の箇所にて詳しく記載しますが、ガントチャートを表示する場合は、条件を「一覧画面を表示した時」だけで指定するのではなく、追加条件「現在の一覧が指定の一覧ならば」を併用するなどして、特定の条件となった時のみガントチャートを表示させるようにすることを強く推奨します。
ガントチャートを表示する
続いて、ガントチャートを表示します。
やること「ガントチャートをメニュー位置に表示する」、条件「他のアクションの実行が完了した時」を用います。
「やること」のパラメータとその意味は以下に記載します。
以上で設定は完了です。
「現在の一覧が指定の一覧ならば」で指定した一覧を開くと、次のようなガントチャートが表示されるかと思います。
また、ガントチャートのレコードをクリックするとそのレコードの詳細画面が別の新たなタブで開きます。
より便利な使い方
セクションによって表示を区切る
先程は設定していなかったパラメータ「セクション」を使うと、ガントチャート内で表示する領域を区切ることができます。
注意点：セクション名として指定したフィールドでは使用できない文字があります。禁則文字を確認のうえ、セクションとして設定するフィールドを指定してください。
例として、先ほどのアプリに以下のフィールドを追加してみました。
※フィールド名とフィールドコードは同じものを指定します
編集画面での表示は次の通りです。
各レコードは以下のように変更します。
そして、カスタマインでは「ガントチャートをメニュー位置に表示する」のパラメータ「セクション」に「タスク種別」を指定します。
以上で設定は完了です。ガントチャートが以下のようにセクションごとに区切って表示されます。
レコードを表示せずにガントチャートだけを表示する
ここまでのカスタマイズはレコード一覧画面にて、レコード一覧の上部にガントチャートを表示していましたが、次の画像のようにレコード一覧を表示せずにガントチャートのみ表示させることも可能です。
早速その方法を見ていきましょう。
まず、kintone の一覧でカスタマイズビュー（レコード一覧の表示形式が「カスタマイズ」である一覧）を作成しておきます。
続いて、この一覧でガントチャートが表示されるようにカスタマイズを作成します。
これで、以下のようにレコードを表示せずにガントチャートのみを表示することが可能です。
注意点・制約
カスタマイズの条件について
前述の「ガントチャートに表示したいレコードを準備する」の箇所の詳細になりますが、多くのユーザーが毎日必ず利用するようなアプリの一覧画面で、毎回大量のレコードを取得してガントチャートを表示するようなカスタマイズはお勧めしません。
というのも、ガントチャートを表示するためには、元になるレコード取得が必要になります。
元になるレコード取得で大量のレコードを取得するような処理や、レコードの取得が頻繁に行われてしまうような条件（例えば、ある程度の人数のユーザーが頻繁に見る一覧画面で毎回ガントチャートを表示するような形）でカスタマイズを作成してしまうと、一覧画面を開くたびにレコードの取得処理が行われるため、結果として次のような問題が発生する恐れがあります。
kintone の API 利用回数制限を越えてしまう
カーソル API の同時利用数制限を越えてしまう
そのため、以下のようなアクションの作成は行わないことを強く推奨します。
条件を「一覧画面を表示した時」のみで設定してしまったため、一覧画面が表示される都度、ガントチャート表示処理が行われる
条件「一覧画面を表示した時」「現在の一覧が指定の一覧ならば」を併用したが、指定の一覧に一番上の一覧を表示するように設定してしまったため、一覧画面が初期表示される都度、ガントチャート表示処理が行われる
そしてガントチャートを表示する際は次のどちらかのような形で動作するアクションを作成してください。
二番目以降の一覧を開いたときに動く
ボタンを設置してボタンが押された時に動く
表示内容について
セクション
セクションは取得したレコードの並び替えの順で上から順に表示されます。例えば、次のようなレコードを持つアプリのレコードをレコード番号の昇順で取得している場合、セクションは上から順にリリース関連→展示会関連→その他、という並びになります。
また、セクション内の各レコードは次の画像のように各レコードの開始日の値の昇順で上から順に表示されます。
このため、セクションやセクション内のレコードを狙った順で表示したい場合は、その順にレコードを並び替えるようにしてください。
装飾
ガントチャートに表示する色など見た目の変更はできません。
横幅
ガントチャートのレコードの横幅（開始日から終了日までの期間）は該当のレコードが存在する期間に応じて自動的に調整されます。
例えば、複数年に渡る ToDoと1週間程度の ToDo が混在する場合、以下のように最長の期間に合わせて横幅が調整されます。
ガントチャート内で表示されるレコードの横幅（期間）を調整する機能はありませんので、バランスよくガントチャートが表示されるように指定した期間内のレコードを取得する、などのカスタマイズをご検討ください。
まとめ
やること「ガントチャートをメニュー位置に表示する」はいかがでしたか？
今回のカスタマイズでは一覧画面にガントチャートを表示する例をご紹介しましたが、テーブル内のデータを利用して詳細画面にガントチャートを表示することも可能です。
設定としては「テーブル行をレコードとして取得する」を使って、たとえばこのような形で設定します。
タスク管理やスケジュール管理など、様々なアプリでガントチャートを是非ご活用ください。
ご不明な点がございましたら、チャットでお問い合わせください。
Customineドキュメントやサポートページも、ぜひご活用ください。