ブログ書き用ブックマークレットまとめ

2013/04/07

ブログを書くのに、リンクや引用を手動で行う手間を少なくするために、様々なブックマークレットを使用しています。
現在使用しているものを紹介します。

ウェブページへのリンク

ブログはMarkdownで記述しているので、Markdownの参照リンク形式です。

javascript:(function(){var ele=document.createElement('textarea');ele.style.width='100%';ele.value='['+document.title+'][]\n ['+document.title+']: '+location.href+'';document.body.insertBefore(ele,document.body.firstChild);ele.focus();ele.select();ele.ondblclick=function(){ele.parentNode.removeChild(ele);};ele.oncopy=function(){setTimeout(function(){ele.parentNode.removeChild(ele);},1);return true;}})()

My Utility-Make Link ジェネレータ を使用して作成しました。

Yahoo!のトップページで使用した場合。

生成されるコード:

[Yahoo! JAPAN][]
 [Yahoo! JAPAN]: http://www.yahoo.co.jp/

こう見えます: Yahoo! JAPAN

ウェブページの引用

ブログの引用文を簡単に作成できるブックマークレット作りました – 空想デザイン ~ 空想を膨らませて未来を創造 の「簡単ブログ引用ツール」を使用しています。

javascript:(function()%7Bvar%20a%3D%27%E5%BC%95%E7%94%A8%E6%96%87%E3%82%92%E9%81%B8%E6%8A%9E%E3%81%97%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84%27,b%3D%27%E5%BC%95%E7%94%A8%E5%85%83%EF%BC%9A%27,c%3D%27%E3%82%B3%E3%83%94%E3%83%BC%E3%81%97%E3%81%A6%E3%83%96%E3%83%AD%E3%82%B0%E3%81%AB%E8%B2%BC%E3%82%8A%E3%81%A4%E3%81%91%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84%27,d%3Ddocument,s%3Dd.createElement(%27script%27),w%3Dwindow,u%3Dlocation.href,t%3Dd.title,v%3D(d.all)%3Fd.selection.createRange().text:(w.getSelection()%2B%27%27)%3Bs.charset%3D%27UTF-8%27%3Bif(!v)%7Balert(a)%3B%7Delse%7Bvar%20q%3D%27%3Cblockquote%20cite%3D%22%27%2Bu%2B%27%22%20title%3D%22%27%2Bt%2B%27%22%3E%27%2B%27%3Cp%3E%27%2Bv.replace(/%5Cn/g,%22%3Cbr/%3E%22)%2B%27%3C/p%3E%27%2B%27%3Cp%3E%3Ccite%3E%27%2Bb%2B%27%3Ca%20href%3D%22%27%2Bu%2B%27%22%20target%3D%22_blank%22%3E%27%2Bt%2B%27%3C/a%3E%3C/cite%3E%3C/p%3E%27%2B%27%3C/blockquote%3E%27%3Bs.src%3Dw.prompt(c,q)%3B%7Ddocument.body.appendChild(s)%7D)()%3B

Yahoo!のトップページでトピックス3つを選択した状態で使用した場合。

生成されるコード:

<blockquote cite="http://www.yahoo.co.jp/" title="Yahoo! JAPAN"><p>全国で強風 北日本中心に大雨写真<br/>日銀 異次元緩和は成功するか写真<br/>少年少女がLINE仲間に美人局</p><p><cite>引用元:<a href="http://www.yahoo.co.jp/" target="_blank">Yahoo! JAPAN</a></cite></p></blockquote>

こう見えます:

全国で強風 北日本中心に大雨写真
日銀 異次元緩和は成功するか写真
少年少女がLINE仲間に美人局

引用元:Yahoo! JAPAN

商品リンク

書籍

書籍紹介ブログパーツ ヨメレバ のブックマークレットを使用しています。

javascript:window.open('http://yomereba.com/blogparts/?&url='+encodeURI(document.location.href));undefined;

Amazonで「7つの習慣」のページを開いて使用した場合。

生成されるコード:

