未分類

GAS×スプレッドシート：フォーム送信データを活用したリアルタイムダッシュボード構築

GAS×スプレッドシート：フォーム送信データを活用したリアルタイムダッシュボード構築

Webアプリケーション開発において、フォームから送信されたデータを効率的に管理し、リアルタイムに可視化することは非常に重要です。特に、Google Apps Script（GAS）とスプレッドシートを組み合わせることで、Webアプリのデータを簡単に収集・分析し、ダッシュボードとして表示できます。この記事では、GASのSheet.insertColumns関数を活用して、フォーム送信データをリアルタイムにスプレッドシートへ追加し、そのデータを基にダッシュボードを構築する方法を解説します。

Sheet.insertColumns関数の基本

Sheet.insertColumns(columnIndex, numColumns)は、指定されたスプレッドシートの指定された列位置に、指定された数の新しい列を挿入するGASの関数です。既存のデータは挿入された列の右側に移動します。この関数は、新しいデータが追加される際に、スプレッドシートの構造を動的に変更する必要がある場合に非常に役立ちます。

構文

Sheet.insertColumns(columnIndex, numColumns)

  • columnIndex：列を挿入する開始位置の列インデックス（1から始まる）。

  • numColumns：挿入する列の数。

Webアプリ開発：フォーム送信データのダッシュボードへの反映

フォームから送信されたデータをスプレッドシートに蓄積し、それをダッシュボードに反映させるシナリオを考えてみましょう。例えば、顧客からの問い合わせフォーム、アンケートフォーム、注文フォームなど、様々な種類のデータをリアルタイムに追跡・分析したい場合に有効です。

実装例1：問い合わせフォームのデータ追加

問い合わせフォームから送信されたデータをスプレッドシートに記録し、新しい問い合わせが来た際に自動的に列を挿入してデータを追加する例です。

function doPost(e) {
  // スプレッドシートを開く
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const sheet = ss.getSheetByName("問い合わせデータ");

  // フォームから送信されたデータを取得
  const params = e.parameter;
  const name = params.name;
  const email = params.email;
  const message = params.message;
  const timestamp = new Date();

  // 新しい列を挿入（2列）
  sheet.insertColumns(1, 2); // 1列目に2列挿入

  // データを書き込む
  const headerRow = ["タイムスタンプ", "名前", "メール", "メッセージ"];
  sheet.getRange(1, 1, 1, headerRow.length).setValues([headerRow]); // ヘッダー行

  const dataRow = [timestamp, name, email, message];
  sheet.getRange(2, 1, 1, dataRow.length).setValues([dataRow]); // データ行

  // レスポンスを返す
  return ContentService.createTextOutput("送信完了");
}

カスタマイズ：

  • getSheetByName("問い合わせデータ")の部分を、使用するシート名に合わせて変更してください。

  • headerRowの配列を、フォームのフィールドに合わせて変更してください。

実装例2：アンケートフォームのデータ集計

アンケートフォームの回答をスプレッドシートに集計し、新しい回答があるたびに列を挿入してデータを追加する例です。回答の選択肢が増えた場合にも対応できます。

function doPost(e) {
  // スプレッドシートを開く
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const sheet = ss.getSheetByName("アンケート回答");

  // フォームから送信されたデータを取得
  const params = e.parameter;
  const question1 = params.question1;
  const question2 = params.question2;
  const timestamp = new Date();

  // 新しい列を挿入（回答数に合わせて調整）
  sheet.insertColumns(1, 1); // 1列目に1列挿入

  // データを書き込む
  const headerRow = ["タイムスタンプ", "質問1", "質問2"];
  sheet.getRange(1, 1, 1, headerRow.length).setValues([headerRow]); // ヘッダー行

  const dataRow = [timestamp, question1, question2];
  sheet.getRange(2, 1, 1, dataRow.length).setValues([dataRow]); // データ行

  // レスポンスを返す
  return ContentService.createTextOutput("送信完了");
}

カスタマイズ：

  • getSheetByName("アンケート回答")の部分を、使用するシート名に合わせて変更してください。

  • headerRowの配列を、アンケートの質問に合わせて変更してください。

実装例3：注文フォームのデータ管理

注文フォームから送信されたデータをスプレッドシートに記録し、新しい注文が入るたびに列を挿入してデータを追加する例です。在庫管理や売上分析に活用できます。

function doPost(e) {
  // スプレッドシートを開く
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const sheet = ss.getSheetByName("注文データ");

  // フォームから送信されたデータを取得
  const params = e.parameter;
  const itemName = params.itemName;
  const quantity = params.quantity;
  const price = params.price;
  const timestamp = new Date();

  // 新しい列を挿入
  sheet.insertColumns(1, 1); // 1列目に1列挿入

  // データを書き込む
  const headerRow = ["タイムスタンプ", "商品名", "数量", "価格"];
  sheet.getRange(1, 1, 1, headerRow.length).setValues([headerRow]); // ヘッダー行

  const dataRow = [timestamp, itemName, quantity, price];
  sheet.getRange(2, 1, 1, dataRow.length).setValues([dataRow]); // データ行

  // レスポンスを返す
  return ContentService.createTextOutput("送信完了");
}

カスタマイズ：

  • getSheetByName("注文データ")の部分を、使用するシート名に合わせて変更してください。

  • headerRowの配列を、注文フォームのフィールドに合わせて変更してください。

よくある問題とトラブルシューティング

  • 列挿入時のエラー： columnIndexが不正な値（0以下またはシートの列数を超える）の場合、エラーが発生します。適切な値を指定してください。

  • データが正しく書き込まれない： headerRowとdataRowの要素数が一致しているか確認してください。

  • タイムアウトエラー： 処理に時間がかかりすぎるとタイムアウトエラーが発生する場合があります。処理を最適化するか、Utilities.sleep()を使用して処理を分割してください。

カスタマイズ方法と応用例

  • データ検証： フォームから送信されたデータに対して、GASで検証を行うことで、データの品質を向上させることができます。

  • トリガー設定： フォーム送信時に自動的にGASを実行するようにトリガーを設定することで、リアルタイムなデータ処理を実現できます。

  • ダッシュボード連携： スプレッドシートのデータをGoogle Data Studioと連携させることで、より高度なダッシュボードを構築できます。

まとめ

GASのSheet.insertColumns関数は、Webアプリケーション開発において、フォーム送信データを効率的に管理し、リアルタイムにダッシュボードへ反映させるための強力なツールです。この記事で紹介した実装例を参考に、ぜひご自身のプロジェクトで活用してみてください。

PR

未経験からSNSデザインを学び、在宅ワークで収入を得たい方へ。
Flap DESIGNは、デザインスキルから案件獲得までを徹底サポートするオンラインスクールです。現役プロがマンツーマンで指導するため、挫折しにくい環境が強み。
さらに、受講期間中に案件を獲得できなかった場合は、売上が立つまで営業サポート期間を延長する「売上保証制度」も魅力です。
副業として月8〜20万円を目指したい会社員の方、出産・育児を機に新しい働き方を求める方、フリーランスとして独立を目指す方など、ライフスタイルに合わせた働き方を実現したい方にぴったりのサービスです。まずは無料相談で詳細を聞いてみませんか？

未経験から始める！SNSデザインスクール