Introduction

ブログ内検索

  • このサイトの記事を検索 by Google

おすすめの一冊!

無料ブログはココログ

« 2種類の API keys | トップページ | JavaScript の配列アクセス速度 »

2011-01-27

「なぜふぉろ」の shortcut 対応


Twitter 上でフォロワーごとにメモが書けるサービス「なぜふぉろ」の
GreaseMonkey スクリプト(ユーザスクリプト)をバージョンアップしました。


  ⇒ ダウンロードは userscripts.org からどうぞ


変更内容は、次の1点です。

  ・Twitter 新デザインで、メモの編集中に、いくつかのキーが Twitter の
   ショートカットに反応してしまって入力できない、という問題を修正。

たとえば、"n" とか "j" とか改行(エンター)とか押すと、
「新しいツイートの作成」ウインドウが開いたりしてしまって、
「なぜふぉろ」のメモ編集欄に入力できなかったのでした。



以下、技術的な話。

正攻法だとショートカット用のイベントハンドラを removeEventListener() すれば
いいのですが、そのためにはイベントハンドラ関数のポインタが必要なので、
GreaseMonkey からは手が出せません。

そこで、「なぜふぉろ」の編集ウインドウで keypress/keyup/keydown の
イベントハンドラを設定し、そのイベントハンドラの中で event オブジェクトの
stopPropagation() を呼ぶ、という技を使いました。

// disable shortcut keys myWindow.addEventListener('keypress', function(e) { e.stopPropagation(); }, false); myWindow.addEventListener('keydown', function(e) { e.stopPropagation(); }, false); myWindow.addEventListener('keyup', function(e) { e.stopPropagation(); }, false);
Event.stopPropagation() を呼ぶと、イベントの伝搬 (bubbling) を抑止できます。 メモ編集中は「なぜふぉろ」の編集ウインドウが最前面 (top) にあるので、 真っ先にこのイベントハンドラが呼ばれます。そこで stopPropagation() すると、 その背後にある要素(たとえば window とか)のイベントハンドラが呼ばれなくなります。 「なぜふぉろ」の編集ウインドウを閉じると、Twitter のページが最前面に戻るので、 ショートカットキーが再び有効になります。かんぺき。 ちなみに、addEventListener() の第3引数を true にしたほうが 確実な気もします。しかし、Firefox でそうすると、キーを押してもテキストエリアに 文字が入力されなくなってしまいました。Google Chrome では文字が入力できたので、 フォーム周りのキー取得の実装が微妙に異なっているのかもしれません。 いずれにしても、より一般的な false のままで目的は達成できたので、 深追いはしていません。 あと、拾うイベントは keypress だけで大丈夫かと思ったのですが、 Twitter 新デザインの UI ではなぜか keyup/keydown も使っている (キーによって異なる・・・)ので、3種類とも無効化してあります。 今後とも「なぜふぉろ」をよろしくお願いします。

« 2種類の API keys | トップページ | JavaScript の配列アクセス速度 »