function createGanttChart(data) {
  const ganttChart = Charts.newGanttChart()
    .setTitle('タスクガントチャート')
    .setColumns([
      {'label': 'タスク名', 'type': 'string'},
      {'label': '開始日', 'type': 'date'},
      // ... 他の列定義 ...
    ])
    .setRows(data);
  return ganttChart.build(); // Web表示用にビルド
}

function registerEvents(taskData) {
  const calendar = CalendarApp.getDefaultCalendar();
  taskData.forEach(task => {
    calendar.createEvent(
      task.name, // タスク名
      new Date(task.startDate), // 開始日
      new Date(task.endDate)    // 終了日
    );
  });
}

// HTML内のスクリプト (抜粋)
function submitProgress() {
  const taskName = /* ...フォームから取得... */;
  const progress = /* ...フォームから取得... */;
  google.script.run
    .withSuccessHandler(() => alert('進捗を更新しました！'))
    .withFailureHandler(err => alert('エラー: ' + err.message))
    .updateProgress(taskName, progress);
}

// GAS側 (抜粋)
function updateProgress(taskName, progress) {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('タスク');
  // ...シート内の該当タスクを検索し、進捗率を更新...
}

function onEdit(e) {
  // 編集が関連シートで行われたかチェック
  if (e.range.getSheet().getName() === 'タスク') {
    updateGanttChartDataInCache(); // ガントチャート用データを更新
  }
}

function updateGanttChartDataInCache() {
  const data = readTaskDataFromSheet(); // スプレッドシートから最新データを読み込む
  const chartObject = createGanttChart(data); // チャートオブジェクト生成
  // キャッシュサービスを利用して最新のチャート情報を保存
  CacheService.getScriptCache().put('ganttChartData', JSON.stringify(chartObject), 300);
}

// HTMLからの呼び出し (抜粋)
function changeGanttColorPreference(colorName) {
  google.script.run.saveUserColorPreference(colorName);
}

// GAS側 (抜粋)
function saveUserColorPreference(color) {
  PropertiesService.getUserProperties().setProperty('ganttChartColor', color);
  // この後、ガントチャート再描画時にこのプロパティを読み込んで適用
}

フルテキストはこちら

近年、ビジネスシーンにおいて業務効率化は重要な課題となっています。Gmail、Googleドライブ、Googleカレンダーなど、様々なツールを提供するGoogle Workspaceは、多くの企業で導入されています。Google Apps Script（GAS）は、Google Workspaceの機能を拡張するための強力なツールであり、業務効率化に大きく貢献することができます。この記事では、GASを使ってスプレッドシートに入力したタスクからガントチャートを作成し、Googleカレンダーと連携させて進捗管理を行う革新的なビジネスアプリケーションの開発方法について解説します。このアプリケーションによって、スプレッドシート、ガントチャート、Googleカレンダーを連携させ、プロジェクト管理を効率化することができます。

GASとは

Google Apps Script（GAS）は、Google Workspace上で動作するJavaScriptベースのスクリプトプラットフォームです。GASを使用することで、Google Workspaceの様々なサービスを連携させ、自動化や業務効率化を実現することができます。GASは、企業が特定のニーズやワークフローに合わせてソリューションを調整できる柔軟性とカスタマイズ性を提供します。

例えば、以下のようなことが可能です。

• スプレッドシートのデータを自動的にGoogleドキュメントに転記する。
• Gmailで受信したメールの内容をスプレッドシートに記録する。
• Googleカレンダーに予定を自動登録する。
• Webアプリケーションを作成する。

アプリケーションの概要

今回作成するアプリケーションは、スプレッドシートに入力したタスクからガントチャートを自動生成し、Googleカレンダーと連携させて進捗管理を行うものです。

主な機能は以下の通りです。

• スプレッドシートのタスクデータからガントチャートを自動生成
• ガントチャートのWebブラウザ上での表示
• Googleカレンダーへの予定の自動登録
• Webブラウザからの進捗入力
• ガントチャートの動的な更新
• ユーザーによるガントチャートの色の変更

開発手順

(1) ガントチャートを生成する

まず、スプレッドシートに入力されたタスクデータを読み込み、ガントチャートを生成するGASスクリプトを作成します。ここでは、Google Chartsを利用してガントチャートを作成します。

