[js] webページ中のリンクをクリックするUIを改善する実験

次のような例を考えてみる。

webページを見ていて、ページ内のリンクを辿って他のページへ遷移する

マウスの場合

1. マウスをリンクの上に持って行く
2. マウスカーソルの形が変わることを確認する（変わらないかも知れないが）
3. クリックする

タッチパネルのインターフェースがあれば次のようになる

タッチパネルの場合

1. 目的のリンクの上をタッチする

マウス、タッチパネルのいずれにおいても、目的のリンクの上をクリック（タッチ）する必要がある。僕はよくわからないが、老眼が進行すると小さいリンク要素を俺様がなんで頑張ってクリックせねばならないのだ!!!となる可能性がありそうなので怖い。また、今もiphoneのsafariでPC用のwebページを見る時に、よくクリック（タッチ）に失敗することがあり、なんとかしたい。

ただ、どうすればいいのかわからないので、とりあえずGreasemonkeyで実験してみた。
http://github.com/samurai20000/Meddling-Click*1

ソースを見るとわかりますがアルゴリズムはかなり富豪で下記のようになってます。

• ページ全体からリンク要素を抜き出して、位置を保存しておく
• mouseupされた時点でのマウスの位置と上記のリンクの位置の距離を片っ端から調べる
• 一番近いリンク要素との距離がリンク要素の高さの√2倍よりも短ければ、そのリンク要素にfocusを当てて、クリックする

このアルゴリズムを使うことでリンク要素に適当に近づけば要素クリックして飛べるのだが、そんな動きで使ったことがないので、正直使いやすいのかよくわからない。また、jsで足されたリンク要素に対応できてなかったり、アルゴリズムの実装にまだバグがありそうなので常用は勧めません。

実はこのリンクをクリックするのが怠いという話はkansai_emacs#2の懇親会のときにid:hitode909と話していて、お互いそう思ってるなら、あえて別々にグリモン書きましょうとのことで実現しました。なのでそろそろid:hitode909がチカチカさせんじゃねーかなぁって思ってます。
僕はとりあえずユーザーが気づかないようにこっそりと動作させるようにしました。

*1:meddlingとはおせっかいとの意味で、作っといて何なのですが、おせっかいかもと思い命名。