今見ているホームページのサムネイルをブログに貼付けるのに役立つブックマークレットを作ってみた : つねづね思ふこと

«« こんにちはアン〜アンと連続する死亡事件(ネタバレ) | マクロスフロンティア劇場版(上)を見ました(※ネタバレあり) »»

今見ているホームページのサムネイルをブログに貼付けるのに役立つブックマークレットを作ってみた

2009年11月15日

サイトのサムネイルやブックマークを作成するwebサービスHeartRails Captureを利用するブックマークレットを作成してみました。これでブログでのサイト紹介でホームページのキャプチャー画面を素早く掲載できますぞ！！

ブログ等で、どこかのサイトを紹介するのは良くある話。

その際にサイトの紹介文だけでなくサムネイル(=キャプチャー)画面も一緒に添えていると説得力がグッと増します。

とはいえ、いちいち自力でPrintScreenを毎回するのも面倒なので外部のWebサービスを利用してちょちょいと作りましょう！

個人的に大体数秒でサイトサムネイルが画像を作成してくれるHeartRails Captureがお気に入り(サービス提供者様ありがとうございます！)。

ただ最近いちいちフォーム欄へ毎回URLを打ち込むのも面倒になってきたので、URL入力が省略できるブックマークレットを作ってみました。


javascript:( function() { var code = document.body.innerHTML; var act = document.createElement('form'); act.action = 'http://capture.heartrails.com/help/make_thumbnail'; act.method = 'post'; act.name = 'bookmarklet'; act.id = 'bookmarklet'; var hid1 = document.createElement('input'); hid1.type = 'hidden'; hid1.name = 'enter[url]'; hid1.value = location.href; act.appendChild(hid1); document.body.appendChild(act); document.getElementById('bookmarklet').submit(); } )();

※SafariとFirefoxにIE6で動作確認をしました。

なおブックマークレットについて補足説明します。
ブラウザのお気に入りから何らかのサイトを選択しますと、普通はそのサイトに移動します。
しかし、お気に入りのURLが記載されているところにJavaScriptを記入し、場合によっては外部Webアプリと連携させる事で色々ちょっと便利な事をさせる事が出来る！というのがブックマークレットです。

今回の場合、

1.適当なお気に入り(=ブックマーク)を作成し、名前を「サイトキャプチャー取得」とか何かつけます

2.先ほど作成したお気に入りのURLへ先ほどのソースコードを代入します

3.次回以降、サムネイル作成したいサイトで先ほどのお気に入りを実行させると、HeartRails Captureへ転送し、サムネイルをゲットする事が出来るかもしれません。

というように使って下さい。

ちなみにHeartRails Captureでは、サムネイルを作成する他にPDFを作成する事が出来るらしいのですが、このブックマークレットにはそのような機能はありません。
先ほどのソースコードをもう少し見やすくした物を置いてみますので、よろしければ改造のご参考にしてください(著作権は主張しませんので、承諾なく自由に利用してくださって構いません)。


javascript:(
	function() {
		var code = document.body.innerHTML;
		var act = document.createElement('form');
		act.action = 'http://capture.heartrails.com/help/make_thumbnail';
		act.method = 'post';
		act.name = 'bookmarklet';
		act.id = 'bookmarklet';
		
		var hid1 = document.createElement('input');
		hid1.type = 'hidden';
		hid1.name = 'enter[url]';
		hid1.value = location.href;
		act.appendChild(hid1);
		document.body.appendChild(act);
		
		document.getElementById('').submit();
		
	}
)();

このコード作成には、『ブックマークレットに関する質問です「ブラウザで現在表示しているページのソースを、特定のCGIにPostするブックマークレット」上記は可能でしょうか？また、もし可能で.. - 人力検索はてな』を参考にしました。
ありがとうございます。