未分類

GmailMessage.getDateで始めるWebアプリ開発：フォーム送信時間追跡ダッシュボード構築

GmailMessage.getDateで始めるWebアプリ開発：フォーム送信時間追跡ダッシュボード構築

Webアプリケーション開発において、フォームの送信時間を正確に記録し、分析することは、ユーザーエクスペリエンスの向上や業務プロセスの改善に不可欠です。特に、API連携やダッシュボード構築においては、データの正確性とリアルタイム性が重要となります。この記事では、Google Apps Script（GAS）のGmailMessage.getDate()関数を活用して、Gmail経由で送信されたフォームの送信日時を取得し、それをダッシュボードに表示する方法を解説します。フォームの送信時間追跡ダッシュボードを構築することで、送信時間帯の分析、ボトルネックの特定、そして最適なフォーム設計への改善サイクルを実現します。

GmailMessage.getDate()の基本

GmailMessage.getDate()は、Gmailのメッセージオブジェクトから送信日時を取得するためのGASの関数です。この関数は、メールが送信された日時をJavaScriptのDateオブジェクトとして返します。Dateオブジェクトは、日付や時刻に関する様々な操作（フォーマット変換、比較など）をサポートしています。

構文：

message.getDate();

  • message：GmailMessageオブジェクト

  • 戻り値：Dateオブジェクト（送信日時）

この関数を利用することで、Gmail経由で送信されたフォームデータの送信日時を正確に取得し、Webアプリケーションで利用できます。

Webアプリ開発での利用：フォーム送信時間追跡ダッシュボード

フォーム送信時間追跡ダッシュボードは、フォームの利用状況を可視化し、改善点を特定するための強力なツールです。ここでは、GASとGmailMessage.getDate()を使用して、簡単なダッシュボードを構築する例を紹介します。

実装例1：Googleスプレッドシートへの記録

Gmailで受信したフォーム送信メールから送信日時を取得し、Googleスプレッドシートに記録するスクリプトです。

function recordFormSubmissionTime() {
  // フォーム送信メールを検索する条件
  const searchKeyword = "フォーム送信通知";
  const threads = GmailApp.search(searchKeyword, 0, 1); // 最新の1件を取得
  if (threads.length === 0) {
    Logger.log("フォーム送信メールが見つかりませんでした。");
    return;
  }

  // スレッドからメッセージを取得
  const messages = threads[0].getMessages();
  const message = messages[messages.length - 1]; // 最新のメッセージを取得

  // 送信日時を取得
  const submissionDate = message.getDate();

  // スプレッドシートを開く
  const spreadsheetId = "YOUR_SPREADSHEET_ID"; // スプレッドシートIDを設定
  const sheetName = "フォーム送信記録"; // シート名を設定
  const spreadsheet = SpreadsheetApp.openById(spreadsheetId);
  const sheet = spreadsheet.getSheetByName(sheetName);

  // データを書き込む
  sheet.appendRow([submissionDate]);
  Logger.log("フォーム送信日時を記録しました：" + submissionDate);
}

カスタマイズ：

  • searchKeyword：フォーム送信メールを特定するためのキーワード（件名など）

  • spreadsheetId：記録先のGoogleスプレッドシートID

  • sheetName：記録先のシート名

実装例2：HTMLダッシュボードへの表示

取得した送信日時をHTMLダッシュボードに表示する例です。ここでは、簡易的なHTMLとGASの連携を解説します。

function doGet(e) {
  // フォーム送信日時を取得（上記の実装例1を参考に）
  const submissionDate = getLatestFormSubmissionDate(); // 仮の関数

  // HTMLテンプレートを作成
  const template = HtmlService.createTemplateFromFile('index');
  template.submissionDate = submissionDate;

  // HTMLを出力
  return template.evaluate().setTitle('フォーム送信ダッシュボード');
}

function getLatestFormSubmissionDate() {
  // 実装例1のコードを参考に、最新のフォーム送信日時を取得する処理を記述
  // スプレッドシートから最新の送信日時を取得するなどの処理を追加
  return new Date(); // 仮の値を返す
}

index.html (例):




  フォーム送信ダッシュボード


  
最新のフォーム送信日時

  


カスタマイズ：

  • HTMLのデザインを自由にカスタマイズ

  • 送信時間以外のデータ（フォームの内容など）も表示

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

問題1：Gmailの検索結果が取得できない

原因：検索キーワードが間違っている、または該当するメールが存在しない。

解決策：検索キーワードを確認し、Gmailで実際に検索してメールが存在することを確認してください。

問題2：日付の形式が意図した通りにならない

原因：Dateオブジェクトのフォーマットが適切でない。

解決策：Utilities.formatDate()関数を使用して、日付を 원하는形式にフォーマットしてください。

Utilities.formatDate(date, timeZone, format);

  • date：Dateオブジェクト

  • timeZone：タイムゾーン（例：’JST’）

  • format：フォーマット文字列（例：’yyyy/MM/dd HH:mm:ss’）

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

  • 時間帯別分析：送信日時を時間帯別に集計し、グラフで可視化することで、アクセスが多い時間帯を特定できます。

  • 異常検知：平均的な送信時間から大きく外れる送信を検知し、アラートを出すことで、不正なアクセスやシステムエラーを早期に発見できます。

  • API連携：取得した送信日時を外部APIに連携し、他のシステムと連携した分析や処理を実現できます。

まとめ

GmailMessage.getDate()とGASを組み合わせることで、フォーム送信時間追跡ダッシュボードを簡単に構築できます。このダッシュボードを活用することで、ユーザーエクスペリエンスの向上、業務プロセスの改善、そしてデータに基づいた意思決定を支援できます。今回紹介した実装例やトラブルシューティングを参考に、ぜひ独自のダッシュボードを構築し、Webアプリケーション開発に役立ててください。