Google Visualization APIには、Timelineと呼ばれるチャートの機能がありますが、酷く低機能で正直な所使い易いものとは言えません。そこで外部ライブラリを利用して、スプレッドシート連携のタイムライン実現できるライブラリを探してみた所、2種類ほど見つかり、これをもって、実現してみようと考えました。デフォルトでGoogle Spreadsheetへの連携に対応しているJavaScriptライブラリとしてTimelineというものがありました。もう一つは、格好良いのですが、いまいち使い勝手が良くなかったので今回は次点にしたものとして、Timeline.jsがあります。

また、独自のカスタマイズとしてjQueryのカレンダーとUI CSSの採用、およびシートの切り替え対応を実装(Visualization APIへのリクエリと再描画)、項目をクリックしjQueryダイアログを表示し、取得データを表示するなど、setQueryにて現在時刻で期限到来している項目を非表示等を追加しています。

なお、今回使用しているスプレッドシートですが、非常に単純で各シートに入ってるのは「開始日」・「終了日」・「タイトル」・「カテゴリ名」といった具合です。タイトル列のセルはHTMLも使用する事が出来ます。

難易度:


使用する材料

  1. タイムラインで使用するスプレッドシート
  2. タイムラインライブラリ
  3. Google Visualization API

ソースコード

以前は、Google Sites用のXMLガジェットとして作っていたものを、Google Apps Scriptでリファインしたものです。

GAS側コード

  • 使用する前にメニューからタイムライン⇒セットアップを実行してこのスプレッドシートのシートIDをスクリプトプロパティに格納しておきます。
  • 単純にシート名をHTML側から取得して、そのシートの全データを返すrequery関数がGAS側の中心です。

HTML側コード

  • いくつか、jQuery UI CSSに加工をしたものを使っています。また別途個別にStylesheetを追加しています。
  • 今回Timelineでは日付のデータは0:00:00といった日付のデータが含まれていないので、2020/4/15 0:00:00といった形にするためにnew Date()で加工を要しています。
  • セレクトボタンを選ぶと、シートを切り替えてタイムラインを再描画します(a_ctrl関数)。
  • このライブラリはGoogle Visualization APIのDataTable機能を利用してるものなので、Visualization APIを利用しています。
  • データをそのままDataTableに入れられないので、再加工して配列をaddRowsで加えています。
  • デフォルトでは英語表記のタイムラインですが、日本語化するモジュールをロードさせているだけでは日本語化しません。optionsにてLocaleをjaにしておくことが肝要です。
  • このライブラリのタイムラインは何種類ものタイムラインを作れる為、様々なサンプルを参考にしてみてください。
  • onselect関数はVisualization APIにてaddlistenerにてクリック時イベントで呼び出されます。
  • getSelectedRow関数を用意し、クリック時に対象のタイムラインのrow番号をalert表示します。
  • optionsにてheightがautoの時だけ、minHeightを指定できます。指定がない場合にはタイムライン表示項目に応じてエリアが縮小拡大します。
  • 今回のパーツを応用してつくったものが、備品貸出管理フォームになります。

実行と結果

ウェブアプリケーションですので、ウェブアプリケーションとして公開をすると利用する事が可能です。もちろん、スプレッドシート上でもDialogとして表示するようにすれば画面上でも利用が可能です。

追加実装してる機能

  1. 起動時や再読込時に現在時刻へジャンプさせるようにしています(moveToCurrentTime関数)。
  2. オリジナルのtimeline.jsにはgroupingをした時のタイムラインのポジションに関してバグがあるので、手修正しました。5331行目付近のコードを、Math.max(options.groupMinHeight, group.labelHeight) + options.eventMarginに修正するとズームして、リサイズされても、タイムライン項目の縦ポジションがズレたりしません。
  3. 現在時刻時点で終了日を経過してる項目に関してはsetQueryにてフィルタするようにしています。
  4. 縮尺設定にてテキストボックスにjQueryカレンダーを設定
  5. 項目をクリック時にjQueryダイアログボックスを表示。スプレッドシートの4列目の項目(担当者名)を表示するように設定してる。
  6. プルダウンメニューでシートIDを切り替えて再表示するようにしてあります。
  7. 終了日指定にフィルタ時には便宜的に1日を加算する

関連リンク

共有してみる: