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

フォローする

Index

概要

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

主要なアップデート情報

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

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

完成形

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

_____X.PNG

アプリの準備

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

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

plugin-sdk にアクセスしてフォルダごとダウンロードしてください。そのフォルダ内の「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を利用しています。
  • 日本語、英語、中国語の設定画面に対応しています。

 

パッケージング

作成した「plugin.zip」を プラグインの開発手順 パッケージング を参考に、パッケージングします。
今回は「work」フォルダを作成し、その中に「package.sh」を追加して実行します。 

コマンド例)
$ cd /work/
$ package.sh ./ganttchart/ 

パッケージングしたサンプル(2017/05/31 作成)
gantt_plugin.zip

インポートと設定

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

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

更新履歴

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

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

制限事項

  • スマートフォン用のブラウザには対応していません。
  • カレンダービューにはガントチャートは適用されません。
  • 大項目および小項目は全角7文字まで表示可能で、全角8文字以上となる場合、全角6文字まで表示されます。

注意点

  • 「開始日フィールド」に設定されたフィールドの値が空の場合、表示に遅延が発生します。

※kintoneプラグインはスタンダードコースでのみご利用いただけます。ライトコースではご利用いただけませんのでご注意ください。

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

直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。

Avatar
やぎ

ガントチャートのみ、別アプリのレコード詳細画面に表示することは可能でしょうか?

Avatar
いけもん

はじめまして、やぎさん

いけもんと申します。
プラグインのソースコードをいじることで可能であると思われます。
もう少し詳細にご説明しますと、フィールド設定でスペースを追加し、そのスペースに対してガントチャートを埋め込むという処理を行うことで実現できるのではないでしょうか。

お力になれれば幸いです。

いけもん

Avatar
nomoto

サンプルパッケージ(gantt_plugin.zip)を設定して動いたので、cygwinなるものをインストールして
パッケージファイルを作成しようとしていますが、下記のようなエラーで止まっております。

何かヒントが頂けましたら幸いです。


ファイル構成
$ dir
css html img js manifest.json package.sh thirdparties


パッケージングエラー
$ sh package.sh ./
package.sh: 行 74: /usr/bin/zip: No such file or directory
package.sh: 行 79: /cygdrive/c/work/tmp/contents.zip: No such file or directory
package.sh: 行 99: /usr/bin/zip: No such file or directory
Plugin ID: najcjcinjanalbdljhikcmmilaiellbm
Plugin file: /cygdrive/c/work/vault/plugins/work.najcjcinjanalbdljhikcmmilaiellbm/work.plugin.zip
Private key file: /cygdrive/c/work/vault/keys/work.najcjcinjanalbdljhikcmmilaiellbm.ppk


ファイル構成(vaultが増えた)
$ dir
css html img js manifest.json package.sh thirdparties vault\

パッケージングエラー
$ sh package.sh ./
PLUGIN_DIR must not contain *.ppk files.

Avatar
nomoto

パッケージの項目に下記の記載がございます。

 「作成した「plugin.zip」を プラグインの開発手順 パッケージング を参考に、パッケージングします。」

 

これは、ganttchart 配下のファイル一式に「pacckage.sh」を追加してパケージする。ということで宜しいでしょうか?

この結果が、上記投稿にありますエラーになります。

Avatar
cybozu Development team

nomoto様

ご質問いただき、ありがとうございます。

ganttchar 配下に「pacckage.sh」を追加と記載がありますが、「pacckage.sh」を配置するのは、
「work」以下となります。

> 今回は「work」フォルダを作成し、その中に「package.sh」を追加して実行します。

説明の中にある、上記の部分で、「work」フォルダを作成していただいていると思いますので、
その中に「package.sh」を追加して、work に移動後、実行します。

> 作成した「plugin.zip」を プラグインの開発手順 パッケージング を参考に、パッケージングします。

こちらで参考として、ご紹介させていただいていた記事よりも、下記の「kintone プラグイン開発手順」の
「パッケージング」項目のほうが分かりやすいと思いましたので、下記をご参考いただければと思います。

