概要

kintone アプリで管理しているタスクをガントチャートで表示するプラグインです。
この記事では、サンプルとして公開している To Doをガントチャートで表示する の JavaScript プログラムをプラグインファイルにする手順を紹介します。

注意事項

• サンプルプラグインに関するお問い合わせは、API サポート窓口へのお問い合わせの対象外です。
• kintone プラグインは、スタンダードコースでのみ利用できます。

制限事項

• モバイル用のブラウザーおよび kintone モバイルには対応していません。
• レコード一覧の表示形式が「表形式」の一覧のみ対応しています。
• 大項目および小項目は全角 6 文字まで表示可能です。全角 7 文字以上となる場合、全角 5 文字まで表示されます。
• ブラウザーの画面で拡大／縮小した場合、ガントチャートのレイアウトが崩れることを確認しています。
• 「開始日」や「終了日」に設定したフィールドの値が空のレコードは、大項目および小項目のみガントチャートに表示されます。
  これらのレコードを表示したくない場合は、フィルター機能を使ってレコードを絞り込んでください。

プラグインの機能

レコード一覧で表示されているレコードデータを活用してガントチャートを表示します。

デモ環境

デモ環境で、プラグインの動作を確認できます。
https://dev-demo.cybozu.com/k/334/

デモ環境のログイン情報は次のページを確認してください。 cybozu developer network デモ環境

プラグインのパッケージング

プラグイン化の手順の詳細は kintone プラグイン開発手順 を参照してください。

STEP1：ソースコードのダウンロード

GitHub にアクセスしてフォルダーごとダウンロードしてください。
「examples/ganttchart」が、このプラグインのソースコード一式です。

ファイルの構成

「examples/ganttchart」配下のファイル構成は次のとおりです。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

examples/ganttchart
├── README.md
├── css
│   ├── 51-modern-default.css
│   ├── addin-style.css
│   └── config.css
├── html
│   └── config.html
├── img
│   └── icon.png
├── js
│   ├── config.js
│   ├── desktop-ganttchart.js
│   └── jquery.ui.datepicker-ja.min.js
├── manifest.json
└── thirdparties
    └── jqColorPicker.min.js

css

• 51-modern-default.css
  サイボウズが提供しているプラグイン設定画面のスタイルです。
• addin-style.css
  オリジナルの色を指定するためにアドインしたスタイルです。

html

• config.html
  プラグイン設定画面の HTML です。
  ログインユーザーの言語に応じて設定画面の言語を切り替えるため、 JsRender を利用しています。

image

• icon.png
  プラグインのアイコンファイルです。
  

  

js

• config.js
  プラグイン設定画面のプログラムです。ここでは、次の処理を行っています。

  • 「保存」ボタンが押されたときに、空欄のフィールドがあると警告を表示する。
  • 「保存」ボタンが押されたときに、設定した値をプラグインの変数に代入する。
  • 「キャンセル」ボタンが押されたときに、前の画面へ戻る。
  • すでにプラグインの変数が設定されている場合は、各フィールドに値を設定する。
  • 「タイトル」にテーブルのフィールドが指定された場合は、警告を表示する。
  • テーブルのフィールドとテーブルでないフィールドを混在させて保存しようとすると警告を表示する。

• desktop-ganttchart.js
  ガントチャートのプログラムです。
  PC 版のみ対応しています。
  アプリの「JavaScript 読み込み」機能でも利用できるようにしています。

• jquery.ui.datepicker-ja.min.js
  「開始日」「終了日」で日付を選択する UI で使用しているライブラリ Datepicker のソースコードです。

thirdparties

• jqColorPicker.min.js
  色を選択する UI で使用しているライブラリ tinyColorPicker and colors のソースコードです。

manifest.json

プラグインのマニュフェストファイルです。
設定画面は、次の 3 言語に対応しています。

• 日本語
• 英語
• 簡体字

STEP2：パッケージング

plugin-packer の手順を参考にパッケージングします。

パッケージングしたサンプル

このプラグインはプラグイン開発のためのサンプルで、サポート対象外です。
ご理解の上、ダウンロードしてください。

SAMPLE_gantt_plugin_v2.2.3.zip

