スポンサーリンク

はてブのマイページから，情報を一括して整形・抽出するブックマークレット

ブックマークレット javascript shortcoding hatena


蓄積された「はてなブックマーク」の自分のエントリを，

ブログに貼り付けやすい「はてな記法のリンク集」形式に変換してくれるブックマークレット。


自分のブックマーク（はてブのエントリ）のコレクションを，

一発で「要約」してくれる。*1

javascript:(function(d,g,n,H,L,li,b,tr,i,a,w,t,csp,c,s){d=window.document;n="getElementsByTagName";H="innerHTML";b="<br>";L=d.getElementById("bookmarked_user")[n]("li");s="";tr=function(x){return%20x.replace(/</g,"%EF%BC%9C").replace(/>/g,"%EF%BC%9E");};for(i=0;i<L.length;i++){li=L[i];if(li.getAttribute("data-eid")){a=li[n]("a")[0];w=a.href;t=a[H];csp=li[n]("span")[2];c=csp["textContent"]?csp["textContent"]:csp["innerText"];s+=tr(t)+b+w+b;if(c&&(c.length>0)){s+="-"+tr(c)+b;}s+=b+b;}}d.write(s);})();

この一行でブックマークURLとして登録する。

登録時の名前は「ブクマの情報を整形」とでもすればよい。


なお，ソースコードを読みやすくインデントして解説すると下記のような感じ。

javascript:

// 内部変数の定義は，関数の引数にすればvarを書かなくて済む
(function(d,g,n,H,L,li,b,tr,i,a,w,t,csp,c,s){

	// 短い文字列でのショートカット
	d=window.document;
	n="getElementsByTagName";
	H="innerHTML";
	b="<br>";
	L=d.getElementById("bookmarked_user")[n]("li");
	s="";
	tr=function(x){
		// 文字列がHTMLタグとして解釈されないようにトリム
		return x.replace(/</g,"＜").replace(/>/g,"＞");
	};
	
	// 全ブクマについてループ
	for(i=0;i<L.length;i++){
		li=L[i];
		if(li.getAttribute("data-eid")){
			// ブクマ情報の抽出
			a=li[n]("a")[0];
			w=a.href;
			t=a[H];
			csp=li[n]("span")[2];
			
			// innerHTMLを使うとタグを拾ってしまうので，textとして拾って無効化する。
			// FirefoxにはinnerTextは無いので，クロスブラウザ対策する。
			c=csp["textContent"]?csp["textContent"]:csp["innerText"];
			
			s+=tr(t)+b+w+b;

			// ブクマにコメントがあれば追記
			if(c&&(c.length>0)){
				s+="-"+tr(c)+b;
			}

			// 読みやすく改行を追記
			s+=b+b;
		}
	}
	
	// 画面にHTMLとして表示
	d.write(s);
})();

クロスブラウザなJavaScriptのコードとしての解説：

Annotation Bookmarklet - MandarinSpot
http://mandarinspot.com/bookmark

  • 中国語の文章に読み方（ピンイン）を振ってくれるブックマークレットだが，実装方法に，ショートコーディングのエッセンスが。
  • ローカル変数はいちいちvarを書かずに，クロージャの引数で暗黙的に初期化してしまえばよい。字数が少なくて済む。


JavaScriptの動かないコード　(中級編)　オブジェクトのメソッドを変数代入でコピーできない
http://language-and-engineering.hatenablog.jp/entry/20090630/p1

  • オブジェクトからメソッドをコピーした場合，もとのオブジェクトとの関わりは一切なくなる。メソッドだけが切り離されてコピーされ，そのメソッドの中に書いてある「計算方法」だけが引き継がれる
  • したがって，ショートコーディングしたくても「document.getElementById」を１文字の変数に代入する事はできない。


JavaScriptの動かないコード　(中級編)　IEでスコープチェインにdocumentが補完されるように見える不思議
http://language-and-engineering.hatenablog.jp/entry/20090701/p1

  • 「document.getElementById」を１文字の変数に代入する事はできない件の補足


JavaScript ショートコーディングの１０のコツ
http://language-and-engineering.hatenablog.jp/entry/20081009/1223469525

  • （２）頻出プロパティ名は文字列にして，配列記法でアクセス


FireFoxではinnerTextが使えないらしい | Seven Words
http://seven-words.info/2013/01/19/227/

  • 代わりにtextContentを使う


で，このブックマークレットを実際に，

私のはてブの「jQuery」カテゴリの，とあるページ内で実行してみると

下記のような見やすい「リンク集」が一発でできあがる。


実行結果のサンプル：

*1:このブックマークレットは「旧ユーザページ」用であり，「新ユーザページ」には対応させていない。設定→閲覧→「新ユーザーページ」のチェックを外して，旧ユーザーページに戻せば問題なく動作する。このようにした理由は，新ユーザページが使いづらいので嫌だと感じたためだ。

続きを読む