ブログで紹介するウェブサイトなどの「サムネイル画像」「タイトル」「テキスト」「コメント」を、レイアウトされた書式のHTMLタグで作成してくれる「Bookmarklet(ブックマークレット)」が「ShareHtml」です。

 

ShareHtmlメーカー

http://dl.dropbox.com/u/2271551/javascript/sharehtmlmk.html

 

「ShareHtmlメーカー」では、「選択テキストの最大文字数」「選択テキストを囲むHTMLタグ」「コメントを囲むHTMLタグ」「出力方法」「書式テンプレート」などを指定して、オリジナルの「ShareHtml」を作成することができます。

書式テンプレートには、「左サムネイル大(alignleft)」「左サムネイル小(alignleft)」「左サムネイル大(Table)」「右サムネイル大(Table)」「サムネイル無し」の5タイプから選択可能。

 

また、出力されるHTMLタグをカスタマイズして「ShareHtml」を作成することもできます。

いつも使用している書式がある場合などは、カスタマイズしてから生成しておくと良いでしょう。

 

<a href=”${posturl}” target=”_blank”><img align=”left” border=”0″ src=”http://capture.heartrails.com/150×130/shadow?${posturl}” alt=”” width=”150″ height=”130″ /></a><a style=”color:#0070C5;” href=”${posturl}” target=”_blank”>${posttitle}</a><a href=”http://b.hatena.ne.jp/entry/${posturl}” target=”_blank”><img border=”0″ src=”http://b.hatena.ne.jp/entry/image/${posturl}” alt=”” /></a>${postselect}${memo}<br style=”clear:both;” /><br>

 

HTMLなどが良く分からない場合は、書式テンプレートだけを選択して「Bookmarkletを生成する」ボタンをクリックします。

「デモおよびPC登録用」をブックマークするか、以下のようなjavascriptをブックマークに登録します。

 

javascript:(function(){var d=document,e=d.createElement(‘script’),url=’http://dl.dropbox.com/u/2271551/javascript/sharehtml.js’;if(!url.match(/\?/))url+=’?t=’+(new%20Date()).getTime();url+=’&out=’+’preview’+’&cnt=’+’100’+’&sts=’+’%3Cbr%3E%3Cspan%20style%3D%22color%3A%20%23808080%3Bfont-size%3A%2080%25%3B%22%3E’+’&ste=’+’%3C/span%3E’+’&cts=’+’%3Cbr%3E%3Cstrong%3E’+’&cte=’+’%3C/strong%3E’+’&fmt=’+’%3Ca%20href%3D%22%24%7Bposturl%7D%22%20target%3D%22_blank%22%3E%3Cimg%20class%3D%22alignleft%22%20align%3D%22left%22%20border%3D%220%22%20src%3D%22http%3A//capture.heartrails.com/150×130/shadow%3F%24%7Bposturl%7D%22%20alt%3D%22%22%20width%3D%22150%22%20height%3D%22130%22%20/%3E%3C/a%3E%3Ca%20style%3D%22color%3A%230070C5%3B%22%20href%3D%22%24%7Bposturl%7D%22%20target%3D%22_blank%22%3E%24%7Bposttitle%7D%3C/a%3E%3Ca%20href%3D%22http%3A//b.hatena.ne.jp/entry/%24%7Bposturl%7D%22%20target%3D%22_blank%22%3E%3Cimg%20border%3D%220%22%20src%3D%22http%3A//b.hatena.ne.jp/entry/image/%24%7Bposturl%7D%22%20alt%3D%22%22%20/%3E%3C/a%3E%24%7Bpostselect%7D%24%7Bmemo%7D%3Cbr%20style%3D%22clear%3Aboth%3B%22%20/%3E%3Cbr%3E’;e.charset=’utf-8′;e.src=url;e.id=’bmlt’;d.body.appendChild(e);})();

 

「ShareHtml」はBookmarklet(ブックマークレット)ですので、「http://example.com/」のようなURLではなくjavascriptから始まる文字列となっています。

 

使用するには、紹介したいウェブサイトやブログなどをブラウザで表示しておき、設定した「ShareHtml」のブックマークをクリックするだけです。

ウェブサイトやブログ上のテキストを選択しておくと、そのテキストを表示させることもできます。

 

また、「ShareHtmlメーカー」では、iPhone登録用の「ShareHtml」のURLも出力されます。

そのURLをクリックして表示されるページをブックマーク、登録したブックマークのURLの「?」より前の文字列を削除することで、iPhoneやiPadでも「ShareHtml」を利用することができるようになります。