Web scratch

Posts Tagged ‘LDR’

以前書いた、LDRではてなブックマーク拡張を通してはてブのコメントをみるTomblooパッチをuserChrome.jsを使って書き直してもっと使い易くしたものです。
概要的にははてなブックマーク拡張のコメントビューアー機能をuserChrome.jsからよびだしてLDRの記事についてるはてブコメントを表示するものです。(なのではてなブックマーク拡張はインストールしてないと使えません)

• ldr hatebu comments viewer.uc.js

記事にフォーカスがあった状態でmを押すとはてなコメントビューアーが開きます。
jを押すと(次の記事に移動ショートカット)コメントビューアーが開いてたときは閉じるようにしてあります。

以下、技術的な話

まず、userChrome.jsをどうデバッグすればいいのか忘れたので、とりあえずFirebugのコンソールへ吐くlog関数を用意した。

// firebugのコンソールに出力
function fbug(x) {
    var windowManager = Components.classes['@mozilla.org/appshell/window-mediator;1'].getService(Components.interfaces.nsIWindowMediator);
    var Firebug = windowManager.getMostRecentWindow("navigator:browser").Firebug;
    if (Firebug.Console.isEnabled() && Firebug.toggleBar(true, 'console')) {
        Firebug.Console.logFormatted(Array.slice(arguments));
    }
    return x;
}

もっと手軽に呼べたような気がしたけど…

次はChrome側とContent側でやりとりする方法
Chrome側ってのはuseChrome.jsや拡張機能などのいわゆる特権持ってて何でもできてしまう実行範囲のこと
Content側ってのは通常のWebサイトの実行範囲のこと。

Chrome側からContent側をいじろうとすると、XPCNativeWrapperでラップされているのでそのままではアクセスできません。
wrappedJSObjectを使って回避するのはあまり望ましいやり方ではないと思うので、今回はMessageEventを利用してChromeとContentを行き来してみました。
コードの真ん中ら辺のメイン部分だけ取り出してみると

    // docはchrome側のdocument
    // Chrome側 - 受信
    doc.addEventListener("hatenaPingMessage", function (request) {
        var res = request.data;
        if (res === "hide") {
            hBookmark.CommentViewer.hide();
        } else {
            hBookmark.CommentViewer.toggle(res);
        }
    }, false);
    // Content側 - 送信
    evalInPage(function() {
        window.addEventListener("load", function() {
            window.Keybind.add('m', function(evt) {
                var item = window.get_active_item(true);
                var permalink = item.link.replace(/#/, '%23');
                pingToChrome(permalink);
            });
            var _j = window.Keybind._keyfunc.j;// jを保存してから書き換える
            window.Keybind.add('j', function(evt) {
                _j();
                pingToChrome("hide");
            });
        }, false);
        // Chrome領域へ通知
        function pingToChrome(message) {
            var request = document.createEvent("MessageEvent");
            request.initMessageEvent("hatenaPingMessage", true, false,
                    message,
                    location.protocol + "//" + location.host,
                    "", window);
            document.dispatchEvent(request);// =>hatenaPingMessage
        }
    }, []);
}
function evalInPage(func, args) {
    var argStr = JSON.stringify(args || []);
    safeWindow.location.href = "javascript:void " + func + ".apply(null," + argStr + ")";
}

まずはChrome側のdocumentにイベントを待ち受けるhatenaPingMessageというeventを受け取れるにします。
そして、Content側でスクリプトを実行するためにJavaScript:プロトコルハックを使ってブックマークレット的に実行します。
その中で、hatenaPingMessageというオレオレイベントを発火させるpingToChromeを作って、pingToChromeで発火したイベントをChrome側でキャッチしてChrome権限が必要な処理(はてなコメントビューアーを呼び出す)をしています。
Google Chromeの拡張とかで似たような仕組みになってた気がします。

MessageEventとJavaScript:プロトコルハック

• Greasemonkey スクリプトとイベントで通信: Days on the Moon
• SmartLDR更新 – 素人がプログラミングを勉強するブログ

Google Chrome関係のメモ

• ユーザースクリプトとページ側とのやりとり – JavaScriptで遊ぶよ – g:javascript
• 拡張間連携とEvent Driven JavaScript – Constellation Scorpius

