【WEBアプリデモ】GAS×Chart APIでガントチャートを作成

URLをコピーする
URLをコピーしました!

スプレッドシートでプロジェクト管理や工程管理を行っている人も少なくないと思いますが、スプレッドシートではデータのメンテナンスが煩雑であったり、組んでいた関数を変更されてしまったりと情報のメンテナンスという意味ではいろいろと面倒な場面に遭遇することが少なくありません。

今回は、Google Apps ScriptのHtmlServiceというメソッドを利用して、自分の好みに合わせたレイアウトでガントチャートの情報を更新したりチャートを閲覧したりということが行えるWEBアプリをご紹介します。

目次

『アプリリンク』

Gantt Chart System Made By Google Apps Script

『アプリのインターフェイス』

【初期画面】

Demoアプリのインターフェイス1

【チャート表示時】

Demoアプリのインターフェイス2

データ編集時

Demoアプリのインターフェイス3

『アプリの操作方法』

  1. 初期画面で案件名を入力します。
  2. 入力済データと案件名がマッチすればオートコンプリート機能で入力候補が表示されます。
  3. 入力済データと案件名がマッチするとチャートが表示されます。
  4. 案件名を入力してから『Edit Gantt Chart Data』ボタンをクリックします。
  5. 必要な情報を入力し、『Send Data』ボタンをクリックします。
  6. データ送信が完了すると最新版のチャートが画面に表示されます。

『アプリの説明』

アプリケーションにアクセスできるユーザー: 誰でも
アプリケーションの実行者: 開発者アカウント(管理人のアカウント)

アプリは誰が実行しても開発者が実行するように設定されています。そのためアプリを試用する上で、利用者のアカウントへアプリからアクセス許可を求めることはありません。

開発者アカウントに共有されていない情報にはアクセスすることができませんので、利用者のアカウントに保存されている情報にはアクセスすることはありません。

データはデモ用のデータになりますので、アプリは好きなように操作していただいて構いません。

『001. テスト用開発工程』というデータを最初からデータベースに登録してありますので、案件名にこちらの名前をセットすると最初から入力されているチャートデータが表示されるようになっています。

新しい名前を入力すると、データベースにデータが登録されて、それ以降の操作ではデータを表示できるようになります。

『コード構成』

  1. コード.gs(サーバーサイドGAS)
  2. Body.html(クライアントサイドHTML)
  3. CSS.html(クライアントサイドCSS)
  4. 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となっています。

この記事が気に入ったら
いいね または フォローしてね!

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

初心者でもわかるGoogle Apps Script活用のススメの管理人。
業務でラクをするという邪な目的のためにプログラムを独学で勉強し始め、初心者向けのGoogle Apps Scriptの使い方サイトを運営するに至る。
ラクをするためにはどんな苦労も厭わないという考えから、手っ取り早くスキルアップするためにCrowdWorksやLancersなどで仕事を受注し始め、過去にはTopClass PRO Crowd workerに認定された経験を持つ。
現在では、業務効率化システムの開発を行う会社の代表を務める。

コメント

コメント一覧 (58件)

  • こんにちは、こちらコードの共有をして頂きたいです。
    何卒、宜しくお願い致します。

    • コメントありがとうございます。
      コードの共有しますので、問い合わせでもいいので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さん

      コメントありがとうございます。
      先ほどファイルを共有しましたので、コピーしてご利用下さい。

コメントする

目次
トップへ
目次
閉じる