英語の語彙勉強のためweblio語彙力診断テストを利用している。
月額も330円と安い。だがUIがPC版とモバイル版で致命的な差異がある。
非常に健康によろしくないので、これをChromeの拡張機能で解決する。

致命的な問題

!\[Alt text\](image-1.png)
画面構成&画面操作を比較すると以下になる。
尚、テスト条件は同じで全25問で1問につき10秒で回答となっている。
制限時間を超えて回答するとスコアに加算されない。

PCMobile
!\[Alt text\](image-1.png)!\[Alt text\](weblio.jpg)
1 回答する選択肢のチェックボックスをチェック済みにする1 選択肢のボタンをタップする
2 [回答する]ボタンを押下

語彙を増やすのが目的なので、スコアに反映されなくとも問題ない。
しかしPC版で勉強するときに、Mobile版より1操作多いせいで間に合わない場合が多々ありストレスが溜まる。
また何度も同じクリック操作を行っているので手が疲れてくる。

PCでChromeのUserAgentをMobileにしては?

!\[Alt text\](image-1.png)

User Agent Switcherの拡張機能で実現可能。実際今やっているのはこの方法。
ただこのためにUserAgentを都度変更するのが面倒。
またUIが変更されても、マウスクリックする必要があるのは変わらないので手に優しくない。

実現したいUI

!\[Alt text\](image-1.png)
PC版で以下の要件を満たすようにする。

  1. UIはPC版のままでよい。
  2. Mobileと同じく1操作で回答できる。
  3. マウスだけではなく、キーボード操作で回答可能。(数字1~5キーに回答を対応させる)

TampermonkeyでUser Scriptを設定する

!\[Alt text\](image.png)
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キーを押下すると、対応する回答のチェックボックスがチェック済となり、さらに回答ボタンも自動で押下される。