<div class="booklink-box" style="text-align:left;padding-bottom:20px;font-size:small;/zoom: 1;overflow: hidden;"><div class="booklink-image" style="float:left;margin:0 15px 10px 0;"><a href="http://www.amazon.co.jp/exec/obidos/asin/4906638015/noref02-22/" name="booklink" rel="nofollow" target="_blank"><img src="http://ecx.images-amazon.com/images/I/51JHD9GEK0L._SL160_.jpg" style="border: none;" /></a></div><div class="booklink-info" style="line-height:120%;/zoom: 1;overflow: hidden;"><div class="booklink-name" style="margin-bottom:10px;line-height:120%"><a href="http://www.amazon.co.jp/exec/obidos/asin/4906638015/noref02-22/" rel="nofollow" name="booklink" target="_blank">7つの習慣―成功には原則があった!</a><div class="booklink-powered-date" style="font-size:8pt;margin-top:5px;font-family:verdana;line-height:120%">posted with <a href="http://yomereba.com" target="_blank">ヨメレバ</a></div></div><div class="booklink-detail" style="margin-bottom:5px;">スティーブン・R. コヴィー キングベアー出版 1996-12    </div><div class="booklink-link2" style="margin-top:10px;"><div class="shoplinkamazon" style="display:inline;margin-right:5px;background: url('http://img.yomereba.com/kz_y.gif') 0 0 no-repeat;padding: 2px 0 2px 18px;white-space: nowrap;"><a href="http://www.amazon.co.jp/exec/obidos/asin/4906638015/noref02-22/" rel="nofollow" target="_blank" title="アマゾン" >Amazon</a></div><div class="shoplinkkindle" style="display:inline;margin-right:5px;background: url('http://img.yomereba.com/kz_y.gif') 0 0 no-repeat;padding: 2px 0 2px 18px;white-space: nowrap;"><a href="http://www.amazon.co.jp/gp/search?keywords=7%82%C2%82%CC%8FK%8A%B5%81%5C%90%AC%8C%F7%82%C9%82%CD%8C%B4%91%A5%82%AA%82%A0%82%C1%82%BD%21&__mk_ja_JP=%83J%83%5E%83J%83i&url=node%3D2275256051&tag=noref02-22" rel="nofollow" target="_blank" >Kindle</a></div><div class="shoplinkrakuten" style="display:inline;margin-right:5px;background: url('http://img.yomereba.com/kz_y.gif') 0 -50px no-repeat;padding: 2px 0 2px 18px;white-space: nowrap;"><a href="http://hb.afl.rakuten.co.jp/hgc/10f30cf2.b3aa7bc1.10f30cf3.2681c8db/?pc=http%3A%2F%2Fbooks.rakuten.co.jp%2Frb%2F849430%2F%3Fscid%3Daf_ich_link_urltxt%26m%3Dhttp%3A%2F%2Fm.rakuten.co.jp%2Fev%2Fbook%2F" rel="nofollow" target="_blank" title="楽天ブックス" >楽天ブックス</a></div></div></div><div class="booklink-footer" style="clear: left"></div></div>

こう見えます:

その他

商品紹介ブログパーツ カエレバ のブックマークレットを使用しています。

javascript:window.open('http://kaereba.com/blogparts/?&url='+encodeURI(document.location.href));undefined;

Amazonで「Vita-Mix TNC5200 WHITE」のページを開いて使用した場合。

生成されるコード:

