読者です 読者をやめる 読者になる 読者になる
スポンサーリンク

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

ブックマークレット 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」を1文字の変数に代入する事はできない。


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

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


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

  • (2)頻出プロパティ名は文字列にして,配列記法でアクセス


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

  • 代わりにtextContentを使う


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

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

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


実行結果のサンプル:

jQuery Migrate pluginを使ってみる。 | バシャログ。
http://c-brains.jp/blog/wsg/13/11/14-...

  • バージョン間の差異を吸収してくれるライブラリ


HTML5やCSS、jQueryなどのAPIのドキュメントサイト・「DevDocs」 - かちびと.net
http://kachibito.net/useful-resource/...

  • かなりの情報量で綺麗に纏められているのでとても探しやすい。キーワードを入力するだけで即時に候補を抽出するインスタント検索に対応


jQueryの基礎 - ドットインストール
http://dotinstall.com/lessons/basic_j...


Webサイトにツアーコンテンツを実装するjQueryプラグイン・jQuery TourBus - かちびと.net
http://kachibito.net/web-design/jquer...

  • ページ内に要素の説明のためチュートリアル的なポップアップを表示できる


jQuery 2.0がついに正式リリース。IE8以前はサポートせず、より軽量で高速に − Publickey
http://www.publickey1.jp/blog/13/jque...

  • jQuery 2.0の登場後も、Internet Explorer 6/7/8をサポートするjQuery 1.x版が並行してリリースされ続け、jQuery 2.0とjQuery 1.x版の互換性ができるだけ保たれる


jQuery 2.0リリース、IE8/7/6は非サポート:CodeZine
http://codezine.jp/article/detail/7106

  • IE 10/9でもCompatibility Viewで旧バージョンをエミュレートしている場合も影響を受けるため、IE 10/9では旧バージョンのエミュレートを使用せず、X-UA-CompatibleタグまたはHTTPヘッダの使用を推奨


jQuery×HTML5×CSS3を真面目に勉強(2):画像スライドショーでjQueryプラグインの基本を学ぶ (1/4) - @IT
http://www.atmarkit.co.jp/ait/article...


IE8以前はサポートせず、より軽量で高速に:jQuery 2.0がついに正式リリース - @IT
http://www.atmarkit.co.jp/ait/article...

  • APIの変更や大きな機能追加はありません。IE678のサポートを廃止で、これらのサポートに必要だった細かなハックを一掃、モダンブラウザにフォーカス、より小さく、速く、安定した動作を目指した


jQuery mobileを使ってwebアプリケーション | fieldWalking
http://fieldwalking.sitemix.jp/blog/j...

  • 巷では、jQueryと呼ばれるjavaScriptのライブラリーが使えないとモグリ


実践しながらjQueryを学べるオンライン学習サイト・Try jQuery - かちびと.net
http://kachibito.net/web-design/try-j...


CYOKODOG - jQuery 1.9 で $.browser が使えなくなってしまった対策
http://www.cyokodog.net/blog/jquery19...

  • IE系だとウィンドウのスクロールを制御するとき「html」Chrome や Safari などのWEBKIT系は「body」を指定>$.support.checkOn で webkit か否か判定。または、使いたい機能が機能するかで判定。またはUserAgentを直接取得して判定


jQuery.Deferred を使ってみる。 | バシャログ。
http://c-brains.jp/blog/wsg/13/02/21-...

  • コールバックを深くしない。deferred.promise() を使うと、時間のかかる処理の結果を返すことを「約束」できる


jQuery 1.9 で変わったところを調べてみる。 | バシャログ。
http://c-brains.jp/blog/wsg/13/01/21-...


jQuery Mobile 1.3β公開。レスポンシブなテーブル、グリッド、追加コンポーネントなど大幅強化 − Publickey
http://www.publickey1.jp/blog/13/jque...

  • レスポンシブなテーブル。横幅に余裕があるときには、複数の列を横方向に表示。横幅を狭くすると、それに合わせて列が縦方向に表示されるように設定>もはや「レスポンシブ」はスクラッチで対応するものでは無いのね


select要素のoption項目の内容を画像で表現する為のスクリプト・Image Picker - かちびと.net
http://kachibito.net/web-design/image...

  • 選んだ項目にあわせて設定した画像が表示、選んだoptionに連動


jQuery 1.9のリリース候補版が公開。使用されなくなったAPIを整理し、jQuery 2.0と互換へ − Publickey
http://www.publickey1.jp/blog/13/jque...

  • 1.8でモジュール構造を取り入れ、必要な機能のみを取り入れたライブラリを利用者がビルドできる環境を構築。1.9では、ほとんど使われなくなった古いAPIを整理。 2.0登場後も、IE6/7/8をサポートする1.9のメンテナンスは継続


[JS]エクセルやスプレッドシートのように美しく機能的な表を作成するスクリプト -ParamQuery grid | コリス
http://coliss.com/articles/build-webs...


jQueryの利用率はWebサイト全体の55%。使わないサイトの方が少数との調査結果。W3Techs − Publickey
http://www.publickey1.jp/blog/13/jque...

  • Webサイト全体の55%がjQueryを使っており,未使用のサイトのほうが少ない。JSライブラリの2位はMooToolsだが,5%未満。


Deferred/Promisesと非同期処理 - 素人がプログラミングを勉強していたブログ
http://javascripter.hatenablog.com/en...

  • callback hellと呼ばれているような、非同期処理によるコールバックのネストを軽減。Deferred/Promisesは、関数のreturn、try/catchの非同期版。完了時に値やエラーを通知しますよという約束を表すpromiseというオブジェクトを返す


ただしあくまでも「一時しのぎ」用:jQuery 1.9 β1リリース、移行支援プラグインを提供 - @IT
http://www.atmarkit.co.jp/ait/article...

  • jQuery 2.0が近づいてきた。まるでRubyのようだ。


