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

フォローする

Index

概要

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

完成形

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

アプリの準備

今回のプラグインで利用するアプリは、kintoneのアプリストアにある「To Do」を使います。
※すでにご利用中のアプリに適用することもできます。
お持ちのkintoneにアプリを追加し、サンプルデータを数件ほど追加してください。

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

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

【重要なお知らせ】
2017/04/14-2017/05/12(予定)の期間は開発中のため、パッケージングしたサンプルをご利用ください。


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

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

フォルダ:css

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

フォルダ:html

  • config.html
    プラグイン設定画面のHTMLです。

    ガントチャートを表示するために次のフィールドを設定する画面にしています。

    • タイトル
    • サブタイトル
    • 開始日
    • 終了日
    • 色付け
    • 初期表示のスケール(日、週、月単位のいずれか)

    設定画面をログインユーザーの言語によって切り替えるため、JsRender を利用しています。
    (中国語の場合には、英語が表示されます。)

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

フォルダ:img

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

フォルダ:js

  • config.js
    プラグイン設定画面のプログラムです。ここでは、次の処理を行っています。
    • 「保存」ボタンが押された時に、空欄のフィールドがあると警告を表示する。
    • 「保存」ボタンが押された時に、設定した値をプラグインの変数に代入する。
    • 「キャンセル」ボタンが押された時に、前の画面へ戻る。
    • 既にプラグインの変数が設定されている場合は、各フィールドに値を設定する。
  • desktop-ganttchart.js
    ガントチャートのプログラムです。(PC用のみ)
    プラグイン利用の他に、アプリの「JavaScript読み込み」機能でも利用できるようにしています。

ファイル:manifest.json

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

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

 

パッケージング

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

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

パッケージングしたサンプル(2015/1/10 作成)
gantt_plugin.zip

インポートと設定

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

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

制限事項

  • スマートフォン用のブラウザには対応していません。

注意点

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

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

コメント

Avatar
やぎ

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

Avatar
いけもん

はじめまして、やぎさん

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

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

いけもん

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