カテゴリー内の他の記事

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

Index

注意事項

  • サンプルプラグインは、その動作を保証するものではありません。
  • サンプルプラグインの技術的なサポート等は行っていません。
  • kintoneプラグインはスタンダードコースでのみご利用いただけます。ライトコースではご利用いただけませんのでご注意ください。

概要

サンプルで公開している 「To Doをガントチャートで表示する」 のJavaScriptプログラムをプラグインファイルにする手順を紹介します。
作業の詳細は kintone プラグイン開発手順をご確認ください。

主要なアップデート情報

2017/05: 大項目-小項目表示形式に対応しました。その他追加機能は「更新履歴」より参照ください。
注意:旧バージョンのプラグインをお使いの方で、新バージョンのプラグインにアップデートされる方は、
色付け設定が引き継がれないのでプラグイン設定画面で再設定をお願いします。

また、v2.0.0では以前のバージョンと設定方法が少し異なります。インストール前に必ずこちらの記事をご確認ください。
ガントチャートプラグインのアップデートを詳細解説

完成形

このプラグインを利用したアプリのイメージです。
レコード一覧で表示されているレコードデータを活用してガントチャートを表示します。

_____X.PNG

アプリの準備

今回のプラグインで利用するアプリは、kintone アプリストアにある「To Do」を使います。
※すでにご利用中のアプリに適用することもできます。
お持ちのkintoneにアプリを追加し、サンプルデータを数件ほど追加してください。
※完成形のように2階層設定をされたい場合はテーブルフィールドを追加していただく必要があります。詳細な設定方法はこちらの記事をご確認ください。

プラグインファイルの構成

GitHub にアクセスしてフォルダごとダウンロードしてください。そのフォルダ内の「examples/ganttchart」に、今回のファイル一式があります。

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

_____2.PNG

各フォルダ内のファイルの説明です。

フォルダ:css

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

フォルダ:html

  • config.html
    プラグイン設定画面のHTMLです。
    ガントチャートを表示するために次のフィールドを設定する画面にしています。
  • タイトル
  • サブタイトル
  • 開始日
  • 終了日
  • 色付け
  • 初期表示のスケール(日、週、月単位のいずれか)
    設定画面をログインユーザーの言語によって切り替えるため、JsRenderを利用しています。
    (中国語の場合には、英語が表示されます。)

    プラグイン適用後の設定画面の例)
    _____3.PNG

フォルダ:image

  • icon.png
    プラグインのアイコンです
    icon.png

フォルダ:js

  • config.js
    プラグイン設定画面のプログラムです。ここでは、次の処理を行っています。
    • 「保存」ボタンが押された時に、空欄のフィールドがあると警告を表示する。
    • 「保存」ボタンが押された時に、設定した値をプラグインの変数に代入する。
    • 「キャンセル」ボタンが押された時に、前の画面へ戻る。
    • 既にプラグインの変数が設定されている場合は、各フィールドに値を設定する。
    • タイトルにするフィールドにテーブルのフィールドが選択された場合は警告を表示する。
    • テーブルのフィールドとテーブルでないフィールドを混在させて保存しようとすると警告を表示する。
  • desktop-ganttchart.js
    ガントチャートのプログラムです。(PC用のみ)
    プラグイン利用の他に、アプリの「JavaScript読み込み」機能でも利用できるようにしています。
  • jquery.ui.datepicker-ja.min.js
    モーダルウィンドウで開始日/終了日を選択する際に使用するDatepickerライブラリです。

フォルダ:manifest.json

プラグインのマニュフェストファイルです。

  • Cybozu CDNのjQuery、jQuery.Gantt、JSRenderを利用しています。
  • 日本語、英語、中国語の設定画面に対応しています。

 

パッケージング

こちらの手順を参考にパッケージングします。

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

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

SAMPLE_gantt_plugin_v2.2.zip

インポートと設定

  1. 設定画面より、ダウンロードした「plugin.zip」をkintoneシステム管理画面より読み込みます。
  2. 適用するアプリの設定画面より、プラグインをインストールします。
  3. プラグインの設定画面より、ガントチャートに表示するフィールドを設定します。

「入力値チェックプラグイン」のチュートリアル にプラグインの適用方法と動作確認を紹介していますのでご参考下さい。