function createGanttChart(data) {
  // Google Chartsのガントチャートを生成
  const ganttChart = Charts.newGanttChart()
    .setTitle('タスクガントチャート')
    .setColumns([
      {'label': 'タスク名', 'type': 'string'},
      {'label': '開始日', 'type': 'date'},
      {'label': '終了日', 'type': 'date'},
      {'label': '期間', 'type': 'number'},
      {'label': '進捗率', 'type': 'number'},
      {'label': '担当者', 'type': 'string'}
    ])
    .setRows(data);

  return ganttChart;
}

このスクリプトでは、Charts.newGanttChart()で新しいガントチャートを作成し、setColumns()でチャートの列を定義します。setRows()でタスクデータを設定することで、ガントチャートが生成されます。

(2) ガントチャートをWebブラウザに表示する

生成したガントチャートをWebブラウザに表示するには、HTML Serviceを利用します。

function doGet() {
  // タスクデータを読み込む
  const data = readTaskData(); // 注: readTaskData()の実装は記事に記載されていません

  // ガントチャートを生成
  const ganttChart = createGanttChart(data);

  // HTMLテンプレートを作成
  const template = HtmlService.createTemplateFromFile('index'); // 'index.html'ファイルが必要
  template.ganttChart = ganttChart.build();

  // HTMLを出力
  return template.evaluate();
}

このスクリプトでは、doGet()関数がWebアプリケーションのエンドポイントとなります。HtmlService.createTemplateFromFile()でHTMLテンプレートを読み込み、template.ganttChartに生成したガントチャートを設定します。template.evaluate()でHTMLを出力することで、Webブラウザにガントチャートが表示されます。

(3) Googleカレンダーに予定を自動登録する

タスクデータに基づいてGoogleカレンダーに予定を自動登録するGASスクリプトを作成します。

function registerEvents(data) {
  // カレンダーを取得
  const calendar = CalendarApp.getDefaultCalendar();

  // タスクデータから予定を登録
  data.forEach(task => {
    calendar.createEvent(
      task[0], // タスク名
      task[1], // 開始日
      task[2]  // 終了日
    );
  });
}

このスクリプトでは、CalendarApp.getDefaultCalendar()でデフォルトのカレンダーを取得し、createEvent()で予定を登録します。ただし、getDefaultCalendar()は必ずしもプライマリカレンダーを取得するとは限らないことに注意が必要です。

(4) Webブラウザから進捗情報を入力する

Webブラウザから入力された進捗情報をスプレッドシートに反映するには、HTML ServiceとGASの連携が必要です。

まず、HTML側で進捗情報を入力するフォームを作成します。（例：index.html）

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <form id="progressForm">
      タスク名: <input type="text" name="taskName"><br>
      進捗率: <input type="number" name="progress"><br>
      <input type="button" value="送信" onclick="submitProgress()">
    </form>

    <script>
      function submitProgress() {
        const form = document.getElementById('progressForm');
        const taskName = form.taskName.value;
        const progress = form.progress.value;

        google.script.run.updateProgress(taskName, progress);
      }
    </script>
  </body>
</html>

次に、JavaScriptでGASの関数を呼び出してスプレッドシートにデータを書込みます。

function updateProgress(taskName, progress) {
  // スプレッドシートを開く
  const ss = SpreadsheetApp.getActiveSpreadsheet();

  // タスクデータが格納されているシートを取得
  const sheet = ss.getSheetByName('タスク'); // 'タスク'という名前のシートが必要

  // タスク名で検索
  const data = sheet.getDataRange().getValues();
  const row = data.findIndex(row => row[0] === taskName);

  // 進捗率を更新
  if (row > -1) {
    sheet.getRange(row + 1, 5).setValue(progress); // 5列目は進捗率 (0始まりなら4列目)
  }
}

HTMLのフォームで入力されたタスク名と進捗率は、google.script.run.updateProgress()でGASのupdateProgress()関数に渡されます。updateProgress()関数では、スプレッドシートを開き、該当するタスクの進捗率を更新します。

(5) ガントチャートを動的に更新する

スプレッドシートの変更を検知してガントチャートを動的に更新するには、GASのトリガー機能を利用します。

スプレッドシートの変更をトリガーとして、ガントチャートを再描画する関数を呼び出します。

function onEdit(e) {
  // 変更があったシートがタスクシートの場合のみ実行
  if (e.range.getSheet().getName() === 'タスク') {
    // ガントチャートを再描画
    updateGanttChart();
  }
}