また,「WSH」というブックマーク・タグの画面で,このブックマークレットを実行すると,下記のようになる。

バッチファイルを書きたくなるサイト
http://citrras.com/archives/62

  • 「バッチを書くために調べたくても,体系的に学んだ事がなかった。そういうサイトがなかったから。しかしついに今まで見た中で一番綺麗にまとめられてるサイトを見つけた。長いが、最初から最後まで一気に読めた」と


JavaScript(JScript)で自動化するための準備とインテリセンスを利用するためのメモ - エト記
http://xoinu.hatenablog.com/entry/201...

  • スタブファイル:WshStub.js


オブジェクト
http://msdn.microsoft.com/ja-jp/libra...


batファイルでメッセージを出す方法 - Super Neurotic Junction
http://snjx.info/diary/snjx/049

  • batからechoでスクリプトファイルに書き込んで,即座に実行すれば,Windowsでも複雑なワンライナーが可能


Kingsoft Office 2007 はミドルウェアの夢を見るか? | の回想録
http://mzex.wordpress.com/2006/11/11/...

  • マクロとVBAが無くても自動制御ができないわけではない/MS OfficeのオブジェクトモデルとCOMインターフェースに「最大限近づけ」てある/COMオブジェクトとしてWSHなんかでオートメーションし放題


エクスプローラのコマンドバーに「上へ」ボタンを作る。: Windows Script Programming
http://scripting.cocolog-nifty.com/bl...

  • レジストリを書き換え,エクスプローラのウィンドウにボタンが表示されるようにし,押したらショートカットキーをSendKeysするようなVBSを起動し,擬似的に「上フォルダへ」ボタンを実現


WSHにやらせていたことでNode.jsに移行できるものがあれば移行しちゃったほうが高速で時間短縮になるかもね - 最遅メンヘル研究会
http://d.hatena.ne.jp/kageroh_/201006...

  • Node.jsはCygwinでもあっさりビルドできて動くので、WSHにやらせていたことでNode.jsに移行できるものがあれば移行しちゃったほうが高速で時間短縮になる,と


離席中のチャットのログを自動でメール送信してくれるソフトの作り方
http://language-and-engineering.hatenablog.jp/entry/20081207/1228642113

  • 指定秒数後に自動的に消える閉じてくれるダイアログ・アラートは,popupメソッド。ws.Popup("ログを送信しました。",10,"完了通知",0);


WSHでDOM (Shibuya.js in Kyoto) - てっく煮ブログ
http://tech.nitoyon.com/entry/2008072...


JScript でハマる日々 - m2
http://d.hatena.ne.jp/miya2000/200908...

  • CScript用shebang。batとしてもJSとしても解釈できるようなコードを先頭に書き,両者でif文の結果を異ならせ,実行ブロックも変えている。batとしてもJSとしても実行可能になる。


VBScript で Skypeを使用した簡単なデータ通信
http://winofsql.jp/sh/html/skype_appl...

  • wshでskypeを自動操作可能。"Skype4COM.Skype


メモ帳で改行文字を含めて置換する。: Windows Script Programming
http://scripting.cocolog-nifty.com/bl...

  • LNKファイルからmshtaを起動し,WSHでクリップボードにアクセスして内容を加工している。


JavaScriptでBase64エンコードする。 - ブックマクロ開発に
http://takuya-1st.hatenablog.jp/entry...

  • BASE64エンコードしてバイナリデータを変換。まずADODB.Streamでバイナリ読み込み。ついでMicrosoft.XMLDOMでノード作ってデータタイプをbin.base64にし,ノード値とすれば変換される。


SendKeysステートメントで日本語を送るには?
http://hpcgi1.nifty.com/MADIA/VBBBS2/...

  • wshのsendkeysで日本語かなを利用するには,クリップボードを経由してコピペする。


@IT:Windows TIPS -- Tips:WSHでレジストリの読み書きを行う
http://www.atmarkit.co.jp/fwin2k/win2...


Hey, Scripting Guy! 2004/9/1
http://www.microsoft.com/japan/techne...

  • WMI経由でリモートマシン上でフォルダを作る。任意のコマンド実行可能


@IT:運用 Windows管理者のためのWindows Script Host入門 第9回 WshControllerオブジェクトの詳細
http://www.atmarkit.co.jp/fwin2k/oper...

  • WMI経由でリモートマシンを操作


SendKeys メソッド | Windows Script Host
http://msdn.microsoft.com/ja-jp/libra...

  • sendkeysの変換表


JScript on WSHでファイル選択ダイアログを表示する方法のまとめ - 新・日々録 by TRASH BOX@Eel
http://d.hatena.ne.jp/eel3/20090207/1...

  • アップロード


WSHのデバッグ
http://monjyu.biz/monjyu/bord/wsh1/ms...

  • cscript.exe //D ファイル名で, スクリプト内に debugger; というステートメントを入れておけば,デバッガが立ち上がる。

やはり,ブログに貼り付けやすい。記事の執筆の補助ツールになる。


これなら,「必要な分だけブックマークして,コメントも適宜記入しておいてから,

それらの情報をアウトプットして備忘録としてまとめておくために

はてなダイアリーにメモを投稿する」,という行動ルーチンが非常にスムーズになる。

関連する記事:

手放せない,便利なブックマークレットのコレクション (翻訳やWeb開発など)
http://language-and-engineering.hatenablog.jp/entry/20130417/p1


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


中国語のWebサイトに,自動でピンインを付与する無料Webサービス&ブックマークレット (Webページの発音や翻訳を表示するオンラインツール)
http://language-and-engineering.hatenablog.jp/entry/20120709/AddPinyinToChine...

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