JavaScript で生徒の進捗レポートを作成する

生徒の進捗レポートをオンラインで表示できることは、保護者と教育者の両方に多くのメリットをもたらします。オンライン アクセスにより、保護者と生徒は生徒の学業成績に関するリアルタイムの洞察を得ることができ、常に情報を入手して教育に取り組むことができます。進捗状況の追跡、出席状況の監視、成績の表示、追加のサポートが必要な領域の特定が簡単に行えます。

教育者にとって、オンライン進捗レポートは報告プロセスを合理化し、生徒の成績の包括的な評価の生成と共有を容易にします。これにより、教師は保護者とより効果的にコミュニケーションできるようになり、コラボレーションが促進され、的を絞った介入が可能になります。全体として、学生の進捗レポートにオンラインでアクセスできることで、コミュニケーションが強化され、説明責任が促進され、学生の成功への積極的なアプローチがサポートされます。

ありがたいことに、ActiveReportsJS を使用すると、教育者がこれらの進捗レポートを簡単に作成およびカスタマイズし、Web アプリケーションで簡単に表示できるようになります。この記事では、ActiveReportsJS レポート デザイナーを使用して進捗レポートを作成し、レポート ビューアーを使用して JavaScript アプリケーションでレポートを表示する方法を説明します。

コンテンツの概要

• データをレポートに接続する

• 進捗レポートのヘッダーとフッターの作成

• 学生情報の表示

• GPA 概要と学業成績表の作成

• 行動と態度の進捗タブリックスの作成

• 出席表の作成

• ActiveReportsJS を JavaScript アプリケーションに追加する

  
  

記事に従って進みたい場合は、完成したレポートと申請書をここで見つけることができます。

データをレポートに接続する

この記事では、ActiveReportsJS ダウンロードに含まれるスタンドアロン デザイナーを使用します。デザイナーをインストールして起動すると、空のレポートが表示されます。レポートにコントロールを追加する前に、使用するデータをレポートにリンクする必要があります。

デザイナーの右上で、 「データ」パネルを選択します。これにより、データ ソース、データ セット、パラメータが表示されます。

始めるには、データ ソースが必要です。 「データ ソース」セクションの「追加」ボタンをクリックして、「データ ソース」ウィンドウを表示します。

ここから、データを検索する場所をレポートに指示できます。データの取得元に関しては、リモート JSONまたは埋め込み JSON の2 つのオプションがあります。リモート JSON では、API エンドポイントに URL を指定する必要がありますが、埋め込み JSON では、データをレポートに直接ロードするために使用する JSON ファイルを選択できます。

このレポートでは、埋め込み JSON を使用して複数のJSONファイルを読み込みます。生徒の情報、成績、行動、出席に関するファイルがあるため、これらのファイルごとにデータ ソースを作成する必要があります。

完了すると、次のようになります。

4 つのデータ ソースを設定したので、それぞれのデータ セットを作成します。データ ソースのデータ セットを作成するには、使用するデータ ソースの横にあるプラスアイコンをクリックするだけです。これにより、[データ セット] ウィンドウが表示されます。

埋め込み JSON を使用しているため、提供する必要があるのは JSON パスだけです。これにより、JSON からどのデータを取得するかレポートに指示されます。この場合、すべての JSON を取得したいので、パス$.*を使用します。これにより、レポートは利用可能なすべてのデータを取得するように指示されます。

JSON パスを入力したら、 「検証」ボタンを押して、データ セットが要求されたデータを取得できることを確認します。

すべてが正しく動作する場合は、 「データベース フィールド」フィールドにデータの値が入力されるはずです。

各データ ソースのデータ セットを設定すると、データ パネルは次のようになります。

以上です！これで、コントロールで参照できるデータがレポートに接続されました。次のセクションでは、ヘッダーとフッターから始めて、レポートのさまざまなセクションの構築を開始します。

進捗レポートのヘッダーとフッターの作成

データが設定されたので、レポート要素の作成を開始できます。まず、レポート内のページのヘッダーとフッターを作成します。ツールバーで「セクション」タブを選択し、 「ヘッダーの追加」ボタンと「フッターの追加」ボタンをクリックします。

これにより、レポートにヘッダー セクションとフッター セクションが追加されます。コントロール ツールボックスからヘッダー セクションに 2 つのコントロールを追加します。デザイナーの左上にあるハンバーガー ボタンをクリックしてツールボックスを展開し、 TextBoxとImageコントロールをページ ヘッダーにドラッグします。

TextBox 内で、その値を「Student Progress Report」に設定します。

次に、画像コントロールのレポートに画像を埋め込みます。 [画像] コントロールを選択し、そのプロパティの [外観] セクションで [画像] ドロップダウンを展開します。画像を埋め込むには、 [埋め込み]ボタンをクリックし、[**ロード…**] をクリックしてファイル エクスプローラーを開き、ロードする画像を選択します。

画像が読み込まれ、テキストが設定されたので、[プロパティ] パネルでサイズ変更とスタイルを少しだけ行います。完了すると、ヘッダー セクションは次のようになります。

次はフッターを作成します。フッターには 3 つの TextBox を含める必要があります。2 つは連絡先情報、1 つは現在の年を表示します。連絡先情報を含む各ボックスの横に、電話番号であることを示す電話のアイコンも含めます。

3 つの TextBox コントロールと 2 つの Image コントロールをページのフッター領域にドラッグします。画像を設定するには、上で概説したのと同じ手順に従います。

2 つの TextBox コントロールについては、レポート所有者に連絡するために使用できる電話番号を入力するだけですが、3 つ目については、常に現在の年が表示されるように式を使用します。

この 3 番目の TextBox 内に、次の値を配置します: © { Year(Now())} GrapeCity, Inc. All Rights Reserved.文字列内には中括弧が含まれており、中括弧内にはYear(Now()) ; という式が含まれていることがわかります。これは現在の年を返します。中括弧内に配置したため、レポートはこれを式として評価することを認識しています。

少しスタイルを設定すると、フッターは次のようになります。

レポートをプレビューして、作成した式がどのように評価されるかを確認できます。

ヘッダーとフッターを作成したので、これらは各レポート ページに表示されます。次のセクションでは、生徒に関する基本情報を表示することで、ロードしたデータの一部を追加します。

学生情報の表示

ここで、レポートがロードしているデータの一部の組み込みを開始します。まず、TextBox と Container コントロールをレポート本文にドラッグします。ページの幅のほとんどが広がるように両方を展開し、TextBox コントロール内に「Student Information」というテキストを含めます。

このコンテナを使用して、生徒に関連付けられたすべての情報を保持します。

ここで、コンテナ内に TextBox を配置します。これらは、ラベルとデータ セットからの情報の保持の両方に使用されます。

以下に一致するようにコンテナを設定します。

次に、空の各 TextBox 内に、学生情報データ セットからデータを取得する式を含めます。

関連する TextBox に次のテキストを含めます。

完了すると、レポートをプレビューして次の内容を確認できるようになります。

GPA 概要と学業成績表の作成

次に、生徒の成績に関する情報を表示します。

まず、GPA 概要セクションを作成します。前のセクションと同様に、TextBox およびContainerコントロールをレポートにドラッグします。ページの幅のほとんどが広がるように両方を展開し、TextBox コントロール内に「GPA Summary」というテキストを含めます。

このコンテナ内に、学生の全体的な GPA とそのパーセンタイルを表示したいと考えています。

4 つの TextBox をコンテナにドラッグし、次のように設定します。

次に、空の TextBox 内にさらにいくつかの式を設定する必要があります。

全体的な GPA 式は、それらが該当するパーセンタイルを計算し、それに基づいて、関連する GPA 数値を提供します。パーセンタイル式は、単純にパーセンテージに基づいてグレードを計算します。

完了すると、レポートをプレビューすると以下が表示されるはずです。

概要を作成したので、今度は生徒の進捗状況の内訳を科目ごとに表示します。 [GPA Summary] セクションの下で、TextBox と Table コントロールをレポート本文にドラッグします。 TextBox 内に「Academic Progress」というテキストを含め、表内に次の列ヘッダーを含めます。

• 主題
• 教師
• 学期 1
• 学期 2
• 3学期

完了すると、次のようになります。

次に行う必要があるのは、正しいデータ セットをテーブルに関連付けることです。テーブル コントロールを選択し、[プロパティ] パネル内で、マークデータ セットを使用するように [データ セット名] ドロップダウンを設定します。これで、テーブル内でこのデータセットのデータを参照できるようになります。

表の残りの部分に次のように記入します。

もう少しスタイルを追加すると、Table コントロールは次のようになります。

レポートをプレビューすると、テーブルは次のようになります。

行動と態度の進捗タブリックスの追加

ユーザーが学業の進歩を確認できるようになったので、今度は生徒の行動や態度の進歩に対する教師の採点を示すセクションを追加します。これを行う前に、レポートに新しいセクションを追加します。レポート デザイナーの下部に、 [セクションの追加]ボタンが表示されます。これを押すと、レポートに新しいページ/連続セクションが追加されます。

次に、この新しいセクションのヘッダーの下に、TextBox コントロール、Container コントロール、および Container コントロール内の 3 つの TextBox コントロールを追加します。

ご覧のとおり、これらの TextBox に独自のテキストを入力しました。 Tablix コントロールを追加する前に、もう 1 つ変更を加えておきます。

これらの表では、アイコンを使用して、学生がExcellent 、 Satisfactory 、およびNeed Improvement の観点からどこに分類されるかを表示したいと考えています。緑、黄、赤のアイコンを使用します。これらを追加するには、関連する TextBox のImageプロパティに次の値を追加します。

ここでレポートをプレビューすると、次のように表示されるはずです。

Tablix コンテナーが設定されたので、次は Tablix コントロールを追加して、行動および姿勢の進行状況データを表示します。 Tablix コントロールをこのコンテナーにドラッグします。デザイナー ウィンドウに Tablix ウィザードがポップアップ表示されます。

Tablix ウィザードは、Tablix (またはピボット テーブルとも呼ばれる) コントロールを作成するための非常に強力なツールであり、標準のテーブルよりも動的な方法でデータを表示できます。

この記事の冒頭で作成した行動データ セットのデータを使用します。このデータ セットを展開し、 BehavioralMeasure値をウィザードの[行グループ]セクションにドラッグ アンド ドロップし、 T1 、 T2 、およびT3の値をウィザードの [値]セクションにドラッグ アンド ドロップします。 T1、T2、および T3 の集計値をCountからNoneに変更してください。

終了する前に、ウィザードの[フィルター]ボタンをクリックします。このテーブルにフィルターを設定する必要があります。ここで、 「追加」ボタンをクリックして新しいフィルターを追加します。最初のボックスをデータセットのTypeフィールドに設定し、文字列「Work Habit」を検索するようにフィルターを設定します。

完了したら、 「OK」ボタンを押すと、この時点で Tablix がどのように表示されるかを確認できます。

ここで、 「非常に満足」および「改善が必要」テキスト ボックスと同様に、T1、T2、および T3 列のデータ セルを更新して、テキスト値の代わりにアイコンを表示します。これらのデータ セルごとに、テキスト値を削除し、関連付けられた TextBox のImageプロパティを更新します。

これにより、Tablix コントロールがセル値に基づいてセルに正しい信号機アイコンを配置するようになります。スタイルをいくつか更新すると、最初の Tablix は次のようになります。

レポートをプレビューすると、Tablix は次のようになります。

次に、姿勢情報を表示する 2 番目の Tablix コントロールを作成する必要があります。良いのは、この Tablix が今作成したものとほぼ同じであるということです。作成した最初の Tablix をコピーして貼り付け、これを他の Tablix のすぐ下のコンテナーに配置します。次に、最初のヘッダー セルを「仕事の習慣」から「行動規範の遵守」に更新します。

最後に、2 番目の Tablix コントロールを選択し、コントロールの右上にある歯車アイコンをクリックします。これにより、Tablix ウィザードが再度開きます。 「フィルター」ボタンをクリックします。現在使用しているフィルターを変更します。

フィルター テキストの値を「仕事の習慣」から「教室での行動」に更新します。これで、「行動と態度の進捗」セクションは次のようになります。

レポートをプレビューすると、「行動と態度の進捗状況」セクションは次のように表示されます。

出席表の追加

レポートに追加する最後のセクションには、生徒の出席状況が表示されます。 TextBox コントロールと Tablix コントロールをレポートにドラッグし、[行動と態度の進捗状況] セクションの下に配置します。

Tablix ウィザード内では、出席データ セットを使用します。 Days値をウィザードの[Row Groups]セクションにドラッグし、 T1 、 T2 、およびT3値をウィザードの[Values]セクションにドラッグします。

また、 T1 、 T2 、およびT3の集計値をSumに設定してください。

これで、「出席」セクションは次のようになります。

レポートをプレビューすると、次のようになります。

レポートが完成したので、レポートをプレビューすると、ページは次のように表示されるはずです。

ActiveReportsJS を JavaScript アプリケーションに追加する

学生の進捗レポートを作成したので、今度は ActiveReportsJS レポート ビューアを JavaScript アプリケーションに追加して、ブラウザでレポートを表示できるようにします。 Index.htmlという名前の新しいファイルを作成し、このファイルを選択したIDEで開きます。

次のコードをファイルに追加します。

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Student Progress Report</title> <meta name="description" content="ARJS Report viewer" /> <meta name="author" content="GrapeCity" /> </head> <body></body> </html>

HTML ファイルが設定されたので、次は ActiveReportsJS をファイルに追加します。このために、CDN を使用して必要なファイルをロードします。

<head>タグ内に次のコードを追加します。

 <link rel="stylesheet" href="https://cdn.grapecity.com/activereportsjs/4.latest/styles/ar-js-ui.css" type="text/css" /> <link rel="stylesheet" href="https://cdn.grapecity.com/activereportsjs/4.latest/styles/ar-js-viewer.css" type="text/css" /> <script src="https://cdn.grapecity.com/activereportsjs/4.latest/dist/ar-js-core.js"></script> <script src="https://cdn.grapecity.com/activereportsjs/4.latest/dist/ar-js-viewer.js"></script> <script src="https://cdn.grapecity.com/activereportsjs/4.latest/dist/ar-js-pdf.js"></script> <script src="https://cdn.grapecity.com/activereportsjs/4.latest/dist/ar-js-tabular-data.js"></script> <script src="https://cdn.grapecity.com/activereportsjs/4.latest/dist/ar-js-html.js"></script>

コードの最初の 2 行は、必要な CSS ファイル、つまりコア CSS ファイルとビューア CSS ファイルをロードします。次に、コア JavaScript ファイルとビューア JavaScript ファイルを読み込みます。最後に、PDF、表形式データ、およびHTML JavaScript ファイルをロードしています。これらのファイルを使用すると、ユーザーはそれぞれのファイル タイプでレポートをエクスポートできます。

ユーザーが特定の形式でレポートをエクスポートできないようにするには、関連する<script>タグを除外するだけで済みます。これにより、ユーザーはそのファイル タイプでエクスポートできなくなります。

次に、ページ上の要素にいくつかの基本スタイルを追加します。 <head>タグ内、追加したばかりの script タグの下に、次のコードを追加します。

 <style> body { margin: 0; } #viewer-host { width: 100%; height: 100vh; } </style>

これにより、 body 要素からマージンが削除され、要素の幅と高さがviewer-hostの ID で設定されます。

ここで、 <body>タグ内に次の要素を追加します。

 <div id="viewer-host"></div>

この div にはviewer-hostの ID を与えました。これは、以前に設定した CSS スタイルを受け取ることを意味しますが、JavaScript レポート ビューアーを div に関連付けることもできます。

最後に、div の下に次のコードを追加します。

 <script> var viewer = new ActiveReports.Viewer("#viewer-host"); viewer.open("StudentProgressReport.rdlx-json"); </script>

この JavaScript は新しい ActiveReportsJS ビューアーを作成し、それを ID viewer-hostの要素に関連付けます。次に、ビューアの open メソッドを呼び出し、レポート名を渡します。

最後に確認する必要があるのは、レポートをindex.html ファイルと同じフォルダーに配置することです。そうでない場合は、必ずレポートの正しい場所を指定してください。

残っているのはアプリケーションを実行することだけです。任意の静的 Web サーバーを使用してアプリケーションを実行できます。 Visual Studio Code を使用しているため、 Live Server拡張機能を使用して静的 Web サーバーを迅速に起動します。ブラウザでアプリケーションを開くと、次の内容が表示されるはずです。

結論

必要なのはこれだけです。ご覧のとおり、ActiveReportsJS を使用すると、カスタマイズされた進捗レポートを簡単に作成できるため、教師と生徒の両方が学年を通じて生徒の進捗状況を追跡できるようになります。

この記事で構築されたレポートとアプリケーションをダウンロードしたい場合は、ここでリポジトリを見つけることができます。

コーディングを楽しんでください!