ガントチャートプラグインについて

kintone 上でガントチャートの作成・表示ができるプラグインです。
同じアプリで一覧別に複数のガントチャートを作成することができます。

設定方法

1. ガントチャートのヘッダー項目を設定する
   
   

   1. アプリの管理者権限を持つユーザーで設定を開きます。
      
      
      
      
      
   2. 一覧タブを開きます。
      
      
      
      
      
   3. ＋ボタンで一覧（View）を作成します。
      すでに一覧を作成している場合は、設定する一覧の「編集」ボタンをクリックしてください。
      
      
      
      
      
   4. 一覧名を編集します。ガントチャートを表示する一覧（View）の名前になります。
      
      
      
      
      
   5. レコード一覧の表示形式を編集します。
      ガントチャートの左側に表示するヘッダー項目とする項目をドラッグ&ドロップしてください。
      
      
      
      
      
   6. 表示時にあらかじめレコードの絞り込みを行う場合は条件を設定してください。
      同様に、あらかじめ任意の項目でソートを行う場合も項目と昇順／降順を選択してください。
      （変更しない場合はレコード番号順に並びます。）
      
      
      
      
      
   7. 左上の「保存」ボタンをクリックして一覧の作成は完了です。
      
      
      
      
      
   8. 「アプリを更新」ボタンをクリックして、「OK」ボタンをクリックして更新してください。
      
      
      
      
      
      
      
      

2. プラグイン設定画面を開く
   
   

   1. アプリの管理者権限を持つユーザーで設定を開きます。
      
      
      
      
      
   2. 設定タブを開きます。
      
      
      
      
      
   3. カスタマイズ／サービス連携メニューの「プラグイン」をクリックします。
      
      
      
      
      
      

3. アプリにプラグインを追加する
   
   

   1. 左上の「プラグインの追加」ボタンをクリックします。
      
      
      
      
      
   2. 現在 kintone 上に取り込まれているプラグイン一覧が表示されます。
      プラグイン一覧から、ガントチャートプラグインを選択(チェック)します。
      
      
      
      ※プラグイン一覧に該当のプラグインがない場合、事前にプラグインを kintone システム管理に
      追加する必要があります。kintone ヘルプに沿って、ダウンロードセンターから取得した
      プラグイン（zip ファイル）を追加して下さい。
      
      
      
   3. 右下の「追加」ボタンをクリックします。
      
      
      
      
   4. 追加したプラグイン一覧に ガントチャートプラグインが表示されていたら、完了です。
      
      
      
      
      
      

