Web scratch

Posts Tagged ‘はてブ’

以前書いた、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

タイトルが変ですが、iPhoneで2chまとめサイトみる環境の作成方法をまとめたメモです。
既にニコ２ちゃんねるのようなそれ向けのアプリがあったりしますが、実際にサイトを表示する時はPCサイトをみるだけなのであんまりうれしくなかったりします。
そこで、RSSリーダーとまるごとRSSを使って、2chまとめサイト専用のGoogle Readerを作成してみた。

まるごとRSSを使うことでフィードが全文受信(Wedataが対応してないところは無理)できるので、わざわざサイトにアクセスする必要がなくなるのと、Bylineのようにキャッシュ機能を持っているiPhoneアプリだとオフラインでも暇つぶしになるのがいいところ。

手順としては

1. Google Reader用にGoogleアカウントを作成する(元々Google Readerを使ってなかったらそれでもいい)
2. 好きな2chまとめサイトをまるごとRSSを通してGoogle Readerに登録する
   下に登録用のブックマークレットを置いてある
3. 好きなRSSリーダアプリで上のアカウントを閲覧する
   BylineやMobileRSSなど(これ専用と考えるともっと最適なものがあるかもしれない。オススメがあったらお願いします)

はてブで調べた2chまとめサイトの一覧 – ナマアシタノム

http://d.hatena.ne.jp/ashitano244/20091004/1254643353

を参考にして適当に登録したものを置いておく。

• google-reader-subscriptions.xml

まるごとRSSを通す際にわざわざ入力するのは面倒なので、簡単に登録できるブックマークレットを作成した。

• まるごとRSS登録 (まるごとRSSのページへ)
• まるごとRSS登録 (Google Readerの登録ページへ直接飛ぶ)

まるごとRSSのページ掲載されてるブックマークレットは以前自分が書いたやつですが、RSSのページで実行しないといけなかったので、適当に書き加えてTOPページなどから実行しても登録画面にいけるようにしました。(複数のRSSフィードを持つページは苦手なので、そのときはRSSページから実行するといいです。)

javascript:
(function(){
  var%20el=document.getElementsByTagName("link");
  var%20flag=false;
  for(i=0;i<el.length;i++){
    if(!flag&&el[i].getAttribute("rel")=="alternate"&&/(xml|rss)/.test(el[i].getAttribute("type"))){
      window.open('http://www.google.com/reader/view/feed/http://mrss.dokoda.jp/analyze/?url='+encodeURIComponent(el[i].href),'_blank');
      flag=true;
    }
  }
  if(!flag){
    window.open('http://www.google.com/reader/view/feed/http://mrss.dokoda.jp/analyze/?url='+encodeURIComponent(location.href),'_blank');
  }
}
)()

中身は正直適当なので、ご自由にお使いください。

RSSフィードを全文配信で読むなら まるごとRSS

http://mrss.dokoda.jp/

Google リーダー

http://www.google.co.jp/reader/

ややこしいタイトルになってますが、HatebuCommentなどのLDR上ではてブコメントをみる機能を
Tomblooとはてなブックマーク拡張を使って同じ事をするTomblooパッチです。

1. Tombloo
2. はてなブックマーク拡張

をインストールしておく必要があります。 ((元々両方を使ってる人向けが前提だったり))

ここからインストール

リンク上で 1)右クリック 2)tombloo 3)tomblooパッチのインストール で簡単にインストールできると思います。
初期設定のショートカットキーはSHIFT + Dになってるので適当に変えて使ってください。

利点としてははてな公式の拡張を使ってるので仕様変更には強いぐらいだと思います。
何か落ちやすかったりするのでイマイチかも。

ニコニコ動画の動画をはてなブックマークやdel.icio.usに登録するときに、
動画についているタグをそのまま使いたい場合はありませんか？
NicoVideo Post to SBM with selected tagsは動画をSBM(Social BookMark)に登録するのを手助けするGreasemonkeyです。
インストールはこちらからしてください。

• NicoVideo Post to SBM with selected tags

設定方法は上のページにも詳しく書いてありますが、こちらにも書いておきます。
まずポスト先として利用できるサイトははてなブックマークとdel.icio.usになっており、同時に両方にポスト(クロスポスト)することも可能です。
また選択したタグをニコニコ動画で検索することもできます。(NicoVideo Multiple Tag Search Toolと同じ機能です)

ポスト先の設定

1. del.icio.usを使う場合
   del.icio.usを使う場合は

   var useDelicious = true;
   
   

   にすれば、ポスト時にAPIのプロンプトが出現するので、ユーザー名とパスワードを入力するだけで大丈夫です。
