概要

大学の授業システムのトップページには前までは課題一覧と授業一覧が表示されていましたたが、
UIの変更により別ページに移動してしまいました。これでは少し不便なので、Chromeの拡張機能を
自作して無理やりトップページに追加してQOLを上げた、という話です。

どんなUI？

以前

ToDo欄に課題一覧が、コースに授業一覧が表示されます。（今は隠れてますが、、、）
ちなみに、旧UIのトップページも一応使用できますが、デフォルトではアクセス出来ない感じです。

変更後

こんなかんじになりました。授業一覧を見るには左側の「コース」から、
課題一覧は左の「アクティビティストリーム」か「カレンダー」からアクセスします。

これを最初見た時、一瞬課題どっから確認するん？と思ってしまいました。

このままだとちょっと使いにくいな…と感じたので、以前のUIを参考に追加したのがこちらです。

追加後

見た目のセンスがないのはひとまず置いといて、これで課題、授業の一覧にすぐにアクセスできるようになりました。
実際に使ってみても利便性が上がった実感があります。

仕組み

これらはすべてChromeの拡張機能で実現しています。これを選定した理由としては、大学の授業システムの認証はかなり強固で、学生ID,パスワードによる認証とワンタイムパスワードによる認証の2段階の認証が設けられています。そのため、外部のアプリなどから授業システムのAPIを叩くのは用意ではありません。
しかし、Chromeの拡張機能上だと、ユーザがログインさえしていれば、認証をくぐり抜けることが出来ます。
これを利用して、拡張機能でAPIを叩き、HTMLを操作することにしました。

1. カレンダーのAPIを叩く

課題一覧はカレンダー一覧から取得できるようになっています。
しかし、この授業システムのサービスを提供しているBlackBoardのSwaggerUI(https://developer.blackboard.com/portal/displayApi)
を確認しても、カレンダーを取得するAPIは見当たらなかったので、自力で見つけました。
Chromeのデベロッパーツール内のネットワークタブを開いて、カレンダーのページにアクセスした時のHTTPリクエストを一つずつ調べることで見つけられました。

このAPIを叩いて取得したデータをいい感じに読み取ることで、課題の名前、締切日、リンクなどの一覧を得ることが出来ました。

2. 課題一覧をテーブルに入れてWebページに挿入する

次に、トップページにこの課題一覧を表示させます。本当は事前に作っておいたテーブルのHTMLをまるごと挿入できれば楽なんですが、やり方がわからなかったのでDOM操作でちまちま追加することにしました。

  const div = document.createElement('div');
  const table = document.createElement('table');
  table.setAttribute('border', 2);
  table.setAttribute('style', 'table-layout: fixed;width: 80%;');
  const header = document.createElement('tr');
  const header_cell = document.createElement('th');
  header_cell.appendChild(document.createTextNode('課題一覧'));
  header.appendChild(header_cell);
  table.appendChild(header);
  data.forEach((elem) => {
    const row = document.createElement('tr');
    const cell = document.createElement('td');
    const link = document.createElement('a');
    const classUrl = getClassUrl(elem['id']);
    link.setAttribute('href', classUrl);
    link.setAttribute('target', '_blank');
    const cellText = document.createTextNode(elem['name']);
    link.appendChild(cellText);
    cell.appendChild(link);
    row.appendChild(cell);
    table.appendChild(row);
  });
  div.appendChild(table);
  target.prepend(div);

こんな感じでちまちま追加しました。やり方があってるかはよくわかってないですが、とりあえず見た目は整えられたので良しとしました。

3. 授業一覧を表示する

あとは授業一覧を表示します。といっても課題一覧と同じようにAPIを叩いてtableを追加してるだけです。
ちなみに、授業一覧はAPIが公開されていました。

改善点

今の実装だと、2022年の後期の授業しか取得できません。また、通期ではなく半期しか開口されない授業も表示できていません。
本当はココらへんもユーザが操作できるようなUIを作った方がいいんですが、そこまで力が及びませんでした。。。

その後

最初は自分用に作った拡張機能だったんですが、他にもUIが変更されて困っている人がいるようだったので、「まあ公開されてるAPIしか叩いてないし、どうせ認証かかってうちの大学の人しか使えないから大丈夫やろ」と踏んで公開しました。

CLEに課題一覧と授業一覧を追加するChromeの拡張機能を作ってみたので使ってみてください
まだ自分のPCでしか試してないので動くかはわからないですが…https://t.co/0Doplyzf8M
— たつ (@ou_robobobobo) October 5, 2022

意外と反響があって、実際に何人かが使ってくれた様子をスクショで上げてくれてました。
自分の制作物に対して感想をくれるとちょっと嬉しいですね。

まとめ

Chromeの拡張機能を自作してUIを使いやすくしてみました。
JavaScript、HTMLはまだ使い慣れてないのであんまりいい実装ではないですが、なんにせよちょっとでも利便性が向上したので良かったです。