<div class="kaerebalink-box" style="text-align:left;padding-bottom:20px;font-size:small;/zoom: 1;overflow: hidden;"><div class="kaerebalink-image" style="float:left;margin:0 15px 10px 0;"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/B003PJ5PPS/noref02-22/ref=nosim/" rel="nofollow" target="_blank"><img src="http://ecx.images-amazon.com/images/I/31O2eG9QiRL._SL160_.jpg" style="border: none;" /></a></div><div class="kaerebalink-info" style="line-height:120%;/zoom: 1;overflow: hidden;"><div class="kaerebalink-name" style="margin-bottom:10px;line-height:120%"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/B003PJ5PPS/noref02-22/ref=nosim/" rel="nofollow" target="_blank">Vita-Mix TNC5200 WHITE</a><div class="kaerebalink-powered-date" style="font-size:8pt;margin-top:5px;font-family:verdana;line-height:120%">posted with <a href="http://kaereba.com" target="_blank">カエレバ</a></div></div><div class="kaerebalink-detail" style="margin-bottom:5px;"> Vita-Mix (バイタミックス)     </div><div class="kaerebalink-link1" style="margin-top:10px;"><div class="shoplinkamazon" style="display:inline;margin-right:5px;background: url('http://img.yomereba.com/kz_k_01.gif') 0 0 no-repeat;padding: 2px 0 2px 18px;white-space: nowrap;"><a href="http://www.amazon.co.jp/gp/search?keywords=TNC5200&__mk_ja_JP=%83J%83%5E%83J%83i&tag=noref02-22" rel="nofollow" target="_blank" title="アマゾン" >Amazon</a></div><div class="shoplinkrakuten" style="display:inline;margin-right:5px;background: url('http://img.yomereba.com/kz_k_01.gif') 0 -50px no-repeat;padding: 2px 0 2px 18px;white-space: nowrap;"><a href="http://hb.afl.rakuten.co.jp/hgc/08a52cd8.15532e51.10f6af34.59ee0e2e/?pc=http%3A%2F%2Fsearch.rakuten.co.jp%2Fsearch%2Fmall%2FTNC5200%2F-%2Ff.1-p.1-s.1-sf.0-st.A-v.2%3Fx%3D0%26scid%3Daf_ich_link_urltxt%26m%3Dhttp%3A%2F%2Fm.rakuten.co.jp%2F" rel="nofollow" target="_blank" title="楽天市場" >楽天市場</a></div><div class="shoplinkyahooAuc" style="display:inline;margin-right:5px;background: url('http://img.yomereba.com/kz_k_01.gif') 0 -150px no-repeat;padding: 2px 0 2px 18px;white-space: nowrap;"><a href="http://ck.jp.ap.valuecommerce.com/servlet/referral?sid=2510643&pid=881826566&vc_url=http%3A%2F%2Fauctions.search.yahoo.co.jp%2Fsearch%3Fvo%3D%26ve%3D%26auccat%3D0%26aucminprice%3D%26aucmaxprice%3D%26aucmin_bidorbuy_price%3D%26aucmax_bidorbuy_price%3D%26loc_cd%3D0%26abatch%3D0%26istatus%3D0%26filtered%3D1%26ei%3DUTF-8%26tab_ex%3Dcommerce%26va%3DTNC5200" target="_blank" title="ヤフオク!" >ヤフオク!<img src="http://ad.jp.ap.valuecommerce.com/servlet/gifbanner?sid=2510643&pid=881826566" height="1" width="1" border="0"></a></div></div></div><div class="booklink-footer" style="clear: left"></div></div>

こう見えます:

Amazon URL短縮

