未分類

GASでフォームデータ可視化！EmbeddedChartBuilder.asColumnChartでWebアプリのダッシュボードを強化

GASでフォームデータ可視化！EmbeddedChartBuilder.asColumnChartでWebアプリのダッシュボードを強化

Webアプリケーション開発において、フォームデータの可視化は重要な要素です。特に、API連携を通じて収集したデータをダッシュボードで表示する場合、データの傾向を把握し、迅速な意思決定を支援する必要があります。この記事では、Google Apps Script (GAS) の EmbeddedChartBuilder.asColumnChart を使用して、フォームデータを効果的に可視化し、Webアプリのダッシュボードを強化する方法を解説します。

EmbeddedChartBuilder.asColumnChartとは？

EmbeddedChartBuilder.asColumnChart は、GASで利用できるグラフ作成機能の一つで、棒グラフを生成するために使用されます。Webアプリケーションに埋め込むことで、データの推移や比較を視覚的に分かりやすく表現できます。フォームから収集したデータやAPI連携で取得したデータをグラフ化し、リアルタイムに近い形でダッシュボードに表示することが可能です。

Webアプリ開発における利用シチュエーション

Webアプリ開発、特にフォーム作成、API連携、ダッシュボードなどのシチュエーションにおいて、EmbeddedChartBuilder.asColumnChart は非常に役立ちます。例えば、以下のような業務課題を解決できます。

  • フォームデータの集計と可視化: アンケートフォームや問い合わせフォームから収集した回答データを、リアルタイムにグラフ表示し、回答傾向を分析する。

  • API連携データのダッシュボード表示: 外部APIから取得したデータを定期的に更新し、ダッシュボードに表示することで、最新の情報を常に把握する。

  • KPIのモニタリング: Webアプリの利用状況や成果をKPIとして定義し、その推移をグラフで表示することで、目標達成度を可視化する。

実装方法

基本的な実装手順

  1. スプレッドシートの準備: グラフ化するデータが格納されたスプレッドシートを用意します。

  2. GASのスクリプト作成: スプレッドシートからデータを取得し、EmbeddedChartBuilder.asColumnChart を使用してグラフを作成するGASスクリプトを作成します。

  3. Webアプリケーションへの埋め込み: 作成したグラフをWebアプリケーションに埋め込みます。

実用的なコード例

例1: フォームデータの棒グラフ表示

この例では、フォームから送信されたデータをスプレッドシートに記録し、そのデータを棒グラフとして表示します。

// スプレッドシートのIDとシート名を設定
const spreadsheetId = "YOUR_SPREADSHEET_ID";
const sheetName = "Form Responses";

function createColumnChart() {
  // スプレッドシートを開く
  const ss = SpreadsheetApp.openById(spreadsheetId);
  const sheet = ss.getSheetByName(sheetName);

  // データの範囲を取得
  const data = sheet.getDataRange();
  const numRows = data.getNumRows();
  const numCols = data.getNumColumns();

  // グラフを作成
  const chart = sheet.newChart()
    .setChartType(Charts.ChartType.COLUMN)
    .addRange(data)
    .setPosition(5, 5, 0, 0) // グラフの表示位置
    .setOption("title", "フォーム回答データ") // グラフのタイトル
    .build();

  // シートにグラフを挿入
  sheet.insertChart(chart);
}

例2: API連携データのリアルタイム表示

この例では、外部APIから取得したデータを定期的に更新し、棒グラフとしてダッシュボードに表示します。

// APIのエンドポイントとAPIキーを設定
const apiUrl = "YOUR_API_ENDPOINT";
const apiKey = "YOUR_API_KEY";

function updateColumnChart() {
  // APIからデータを取得 (JSON形式を想定)
  const response = UrlFetchApp.fetch(apiUrl + "?api_key=" + apiKey);
  const data = JSON.parse(response.getContentText());

  // スプレッドシートを開く
  const ss = SpreadsheetApp.openById(spreadsheetId);
  const sheet = ss.getSheetByName(sheetName);

  // データをシートに書き込む (既存のデータをクリアしてから書き込む)
  sheet.clearContents();
  sheet.getRange(1, 1, data.length, data[0].length).setValues(data);

  // グラフを作成 (例1と同様の手順)
  const chart = sheet.newChart()
    .setChartType(Charts.ChartType.COLUMN)
    .addRange(sheet.getDataRange())
    .setPosition(5, 5, 0, 0)
    .setOption("title", "API連携データ")
    .build();

  // シートにグラフを挿入 (既存のグラフを削除してから挿入)
  const charts = sheet.getCharts();
  if (charts.length > 0) {
    sheet.removeChart(charts[0]);
  }
  sheet.insertChart(chart);
}

例3: ダッシュボードへの埋め込み

この例では、作成したグラフをWebアプリケーションのダッシュボードに埋め込む方法を示します。 HtmlService を使用して、グラフを埋め込んだHTMLページを作成します。

// グラフを埋め込んだHTMLページを作成する関数
function doGet(e) {
  // スプレッドシートを開く
  const ss = SpreadsheetApp.openById(spreadsheetId);
  const sheet = ss.getSheetByName(sheetName);

  // グラフを取得
  const charts = sheet.getCharts();
  let chartImage = "";
  if (charts.length > 0) {
    chartImage = charts[0].getAs("image/png").getDataAsString();
  } else {
    return HtmlService.createHtmlOutput("
グラフが見つかりません
");
  }

  // HTMLに埋め込む
  const htmlOutput = HtmlService.createHtmlOutput(
    ""
  );
  return htmlOutput;
}

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

  • グラフが表示されない: スプレッドシートのIDやシート名が正しいか確認してください。また、GASの実行権限が付与されているか確認してください。

  • データが正しく表示されない: データの範囲指定が正しいか確認してください。また、データの形式がグラフの要件に合っているか確認してください。

  • API連携でエラーが発生する: APIのエンドポイントやAPIキーが正しいか確認してください。また、APIのレスポンス形式がGASで処理できる形式であるか確認してください。

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

  • グラフのスタイルのカスタマイズ: setOption メソッドを使用して、グラフのタイトル、軸ラベル、色などをカスタマイズできます。

  • 複数のグラフの表示: 複数のグラフを作成し、ダッシュボードに並べて表示することで、より詳細な分析が可能になります。

  • インタラクティブなグラフの作成: addRange メソッドを使用して、スプレッドシートの特定の範囲をグラフに反映させることで、データのフィルタリングやドリルダウンが可能になります。

まとめ

EmbeddedChartBuilder.asColumnChart を活用することで、GASを用いたWebアプリケーション開発において、フォームデータやAPI連携データの可視化を容易に行うことができます。この記事で紹介したコード例やトラブルシューティングを参考に、Webアプリのダッシュボードを強化し、より効果的なデータ分析を実現してください。

PR

CodeCampは、現役エンジニアからマンツーマンで学べるオンラインプログラミングスクールです。WebデザインやWebサービス開発、転職支援など、目的に合わせた多様なコースが選べます。
朝7時〜夜23時40分まで、365日レッスンが受けられるため、忙しい方でも自分のペースで学習を進めることが可能です。通過率8%の厳しい選考を通過した質の高い講師陣が、あなたのキャリアチェンジを強力にサポートします。
さらに、未経験者向けのカリキュラムや、学習開始から20日以内の全額返金保証制度もあるため、プログラミング学習に不安を感じている方でも安心して始めることができます。

CodeCampで理想の働き方を実現しよう