スプレッドシートでプロジェクト管理や工程管理を行っている人も少なくないと思いますが、スプレッドシートではデータのメンテナンスが煩雑であったり、組んでいた関数を変更されてしまったりと情報のメンテナンスという意味ではいろいろと面倒な場面に遭遇することが少なくありません。
今回は、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となっています。
コメント
コメント一覧 （61件）
こんにちは、こちらコードの共有をして頂きたいです。
何卒、宜しくお願い致します。
コメントありがとうございます。
コードの共有しますので、問い合わせでもいいのでGmailアドレスを共有していただけますか？
こちらのアドレスにコードの共有をお願い致します。
スクリプトファイルを共有しました。
よろしくお願いします。
こんにちは、こちらのコードの共有していただけますでしょうか。
何卒よろしくお願いいたします。
コメントありがとうございます。
入力いただいているメールアドレスに共有でよろしいですか？
こんにちは、GASの勉強をしている最中でとても参考になりました。
こちらのコードのを共有していただくことはできるでしょうか？
また、私が作成したwebアプリは、他のアカウントがアクセスすると「アクセス権限のリクエスト」をしろと出るのですが、何か出ないようにする方法はないでしょうか？（Google Calendarとの連携をしています）
sasaさん
コメントありがとうございます。
コードの共有構いません。
問い合わせフォームからご連絡いただければURLを共有しますね。
アクセス権限の件ですが、ウェブアプリケーションとして導入からデプロイする際にアプリにアクセスできるユーザーを誰でも可として、実行者を自分として設定すればアクセスできるようになると思います。
こんにちは、こちらのコードの共有していただけますでしょうか。
何卒よろしくお願いいたします。
斉藤さん
コメントありがとうございます。
コードの共有問題ありません。
問い合わせフォー厶から共有先のGoogleアカウントを教えていただけますか？
こんにちは。業務に使用するアプリ作成の参考にさせていただきたいです。
よろしければコードの共有お願いできますでしょうか。
堀井さん
コメントありがとうございます。
コードを共有しました。
こんにちは！
gasの勉強中で、この様なWebアプリを作りたいと思ってました。是非コードを共有させて頂きたいです。
よろしくお願い致します。
masaさん
コメントありがとうございます。
遅くなりましたが、コード共有しました。
ご確認よろしくお願いします。
GASを使ったWEBアプリケーションの勉強中で、このサイトにたどりつきました。
Google Chart APIを用いたガントチャートは、非常に興味深いです。
是非勉強致したく、ソースを共有させて頂けないでしょうか。
宜しくお願い致します。
鎌倉さん
コメントありがとうございます。
先程コード共有しましたので、メールをご確認ください。
こんにちは。こちらのコードを共有して頂きたくお願い致します。
若田さん
コメントありがとうございます。
先程ファイルを共有しましたので、
確認ください。
こんにちは。こちらのコードを共有して頂きたくお願い致します。
okamotoさん
コメントありがとうございます。
先ほどコードを共有しました。
メール通知が届いているかと思いますので、そこからファイルにアクセスをお願いします。
初めまして
GASを使い色々挑戦中です
デモを触らせていただきましたが、ぜひコードを共有していただきたく
コメントいたしました
また、
2021.01.20
【WEBアプリデモ】GASで営業管理ツールを作った話
も共有していただきたいです
宜しくお願いします
秋田谷さん
コメントありがとうございます。
先程ファイルを共有しました。
新しいことにチャレンジするのは楽しいですよね。
秋田谷さんのスキルアップ応援してます。
早速の対応ありがとうございます
サイトの小ネタも参考になります
勉強させていただきます
質問です
SyntaxError: Unexpected end of JSON input
とエラーメッセージが出てしまいます
カスタマイズをせずオリジナルのままやってみたのですが
それでもエラーになってしまいます
なにか対策分かりますでしょうか
秋田谷さん
スプレッドシートに入っているデータに不備があるようです。
出力先のなにかデータを入れてありますか？
すいません
シートにデーターは何もないのですが
このエラーが出続けます
再度、コードの共有をしてもらえますでしょうか
秋田屋さん
共有しました。
スプレッドシートのA1に入っているデータを自分のスプレッドシートのA1にコピーして試してみてください。
あまり作り込んだアプリではないので、データが空の時の処理を作っていなかったかもしれません。
よろしくお願いします。
A1にデータを入れる事で確認できました
ありがとうございます
お騒がせしました
秋田谷さん
ちゃんと作り込んでいなくてすいませんね。
あとでデータが空っぽ時にも問題がないように変更しておきますね。
素晴らしいですね！
是非、コードを読んで自分様に改修してみたいです。
コードの共有をお願いできますでしょうか！？
TTさん
コメントありがとうございます。
先程コードを共有しましたのでコピーしてお使いください。
GASの勉強中で、こちらに辿り着きました。
コードの共有をいただけますとありがたいです。
勉強させていただきながら、活用してみたいと思います。
chiroさん
コメントありがとうございます。
コードを共有しましたのでご確認下さい。
なにか質問あればいつでもどうぞ！
ありがとうございます！
コード確認できました。
色々触ってみたいと思います。
はじめまして
Webアプリでのスケジュール管理を調べていてこちらの記事を拝見しました。
ぜひコードを共有していただきたく、宜しくお願い致します。
がぶさん
コメントありがとうございます。
先程コードを共有しました。
関連ファイルをコピーしてお使いください。
早速ありがとうございます。
コピーして動くことが確認できました。
色々試してみようと思います。
はじめまして
Webアプリで出来る事を調べていたら、こちらの記事を拝見しました。
ぜひコードを共有していただきたく、宜しくお願い致します。
とみーさん
コメントありがとうございます。
先程ファイルを共有しましたので、ご確認ください。
初めまして。コードの共有をお願いしたくご連絡します。よろしく願い致します。
kawaji modさん
コメントありがとうございます。
コード関連ファイルを一式共有しましたので、コピーして参考にお使いください。
共有いただき有難うございます。
参考にさせていただきます。
はじめまして。コードを共有していただきたいです。
はじめまして。どうしてもhtmlとgasの連携に困っていたところ、ここを見つけました。
コードの共有をしていただきたいです。
きのこはさん
コメントありがとうございます。
先ほどコードを共有しました。
コピーしてお使いください。
とても早いお返事、本当にありがとうございます。
役立てさせていただきます！
Hi, researching project management I find this, how cool, share me the code please, friend,
thanks
PAndrs Vargas
Hey, thanks for your comments and interests.
Just shared the files with your email.
Please copy the files and you are free to do anything.
Also, take a look at this page by Google.
https://developers.google.com/chart?hl=en
I am just using the Chart API by Google. There are a bunch of other charts there too.
So, with your imagination, you can do more than just showing a Gantt chart.
Good luck, my friend.
この様なWebアプリを作りたいと思っております。
是非コードを共有させて頂きたいです。
何卒宜しくお願い致します。
やすさん
コメントありがとうございます。
先ほどファイルを共有しました。
ファイルをコピーしてお使いいただければと思います。
共有頂きありがとうございます。
参考にさせていただきます。
はじめまして。
コードの共有をお願いしたくご連絡させていただきました。
よろしくお願いいたします。
ゆきさん
コメントありがとうございます。
先程ファイルを共有しましたので、コピーしてご利用下さい。
よろしくお願いします。
ありがとうございます。活用させていただきます。
はじめまして
GASの勉強中にこちらのページにたどり着きました。
コードの共有をいただけますとありがたいです。
お手数をおかけしますが何卒宜しくお願い致します。
tsukaさん
コメントありがとうございます。
共有先のGmailアカウントを入力してコメントいただいてもよろしいでしょうか？確認できましたら共有致します。
はじめまして。
コードの共有をお願いしたくご連絡させていただきました。
お手数をおかけしますがよろしくお願いいたします。
MIDORIYAさん
コメントありがとうございます。
先ほどファイルを共有しましたので、コピーしてご利用下さい。
コードの共有を希望します。
入力したメールアドレスでお願いします。
コメントありがとうございます。
先ほどコードを共有しましたので、コピーしてお使い下さい。
共有いただきありがとうございました。
早速コピーさせていただきました。
Google Chart APIの使い方、とても参考になります。