FirefoxのChromeについてのメモ

• vimperatorからウィンドウにアクセスする方法 – vimpめも – vimperatorグループ
• XPCNativeWrapperとunsafeWindowの間でデータを送受信する | へびにっき
• XPCNativeWrapper – MDC Doc Center

最近、お勧めブログのRSSを公開するのが流行らしいので少し視点を変えて、検索結果やSBMのRSSを購読すると面白いよという話。
面白いサイトのRSSを読むのは良いのですが、好みが偏ったりするので検索結果のRSSを購読すると新しいものを見つけたりできます。

本題の前に、どのようにRSSを読んでいるかというと、自分はLDRをレート順に並べて読んでいます。
レート読みは読みやすいので購読できるサイトが増やせると思います。

• [ldr]レート管理のすすめ – suVeneのアレ
• 今さらだけど livedoor Reader について書く(管理人日記) – むぅもぉ.jp

レートの配分は以下のようなルールでやっている。(あんまり明確ではないです)

• ★5はエゴサーチ、個人的なもの
• ★4は重要なサイト、検索結果
• ★3は一般的なサイト(最初は大体ここ)
• ★2はあんまり興味ないけど、たまにいい感じなサイト
• ★1はノイズになったりするけど、たまに目を通す
• ★0は基本的になし、ゴミ箱

自分の場合、タグなどの検索結果RSSは★4あたりにしています。
なんで検索結果のRSSは★4にしてるかというと、検索結果RSSで出てくるサイトは★3のサイトと被ったりすることがあるので、★4で飛ばしても★3で出てくるからまあいいっかと適当な感じで読める安心感が生まれます。
又、検索結果のRSSは更新数が安定してなかったりしてあまり本気で読むという感じにならないので、気分が乗らないときは丸ごと飛ばす事が多いのでそういう自分ルールを作ってたりしました(結構後付けです)
★5に個人的なものを固めてるのはPost Now browsing to Twitter for Greasemonkeyとか使ってTwitterへ飛ばしまくってるので、変なミスをしないようにとかそういう意識もあったりしてます。

という訳で本題に戻って、JavaScript関係のSBMのタグや検索結果で購読すると面白いサイトをまとめてみる。
特にJavaScriptに限らず興味あるものを検索して購読すると良いです。
(上に行くほど外れは少なめかも)

• タグ「javascript」を含む新着エントリー – はてなブックマーク
  はてブは基本ですね。
• reddit – javascript
  SBMとスレッド掲示板が混ざった感じ。
  結構コメントも多くて、ノイズも少なく海外の情報があってお勧めです
• Presentations and documents tagged “javascript”
  SlideShareのタグ。質が高い資料が多いのでチェックする価値がある。
• Google アラート – ウェブ上の面白い新着コンテンツをチェック
  Googleの検索結果のRSSを作れます。
  流石そのままだとノイズしかないので、JavaScript -設定を有効 -オンに とかにして購読してます。
• Google ブログ検索
  Googleアラートと同じような感じですが、最近はブログで見つかる情報が多いのでこっちの方がノイズが少ないと思います。(GoogleアラートだとQ&A系も混じったりする)
  GoogleアラートはRSS登録の手順が面倒なのでこっちで十分な感じはあります。
• twitter検索(yats)
  日本語に特化したTwitter検索サイトです。
  広すぎるワードだとちょっとアレですが、少し狭い範囲のワードだと詳しい人を見つけたりできるので便利です。
  検索ワード -noise とするとノイズっぽいものを除去して検索できます。
  Twitter / genta kaneyama: 【twitter検索】アフィリエイトやフィード転載し …
• Recent javascript Bookmarks on Delicious
  del.icio.usのJavaScriptタグ。
  結構古い話題とかごちゃごちゃ入り込んでくる感じ
• Recently Active ‘javascript’ Questions – Stack Overflow
  質問掲示板。
  まあ、これは量が多すぎて見てられないので適当に。
  最近はjQueryの質問やっぱり多いです。
• coder.io – programming and developer link aggregator
  日々更新されるリンク集
  タグで絞り込みができたりして見やすい。
• dzone.com – Popular links: javascript
  日々更新されるリンク集