javascript:(function()%7Bvar%20asin%3Ddocument.getElementById(%27ASIN%27).value%3Bprompt(%27Copy%20Amazon%20Short%20URL%27,%27http://amazon.co.jp/dp/%27%2Basin%2B%27/%27)%3B%7D)()%3B

AmazonのURLを短くするブックマークレット を参考に作成しました。

Amazonで「7つの習慣」のページを開いて使用した場合。

検索して開いた場合のURL:

http://www.amazon.co.jp/7%E3%81%A4%E3%81%AE%E7%BF%92%E6%85%A3%E2%80%95%E6%88%90%E5%8A%9F%E3%81%AB%E3%81%AF%E5%8E%9F%E5%89%87%E3%81%8C%E3%81%82%E3%81%A3%E3%81%9F-%E3%82%B9%E3%83%86%E3%82%A3%E3%83%BC%E3%83%96%E3%83%B3%E3%83%BBR-%E3%82%B3%E3%83%B4%E3%82%A3%E3%83%BC/dp/4906638015/ref=sr_1_1?ie=UTF8&qid=1365323828&sr=8-1&keywords=7%E3%81%A4%E3%81%AE%E7%BF%92%E6%85%A3

ブックマークレットを使用して得られるURL:

http://amazon.co.jp/dp/4906638015/

書籍内容の引用

javascript:(function(){b=document.getElementsByTagName('b');for(i=0;i<b.length;i++)if(/ISBN-13/i.test(b[i].innerHTML))r=b[i].parentNode.innerHTML.match(/(\d{3})-(\d+)/);prompt('Copy this','<blockquote cite="urn:ISBN:'+r[1]+'-'+r[2]+'"><p>Input citations here</p><p><cite>引用元:<a href="http://www.amazon.co.jp/exec/obidos/asin/'+document.getElementById("ASIN").value+'/noref02-22/" target="_blank">'+document.getElementById('btAsinTitle').innerText+'</a></cite></p></blockquote>');})();

自作です。

Amazonで「7つの習慣」のページを開いて使用した場合。

生成されるコード:

<blockquote cite="urn:ISBN:978-4906638017"><p>Input citations here</p><p><cite>引用元:<a href="http://www.amazon.co.jp/exec/obidos/asin/4906638015/noref02-22/" target="_blank">7つの習慣―成功には原則があった! [単行本]</a></cite></p></blockquote>

こう見えます:

Input citations here

引用元:7つの習慣―成功には原則があった! [単行本]

アプリリンク

AppHtmlメーカー を使用して作成しました。

javascript:(function(){var d=document,e=d.createElement('script'),url='http://dl.dropbox.com/u/2271551/javascript/apphtml.js';if(!url.match(/\?/))url+='?t='+(new%20Date()).getTime();url+='&out='+'preview'+'&cnt='+'8'+'&knd='+'software'+'&aff='+'Rfg6nizvNEs'+'&scs='+'288'+'&ipd='+'1.5'+'&fmt='+'%3Ca%20href%3D%22%24%7Blinkshareurl%7D%22%20target%3D%22_blank%22%20rel%3D%22nofollow%22%3E%3Cimg%20width%3D%2275%22%20class%3D%22alignleft%22%20align%3D%22left%22%20src%3D%22%24%7Bicon75url%7D%22%20style%3D%22border-radius%3A%2011px%2011px%2011px%2011px%3B-moz-border-radius%3A%2011px%2011px%2011px%2011px%3B-webkit-border-radius%3A%2011px%2011px%2011px%2011px%3Bbox-shadow%3A%201px%204px%206px%201px%20%23999999%3B-moz-box-shadow%3A%201px%204px%206px%201px%20%23999999%3B-webkit-box-shadow%3A%201px%204px%206px%201px%20%23999999%3Bmargin%3A%20-5px%2015px%201px%205px%3B%22%3E%3C/a%3E%3Cstrong%3E%20%24%7Bappname%7D%20%20%3C/strong%3E%3Ca%20href%3D%22%24%7Blinkshareurl%7D%22%20target%3D%22_blank%22%20rel%3D%22nofollow%22%3E%3Cimg%20alt%3D%22App%22%20src%3D%22http%3A//ax.phobos.apple.com.edgesuite.net/ja_jp/images/web/linkmaker/badge_appstore-sm.gif%22%20style%3D%22vertical-align%3A%20text-bottom%3B%22%20/%3E%3C/a%3E%3Cbr%3E%20%u30AB%u30C6%u30B4%u30EA%3A%20%24%7Bcategory%7D%3Cbr%3E%20%u4FA1%u683C%3A%20%24%7Bprice%7D%3Cbr%20style%3D%22clear%3A%20both%3B%22%3E';e.charset='utf-8';e.src=url;e.id='bmlt';d.body.appendChild(e);})();

アプリリンクがリンク切れになる場合があるので、AppStoreHelper を併用しています。
一方、AppStoreHelper はアイコンが丸角アイコンにならない場合があります。
試してみて、問題がない方を使用しています。

ブックマークレットから「iMovie」を指定した場合。

生成されるコード:

<a href="https://itunes.apple.com/jp/app/id377298193?mt=8&uo=4&at=10l69L" target="_blank" rel="nofollow"><img width="75" class="alignleft" align="left" src="http://a1662.phobos.apple.com/us/r1000/100/Purple/v4/19/f5/0e/19f50e15-7852-8fc8-c301-a55cdc0ca3dd/mzm.mmjmeaaw.75x75-65.png" style="border-radius: 11px 11px 11px 11px;-moz-border-radius: 11px 11px 11px 11px;-webkit-border-radius: 11px 11px 11px 11px;box-shadow: 1px 4px 6px 1px #999999;-moz-box-shadow: 1px 4px 6px 1px #999999;-webkit-box-shadow: 1px 4px 6px 1px #999999;margin: -5px 15px 1px 5px;"></a><strong> iMovie  </strong><a href="https://itunes.apple.com/jp/app/id377298193?mt=8&uo=4&at=10l69L" target="_blank" rel="nofollow"><img alt="App" src="http://ax.phobos.apple.com.edgesuite.net/ja_jp/images/web/linkmaker/badge_appstore-sm.gif" style="vertical-align: text-bottom;" /></a><br> カテゴリ: 写真/ビデオ, ライフスタイル<br> 価格: ¥450<br style="clear: both;">

こう見えます:

** iMovie **App
カテゴリ: 写真/ビデオ, ライフスタイル
価格: ¥450

反応して頂けると励みになります。ありがとうございます

No Comments

Be the first to start the conversation.

コメントを残す

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Text formatting is available via select HTML.

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> 

*