○kintone プラグイン開発手順
・パッケージング
https://developer.cybozu.io/hc/ja/articles/203455680#step3

分かりにくい状況となり、大変申し訳ございませんでした。
参考先のURLは修正させていただきました。

お手数をおかけいたしますが、ご参考いただければと思います。
よろしくお願い致します。

Avatar
nomoto

cybozu Development teamさん

> $ dir
> css html img js manifest.json package.sh thirdparties

このディレクトリは、c:\work\ です。

 

> $ sh package.sh ./
> package.sh: 行 74: /usr/bin/zip: No such file or directory
> package.sh: 行 79: /cygdrive/c/work/tmp/contents.zip: No such file or directory
> package.sh: 行 99: /usr/bin/zip: No such file or directory
> Plugin ID: najcjcinjanalbdljhikcmmilaiellbm
> Plugin file: /cygdrive/c/work/vault/plugins/work.najcjcinjanalbdljhikcmmilaiellbm/work.plugin.zip
> Private key file: /cygdrive/c/work/vault/keys/work.najcjcinjanalbdljhikcmmilaiellbm.ppk

こちらは、c:\work\ で sh package.sh ./ を実行しています。

宜しくお願いします。

Avatar
nomoto

cybozu Development teamさん

もう一度、手順を追って記載します。

$ cd c:\work


$ dir
css html img js manifest.json package.sh thirdparties


$ sh package.sh ./
package.sh: 行 74: /usr/bin/zip: No such file or directory
package.sh: 行 79: /cygdrive/c/work/tmp/contents.zip: No such file or directory
package.sh: 行 99: /usr/bin/zip: No such file or directory
Plugin ID: dcdpnedneibdcfofgfnpjmnjakbmklda
Plugin file: /cygdrive/c/work/vault/plugins/work.dcdpnedneibdcfofgfnpjmnjakbmkld
a/work.plugin.zip
Private key file: /cygdrive/c/work/vault/keys/work.dcdpnedneibdcfofgfnpjmnjakbmk
lda.ppk


$ cd vault/plugins


$ dir
work.dcdpnedneibdcfofgfnpjmnjakbmklda

 

「work.dcdpnedneibdcfofgfnpjmnjakbmklda」は空のディレクトリです。

宜しくお願いします。

 

 

Avatar
cybozu Development team

nomoto様

ご確認いただきありがとうございました。

実行場所などもご確認いただきましたので、他に考えられる点として、
インストールされた、Cygwin側の設定内容になります。

> package.sh: 行 74: /usr/bin/zip: No such file or directory
> package.sh: 行 79: /cygdrive/c/work/tmp/contents.zip: No such file or directory
> package.sh: 行 99: /usr/bin/zip: No such file or directory

上記のエラーが、すべてzip系のエラーになりますので、Cygwinにzip関連の
パッケージがインストールされていない可能性があります。

Cygwin側にzipファイルを作成できる、パッケージをインストールされているか、
Cygwin側の設定をご確認いただいた後に、再度、プラグインのパッケージングを
試していただければと思います。

よろしくお願い致します。

Avatar
nomoto

cybozu Development teamさん

コメント有難うございます。

当初、作成できている筈との見解を頂いておりましたが、インストール方法をwebで調査の上再インストールしました。
恐ろしく時間が掛かりましたが、下記のとおり "work.plugin.zip" ができたようです。
これで試してみます。

===================
$ cd c:\work


$ sh package.sh ./
Plugin ID: gikbkgofojglommpiieancdcgbciango
Plugin file: /cygdrive/c/work/vault/plugins/work.gikbkgofojglommpiieancdcgbciango/work.plugin.zip
Private key file: /cygdrive/c/work/vault/keys/work.gikbkgofojglommpiieancdcgbciango.ppk
===================

 

 

Avatar
cybozu Development team

nomoto様

ご確認いただきありがとうございます。
Cygwinでのzipパッケージインストールの方法についてはこちらにも記載させていただきました。

▼kintoneプラグイン開発でつまずきやすいポイント
https://developer.cybozu.io/hc/ja/articles/217937443

またお困りの際にはご活用ください。

ログインしてコメントを残してください。
Powered by Zendesk