この話はJavaScriptというタグに限らず有効だと思うので、Twitter始めてからRSS見なくなったとか言ってる人は受動的だけど新しいものを探索できる検索結果RSSを購読してみてはいかがでしょう。

What are the top web development blogs, communities and aggregators? – Quora

http://www.quora.com/What-are-the-top-web-development-blogs-communities-and-aggregators

最近Jetpackをいじり始めたので、何かを作りながら作り方を学んでみる。

作ったものなど

1. Copy shorten URL with is.gd
   クリックするとクリップボードに今のURLを短縮したものがコピーされる。
   いわゆるクリップボード機能&ステータスバーに挿入を使ってみたかった。
2. LDR_StatusBar_Notify
   LDRの未読件数をステータスバーに表示
   LivedoorReader StatusBar Notify
   http://d.hatena.ne.jp/zuzu_sion/20090520/1242900564
   を現在のバージョンで動くように修正しただけです。
   昔のバージョンではimportがなかったり、Jetpackが大文字でも動いてたらしい。
3. clipboard_display
   クリップボードの内容をステータスバーに表示。
   
   いわゆるクリップボード機能を使ってm(ry
   クリップボードが変更した際に知らせてくれるようなAPIはなかったのでintervalで回してるだけ。
4. Nico_make_volume_corrections
   ニコニコ動画で再生開始時にSettingで決めたボリュームにする。
   
   manifestで設定画面が簡単に作れるのはいい感じ。
   いわゆるGreasemonkey的なものなJetpack
   サイトの範囲を指定するのにはpageModsを使用する
   Labs/Jetpack/JEP/17 – MozillaWiki
   unsafeWindowはwrappedJSObjectを使っちゃってるが、javascript:プロトコルでブックマークレット的にやる方がよいです。
   これがXPCNativeWrapperとunsafeWindowの間でデータを送受信する | へびにっき 参考になります。

JetpackのAPIは
プロファイルフォルダ\extensions\jetpack@labs.mozilla.com\content\js
のjsを読むと何があるか分かる。
解説はLabs/Jetpack/JEPs – MozillaWikiを見て、検索をかける(たいていの場合まめ畑がかかります)

azu さんのjetpackに関するメモに返信 に自分がメモったことに対してteramakoさんからの指摘が書いてあります。
今Jetpackでどんなことがどのようにできるのかが何となく書いてあります。

Jetpack – MDC

https://developer.mozilla.org/ja/Jetpack
簡素だがAPI解説がまとまってる

Jetpack APIリファレンス | Screw-Axis

http://screw-axis.com/jetpack/jetpack-api-referencejetpack-api-reference/
ちょこっと古いけどわかりやすい

[Jetpack] – Cli@

http://d.hatena.ne.jp/efcl/searchdiary?word=%2a%5bJetpack%5d

なんかリンクいろいろ

30分で作るJetpack Feature (1) 概要 – JavaScriptとかPerlとかPHPとかさくらとか勉強する

http://d.hatena.ne.jp/lesamoureuses/20090715/1247637734
チュートリアル

JetpackにはSlideBarという機能もあるが今回全く触れてない。
All-in-One  Sidebarみたいなものを使えるらしい。

Fastladder まわり ( はてなまわり機能追加 ) – KBDAHOLIC – やぬすさんとこ

http://d.hatena.ne.jp/janus_wel/20090111/1231678843

LDR all-in-one Hatena extension.user.jsが動かなくなっていたため、勝手に修正しました。

• LDR all-in-one Hatena extension.user.js

はてなスター周りはばっさりカットしてしまった。
なので、基本的な機能ははてなブックマーク数とコメント表示をするGreasemonkeyというもの。

修正点

Greasemonkeyではwindow.evalが使えない、eval.call(window, src) – はてなダイアリー – 無料で簡単。広告のないシンプルなブログをはじめよう！

http://d.hatena.ne.jp/brazil/20060821/1156164845

JSONをパースするために使われていた上のテクニック部分がエラーを吐いて動いてなかったので、ネイティブJSONを使ってみました。(Firefox3.5～だったかな。)
sabdbox周りの変更が原因らしいです。

gist: 233723 – GitHub

http://gist.github.com/233723