4. プラグインの設定を行う
   
   

   1. 歯車アイコンから設定画面を開きます。
      
      
      
      
      
   2. 新しくガントチャートを設定する（必須）
      
      
      1. 「新しい設定」ボタンをクリックして、ガントチャートの設定を作成します。
         
         
         
         
         
      2. 「設定内容を編集してください」をクリックして設定を開きます。
         1 で作成した一覧（View）を選択します。
         
         
         
         
         
   3. タスクの入力設定を行う（必須）
      ここでは、ガントチャートタスクのデータを保存するフィールドの紐づけを行います。
      プラグイン設定の「タスクフィールド設定」を開きます。
      
      
      1. タスクを管理するテーブル選択してください。
         以降のタスク設定は、ここで選択したテーブルに属するフィールドを選択してください。
         
         
         
         
         
      2. タスクタイトルにするフィールドを選択してください。
         
         
         
         
         
      3. タスクの期間とする開始/終了フィールド選択をそれぞれ選択してください。
         
         
         
         
         
      4. タスクに進捗バーを設定したい場合は、タスク進捗を保存するフィールドを選択してください。(任意)
         ※数値フィールドを選択してください。
         
         
         
         
         
      5. ダイアログ上でタスクの背景色・文字色を変更したい場合は、タスク色を保存するフィールドを
         事前に用意して、選択してください。(任意)
         ※背景色・文字色はそれぞれ別のフィールドを選択してください。
         
         
         
         
         
      6. タスクダイアログから追加で編集したい項目がある場合は、「編集フィールド追加」ボタンをクリックしてください。(任意)
         
         
         
         
         
      7. 追加で編集するフィールドを追加してください。「ダイアログ画面の 100%幅」を選択すると、ダイアログ画面の横幅いっぱいに入力幅を変更することができます。(任意)
         
         
         
         
         
      8. マウス操作でのタスク移動設定は、タスクをガントチャート上から動かすかどうかの設定です。
         タスク移動を「許可する」を選択することで、すべてのタスクをマウス操作で移動することができます。
         またフィールドを選択することで、編集画面上からタスクの移動可否を設定できます。
         
         
         
         
         
      9. マウスでのタスク移動時の他タスク追従設定は、あるタスクを動かしたときに、他のタスクを連動して動かすかどうかの設定です。
         タスクを「追従する」を選択することで、同レコード内のすべての他タスクを追従させることができます。
         またフィールドを選択することで、編集画面上からタスクの追従可否を設定できます。
         
         
         
         
         
   4. 表示レコード件数、日付範囲、タスクの入力形式、タスクの改行を設定する
      ここではガントチャートの表示日付範囲やタスクの入力形式、改行形式といった詳細設定を行います。
      プラグイン設定の「一般設定」を開きます。
      
      
      1. レコード表示形式を選択してください。
         ここでは、レコードをすべて表示するか、ページングして表示するかの設定ができます。
         「ページングする」を選択するとガントチャート上部と下部にページネーションが表示されます。
         レコード数が多い場合、「ページングする」を選択して 1 ページあたりの件数を減らすことで、画面表示時の描画にかかる時間を短縮することができます。
         「ページングする」を選択した場合は、合わせて「1 ページあたりの件数」も指定してください。
         「ページングする」を選択した場合でも、ページネーションの全件表示ボタン機能で一時的に全件表示をすることが可能です。
         
         
         
         
         
      2. 初期の表示日付範囲を設定してください。
         ここで設定した日付範囲で毎回ガントチャートが表示されます。
         コントロールパネルで都度、表示範囲を変更することも可能です。
         
         
         
         
         
      3. ※タスクの開始/終了フィールドを日時に設定した場合のみ設定可能
         勤務時間外など時間範囲外をグレーアウトして分かりやすく表示したい場合、開始時刻と終了時刻を入力してください。
         設定しない場合は、24時間グレーアウトされない状態で表示されます。
         
         
         
         
         
      4. 表示スケール（時間、日、月、年等）を設定してください。
         表示日付範囲と同様にコントロールパネルで都度変更することも可能です。
         
         
         
         
         
      5. タスク入力方式を選択してください。
         ダイアログを表示するを選択した場合、タスクタイトルだけでなく、開始/終了日付、
         進捗率等もガントチャート上から一緒に入力できます。
         タスクタイトルが文字列（一行）フィールド、数値フィールドの時のみ、
         タスクに直接入力する方式が有効です。
         
         
         
         
         
      6. タスクの表示形式を選択してください。
         タスクを改行しない（初期設定の）場合、スケジュールをできるだけコンパクトに表示できるよう、
         タスクを表示する行はタスクの前後と関係なく、空いたスペースに詰めて表示されます。
         タスクを「改行する」を選択することで、タスクを階段形式に表示して
         作業の流れをより直感的に把握できるような形式で表示することができます。
         また改行表示時は、タスクの並び順は開始日または終了日の昇順/降順から選択することができます。
         
         
         
         
         
   5. 行ヘッダー（ガントチャート左側）の設定を行う
      ここでは、ガントチャート左側の行ヘッダーに関する設定を行います。
      プラグイン設定の「テーブル列設定」を開きます。
      
      
      1. アイコンボタンの表示/非表示を設定します。
         非表示にしたいアイコン列がある場合は、チェックを外してください。
         
         
         
         
         
      2. 行ヘッダーのマージを設定します。
         マージ全体設定ではヘッダー全体で表示を省略（マージ）する設定ができます。
         列単位でマージするかどうかを指定したい場合は、列設定追加ボタンをクリックして、
         フィールド単位に表示を省略するかどうかを指定することができます。
         
         
         
         
         
   6. コントロールパネル、PDF 出力ボタンを設定する
      ここではコントロールパネルで表示するボタン等、ボタンの設定を行います。
      プラグイン設定の「各種ボタン設定」を開きます。
      
      
      1. 表示範囲の移動ボタン表示有無と移動値を設定します。
         移動値を大きく変更することで、日付表示移動量も大きくなります。
         表示範囲の移動ボタンをコントロールパネル上に表示したくない際はこちらのチェックを外してください。
         
         
         
         
         
      2. 表示スケール（日、月、年等）を変更する拡大/縮小ボタンの表示有無を設定します。
         表示スケールの変更ボタンをコントロールパネル上に表示したくない際は
         こちらのチェックを外してください。
         
         
         
         
         
      3. PDF ダウンロードボタンの表示有無を設定します。
         PDF ダウンロードボタンを画面上に表示したくない際はこちらのチェックを
         外してください。
         
         
         
         
         
   7. 条件別に行色を変更する
      ここではガントチャートの行を色付けする条件の設定を行います。
      プラグイン設定の「行色設定」を開きます。
      
      
      1. 行に差し込む交互色の設定を行います。「背景色」ボタンをクリックして色を設定します。
         文字色も同様に設定します。
         
         
         
         
         
      2. 「初期値に戻す」ボタンで、デザインテーマに合わせた初期色に戻ります。
         
         
         
         
         
      3. 条件付き色設定を行います。「色設定追加」ボタンをクリックします。
         
         
         
         
         
      4. 書式変更フィールドを任意のフィールドにすることで選択したフィールド色のみ着色できます。
         「行全体」を選択するとガントチャート右パネルを含めて一行すべて着色します。
         
         
         「製品名」フィールドに着色した例
         
         
         
         
      5. 「背景色」ボタンをクリックして、色を設定します。文字色も同様に設定します。
         
         
         
         
         
      6. 「条件変更」ボタンをクリックします。
         
         
         
         
         
      7. 下記画面になるので、「条件追加」ボタンをクリックして条件を追加してください。
         
         
         
         
         
      8. フィールドを選択して条件を入力/選択してください。
         
         
         
         
         
      9. 条件を複数入力する場合は、すべての条件(AND 条件)を満たす場合か、いずれかの条件(OR 条件)を満たす場合かを選択してください。
         
         
         
         
         
      10. 「適用」ボタンをクリックして、条件を設定に適応してください。
          
          
          
          
          
   8. 条件別にタスク色を変更する
      ここではガントチャートのタスクを色付けする条件の設定を行います。
      プラグイン設定の「タスク色設定」を開きます。
      
      
      1. 「色設定追加」ボタンをクリックします。
         
         
         
         
         
      2. 「背景色」ボタンをクリックして、色を設定します。文字色も同様に設定します。
         
         
         
         
         
      3. 「条件変更」ボタンをクリックします。
         
         
         
         
         
      4. 下記画面になるので、「条件追加」ボタンをクリックして条件を追加してください。
         
         
         
         
         
      5. フィールドを選択して条件を入力/選択してください。
         
         
         
         
         
      6. 条件を複数入力する場合は、すべての条件(AND 条件)を満たす場合か、いずれかの条件(OR 条件)を満たす場合かを選択してください。
         
         
         
         
         
      7. 「適用」ボタンをクリックして、条件を設定に適応してください。
         
         
         
         
         
   9. 特定の曜日、祝日の日付列に色をつける
      ここではガントチャートの特定の曜日や日付列に色付けする設定を行います。
      プラグイン設定の「特別日付設定」を開きます。
      
      
      1. 特定の曜日の色設定を行います。
         初期は、土曜日と日曜日にデザインテーマに合わせた初期色が設定されています。 「色設定追加」ボタンをクリックします。
         
         
         
         
         
      2. 「背景色」ボタンをクリックして、色を設定します。画像は水曜日に着色した例です。
         「初期値に戻す」ボタンをクリックすると、デザインテーマに合わせた初期色に戻ります。
         
         
         
         
         
      3. 初期の特別日付色を選択します。「背景色」ボタンをクリックして、色を設定します。
         文字色も同様に設定します。
         
         
         
         
         
      4. 初期値に戻すボタンで、初期色のオレンジに戻ります。
         
         
         
         
         
      5. 特別日付設定を行います。
         日付(yyyy-MM-dd), 説明, 背景色(省略可), 文字色(省略可) のカンマ形式、複数ある場合は改行して入力してください。
         背景色、文字色を省略した場合は特別日付色設定で設定した色になります。
         
         
         
         
         
      6. 祝日を設定した例です。
         カラー名を利用して入力する場合は コチラ（外部サイト） を参考にしてください。
         
         
         
         
         
   10. 表示レイアウトを変更する
       ここではガントチャートのレイアウト、配色の設定を行います。プラグイン設定の「デザイン設定」を開きます。
       
       
       1. ガントチャートのスタイルを設定してください。
          ここでは、ガントチャートの全体の幅（ピクセルもしくは%指定）と列幅、行高、
          テーブルの表示領域が設定できます。
          ② テーブル表示領域と ③ 列幅はガントチャート上で自由に調整が可能です。
          調整後はその幅が保持され、次回以降表示する際にユーザー単位で引き継がれます。
          
          
          
          
          
       2. ガントチャートのフォントサイズを設定してください。
          ここでは、左パネル（行ヘッダー）の文字、タスクバーのフォントサイズを変更することができます。
          ご利用のブラウザによっては、最小フォントサイズがございます。
          最小フォントサイズよりも小さい値を指定した場合、設定が反映されません。
          
          
          
          
          
       3. ガントチャートの配色テーマを選択してください。
          ここでは、ガントチャートのスケジュールヘッダー色、初期の行交互色/曜日別色、ボタン色等を 決定する配色テーマが選択可能です。
          テーマは、ベーシックテーマ、kintone デザインテーマ、クラシックテーマの 3 種類です。
          利用シーン別に分けると、下記のイメージです。
          タスクの視認性重視 → ベーシックテーマ
          アプリ独自で設定しているkintoneデザインテーマ設定に合わせたい → kintoneデザインテーマ
          ガントチャートv6.0.0以前のテーマを利用したい → クラシックテーマ
          デザインテーマを変更すると、曜日別色設定、行の交互色がテーマに沿った配色に上書きされます。
          上記を独自に設定している場合は、あらかじめ設定内容を控え、テーマ変更後に再設定してください。
          
          
          
          
          
          

