訳合って、社内に存在する「kintone」を弄る事になりまして、このクラウド環境を元に社内の業務改善の取り組みを開始する事に・・・元々G Suiteを長くやってきたので、正直Kintoneの環境はあまり好きじゃないのですが、仕方ないです。

とはいえやる以上はこれでなんとかしなければならないので、今回まずタスクをタイムライン表示からサクっと実装してみようかと思います。ただ、G Suiteとは異なりJavaScriptやCSSでの開発が結構クセが強くて・・・。

今回使用するライブラリ等

今回このライブラリはjQueryが必要です。また、TimelineライブラリがGoogleのVisualization APIによるデータテーブル形式で表示する事もあって、Visualization APIも導入が必要です。

これらのライブラリを利用してkintoneのテーブルデータを元に、カスタマイズビューにてkintone上でタイムラインを描画するようにしています。

図:こんな感じのタイムラインビューを作ります。

事前準備

アプリを新規作成した後、アプリの設定に入ります。各タブ毎に設定が必要です。

フォームの設定

今回のアプリのテーブルの土台にもなる部分です。テーブル構成としては以下の通り。ハイフンより後ろはフィールドコード名となります。

  1. レコード番号(文字列) – recid
  2. タスク名(ドロップダウン) – taskname
  3. サブタスク(文字列) – subtask
  4. ステータス(ドロップダウン) – statusval
  5. 開始日付(日付) – startday
  6. 終了日付(日付) – endday

今回適当に作ってるので、特に細かいフィールドの制限などの設定はしていません。

図:フォームは簡素に作っています。

一覧の設定

一覧では1枚ビューを追加します。今回は「タイムライン表示」というビューの名前を付けました。実際に利用時に画面切り替えのドロップダウンでこれを選べばタイムラインが生成される仕組みです。

  1. 右側のプラス記号のボタンを押してビューを追加
  2. レコード一覧の表示形式は「カスタマイズ」を選択
  3. 一覧を表示する範囲は今回はPC版のみで表示するにチェックを入れる
  4. HTMLでは、描画する部分だけを記述していますので、非常に簡素です。

図:ものすごくシンプルなビュー

設定

今回は外部アプリからデータを取得して表示するのではなく、内側にあるカスタマイズビューなので、特にAPIトークン関係は弄りません。よって、設定で作業を行う箇所は、「JavaScript / CSSでカスタマイズ」の部分だけ。

  1. 適用範囲はすべてのユーザに適用をチェック
  2. PCのJavaScriptファイルおよびPC用のCSSファイルにファイルをアップしたり、参照させたりを追加する。
  3. CDN配布のjQuery, jQUery UIのJSファイル, jQuery UIのCSS, Visualization APIのライブラリ, CSS Package addonのCSSをそれぞれURLを指定で追加します。
  4. アップロードして追加にてアップするものとして、timeline.js, timeline-locales.js, timeline.cssを追加しておく
  5. 今回のメインプログラムファイルとしてtomato2.jsというファイルを最後にアップします。ソースコードを参照して作成してください。
  6. すべてのファイルがアップロードできたら、保存ボタンをクリックします。

ソースコード

前項の中でメインプログラムとしてtomato2.jsというものを用意する必要がありました、テキストエディタにてjsファイルを作成し、Atomなどのエディタで開発すると良いでしょう。

開発しにくいなぁと思った点は、

  • kintoneのメインコードの書き方が、1つが大きなfunctionの中に記述する
  • これまでのようにJSの中に適当に関数を用意してUI側から呼び出す感じだとうまくいかない点。
  • Google Apps Scriptのスクリプトエディタのような統合開発環境があって、UIはUI、JSはJSといった形で直接編集できれば良いのにね。ウェブアプリケーションが作りたいのに。
  • Node.jsのような感じで記述をしていく(IPC通信やappの各イベントを部品で用意していく感じ)
  • 今回のライブラリは、マウスのホイールで時間軸の拡大縮小ができ、掴んで左右に移動することで、時間軸の移動が可能な非常に柔軟なライブラリです。左サイドはタスク名、時間軸上の帯が各タスクの開始日付と終了日付で作ったタイムラインになります。会議室アプリや納期管理などで使えそうです。

  • 一番冒頭でVisualization APIのライブラリ初期化を行います。Timelineのライブラリがデータテーブルで作成された塊でないとタイムライン表示できない為。
  • kintone.events.onの「app.record.index.show」にて、kintone側にボタンを用意したり、ボタンやelementを動的生成。各パーツにイベントを割り当てる
  • viewdialog関数にてTimelineを最後に描画するようにしています
  • KintoneRecordManager関数にてkintoneへの接続を確立します。ここではレコード取得などのテーブルのデータを取得するメインルーチンになっています。
  • viewdialog関数が初期化時に呼び出され、timelineを表示するメインのルーチンです。レコードデータを取得したら配列にpushして、appendTimeline関数にてレンダリングをさせています。
  • printtimeline関数は印刷実行ボタンを押した時にプリントアウトを実現する為のルーチンです。
  • appendTimeline関数は取得した配列からデータテーブルを生成し、オプション指定を施して、最終的には一覧で作ったビューにある「mytimeline」のelementに対してtimelineを生成しています。
  • 実際にはタイムラインの各項目に対して、クリック時イベントでダイアログを表示し詳細な内容を表示するように作り込んで行く予定。

図:Atom等だと開発がとてもしやすくなります

ダイアログを表示させて其の中にガントを表示

おまけとして今回のアプリではないのですが、kintoneにボタンを用意し、ビューではなくjQuery Dialogにて其の中にガントチャートを表示するようなものも作ってみました。

  • サンプルなので、レコードのデータは全然使っていません・・・
  • こんな感じのをDialogオープン時のイベントとして生成するか?起動時に生成して反映させてしまうか?
  • ただ、動的にelementを生成してそこに対して、ライブラリで生成するというのがどうしても好きになれない。少し別の開発方法を考えなくてはなぁと(現在考えているのは、kintoneはデータ置き場にして、kintone APIを利用してExcelやElectronにてデータの読み書きをするアプリを構築すること。
  • Google Apps Scriptからkintoneデータの読み書きをするライブラリを作られている方がいます。

図:ビューじゃなくダイアログで表示してみた

関連リンク

共有してみる: