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

生徒の進捗レポートをオンラインで表示できることは、保護者と教育者の両方に多くのメリットをもたらします。オンライン アクセスにより、保護者と生徒は生徒の学業成績に関するリアルタイムの洞察を得ることができ、常に情報を入手して教育に取り組むことができます。進捗状況の追跡、出席状況の監視、成績の表示、追加のサポートが必要な領域の特定が簡単に行えます。 教育者にとって、オンライン進捗レポートは報告プロセスを合理化し、生徒の成績の包括的な評価の生成と共有を容易にします。これにより、教師は保護者とより効果的にコミュニケーションできるようになり、コラボレーションが促進され、的を絞った介入が可能になります。全体として、学生の進捗レポートにオンラインでアクセスできることで、コミュニケーションが強化され、説明責任が促進され、学生の成功への積極的なアプローチがサポートされます。 ありがたいことに、ActiveReportsJS を使用すると、教育者がこれらの進捗レポートを簡単に作成およびカスタマイズし、Web アプリケーションで簡単に表示できるようになります。この記事では、ActiveReportsJS レポート デザイナーを使用して進捗レポートを作成し、レポート ビューアーを使用して JavaScript アプリケーションでレポートを表示する方法を説明します。 コンテンツの概要 データをレポートに接続する 進捗レポートのヘッダーとフッターの作成 学生情報の表示 GPA 概要と学業成績表の作成 行動と態度の進捗タブリックスの作成 出席表の作成 ActiveReportsJS を JavaScript アプリケーションに追加する 記事に従って進みたい場合は、完成したレポートと申請書を 見つけることができます。 ここで データをレポートに接続する この記事では、ActiveReportsJS ダウンロードに含まれるスタンドアロン デザイナーを使用します。デザイナーをインストールして起動すると、空のレポートが表示されます。レポートにコントロールを追加する前に、使用するデータをレポートにリンクする必要があります。 デザイナーの右上で、 パネルを選択します。これにより、 、 、 が表示されます。 「データ」 データ ソース データ セット パラメータ 始めるには、データ ソースが必要です。 「データ ソース」セクションの ボタンをクリックして、「データ ソース」ウィンドウを表示します。 「追加」 ここから、データを検索する場所をレポートに指示できます。データの取得元に関しては、 または 2 つのオプションがあります。リモート JSON では、API エンドポイントに URL を指定する必要がありますが、埋め込み JSON では、データをレポートに直接ロードするために使用する JSON ファイルを選択できます。 リモート JSON 埋め込み JSON の このレポートでは、埋め込み JSON を使用して複数の ファイルを読み込みます。生徒の情報、成績、行動、出席に関するファイルがあるため、これらのファイルごとにデータ ソースを作成する必要があります。 JSON 完了すると、次のようになります。 4 つのデータ ソースを設定したので、それぞれのデータ セットを作成します。データ ソースのデータ セットを作成するには、使用するデータ ソースの横にある アイコンをクリックするだけです。これにより、[データ セット] ウィンドウが表示されます。 プラス 埋め込み JSON を使用しているため、提供する必要があるのは JSON パスだけです。これにより、JSON からどのデータを取得するかレポートに指示されます。この場合、すべての JSON を取得したいので、パス を使用します。これにより、レポートは利用可能なすべてのデータを取得するように指示されます。 $.* リモート JSON を使用している場合は、Uri/パスの値も指定する必要があります。この値はレポートから API に渡され、返すデータを API に指示します。 注: 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 および コントロールをレポートにドラッグします。ページの幅のほとんどが広がるように両方を展開し、TextBox コントロール内に「GPA Summary」というテキストを含めます。 Container このコンテナ内に、学生の全体的な 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 つ変更を加えておきます。 これらの表では、アイコンを使用して、学生が 、 、および 観点からどこに分類されるかを表示したいと考えています。緑、黄、赤のアイコンを使用します。これらを追加するには、関連する TextBox の プロパティに次の値を追加します。 Excellent Satisfactory Need Improvement の Image ここでレポートをプレビューすると、次のように表示されるはずです。 Tablix コンテナーが設定されたので、次は Tablix コントロールを追加して、行動および姿勢の進行状況データを表示します。 Tablix コントロールをこのコンテナーにドラッグします。デザイナー ウィンドウに Tablix ウィザードがポップアップ表示されます。 Tablix ウィザードは、Tablix (またはピボット テーブルとも呼ばれる) コントロールを作成するための非常に強力なツールであり、標準のテーブルよりも動的な方法でデータを表示できます。 この記事の冒頭で作成した データ セットのデータを使用します。このデータ セットを展開し、 値をウィザードの セクションにドラッグ アンド ドロップし、 、 、および の値をウィザードの [ セクションにドラッグ アンド ドロップします。 T1、T2、および T3 の集計値を から に変更してください。 行動 BehavioralMeasure [行グループ] T1 T2 T3 値] Count None 終了する前に、ウィザードの ボタンをクリックします。このテーブルにフィルターを設定する必要があります。ここで、 ボタンをクリックして新しいフィルターを追加します。最初のボックスをデータセットの フィールドに設定し、文字列「Work Habit」を検索するようにフィルターを設定します。 [フィルター] 「追加」 Type 完了したら、 ボタンを押すと、この時点で Tablix がどのように表示されるかを確認できます。 「OK」 ここで、 および テキスト ボックスと同様に、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 次のコードをファイルに追加します。 Student Progress Report HTML ファイルが設定されたので、次は ActiveReportsJS をファイルに追加します。このために、CDN を使用して必要なファイルをロードします。 タグ内に次のコードを追加します。 コードの最初の 2 行は、必要な CSS ファイル、つまりコア CSS ファイルとビューア CSS ファイルをロードします。次に、コア JavaScript ファイルとビューア JavaScript ファイルを読み込みます。最後に、PDF、表形式データ、および JavaScript ファイルをロードしています。これらのファイルを使用すると、ユーザーはそれぞれのファイル タイプでレポートをエクスポートできます。 HTML ユーザーが特定の形式でレポートをエクスポートできないようにするには、関連する タグを除外するだけで済みます。これにより、ユーザーはそのファイル タイプでエクスポートできなくなります。 次に、ページ上の要素にいくつかの基本スタイルを追加します。 タグ内、追加したばかりの script タグの下に、次のコードを追加します。 body { margin: 0; } #viewer-host { width: 100%; height: 100vh; } これにより、 body 要素からマージンが削除され、要素の幅と高さが の ID で設定されます。 viewer-host ここで、 タグ内に次の要素を追加します。 この div には の ID を与えました。これは、以前に設定した CSS スタイルを受け取ることを意味しますが、JavaScript レポート ビューアーを div に関連付けることもできます。 viewer-host 最後に、div の下に次のコードを追加します。 var viewer = new ActiveReports.Viewer("#viewer-host"); viewer.open("StudentProgressReport.rdlx-json"); この JavaScript は新しい ActiveReportsJS ビューアーを作成し、それを ID の要素に関連付けます。次に、ビューアの open メソッドを呼び出し、レポート名を渡します。 viewer-host 最後に確認する必要があるのは、レポートをindex.html ファイルと同じフォルダーに配置することです。そうでない場合は、必ずレポートの正しい場所を指定してください。 残っているのはアプリケーションを実行することだけです。任意の 使用してアプリケーションを実行できます。 Visual Studio Code を使用しているため、 拡張機能を使用して静的 Web サーバーを迅速に起動します。ブラウザでアプリケーションを開くと、次の内容が表示されるはずです。 静的 Web サーバーを Live Server 結論 必要なのはこれだけです。ご覧のとおり、ActiveReportsJS を使用すると、カスタマイズされた進捗レポートを簡単に作成できるため、教師と生徒の両方が学年を通じて生徒の進捗状況を追跡できるようになります。 この記事で構築されたレポートとアプリケーションをダウンロードしたい場合は、 リポジトリを見つけることができます。 ここで コーディングを楽しんでください! こちらでも公開しております。