更新履歴

2017/05 v2.0.0を公開しました :下記の機能を追加しました。

  • フォームのテーブル化に対応しました(テーブル化しなくても動作します)。
  • ページングでガントチャートが再描画されるようになりました。
  • ガントチャートの土曜日と日曜日に色づけされました。
  • 優先度の色をカラーパレットから選択可能にしました。
  • 優先度を行追加で増やせるようにしました。
  • 初期表示のスケジュールに「時間」を追加しました。
  • マウスオーバーによるポップアップ画面では設定画面で設定する全データを表示するようにしました。
  • マウスオーバーによるポップアップ画面でフィールド名を表示するようにしました。
  • バーをクリックするとモーダルウィンドウを出し、開始日/終了日を更新できるようにしました。
  • バーの中のタイトルは小項目を表示し、小項目がない場合には大項目を表示するようにしました。
  • 設定画面にどの項目がガントチャート上のどの部分に紐づくかが分かる説明画像を追加しました。

2017/08/24 v2.0.1 を公開しました。以下の点を更新しております。

  • スタイルシートを「51-current-default.css」から「51-modern-default.css」に変更しました。
  • その他軽微な修正を行いました。

2017/08/25 v2.0.2 を公開しました。不具合を修正しました。

2017/11/24 v2.0.3 を公開しました。「addin-style.css」を修正しました。機能に変更はありません。詳細はこちらのお知らせをご確認ください。

2020/04/06 v2.1 を公開しました。プラグイン設定画面の言語に中国語を追加しました。「ログインユーザーの言語」が中国語の場合、中国語で表示されます。

2020/03/22 v2.2 を公開しました。開始日に設定したフィールドの値が空の場合、ガントチャートの表示がおかしくなる不具合を修正しました。

制限事項

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

デモ環境

https://dev-demo.cybozu.com/k/283/

※デモ環境についての説明はこちら

記事に関するフィードバック

記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。

Avatar
泉 宏樹

この時計マークがどういった処理を行う機能か教えて下さい。

現在、自分の環境下ではクリックしても何も起こらないようです。

Avatar
cybozu Development team

泉 宏樹 様

時計のマークのアイコンは、利用している外部ライブラリ jQuery.Gantt 側の機能で、
今日の日付がチャートに表示されるようにジャンプする機能です。

そのため、もともと今日の日付がチャートに表示されている場合は何も起こりません。

Avatar
泉 宏樹

理解しました。

ありがとうございました!

Avatar
zawawa

ガントチャートのスケールの初期表示を、

「時」から「‐」を2回押した状態(1日が0/6/12/18)と4分割や8分割された状態

に設定する為のカスタマイズはどのようにしたらよいでしょうか?ページを更新するたび「時」や「日」に戻ってしまうのが不都合と感じています。よろしくお願いいたします。

Avatar
cybozu Development team

zawawa 様

お世話になっております。cybozu developer network 運営でございます。

恐れ入りますが、こちらのコメント欄は記事内容のフィードバック目的となっているため、
記事から派生した技術的なご質問などはcybozu developer コミュニティをご活用ください。

お手数をおかけいたしますが、どうぞよろしくお願いいたします。

cybozu Development teamにより編集されました
Avatar
泉 宏樹

場合によってリストのみを見たい場面が発生したので、表示方法に関する質問です

ToDoアプリのメイン表示でガントチャート部分の表示・非表示設定は可能でしょうか?

もしくは、リストが上部 ガントチャートも下部 に変更可能でしょうか?

 

Avatar
cybozu Development team

泉 宏樹 様

お世話になっております。cybozu developer network 運営でございます。

ガントチャートの表示・非表示はアプリ設定のプラグイン画面にて各プラグインの有効/無効を切り替えることで可能です。

詳細な手順については以下のリンクをご確認ください。

https://jp.cybozu.help/k/ja/user/app_settings/plugin_disable.html

また、こちらのコメント欄は記事内容のフィードバック目的となっているため、
記事から派生した技術的なご質問などはcybozu developer コミュニティをご活用ください。

お手数をおかけいたしますが、どうぞよろしくお願いいたします。

サインインしてコメントを残してください。