プラグインの設定

STEP1：プラグインの読み込み

kintone システム管理画面で、パッケージングしたファイル（zip ファイル）を読み込みます。
ファイルからプラグインを読み込む

STEP2：アプリの設定

1. アプリを追加します。
   kintone アプリストア にある To Do を使います。

2. フィールドを配置します。
   詳細は次の記事を参照してください。
   ガントチャートプラグインのアップデートを詳細解説
   タスクを大項目と小項目に分けて管理する場合には、テーブルフィールドを追加してください。

STEP3：プラグインの追加と設定

1. アプリの設定画面を開き、プラグインを追加します。
   アプリにプラグインを追加する

2. プラグインの設定画面より、ガントチャートに表示するフィールドを設定します。

   

   項目名	必須	説明
   タイトルにするフィールド	必須	タスクのタイトルのフィールド
   サブタイトルにするフィールド	省略可	タスクのサブタイトルのフィールド
   開始日（開始日時）のフィールド	必須	タスクの開始日のフィールド
   終了日（終了日時）のフィールド	必須	タスクの終了日のフィールド
   色付けするフィールド	必須	ガントチャートの色付けの条件
   初期表示のスケール	必須	初回表示時点でのカレンダーのスケール 時間 日 週 月

3. 【保存】をクリックします。

4. 「アプリの設定」画面で、【設定完了】をクリックします。

更新履歴

• 2017 年 5 月 v2.0 を公開
  • フォームのテーブル化に対応しました。テーブル化しなくても動作します。
  • ページングでガントチャートが再描画されるようになりました。
  • ガントチャートの土曜日と日曜日に色づけされました。
  • 優先度の色をカラーパレットから選択可能にしました。
  • 優先度を行追加で増やせるようにしました。
  • 初期表示のスケジュールに「時間」を追加しました。
  • マウスオーバーによるポップアップ画面では設定画面で設定する全データを表示するようにしました。
  • マウスオーバーによるポップアップ画面でフィールド名を表示するようにしました。
  • バーをクリックするとモーダルウィンドウを出し、開始日/終了日を更新できるようにしました。
  • バーの中のタイトルは小項目を表示し、小項目がない場合には大項目を表示するようにしました。
  • 設定画面にどの項目がガントチャート上のどの部分に紐づくかが分かる説明画像を追加しました。
• 2017 年 8 月 24 日 v2.0 を公開
  • スタイルシートを「51-current-default.css」から「51-modern-default.css」に変更しました。
  • その他軽微な修正を実施しました。
• 2017 年 8 月 25 日 v2.0.2 を公開
  • 不具合を修正しました。
• 2017 年 11 月 24 日 v2.0.3 を公開
  • 「addin-style.css」を修正しました。
    機能の変更はありません。詳細は 【お知らせ】ガントチャートプラグイン再公開について(2017/11/24) を確認してください。
• 2020 年 4 月 6 日 v2.1 を公開
  • プラグイン設定画面の言語に中国語を追加しました。「ログインユーザーの言語」が中国語の場合、中国語で表示されます。
• 2021 年 3 月 22 日 v2.2 を公開
  • 開始日に設定したフィールドの値が空の場合、ガントチャートの表示がおかしくなる不具合を修正しました。
• 2022 年 9 月 6 日 v2.2.1 を公開
  • JavaScript ソースコードを ES6 以降の記法に書き換えました。
• 2022 年 10 月 5 日 v2.2.2 を公開
  • フロントエンド基盤の刷新 に対応しました。
• 2023 年 2 月 14 日 v2.2.3 を公開
  • 軽微な修正を実施しました。

v1 からアップデートする場合

プラグインを v1 から v2 にアップデートする場合、v1 で設定した色付け設定は引き継がれません。
次の記事を参考に設定してください。
ガントチャートプラグインのアップデートを詳細解説

利用している OSS のライセンス情報

このプラグインで利用している OSS のライセンスは次のとおりです。

• jQuery UI - MIT License
• tinyColorPicker and colors - MIT License
• Moment.js - MIT License
• jQuery - MIT License
• JsRender - MIT License
• 51-modern-default - MIT License