function updateGanttChart() {
  // タスクデータを読み込む
  const data = readTaskData(); // 注: readTaskData()の実装は記事に記載されていません

  // ガントチャートを生成
  const ganttChart = createGanttChart(data);

  // Webアプリケーションのキャッシュをクリア
  CacheService.getScriptCache().remove('ganttChartData');

  // ガントチャートデータをキャッシュに保存
  CacheService.getScriptCache().put('ganttChartData', ganttChart.build(), 300); // 300秒キャッシュ
}
```onEdit()`関数は、スプレッドシートが編集された際に自動的に実行されます。この関数内で、`updateGanttChart()`関数を呼び出してガントチャートを再描画します。

### (6) ガントチャートの色を任意に指定できるようにする

ユーザーがガントチャートの色を任意に指定できる機能を実装するには、HTML Serviceで色の選択UIを提供し、GASでその情報を取得してガントチャートに反映させます。

HTML側（例：`index.html` に追加）:

```html
<select id="ganttColor">
  <option value="blue">青</option>
  <option value="red">赤</option>
  <option value="green">緑</option>
</select>
<input type="button" value="色を変更" onclick="changeGanttColor()">

<script>
  // submitProgress 関数の下にでも追加
  function changeGanttColor() {
    const color = document.getElementById('ganttColor').value;
    google.script.run.withSuccessHandler(() => {
        // 成功したらページをリロードするか、ガントチャート部分を更新する処理
        // 簡単な例としてリロード
        // location.reload(); 
        // または、特定の要素だけ更新するなら、そのための関数を呼び出す
        // 例えば、updateGanttDisplay(); のような関数を別途用意して呼び出す
        console.log('Color setting updated. You might need to refresh or update the chart display.');
    }).changeGanttColor(color);
  }
</script>

GAS側:

function changeGanttColor(color) {
  // ユーザー設定を保存
  PropertiesService.getUserProperties().setProperty('ganttColor', color);

  // ガントチャートを再描画 (または、クライアント側で色設定を適用して再描画を促す)
  // この例では、設定を保存するだけ。ガントチャート生成時にこのプロパティを読み込む必要がある
  // createGanttChart 関数を修正して、保存された色設定を適用するようにする
  updateGanttChart(); // キャッシュを更新して再描画を促す
}

// createGanttChart 関数を修正して色を適用する例 (一部)
/*
function createGanttChart(data) {
  const userColor = PropertiesService.getUserProperties().getProperty('ganttColor') || 'blue'; // デフォルトは青
  const ganttChart = Charts.newGanttChart()
    .setTitle('タスクガントチャート')
    // ... columns ...
    .setRows(data)
    .setOption('gantt.palette', [{color: userColor}]); // 色オプションの例 (実際のオプション名は要確認)
  return ganttChart;
}
*/

HTML側で色の選択UIを提供し、changeGanttColor()関数で選択された色をGASに渡します。GAS側では、PropertiesServiceを利用してユーザー設定を保存し、ガントチャートを再描画します。（注: createGanttChart 関数で保存された色設定を読み込み、ガントチャートに適用するロジックの追加が必要です。Google Chartsの具体的な色指定オプションはAPIドキュメントを参照してください。）

(7) Webアプリケーションとしてデプロイする

作成したGASスクリプトをWebアプリケーションとしてデプロイするには、GASのエディタから「公開」>「Webアプリケーションとして導入」（または「デプロイ」>「新しいデプロイ」）を選択します。

アクセス権限を設定し、URLを取得することで、誰でもWebアプリケーションにアクセスできるようになります。

まとめ

この記事では、GASを使ってスプレッドシートのタスクデータからガントチャートを作成し、Googleカレンダーと連携させて進捗管理を行うビジネスアプリケーションの開発方法について解説しました。GASは、Google Workspaceの機能を拡張するための強力なツールであり、今回紹介したアプリケーション以外にも、様々な業務効率化を実現することができます。ぜひGASを活用して、日々の業務を効率化しましょう。

このアプリケーションは、タスク管理、進捗管理、スケジュール管理を1つのアプリケーションに統合することで、業務効率を大幅に向上させることができます。また、GASの柔軟性を活かすことで、企業のニーズに合わせてカスタマイズすることも可能です。GASは、ビジネスプロセスを自動化し、生産性を向上させるための強力なツールとなります。