[東大生向け]ITC-LMSの未提出課題一覧を取得してTOPページに表示するUserScript • satoooh.org

コード

// ==UserScript==
// @name         Show ITC-LMS unsubmitted items
// @namespace    satoooh.org
// @version      0.1
// @description  Show ITC-LMS unsubmitted items
// @author       satoooh
// @match        https://itc-lms.ecc.u-tokyo.ac.jp/lms/timetable*
// ==/UserScript==

(function () {
  "use strict";

  fetch("/lms/task")
    .then((response) => response.text())
    .then((data) => {
      const parser = new DOMParser();
      const doc = parser.parseFromString(data, "text/html");
      const tasks = doc.querySelectorAll(".block.clearfix")[0];
      tasks
        .querySelectorAll(
          ".online-mobile-hide.contents, .online-display-hide, .result_list_tag"
        )
        .forEach((e) => {
          e.style = "display: none;";
        });
      tasks.querySelectorAll(".result_list_line").forEach((e) => {
        e.style = "gap: 1rem; align-items: space-between;";
      });

      const timetable = document.querySelector("#timetable");
      const header = timetable.querySelector(".header:first-child");
      timetable.insertBefore(tasks, header);
    })
    .catch((error) => {
      console.error("Failed to fetch task data", error);
      alert("課題リストの読み込みに失敗しました");
    });
})();

https://github.com/satoooh/userscripts/blob/main/itclms_show_unsubmitted_items.user.js

これを tampermonkey に入れときましょう。以降では処理の内容について解説しておきます（JS読める人は簡単な処理しかしてないのでコード読んでください）

処理の解説

このJavaScriptコードは、ITC-LMS（東京大学で利用される学習管理システム）の時間割ページで実行されるUserScriptです。

UserScriptとは

Webページの挙動やデザインを変更するためのJavaScriptコードであり、Tampermonkeyなどのブラウザ拡張機能を使って実行されます。これを使ってWebサイトの表示や挙動を自分好みにカスタマイズすることができます。もっと興味ある方は各自調べましょう。

具体的なコードの解説

それでは一応処理を見ていきましょう。

fetch() を使用して、ITC-LMSの「課題」ページのHTMLを取得

fetch() は、HTTPリクエストを発行して、レスポンスを取得する関数です。

  fetch("/lms/task")

then() でつなぐ

fetch() は Promise オブジェクトを返すので then() でつなぐことができます。

then() 以下の処理は fetch() 処理が完了した後に実行されます。

then()内で取得したHTMLデータを解析し、未提出の課題を表示するための処理を行う

DOMParser で HTMLを解析し、querySelectorAll() で未提出の課題に対応する要素を取得しています。

    .then((response) => response.text())
    .then((data) => {
      const parser = new DOMParser();
      const doc = parser.parseFromString(data, "text/html");
      const tasks = doc.querySelectorAll(".block.clearfix")[0];

スタイル調整

tasks.querySelectorAll() … style = "…"; みたいな処理をしている箇所です。

      tasks
        .querySelectorAll(
          ".online-mobile-hide.contents, .online-display-hide, .result_list_tag"
        )
        .forEach((e) => {
          e.style = "display: none;";
        });
      tasks.querySelectorAll(".result_list_line").forEach((e) => {
        e.style = "gap: 1rem; align-items: space-between;";
      });

insertBefore() で時間割ページのヘッダーの前に未提出の課題の一覧を挿入

      const timetable = document.querySelector("#timetable");
      const header = timetable.querySelector(".header:first-child");
      timetable.insertBefore(tasks, header);

ここまでできれば完成です。

という感じです。情報引っ張ってきて表示して、というのをしているだけなので、いろいろなことに応用できると思います。