weblio語彙力診断テスト(PC版)が腱鞘炎に優しくないので改善する
英語の語彙勉強のためweblio語彙力診断テストを利用している。
月額も330円と安い。だがUIがPC版とモバイル版で致命的な差異がある。
非常に健康によろしくないので、これをChromeの拡張機能で解決する。
致命的な問題
画面構成&画面操作を比較すると以下になる。
尚、テスト条件は同じで全25問で1問につき10秒で回答となっている。
制限時間を超えて回答するとスコアに加算されない。
PC | Mobile |
---|---|
![]() | ![]() |
1 回答する選択肢のチェックボックスをチェック済みにする | 1 選択肢のボタンをタップする |
2 [回答する]ボタンを押下 |
語彙を増やすのが目的なので、スコアに反映されなくとも問題ない。
しかしPC版で勉強するときに、Mobile版より1操作多いせいで間に合わない場合が多々ありストレスが溜まる。
また何度も同じクリック操作を行っているので手が疲れてくる。
PCでChromeのUserAgentをMobileにしては?
User Agent Switcherの拡張機能で実現可能。実際今やっているのはこの方法。
ただこのためにUserAgentを都度変更するのが面倒。
またUIが変更されても、マウスクリックする必要があるのは変わらないので手に優しくない。
実現したいUI
PC版で以下の要件を満たすようにする。
- UIはPC版のままでよい。
- Mobileと同じく1操作で回答できる。
- マウスだけではなく、キーボード操作で回答可能。(数字1~5キーに回答を対応させる)
TampermonkeyでUser Scriptを設定する
TampermonkeyをChromeへインストールし、weblio語彙力診断テストのサイト限定で動作するJavascriptを定義する。
// ==UserScript==
// @name Apply keypress for Weblio
// @namespace http://tampermonkey.net/
// @version 0.1
// @description try to take over the world!
// @author You
// @match https://uwl.weblio.jp/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
document.addEventListener('keydown', function(event) {
var keyCode = event.keyCode || event.which;
// キーコードに応じて処理を実行
switch (keyCode) {
case 49: // 1 key
checkAndSubmitAnswer(1);
break;
case 50: // 2 key
checkAndSubmitAnswer(2);
break;
case 51: // 3 key
checkAndSubmitAnswer(3);
break;
case 52: // 4 key
checkAndSubmitAnswer(4);
break;
case 53: // 5 key
checkAndSubmitAnswer(5);
break;
// テンキー
case 97: // 1 key
checkAndSubmitAnswer(1);
break;
case 98: // 2 key
checkAndSubmitAnswer(2);
break;
case 99: // 3 key
checkAndSubmitAnswer(3);
break;
case 100: // 4 key
checkAndSubmitAnswer(4);
break;
case 101: // 5 key
checkAndSubmitAnswer(5);
break;
default:
// 他のキーは無視
break;
}
});
function checkAndSubmitAnswer(answerNumber) {
var answerNumberStr = answerNumber.toString();
// 対応するラジオボタンをチェックする
var radioButton = document.querySelector('input[type="radio"][name="answerNumberStr"][value="' + answerNumberStr + '"]');
if (radioButton) {
radioButton.checked = true;
// "回答する"ボタンをクリックする
var submitButton = document.querySelector('input[type="button"][value="回答する"]');
if (submitButton) {
submitButton.click();
}
}
}
})();
上記を設定後、回答画面で数字の1~5キーを押下すると、対応する回答のチェックボックスがチェック済となり、さらに回答ボタンも自動で押下される。