未分類

EmbeddedChart.getBlobで実現する成績管理の可視化：GASで教育現場の課題を解決

EmbeddedChart.getBlobで実現する成績管理の可視化：GASで教育現場の課題を解決

教育現場における成績管理は、教員の負担が大きく、生徒の状況を把握する上で時間がかかるという課題があります。そこで、Google Apps Script (GAS) の EmbeddedChart.getBlob() を活用することで、成績データをグラフとして可視化し、教員の業務効率化と生徒の学習状況の把握を支援します。

EmbeddedChart.getBlob()とは

EmbeddedChart.getBlob() は、Google Sheetsに埋め込まれたグラフを画像データとして取得するGASの関数です。取得した画像データは、メールに添付したり、Google Driveに保存したり、Webサイトに表示したりするなど、様々な用途に利用できます。

成績管理におけるEmbeddedChart.getBlob()の活用

成績管理において、EmbeddedChart.getBlob() は以下のような活用が可能です。

  • 成績分布の可視化: クラス全体の成績分布をヒストグラムで表示し、生徒の理解度を把握する。

  • 生徒ごとの成績推移: 生徒ごとの成績推移を折れ線グラフで表示し、学習の進捗状況を把握する。

  • 科目ごとの成績比較: 科目ごとの平均点を棒グラフで表示し、得意・不得意科目を把握する。

実装例

例1: 成績分布を可視化し、メールで送信する

この例では、スプレッドシートに記載された成績データからヒストグラムを作成し、その画像をメールで送信します。

function sendGradeDistributionChart() {
  // スプレッドシートとグラフのIDを設定
  const spreadsheetId = "YOUR_SPREADSHEET_ID";
  const chartId = "YOUR_CHART_ID";

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

  // グラフを取得
  const chart = spreadsheet.getSheetByName("シート1").getCharts().find(chart => chart.getId() === chartId);

  // グラフが存在しない場合のエラー処理
  if (!chart) {
    Logger.log("グラフが見つかりません");
    return;
  }

  // グラフをBlobとして取得
  const blob = chart.getAs("image/png");

  // メールを送信
  MailApp.sendEmail({
    to: "recipient@example.com",
    subject: "成績分布",
    body: "成績分布のグラフです。",
    attachments: [blob]
  });
}

例2: 生徒ごとの成績推移を可視化し、Google Driveに保存する

この例では、生徒ごとの成績推移を折れ線グラフで作成し、その画像をGoogle Driveに保存します。

function saveStudentGradeTrendChart() {
  // スプレッドシートとグラフのIDを設定
  const spreadsheetId = "YOUR_SPREADSHEET_ID";
  const chartId = "YOUR_CHART_ID";

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

  // グラフを取得
  const chart = spreadsheet.getSheetByName("シート1").getCharts().find(chart => chart.getId() === chartId);

  // グラフが存在しない場合のエラー処理
  if (!chart) {
    Logger.log("グラフが見つかりません");
    return;
  }

  // グラフをBlobとして取得
  const blob = chart.getAs("image/png");

  // Google Driveにファイルを保存
  DriveApp.createFile(blob).setName("student_grade_trend.png");
}

例3: 出席状況を可視化し、指定期間のデータを抽出

この例では、生徒の出席状況を円グラフで表示し、特定期間のデータを抽出します。

function visualizeAttendance() {
  // スプレッドシートのIDとシート名、グラフIDを設定
  const spreadsheetId = "YOUR_SPREADSHEET_ID";
  const sheetName = "出席データ";
  const chartId = "YOUR_CHART_ID";
  // 抽出する期間を設定（例：2024年4月1日から2024年4月30日）
  const startDate = new Date(2024, 3, 1); // 4月は0から数えるので3
  const endDate = new Date(2024, 3, 30);

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

  // グラフを取得
 const chart = sheet.getCharts().find(chart => chart.getId() === chartId);
   // グラフが存在しない場合のエラー処理
  if (!chart) {
    Logger.log("グラフが見つかりません");
    return;
  }

  // データの範囲を取得（例：A1からC10）
  const range = sheet.getDataRange();
  const values = range.getValues();

  // 期間内のデータを抽出
  const filteredData = values.filter(row => {
    const date = new Date(row[0]); // 1列目を日付として扱う
    return date >= startDate && date <= endDate;
  });

  // 抽出されたデータを出力（確認用）
  Logger.log(filteredData);

  // グラフをBlobとして取得
  const blob = chart.getAs("image/png");

  // Google Driveに保存（必要に応じて）
  DriveApp.createFile(blob).setName("attendance_chart.png");
}

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

  • グラフが表示されない: スプレッドシートID、シート名、グラフIDが正しいか確認してください。

  • メールが送信されない: MailAppの権限が付与されているか確認してください。

  • 画像が保存されない: DriveAppの権限が付与されているか確認してください。

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

  • グラフの種類を変更する: EmbeddedChartBuilder を使用して、グラフの種類、タイトル、軸ラベルなどをカスタマイズできます。

  • 複数のグラフを組み合わせる: 複数のグラフを1つの画像として出力できます。

  • Webサイトにグラフを表示する: 取得した画像をHTMLの<img>タグで表示できます。

まとめ

GASの EmbeddedChart.getBlob() を活用することで、成績管理を効率化し、生徒の学習状況を可視化することができます。この記事で紹介した例を参考に、ぜひ教育現場での活用を検討してみてください。

PR

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

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