5. プラグインの設定を保存する(必須)
   
   

   1. 画面下部にある「設定を保存」ボタンをクリックします。
      
      
      
      
      
   2. 画面左下に画像のような緑のバーが出たら、保存完了です。
      
      
      
      
   3. 緑のバーの一番右にある「アプリの設定に戻る」をクリックします。
      
      
      
      
      
   4. 「アプリを更新」ボタンをクリックして、「OK」ボタンをクリックしたら完了です。
      
      
      
      
      
      

6. プラグインの設定を他のアプリで使用する
   
   

   1. 画面下部にある「設定をダウンロード」ボタンをクリックします。
      
      
      
      
      
   2. ダウンロードが実行されるとブラウザ上部に赤枠のようなダウンロードボックスが表示されます。
      ダウンロードファイル名には、ダウンロードしたアプリ ID、ダウンロード日時が含まれます。
      
      
      
      
   3. 設定の移行先アプリのプラグイン設定で「設定をアップロード」ボタンをクリックして、先程ダウンロードしたファイルを選択します。
      
      
      
      
      
   4. 下部に黒色のバーが出て、設定が追加されていれば完了です。
      
      
      
      

対応フィールド

下記表がそれぞれの設定で対応しているフィールドです。
ヘッダー表示項目は、kintone 一覧上で表示でき、ガントチャートで表示できない場合に × としています。
また、kintone 一覧上で表示できない項目、編集できない項目は-としています。
タスクタイトル・編集可能項目は、テーブルに属する項目の対応を示しています。

*1 ガントチャートの行高は改行に対応していません
*2 ファイル名を表示します（ダウンロードリンクは付与されません）
*3 各フィールドのリンクは付与されません
*4 テーブルを一覧に設定した場合、From（最大値）,To（最小値）が自動で入ります
*5 ルックアップは「コピー元のフィールド」が文字列（1 行）/数値フィールドの場合に編集可能です
ルックアップフィールド設定の初期の絞り込みは反映されません。初期のソートはレコード表示時に反映されます。

注意事項

• 新たにアプリにフィールドを追加した際は、一度アプリの保存を行ってください。
  プラグイン設定で選択するフィールドは、アプリの保存後に反映されます。
• タスクの設定はテーブルに属さない項目以外を設定できません。