スプレッドシートでプロジェクト管理や工程管理を行っている人も少なくないと思いますが、スプレッドシートではデータのメンテナンスが煩雑であったり、組んでいた関数を変更されてしまったりと情報のメンテナンスという意味ではいろいろと面倒な場面に遭遇することが少なくありません。
今回は、Google Apps ScriptのHtmlServiceというメソッドを利用して、自分の好みに合わせたレイアウトでガントチャートの情報を更新したりチャートを閲覧したりということが行えるWEBアプリをご紹介します。
『アプリリンク』
Gantt Chart System Made By Google Apps Script
『アプリのインターフェイス』
【初期画面】
【チャート表示時】
データ編集時
『アプリの操作方法』
- 初期画面で案件名を入力します。
- 入力済データと案件名がマッチすればオートコンプリート機能で入力候補が表示されます。
- 入力済データと案件名がマッチするとチャートが表示されます。
- 案件名を入力してから『Edit Gantt Chart Data』ボタンをクリックします。
- 必要な情報を入力し、『Send Data』ボタンをクリックします。
- データ送信が完了すると最新版のチャートが画面に表示されます。
『アプリの説明』
アプリケーションにアクセスできるユーザー: 誰でも
アプリケーションの実行者: 開発者アカウント（管理人のアカウント）
アプリは誰が実行しても開発者が実行するように設定されています。そのためアプリを試用する上で、利用者のアカウントへアプリからアクセス許可を求めることはありません。
開発者アカウントに共有されていない情報にはアクセスすることができませんので、利用者のアカウントに保存されている情報にはアクセスすることはありません。
データはデモ用のデータになりますので、アプリは好きなように操作していただいて構いません。
『001. テスト用開発工程』というデータを最初からデータベースに登録してありますので、案件名にこちらの名前をセットすると最初から入力されているチャートデータが表示されるようになっています。
新しい名前を入力すると、データベースにデータが登録されて、それ以降の操作ではデータを表示できるようになります。
『コード構成』
- コード.gs（サーバーサイドGAS）
- Body.html（クライアントサイドHTML）
- CSS.html（クライアントサイドCSS）
- Javascript.html（クライアントサイドJavascript）
※実際のコード名は任意のコード名で問題ありません。
『コードの内容』
希望があれば共有します。
『開発難易度』
★★★☆☆
開発にはGoogle Apps Script、HTML、CSS、Javascriptの知識が必要です。CSSやJavascriptは他のページからのコピペで対応できる部分もありますが、記載内容の意味がわかれば自分用にカスタマイズする際にやりやすいと思います。
今回はGoogle Chart APIというGoogleから提供されているチャートを表示するためのAPIを利用していますので、データベースからデータを取得後、必要なデータを配列に入れてChart API側に渡しています。そのため、チャートを表示するためのコードはほとんど書かなくてもきれいなチャートが表示できます。
『拡張性』
Google Chart APIには、ガントチャートの他にも、様々なタイプのチャートが提供されています。表示するデータや目的に応じて、チャートタイプを変更したりすることで、今回のコードを少しだけ改変すれば利用できる機会は多数あると思います。
Chart Gallery | Charts | Google Developers（Google公式）
『まとめ』
今回は、Google Apps ScriptとChart APIの連携アプリについてご紹介しました。APIの使い方さえ覚えれば、様々なチャートを自分の好みにカスタマイズして簡単に表示できるようになります。動的なチャートもサポートされていますので、色々と遊んでみると楽しいかもしれません。かなり細かい設定まで調整ができるので、かなり奥が深いAPIとなっています。