NAIST授業アーカイブのスキップ・速度変更支援Chrome拡張機能”Skipper”開発記

またずいぶんと前の更新から時間が経ってしまった！

お久しぶりです。

最近のあらすじ

この頃は大学院にも進んで、奈良で快適（鉄道駅が近くにないこととバスが1時間に1本しかこないこと、それに丘や坂だらけなことを除けば）な生活を送ってます。

「奈良に大学院なんてあるのかよ🤣」とか思っているそこのあなた！

あります、奈良先端科学技術大学院大学です。通称NAIST。

「なんだよ、Fラン私立かよ🤣」とか思っているそこのあなた！

国立大学法人だぞ😠😠（Fランかはそもそも入学試験という入学試験がないので測れないので知らない）

前までは某理科大学にいましたが、なんやかんやあって、NAISTにいるという感じです。

何をやったのか

まあ、そんなことはどうでもよいので、今回は私史上初のJS（女子小学生、JavaScript）での開発をしたという話です。

NAISTには授業アーカイブというシステムがあるのですが、これがどうも使いにくい。

ちょっとでも楽になれば良いな、ということで、Chrome拡張機能を作りました。

キーを入力すれば速度を変えたり、スキップとか再生停止ができるようになっています。

以下、プログラム。

const getId   = function (id) { return document.getElementById(id); }
const clickId = function (id) { getId(id).click(); }


const shorterLonger = function (mode) {

  const currentSkipInputStr = getId("skip-area__input").value.replace(/[^\d]/g, '');
  const currentSkipInput    = currentSkipInputStr.length > 0 ? parseInt(currentSkipInputStr) : 0;
  const maxSkipInput        = 3600;  // 1 hour is the longest in common sense

  let skipInput = 10;

  switch (mode) {
    case "s": skipInput = currentSkipInput > skipInput    ? -skipInput : 0; break;
    case "l": skipInput = currentSkipInput < maxSkipInput ?  skipInput : 0; break;
  }
  getId("skip-area__input").value = String(currentSkipInput + skipInput);

}

const fasterSlower = function (mode) {

  const eps         = 1e-4;
  const playRateStr = getId("play-rate-area__btn-txt").innerText.replace(/[^\d\.]/g, '');
  const playRate    = parseFloat(playRateStr);
  const fixPlayRate = mode === "f" ? 1 : 2;
  const fixIx       = mode === "f" ? 0 : 2;
  const ix          = Math.abs(playRate - fixPlayRate) < eps ? 1 : fixIx;

  document.getElementsByClassName("play-rate-area__list-item")[ix].click();

}


window.addEventListener("keydown", function () {

  switch (event.key.toLowerCase()) {
    case "h": case "arrowleft" : clickId("skip-area__back"); break;
    case "l": case "arrowright": clickId("skip-area__next"); break;
    case "j": case "arrowdown" : shorterLonger("s")        ; break;
    case "k": case "arrowup"   : shorterLonger("l")        ; break;
    case " ": case "enter"     : clickId("play-btn")       ; break;
    case "f":                    fasterSlower("f")         ; break;
    case "s":                    fasterSlower("s")         ; break;
    case "v":                    clickId("full-view")      ; break;
  }
});

初めてにしては上出来だと思っています。

仕様

私はVimmerなので（正確に言えばNeovimユーザーだけど）、しかもゲームはほとんどしないので、WASD入力とか知らないし、HJKLで入力をよく使いますが、それはさすがにどうかなと自分でも思ったし、「えーマジ、方向キー？　方向キーが許されるのは義務教育までだよね」と思っているわけではないので、方向キーくらいは入力できるようにしておきました。

いやいや、それくらいならReactとかAngularとか使えよ！

私、どうもJSのライブラリーって好きじゃないんですよね。

変なラッパーをたくさん入れているだけだし、そもそも、実行速度が出ない。

別に書けないわけじゃないし、開発速度は圧倒的に速いかもしれないけど、それってぜんぜん、ユーザーorientedじゃないよね。Netflixはそう言ってたよ？

という感じで、開発にはできるだけバニラ状態のJSを使ったというわけです。

さいごに

テクニカルなことはそんなにしていないし、ちょっと肩慣らし程度でした。

本当はクラスとかコンストラクターとかどこかしらで使いたかったけど、そんなたいそうな物を使うのなら、もう少し高度なサービスを作るときの方が良い。