2. はてなブックマークを使う場合

   ポストするためにhatebu_poster.user.jsが必要になります.。
   hatebu_poster.user.jsははてなブックマークにポストするためのテンプレートみたいなGreasemonkeyです(他のGreasemonkeyが手抜きできる。)
   インストールしたら

   • hatebu_poster.user.js
   • NicoVideo Post to SBM with selected tags

   という順番になるようにGreasemonkeyの管理画面でAltキーを押しながら並び替えてください。
   そして、NicoVideo Post to SBM with selected tagsをテキストエディタで編集します。

   var useHatena = {
         "isUse" : true,// 使用するか
         "userName" : "",//ユーザー名
         "password" : ""//パスワード}
    を各自埋めてください。 
   

両方ともonにした場合はクロスポストされます。

タグの置換

タグの置換機能とは、ポスト時に選択したタグをreplaceListsの内容に従って置換する事ができます。
使うにはまず
var useReplaceList = true;
にして、すぐしたのreplaceListsを自分に合わせて変更します。
var replaceLists = {
“裸で何が悪い” : “裸だったら何が悪い”,
}
この場合は裸で何が悪い→裸だったら何が悪い に置換されます
増やす場合は”置換したいタグ” : “置換した結果のタグ”‘,   の形で足していく。(カンマを忘れずに)

設定自体は以上で完了です。

ポスト方法

ポスト方法は、ポストしたいタグを選択した状態で、タグのところにあるPOSTボタンを押して、
テキストエリアにコメントや追加したいタグを書いて、もう一度POSTボタンを押すことでポストできます。
(テキストエリア内でCtrl + Enterのショートカットでもポストできます)

タグの新規追加

再生ページに必ずしも使いたいタグがない場合は自分で任意のタグを追加(SBMに対して)してポストできます。
コメント入力部に特定の書式でタグを書くことにより追加できます。
[tag1 tag2][tag3]コメント内容[tag4]
を例とすると、タグとして扱われるのは[]で囲まれた範囲を半角スペースで区切った物が一つのタグとして扱われます。
基本的には以下のようにタグを書くといいと思います。

[tag1][tag2]コメント
[tag1 tag2]コメント

どちらもtag1とtag2というタグが追加される。
以上で説明は終了。

※注意
NicoVideo Multiple Tag Search Tool for Greasemonkeyと同じ機能も持ってるので、併用しない方がいいです。

NicoVideo Post to SBM with selected tags

http://userscripts.org/scripts/show/48046

NicoVideo Multiple Tag Search Tool for Greasemonkeyを元に改造させてもらっています。(感謝)

NicoVideo Multiple Tag Search Tool

http://userscripts.org/scripts/show/41650

ニコニコ動画上の動画からはてなブックマークをするときに便利なGreasemonkeyスクリプトを書いてみました。(やや自分用に)

機能

1. ニコニコ動画のロックタグ(固定タグ)をそのままはてブのタグにしてポストできる。
2. 投稿者の説明をそのままはてブのコメント(内容)としてポストできる。(設定でON,OFFできます)
   var descshow = true;//投稿者の説明を入れるならtrue,　いれないならfalse

• nicohatebu_tagpost.user.js

インストールした状態でニコニコ動画の動画再生ページにいくと

マイリストの近くにはてブというリンクがあるのでそれをクリックすると、
普段のはてブ投稿画面にタグなどが記載された状態で表示されます。

最初はブックマークレットにしようと思いましたが、よく分からなかったのでGreasemonkeyにしてみました。
まだ、微妙なところ(タグにカテゴリとか投稿者コメントがあるのが)があるのでそこを少し調整する予定。

はてなブックマーク で投稿（追加） するときに使ってるGreasemonkeyとブックマークレットを並べてみた。

• 自動的に「amazon」タグを付加 – はてなグリースモンキー

中身をいじればamazonタグでないものも追加できる。
種類が固定されている人には便利かも。

• はてなブックマークのタグ補完を改善: タグとコメントを別々に入力できるようにする – ヒビノキロク

コメントとタグの入力部分を別にできるので使いやすい。
タグは,で区切りを付けて入力し、入力されるとコメント欄に[]で囲まれて表示される。

• 83′s : はてブするときに選択文字列をコメントに入れる
• 83′s : はてブのおすすめタグの大文字小文字を自分のタグと合わせる
• 83′s : はてブするときにおすすめタグの中の英語/カタカナとか同義語とかでどっちにするか迷わなくなれそうなgreasemonkey

内容はタイトル通りのものですね。
同一サイトのものなのでまとめて。

• はてなブックマークの追加画面で、おすすめタグの中から自分の使っているタグだけを目立たせる Greasemonkey スクリプト – the time ship

83′s : はてブするときにおすすめタグの中の英語/カタカナとか同義語とかでどっちにするか迷わなくなれそうなgreasemonkeyに少し似ている感じはしますが、迷わなくなるので便利。

83′s : はてブするときに選択文字列をコメントに入れるはブックマークレットですがかなりいい感じ。

ブックマークレットといえば他にもsarusaruBookmark – はてなブックマークをもっと楽しく便利に。色々便利なブックマークレット
などがありますね。
こちらはいろんな機能が混ざってるので、自分に合うものを使うといいかも。

80個以上のはてブ関連のGreasemonkeyまとめ – 聴く耳を持たない(片方しか)

を見ていろいろ探すと他にもあるかも知れない。