Web scratch

Posts Tagged ‘ブックマークレット’

最近使ってたりするJavaScript関係のツールまとめてみた。
主にWebサービスです。

• Global is the new private
  JavaScriptライブラリの名前空間汚染をチェックするツール。
  元々載ってるもの以外でもAnalyze your own scripts!から調査したいライブラリを追加できる。
• jsFiddle
  ブラウザ上で HTML / CSS / JavaScript の実行結果を表示できる。
  Embedコードもあるので、ブログにjsやCSSなどを載っけるのに便利。
  エディタ機能も整形、シンタックスハイライトしてくれるので使いやすい。
  HTML5のコードを使うにはInfoからDTDを変更してから使う。
  類似:MooShell
• Gist – GitHub
  gistです。コードスニペット共有サービスです。
  Greasemonkey貼るときgist fill in fileName automatically for Greasemonkeyを使うと楽です。
• jsPerf
  benchmark.jsを使った比較ツール。JavaScriptのスニペットを登録して処理時間を比較できる。
  実行結果がサイトに記録されるので、他人がやった結果がどんどん貯まるのも良い点。
• HiFi Regex Tester
  JavaScriptの正規表現を確認できるツール。
  類似:RegExpChecker.js
  正規表現関係で、正規表現をオートマトン的に図示してくれるstrfriendも便利です。
• Pretty Diff
  JavaScript、CSS、CSV、HTMLのコードを整形、圧縮、Diffなどができる。
  いろんなものを詰め込んだ感じのツール
  JavaScriptの整形自体はJS Beautifierが好き(Pretty Diffでも使ってる)
• Experimentation Harness
  DOMイベントの調査ツール。
  DOMイベントが網羅的に載ってるので確認に使ったりする。
• Keycode library test
  キーボードのキーコード調査ツール。
  修飾キーとの組み合わせにも対応してます。(各ブラウザのキーコード表[JavaScript])
• Online JSON Viewer
  JSONビューアー。ツリー表示や整形機能。
  Firebugとかでみたりもするけど、UIが好き。
• エンコードマニアックス – 各種エンコードやハッシュを一発作成
  エンコード/デコード結果がまとめて見られるので結構使います。
  汎用的に使えます。
• Unicode code converter [ishida >> utilities]
  同じくエンコード。数値文字参照とかJavaScriptのエスケープ。
  少し特殊っぽいの多め
• XPath検索バー (for Mozilla/Firefox) | 東京嫉妬
  XPathのチェックブックマークレット
  ちょっとだけいじった気がするバージョン : XPath Tester
  Firefoxの拡張だとxpath finderがシンプルで使いやすいチェックツール。
• XPathGenerator – Hatena::Let
  インスペクタからクリックで要素のXpathを生成するブックマークレット

タイトルままですが、ブックマークレットがjavascript:~~~みたいにべた書きしてある場合、ブックマークレットとして登録するのが面倒なので、
それを登録するためのリンク(よくあるツールバーへD&Dするためのリンク)を作成するブックマークレット。

• ブックマークレット登録補助

使い方

英語のニュースを読みやすくするブックマークレット – by edvakf in hatena

http://d.hatena.ne.jp/edvakf/20100115/1263539415

上を例にしてみると

1. べた書きされたブックマークレットのコード部分だけを選択する
2. ブックマークレット登録補助ブックマークレットを実行
3. プロンプトが出るので、登録するブックマークレットのタイトルをいれる(英語のニュースを読みやすくするとか)
4. 選択範囲のすぐしたにいれたタイトルでリンクができるので、それをブックマークレットツールバーへD&Dする。

以上

(function(){
function insertAfter(newNode, node) {
        return node.parentNode.insertBefore(newNode, node.nextSibling);
}
var selection = getSelection();
if (!selection.rangeCount) return false;
var range = selection.getRangeAt(0);
var endNode = range.endContainer;
var a =document.createElement("a");
a.href = range;
var str = document.createTextNode(prompt("ブックマークレットタイトル"));
a.appendChild(str);
insertAfter(a,endNode);
})();

サイトに新たに機能を付け加えるのではなくて、元々サイトに存在してる関数を少しだけいじってやった方が簡単な場合があります。
そういうときにGreasemonkeyからサイトに元々ある既存関数を上書きする方法です。

SmartLDR更新 – 素人がプログラミングを勉強するブログ

http://d.hatena.ne.jp/javascripter/20090324/1237903880

ここで紹介されているlocation.hrefとjavascript:プロトコルを使ったハックを使うと比較的簡単に関数の上書きができます。
例えばmyFuncという関数を上書きしたい場合は以下のようにjavascript:プロトコルからmyFuncを再定義すると上書きができます。

function evalInPage(fun) {
  location.href = "javascript:void (" + fun + ")()";
}
 
evalInPage(function () {
myFunc = function(){
	上書きする内容
}
});

location.hrefとjavascript:プロトコルを使って実行するとXPCNativeWrapperの外側でスクリプトを評価できる(Greasemonkey内の評価ではなくなる)ので、unsafeWindowを使わなくても既存の関数に触ることができます。
逆にGreasemonkey内の評価ではなくなるので、GM_関数は使えなくなります。(感覚的にはブックマークレットを実行するのと同じ)
これを同期的に扱いたいならJSDeferredを使って下のように組み込むといいらしい。

unsafeExec on JSDeferred – 枕を欹てて聴く

http://d.hatena.ne.jp/Constellation/20090326/1238073714

9washのRTフォーマットを一般的なものに変更するのにこの方法を使ってみた。
9washはブラウザから利用できるWeb twitterクライアントです。
軽くて使い易いので、いいクライアントだと思いますが、RTのフォーマットが[RT:数字id @ユーザー名]みたいになっていて、使いにくかったのでその部分の関数を上書きして、よく使われているようなRT @ユーザー名:の書式に変えるようにしてみました。

• 9wash RT format.user.js

9wash twitter clientについて

http://tw.9wash.com/about

タイトルが変ですが、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/

Instapaperというウェブサービスを使用する事で簡単にiPhoneでもあとで読むが実現できます。

iPhone用のアプリもあり、ブックマークレットで”あとで読む”サイトを追加していくことができる。
アカウントもユーザネームだけで使用する事ができるので、パスワードなどの登録手続きはありません。
iPhoneからの閲覧はアプリ上から行えて、safariで見ることもできる。

また応用すれば簡易的なTODOみたいなものも実現できます。
InstapaperにTODOを追加するブックマークレット書いた – anatoo勉強記

PCの連携が簡単なのでとても便利。

最近livedoor クリップも使うようになった。
はてブみたいにGreasemonkeyなどがたくさんあるわけではないけど、基本的な機能ができていて使い分けすれば結構いけてるSBMだ。

登録方法が公式のブックマークレットしか見あたらないので、少しだけ改造して新しいタブで開くようにした。

clip!

上のリンクをブックマークツールバーにD&Dすればいいと思う。
Firefox3でしか動作確認はしてません。