ユーザビリティをちょこっと改善するユーザサイドスクリプト
「ユーザビリティの大切さに気づいてもらう - inucaraの日記」を読んだところ、「オートフォーカス」をいつも私の作るウェブアプリケーションでは怠けて実装してないことに気がついた。
確かに、ログイン画面とかでテキストフィールドにフォーカスが当たっていないと超不便!
これからはちゃんと自分の作るアプリケーションでは、テキストフィールドをフォーカスしよう…。
ユーザーサイドスクリプト
今までならば話はそれで終わっていたのですが、少し考えてみるにウェブの画面でテキストフィールドがあった場合、フォーカスが当たっていて困ることって少ないんじゃないだろうか?と思った。
むしろフォーカスがデフォルトで当たっていた方がいいんじゃない??
そして今の私には簡単にブラウザの機能を追加する、強力なツールがある。そう、ユーザサイドスクリプトだ!
ってことで作ってみました。ページを開くたびにテキストフィールドがあったら強制的にフォーカスするスクリプト。
// ==UserScript==
// @name Input Focuser
// @author Yuanying
// @namespace /
// @description Focus input text field.
// @include http://*
// @version 0.1
// ==/UserScript==
(function() {
var inputs = document.getElementsByTagName('input');
for (var i=0; i<inputs.length; i++) {
var input = inputs[i];
if (input.getAttribute('type') == 'text') {
input.focus();
return;
}
}
})();
ぶっちゃけやってることは簡単です。DOMを操作して一番最初にヒットしたテキストフィールドにフォーカスをあてるだけ。
動作環境
以下の環境で動作を確認しています。
- Mac OSX 10.5 + Safari 3.0.4 (5523.10.6) + GreaseKit 1.3
インストール
最新版を以下からダウンロードしてください。
変更履歴
- ver 0.2.0.20080112
- フォーカスを当てた時にスクロールが発生する場合にはフォーカスしないように修正。
- ver 0.1.0.20080112
- 初期リリース。
その他
チェックボックスやラジオボタンの周辺のテキストにラベルを貼ったりとかもしてみたい。
何でもオートフォーカスすれば良いってもんじゃない?
何でもオートフォーカスするような環境になった事が無いので、ユーザビリティが悪くなるのかどうかわからない。ということで実験。
最初、フォーカスがあたるテキストフィールドがスクロールした場所にあると、ページがそこにスクロールしてしまうのでかえって使いづらいなと思ったけど、それを直してみたらなかなか。