Hatena::Grouporera

もし高校野球の女子マネージャーがOpera Browserを使ったら

logo
 | 

2010-08-27

HaH ブックマークレットを作り直してみた

15:02

作り直したというか、元は os0x さんの ChromeKeyconfig のために自分の昔のソースを整理して書いたやつだったんだけど、Opera 用に修正した。

Opera 10.5x 以上専用。他のブラウザでは使わないほうがいいと思う。ブックマークに入れてニックネーム hah とか付けて、キーボード設定の Application っていう部分で Go to page, "hah" って追加したらいいと思うよ。自分は f キーでやっている。

前のやつとはちょっと使い勝手が違う。だいぶシンプルにした。前のやつだと、ヒント表示→文字タイプ→確定、となっていたけど、ヒント文字タイプの時点でもうフォーカスをあてるようになっている。あとそれにともなって、複数のヒントを選択することはできなくなった。使い勝手は ChromeKeyconfig と同じだと思う。

ある要素にフォーカスをあてるのは elem.focus() でまあ十分なんだけど、それだとフォーカスがあたってることがわからないので、枠線をつけながらフォーカス。

f:id:edvakf:20100827142146p:image

その部分のコード。

  function focus(elem){
    if (!elem.id) elem.id = 'HaH-temp';
    var a = document.createElement('a');
    a.href = '#';
    a.style = 'position:fixed;width:1px;height:1px;top:0;left:0;nav-right:#' + elem.id;
    document.body.appendChild(a);
    a.focus();
    document.moveFocusRight();
    document.body.removeChild(a);
    if (elem.id === 'HaH-temp') elem.id = '';
  };

CSS の nav-right というやつと、空間ナビゲーションを JavaScript からコントロールするための document.moveFocusRight() を使っている。適当なリンクを作り、それにフォーカスしておいて、空間ナビゲーションを強制的に目的の要素に持ってくるという方法。

この方法ではひとつ問題があって、テキスト欄とかに (空間ナビゲーション的な意味で) フォーカスをあてて、エンターを押して (タイピング可能という意味で) フォーカスするときに、Opera は keyup, keydown, keypress のどのイベントも出さない。そこで focus イベントを余計に監視して、テキスト欄で確定したときにヒントを消すようにしている。汚れハック。


ある要素が画面上に見えているかの判定は前に別のブログに書いた document.elementFromPoint を使っている。これがあるから Opera 10.10 以前ではちゃんと動かない。前までの HaH bookmarklet だと、これを使っていなかったので要素が見えているかどうかの判定がものすごく面倒だった。特にスクロールバーの出ている要素内のリンクとかは見えてないのに見えてることになってたり。

↑の記事でも触れてあるとおり、Opera は画面外にある要素も document.elementFromPoint で取れてしまうので、それらは除外したい。その記事では window.inner{Width|Height} を使ってあるが、これだとズームしたときに問題があることが分かったので、documentElement (標準モード) か body (互換モード) の client{Width|Height} を見ることで解決した。このへんは Opera の Arve さんによる2005年の記事が参考になった。

あと昔の Opera のバグで getClientRects がエラー出さずに止まるっていうのがあったんだけど、それも Opera 10 ぐらいで解消されてた。最近まで気づかなかったのが惜しい。たしかインライン要素の最初の子要素としてブロック要素がある場合とかに起こるんだけど、最近の Opera ではその場合は getClientRects().lengthがゼロになるのでそこもちゃんと面倒見てある。


不具合があったら教えてください。


以下余談。

前のコードは自分が JavaScript はじめて半年ぐらいしたときに書いたもので、恥ずかしくてとても今見れたもんじゃないと思うんだけど、まだ使っていただいてる方もいたり、AltNight さんがコード読んで参考にしたいと言ってくれたりしたので、書き直さなきゃなあってことをもう数ヶ月考えてた。そんなこんなしているうちに、Mac 版 Opera 10.6 が出て、あまりの酷い出来に Firefox に移ったりして、作りこんだ Opera のショートカットやらも全部捨てた。その後わけあって Opera に戻ってきたんだけど、設定とかするのも面倒だったのでほぼデフォルトのまま使っていた。で、まあ最近 Mac をやめて Windows にして、この機会に快適パソコン環境を作ろうと思って Opera のキーボード設定もまたイチから作り始めた。それでようやく Hit-a-Hint ブックマークレットもまた作ることにしたというわけ。


アップデート

  • 2010/8/30 些細なバグ修正。twicli で最後までヒント表示されてなかった件など。
  • 2010/9/1 些細なバグ修正。<a href=#>foo<img></a> のようなときに "foo" ではなくて画像のほうにヒントが表示されてた件。アサヒコムとか。
 |