読者です 読者をやめる 読者になる 読者になる

凹みTips

C++、JavaScript、Unity、ガジェット等の Tips について雑多に書いています。

LDR風にgoogleリーダーを読むgreasemonkeyスクリプトへ自動スター付加機能を追加

JavaScript

毎日googleリーダーで情報をチェックしていますが,そのお供として,LDR風に"i"キーでピンを挿して"o"キーでピンを挿した記事を全て開く,という動作を実現してくれるMasahiro Ihara氏による素晴らしいgreasemonkeyスクリプト「Pin Extension for Google Reader」(URL:http://userscripts.org/scripts/show/17714)を愛用しています.そこで「ピンを挿した = 読んだ」となることから,「読んだ = スター付き」として管理したいな.と考え,"i"キーでピンを挿すと同時にスター付きアイテムにする,という様に本スクリプトを拡張しました.

インストール:http://userscripts.org/scripts/show/82962

仕組み

当初は次のようにスターのタグを取得してクリックすれば,クリックイベントがスターのタグに登録されているイベントリスナに渡されて所望の動作をしてくれるかな,と思っていました.

var ce = document.getElementById('current-entry'); // 現在参照中の記事を取得
ce.getElementsByClassName('item-star')[0].click();  // その中のスターをクリック

しかしながらfirefoxではtype属性が“button”や“submit”に対してはclickイベントを実行出来るのですが,他の場合は不可のようです*1
そこで次のようにEventオブジェクトを作成して対称タグに派遣する手法を取ります.

var ce = document.getElementById('current-entry');
var addStar = document.createEvent("MouseEvents");
addStar.initEvent("click", true, false);
ce.getElementsByClassName("item-star")[0].dispatchEvent(addStar);

2行目から,

  1. マウスイベントのEventオブジェクトを作成
  2. イベントを初期化(initEventについては,https://developer.mozilla.org/ja/DOM/event.initEventを参照)
  3. 対称の要素にイベントを派遣する.

といった形になります.これを既にスターが付いている場合のクラス"item-star-active"と併用しながら既にスターが付いているアイテムに対しても上手く動作するように適当な位置にdispatchEventを挿入しました.

不具合等御座いましたらご連絡下さい.

*1:firefoxでclickイベントがclick()でエミュレート出来ないことについて詳細に記述されています:d:id:language_and_engineering:20090907