ガントチャートプラグイン

目次

概要

kintoneアプリで管理しているタスクをガントチャートで表示するプラグインです。

注意事項

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

制限事項

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

プラグインの機能

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

デモ環境

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

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

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

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

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

GitHub (External link) にアクセスしてフォルダーごとダウンロードしてください。
「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 (External link) を利用しています。
image
  • icon.png
    プラグインのアイコンファイルです。

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

    • 「保存」ボタンが押されたときに、空欄のフィールドがあると警告を表示する。
    • 「保存」ボタンが押されたときに、設定した値をプラグインの変数に代入する。
    • 「キャンセル」ボタンが押されたときに、前の画面へ戻る。
    • すでにプラグインの変数が設定されている場合は、各フィールドに値を設定する。
    • 「タイトル」にテーブルのフィールドが指定された場合は、警告を表示する。
    • テーブルのフィールドとテーブルでないフィールドを混在させて保存しようとすると警告を表示する。
  • desktop-ganttchart.js
    ガントチャートのプログラムです。
    PC版のみ対応しています。
    アプリの「JavaScript読み込み」機能でも利用できるようにしています。

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

thirdparties
manifest.json

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

  • 日本語
  • 英語
  • 簡体字

STEP2:パッケージング

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

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

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

SAMPLE_gantt_plugin_v2.2.4.zip

プラグインの設定

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

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

STEP2:アプリの設定

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

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

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

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

  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を公開
  • 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を公開
    • 軽微な修正を実施しました。
  • 2023年11月9日v2.2.4を公開
    • プラグインのhomepage_urlを修正しました。

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

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

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

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