未分類

GASで成績可視化！EmbeddedChartBuilder.buildで教育現場のデータ分析を効率化

GASで成績可視化！EmbeddedChartBuilder.buildで教育現場のデータ分析を効率化

教育現場における成績管理は、生徒の学習状況を把握し、適切な指導を行う上で非常に重要です。しかし、手作業での集計や分析には時間がかかり、担当教員の負担も大きくなりがちです。そこで、Google Apps Script（GAS）とEmbeddedChartBuilder.buildを活用することで、成績データを効率的に可視化し、教育現場のデータ分析を大幅に改善できます。

EmbeddedChartBuilder.buildとは？

EmbeddedChartBuilder.build()は、Google Apps ScriptのChartsサービスで利用できるメソッドの一つです。このメソッドを使うと、スプレッドシートなどのデータに基づいて作成したグラフを、ウェブページやドキュメントに埋め込むためのオブジェクトを生成できます。これにより、動的なグラフを簡単に作成し、教育現場でのデータ共有やプレゼンテーションを効果的に行うことが可能になります。

教育現場での利用シチュエーション：成績管理

成績管理において、EmbeddedChartBuilder.buildは以下のような課題を解決します。

  • 手作業による集計・分析の時間を削減

  • 生徒の成績傾向を視覚的に把握

  • データに基づいた客観的な評価

  • 保護者への説明資料作成の効率化

GASとEmbeddedChartBuilder.buildを使った成績可視化の実装例

以下は、GASとEmbeddedChartBuilder.buildを使って、生徒の成績データをグラフ化する具体的なコード例です。

// スプレッドシートからデータを取得し、グラフを作成する関数
function createGradeChart() {
  // スプレッドシートIDとシート名を設定
  const spreadsheetId = "YOUR_SPREADSHEET_ID";
  const sheetName = "成績データ";

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

  // データ範囲を取得（例：A1からB10）
  const dataRange = sheet.getRange("A1:B10");
  const data = dataRange.getValues();

  // グラフビルダーを作成
  const chart = Charts.newBarChart()
    .setTitle("生徒別成績")
    .setXAxisTitle("生徒名")
    .setYAxisTitle("点数")
    .addRange(dataRange)
    .setPosition(5, 5, 0, 0) // グラフの位置とサイズ
    .build();

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

解説：

  • SpreadsheetApp.openById(spreadsheetId)でスプレッドシートを開きます。YOUR_SPREADSHEET_IDは実際のスプレッドシートIDに置き換えてください。

  • sheet.getRange("A1:B10")でデータ範囲を指定します。必要に応じて範囲を調整してください。

  • Charts.newBarChart()で棒グラフを作成します。他のグラフタイプ（円グラフ、折れ線グラフなど）も選択可能です。

  • setPosition(5, 5, 0, 0)でグラフの位置とサイズを指定します。

  • sheet.insertChart(chart)でシートにグラフを挿入します。

実用的なコード例：出席率の可視化

出席率を可視化する例です。欠席数を集計し、出席率を計算して円グラフで表示します。

function createAttendanceChart() {
  // スプレッドシートIDとシート名を設定
  const spreadsheetId = "YOUR_SPREADSHEET_ID";
  const sheetName = "出席データ";

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

  // 出席データ範囲を取得（例：A2からB10。A列：生徒名、B列：出席状況（〇、欠席））
  const dataRange = sheet.getRange("A2:B10");
  const data = dataRange.getValues();

  // 欠席数をカウント
  let absentCount = 0;
  for (let i = 0; i < data.length; i++) {
    if (data[i][1] === "欠席") {
      absentCount++;
    }
  }

  // 出席率を計算
  const totalStudents = data.length;
  const attendanceRate = ((totalStudents - absentCount) / totalStudents) * 100;

  // グラフデータを作成
  const chartData = [
    ["出席", "欠席"],
    [attendanceRate, 100 - attendanceRate],
  ];

  // グラフビルダーを作成
  const chart = Charts.newPieChart()
    .setTitle("出席率")
    .setDataTable(chartData)
    .setPosition(5, 15, 0, 0) // グラフの位置とサイズ
    .build();

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

解説：

  • 出席データを基に欠席数をカウントし、出席率を計算します。

  • Charts.newPieChart()で円グラフを作成し、出席率と欠席率を表示します。

課題配布状況の可視化

課題の提出状況を可視化する例です。提出済みの課題と未提出の課題の数を集計し、グラフで表示します。

function createAssignmentChart() {
  // スプレッドシートIDとシート名を設定
  const spreadsheetId = "YOUR_SPREADSHEET_ID";
  const sheetName = "課題提出状況";

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

  // 課題提出状況データ範囲を取得（例：A2からB10。A列：生徒名、B列：提出状況（提出、未提出））
  const dataRange = sheet.getRange("A2:B10");
  const data = dataRange.getValues();

  // 提出済みの課題と未提出の課題の数をカウント
  let submittedCount = 0;
  let notSubmittedCount = 0;
  for (let i = 0; i < data.length; i++) {
    if (data[i][1] === "提出") {
      submittedCount++;
    } else {
      notSubmittedCount++;
    }
  }

  // グラフデータを作成
  const chartData = [
    ["提出", "未提出"],
    [submittedCount, notSubmittedCount],
  ];

  // グラフビルダーを作成
  const chart = Charts.newColumnChart()
    .setTitle("課題提出状況")
    .setDataTable(chartData)
    .setXAxisTitle("状況")
    .setYAxisTitle("人数")
    .setPosition(5, 25, 0, 0) // グラフの位置とサイズ
    .build();

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

解説：

  • 課題提出状況データを基に提出済みの課題と未提出の課題数をカウントします。

  • Charts.newColumnChart()で縦棒グラフを作成し、提出状況を表示します。

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

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

  • グラフの表示位置がおかしい：setPositionメソッドの引数を調整して、グラフの位置を調整してください。

  • データが正しく反映されない：データ範囲の指定が正しいか、データの形式がグラフに適しているか確認してください。

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

  • グラフの種類の変更：Charts.newBarChart()、Charts.newPieChart()、Charts.newLineChart()など、さまざまなグラフタイプを選択できます。

  • グラフタイトルの変更：setTitle()メソッドでグラフタイトルを変更できます。

  • 軸ラベルの変更：setXAxisTitle()、setYAxisTitle()メソッドで軸ラベルを変更できます。

  • グラフの色やスタイルの変更：Charts APIには、グラフの色やスタイルをカスタマイズするためのさまざまなメソッドが用意されています。

まとめ

EmbeddedChartBuilder.buildとGASを活用することで、教育現場における成績管理、出席管理、課題配布状況の可視化を効率的に行うことができます。これらのツールを組み合わせることで、教員の業務負担を軽減し、生徒の学習状況をより深く理解することが可能になります。ぜひ、本記事で紹介したコード例を参考に、教育現場でのデータ活用を推進してください。

GASとEmbeddedChartBuilder.buildを効果的に活用し、教育現場のデータ分析をより高度なものにしましょう。

PR

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

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