未分類

GASでWebアプリのダッシュボードを強化！EmbeddedChartBuilder.asColumnChartで動的グラフを実装

GASでWebアプリのダッシュボードを強化！EmbeddedChartBuilder.asColumnChartで動的グラフを実装

Webアプリケーション開発において、ダッシュボードは重要な役割を果たします。特に、フォームからの入力データやAPI連携で取得したデータを可視化するグラフは、ユーザーにとって状況把握を助ける強力なツールとなります。本記事では、Google Apps Script（GAS）のEmbeddedChartBuilder.asColumnChart関数を用いて、Webアプリのダッシュボードに動的な棒グラフを実装する方法を解説します。Webアプリ開発におけるデータ可視化の課題を解決し、より使いやすく、情報豊かなダッシュボードを作成しましょう。

EmbeddedChartBuilder.asColumnChartとは

EmbeddedChartBuilder.asColumnChartは、GASでグラフを作成するためのクラスEmbeddedChartBuilderのメソッドの一つで、棒グラフ（縦棒グラフ）を作成するために使用されます。このメソッドを使うことで、スプレッドシートのデータに基づいて、Webアプリに埋め込むことができる動的なグラフを簡単に作成できます。

基本的な使い方

EmbeddedChartBuilder.asColumnChartを使用するには、まずSpreadsheetAppサービスを使ってスプレッドシートにアクセスし、グラフ化したいデータの範囲を指定します。そして、その範囲を元にEmbeddedChartBuilderを作成し、asColumnChartメソッドを呼び出して棒グラフを作成します。

Webアプリのダッシュボードへの実装

ここでは、WebアプリのダッシュボードにEmbeddedChartBuilder.asColumnChartで作成した棒グラフを実装する具体的な方法を説明します。フォームから入力されたデータを集計し、その結果をグラフとして表示する例を見ていきましょう。

実装例1：フォーム入力データの可視化

フォームから入力されたアンケート結果を、GASを使って集計し、その結果を棒グラフで表示するWebアプリを作成します。

// スプレッドシートのIDとシート名
const spreadsheetId = "YOUR_SPREADSHEET_ID";
const sheetName = "フォームの回答";

function doGet(e) {
  return HtmlService.createTemplateFromFile('index').evaluate();
}

function getChartData() {
  // スプレッドシートを開く
  const ss = SpreadsheetApp.openById(spreadsheetId);
  const sheet = ss.getSheetByName(sheetName);
  
  // データの範囲を取得（A1から最終行・最終列まで）
  const lastRow = sheet.getLastRow();
  const lastColumn = sheet.getLastColumn();
  const dataRange = sheet.getRange(1, 1, lastRow, lastColumn);
  
  // グラフビルダーを作成
  const chart = sheet.newChart()
    .setChartType(Charts.ChartType.COLUMN)
    .addRange(dataRange)
    .setPosition(5, 5, 0, 0) // グラフの位置とサイズ
    .build();
  
  // シートにグラフを挿入
  sheet.insertChart(chart);
  
  // グラフのBlobを取得 (HTMLに渡すため)
  return chart.getBlob().getDataAsString();
}

//クライアント側のHTML
//

解説：
このコードでは、まずスプレッドシートからデータを取得し、EmbeddedChartBuilder.asColumnChartを使って棒グラフを作成しています。setPositionメソッドでグラフの位置とサイズを指定し、buildメソッドでグラフを完成させます。最後に、作成したグラフをシートに挿入しています。
HTML側では、getChartData()関数からグラフのバイナリデータを取得し、<img>タグのsrc属性にdata URIとして埋め込むことで、グラフを表示しています。

実装例2：API連携データの可視化

外部APIから取得したデータを、GASを使って加工し、その結果を棒グラフで表示するWebアプリを作成します。

function getApiDataAndCreateChart() {
  // APIからデータを取得 (例: JSONPlaceholder)
  const apiUrl = "https://jsonplaceholder.typicode.com/todos";
  const response = UrlFetchApp.fetch(apiUrl);
  const jsonData = JSON.parse(response.getContentText());
  
  // データを集計 (例: completedがtrueの数を集計)
  let completedCount = 0;
  jsonData.forEach(item => {
    if (item.completed) {
      completedCount++;
    }
  });
  
  // スプレッドシートにデータを書き込む
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const sheet = ss.getActiveSheet();
  sheet.getRange("A1").setValue("完了数");
  sheet.getRange("B1").setValue(completedCount);
  
  // グラフを作成
  const chart = sheet.newChart()
    .setChartType(Charts.ChartType.COLUMN)
    .addRange(sheet.getRange("A1:B1"))
    .setPosition(5, 5, 0, 0)
    .build();
  
  sheet.insertChart(chart);
}

解説：
このコードでは、まずUrlFetchApp.fetchを使って外部APIからデータを取得し、JSON形式で解析しています。取得したデータから、完了したタスクの数を集計し、スプレッドシートに書き込んでいます。その後、スプレッドシートのデータをもとにEmbeddedChartBuilder.asColumnChartを使って棒グラフを作成し、シートに挿入しています。

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

  • グラフが表示されない：スプレッドシートのIDやシート名が正しいか確認してください。また、データの範囲が正しく指定されているか確認してください。

  • グラフのデータが正しくない：APIから取得したデータの形式が期待通りか確認してください。また、データの集計処理が正しく行われているか確認してください。

  • グラフの見た目をカスタマイズしたい：EmbeddedChartBuilderの各種メソッド（setTitle, setXAxisTitle, setYAxisTitleなど）を使って、グラフのタイトルや軸ラベルなどをカスタマイズできます。

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

EmbeddedChartBuilderには、さまざまなカスタマイズオプションが用意されています。例えば、グラフの色を変更したり、軸の範囲を指定したり、凡例の位置を変更したりすることができます。これらのオプションを組み合わせることで、より見やすく、分かりやすいグラフを作成することができます。

応用例：複数データの比較

複数のAPIからデータを取得し、それらを一つのグラフで比較することができます。例えば、複数のサービスの利用状況を比較するダッシュボードを作成することができます。

まとめ

EmbeddedChartBuilder.asColumnChartは、GASを使ってWebアプリのダッシュボードに動的な棒グラフを実装するための強力なツールです。本記事で紹介したコード例やトラブルシューティングを参考に、ぜひあなたのWebアプリにEmbeddedChartBuilder.asColumnChartを導入し、より使いやすく、情報豊かなダッシュボードを作成してください。フォーム入力データやAPI連携データを効果的に可視化することで、ユーザーエクスペリエンスを向上させ、業務効率を改善することができます。

PR

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

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