Vimiumでクリックできない要素をクリック可能にするユーザースクリプト

公開日:2019-02-10
最終更新:2019-03-03

はじめに

クリックできない!

Vimiumでのクリック

Vimiumは、ブラウジング操作をVimのようなキーバインドで可能にする、Chrome及びFirefox用の拡張機能です。

VimiumではLinkHintsという方法でクリッカブルな要素をクリックできます。
LinkHintsというのは、上のスクリーンショットのように要素のところに文字列を表示し、その文字列がキーボードで入力されたらクリックイベントを発火させるというものです。

が、上のスクリーンショットでは通知(ベルのマーク)などがクリック可能であるにもかかわらずヒントが表示されていません。
これではVimiumだけでクリックすることができません。

なぜクリックできないのか

Vimiumは、要素のタグ名や要素の属性、CSSであてられたスタイルなどからクリック可能かどうかを判別しています。
該当する部分(GitHub)

大体の要素は正しく判別できますが、HTMLの書き方があんまりよろしくない場合などはクリック可能であると判別されずヒントが表示されません。

やるべきことはこれだけ

なら、ユーザースクリプトでHTMLを編集し、クリック可能であることを明示してあげればよいのです。
幸い、Vimiumはよくできていて、属性をちょこっといじるだけで済みます。

targetElm.setAttribute('role', 'button');

要素のrole属性をbuttonに設定しています。

role属性というのは、要素の意味付けのための属性で、WAI-ARIAというアクセシビリティをより良くするための、HTMLに付け加える形の言語によるものです。
(詳しくは私もわからないのですが、buttonタグを使えなかったときに、読み上げツールなどに対し「ボタンである」と示すために使われるものだそうです)。

これで、クリック可能になります。

ユーザースクリプト

Tampermonkey用ユーザースクリプト書きました。

// ==UserScript==  
// @name         Make it clickable for qrunch.net  
// @namespace    https://okayu.qrunch.io/  
// @version      1.0  
// @description  いくつかのボタンをVimiumでもクリック可能にします  
// @author       okayu  
// @match        https://qrunch.net/  
// @grant        none  
// ==/UserScript==  

(function () {  
    'use strict';  

    const clickable = {  
        button: [  
            '.buttons > .notice',  
            '.buttons > .user',  
        ]  
    };  

    Object.entries(clickable)  
        .forEach(([key, val]) => {  
            val  
                .map(selector => document.querySelector(selector))  
                .forEach(elm => {  
                    elm.setAttribute('role', key);  
                })  
                ;  
        });  
})();

こんなもんですかね。

おわりに

Qrunch、nodeType3TEXT_NODEがたくさんあって気になる〜!!!(細かい)

記事が少しでもいいなと思ったらクラップを送ってみよう!
21
+1
@okayuの大して技術的ではないブログ

よく一緒に読まれている記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる

技術ブログをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

技術ブログを開設する

Qrunchでアウトプットをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

Markdownで書ける

ログ機能でアウトプットを加速

デザインのカスタマイズが可能

技術ブログ開設

ここから先はアカウント(ブログ)開設が必要です

英数字4文字以上
.qrunch.io
英数字6文字以上
ログインする