ブログ拾い読み用ブックマークレットを作ってみました

2012.12.11
JAVASCRIPT

閲覧してるページの選択テキストと一緒にタイトルとそのページのリンクを拾い上げるブックマークレットを作ってみました。ネタフルさんのネタリストみたいにあっちこっちの拾い読み記事書く時にあると便利かと思いまして。

ブックマークレットソース

作ったブックマークレットのソースは以下の通り。


javascript:
IE='v'=='v';
var selTxt;
if(IE){
selTxt = document.selection.createRange().text;
}else{
selTxt = window.getSelection().toString();
}
selTxt = selTxt.replace(/[nr]+/g,'nr');
var lastTxt = selTxt.slice(selTxt.length-1);
if(lastTxt == 'nr'){
selTxt = selTxt.slice(0,selTxt.length-2);
}
selTxt = '<a href="' +document.URL+ '">' + document.title+ '</a><blockquote><p>' + selTxt.replace('nr','</p><p>') + '</p></blockquote>';
prompt('',selTxt);

こちらのコードをブラウザのブックマークに適当に名前をつけて登録してください。

任意のページでテキストを反転選択してこのブックマークレットを実行すると、<a>タグのソースにページurl、テキストにページタイトル、それに続けて<blockquote>に内包された<p>タグが生成されダイアログに表示されます。元の選択テキストに改行を含む場合は改行ごとに複数の<p>タグが自動生成されます。

使い方サンプル

以下のページで実際にこのブックマークレットを実行してみます。

ブログを書くためにIMEに登録しているHTMLタグと基本的な環境あれこれ | 56docブログ

このようにblockquote引用に取り込みたいテキストを選択した状態で上記ブックマークレットを実行します。すると

このようにダイアログが表示されてテキストエリアに諸々のHTML整形されたものが表示されますのでこれをコピペすれば引用記事書くのに楽になりますね…ということです。

取得したHTMLはこんな感じになります（読みやすいようにタグごとに改行を加えてますが実際は1行ソースとして吐かれます）。


<a href="https://blog.56doc.net/Entry/476/">ブログを書くためにIMEに登録しているHTMLタグと基本的な環境あれこれ | 56docブログ</a>
<blockquote>
<p>知ってる人は知ってると思いますが私の場合極めてシンプルなテキストエディタでべた書きですタグも含めて。</p>
<p>効率よく記事を捌こうと思ったら専用ツール用意してやるのがベストなんでしょうが、</p>
</blockquote>

JavaScript解説

以下はブックマークレットの中身的な話。不要な方は読み飛ばしてください。

最初の


IE='v'=='v';

はブラウザ判別です。IEの場合とそうでない場合の選択範囲取得処理が異なるのでまずここで判別。でIE以外のブラウザなら


selTxt = window.getSelection().toString();

このように.getSelectionで単純に選択部分を取得できる（後ろの.toStringは選択部分を文字列化してるだけ）のですが、IEだとこのままではうまくいかないです。どうやらDOM における選択範囲の仕様がW3CとMicroSoftで異なるかららしいのですが（ちょっと古いですがこの辺参照）。しょうがないのでIE用に


selTxt = document.selection.createRange().text;

if文の条件に先ほどのブラウザ判定を使って切り分けてます。でいずれの場合も取得したものをselTxtに格納。そのあとは一本道なんですが


selTxt = selTxt.replace(/[nr]+/g,'nr');

ここで選択範囲に連続した改行がある場合、それをひとつの改行にreplaceで置き換え。「/[nr]+/g」ってのは正規表現で「nr（改行コード）が1個以上ある場合にマッチ」ということです。

次に


var lastTxt = selTxt.slice(selTxt.length-1);
if(lastTxt == 'nr'){
selTxt = selTxt.slice(0,selTxt.length-2);
}

ここでは.sliceでselTxtの最後の文字を取得し、もしそれがnr（改行コード）ならばselTxtの最後の1文字を取り除いたものをselTxt自身に置き換えてます。その上で


selTxt = '<a href="' +document.URL+ '">' + document.title+ '</a><blockquote><p>' + selTxt.replace('nr','</p><p>') + '</p></blockquote>';

このようにHTMLに整形して最後にpromptで吐き出している、と言う流れです。

吐き出されたHTMLの並びは私の好みでタイトルリンク～引用（blockquote）としてますが、この辺は単に取得した情報とタグをテキスト結合してるだけなので各自好みでいじっていただけると良いと思います。一応補足しておくと

  • document.URL：ドキュメントオブジェクト（現在閲覧してるページ）のURLを示すプロパティの値
  • document.title：ドキュメントオブジェクトのタイトルを示すプロパティの値
  • .replace(引数1,引数2)：テキストオブジェクトの中の引数1というテキストを引数2というテキストに置き換えなさいよ、というメソッド
  • .slice(引数1,引数2)：ドキュメントオブジェクトの引数1から引数2までの間を取り出しなさいよ、というメソッド

です。.sliceの引数は文字インデックスを指定するので1文字目は0、10文字目は9とかそんな感じになります。文字数目を直接指定しちゃうと1文字ずれるので注意です。

まとめ

一応これでWebサイトからの引用文をリンク付きでそれなりにお手軽に生成できるようになった…んですが、promptで出力してコピペって一手間余計ですよね。本当はブックマークレット起動で直接クリップボードへコピーできると良いんですけど今となってはどのブラウザもJavaScriptで直接クリップボード操作はできないようになってますのでそこが残念なとこですね。

なんでJavaScriptからクリップボードにアクセスできないかと言うと、例えば何処かのWebサービスにログインするのにパスワードとかIDとかコピペでやる人いるじゃないですか。で、そういったもののデータがクリップボードに格納されててJSでそれにアクセスで来ちゃうと悪意あるサイトでその辺の情報を簡単に抜けちゃうから、ってことらしいです。まぁもっともですね。

IEだけならclipboarddata.setdataでイケるんですがクロスブラウザ対応にはなりません…まぁ無理なことだとはわかってますがどなたか上手い解法ご存知でしたら教えてくださいまし。

んじゃまた。

コメント

',b.captions&&s){var u=J("figcaption");u.id="baguetteBox-figcaption-"+t,u.innerHTML=s,l.appendChild(u)}e.appendChild(l);var c=J("img");c.onload=function(){var e=document.querySelector("#baguette-img-"+t+" .baguetteBox-spinner");l.removeChild(e),!b.async&&n&&n()},c.setAttribute("src",r),c.alt=a&&a.alt||"",b.titleTag&&s&&(c.title=s),l.appendChild(c),b.async&&n&&n()}}function X(){return M(o+1)}function D(){return M(o-1)}function M(e,t){return!n&&0<=e&&e=k.length?(b.animation&&O("right"),!1):(q(o=e,function(){z(o),V(o)}),R(),b.onChange&&b.onChange(o,k.length),!0)}function O(e){l.className="bounce-from-"+e,setTimeout(function(){l.className=""},400)}function R(){var e=100*-o+"%";"fadeIn"===b.animation?(l.style.opacity=0,setTimeout(function(){m.transforms?l.style.transform=l.style.webkitTransform="translate3d("+e+",0,0)":l.style.left=e,l.style.opacity=1},400)):m.transforms?l.style.transform=l.style.webkitTransform="translate3d("+e+",0,0)":l.style.left=e}function z(e){e-o>=b.preload||q(e+1,function(){z(e+1)})}function V(e){o-e>=b.preload||q(e-1,function(){V(e-1)})}function U(e,t,n,o){e.addEventListener?e.addEventListener(t,n,o):e.attachEvent("on"+t,function(e){(e=e||window.event).target=e.target||e.srcElement,n(e)})}function W(e,t,n,o){e.removeEventListener?e.removeEventListener(t,n,o):e.detachEvent("on"+t,n)}function G(e){return document.getElementById(e)}function J(e){return document.createElement(e)}return[].forEach||(Array.prototype.forEach=function(e,t){for(var n=0;n","http://www.w3.org/2000/svg"===(e.firstChild&&e.firstChild.namespaceURI)}(),m.passiveEvents=function i(){var e=!1;try{var t=Object.defineProperty({},"passive",{get:function(){e=!0}});window.addEventListener("test",null,t)}catch(n){}return e}(),function a(){if(r=G("baguetteBox-overlay"))return l=G("baguetteBox-slider"),u=G("previous-button"),c=G("next-button"),void(d=G("close-button"));(r=J("div")).setAttribute("role","dialog"),r.id="baguetteBox-overlay",document.getElementsByTagName("body")[0].appendChild(r),(l=J("div")).id="baguetteBox-slider",r.appendChild(l),(u=J("button")).setAttribute("type","button"),u.id="previous-button",u.setAttribute("aria-label","Previous"),u.innerHTML=m.svg?f:"<",r.appendChild(u),(c=J("button")).setAttribute("type","button"),c.id="next-button",c.setAttribute("aria-label","Next"),c.innerHTML=m.svg?g:">",r.appendChild(c),(d=J("button")).setAttribute("type","button"),d.id="close-button",d.setAttribute("aria-label","Close"),d.innerHTML=m.svg?p:"×",r.appendChild(d),u.className=c.className=d.className="baguetteBox-button",function n(){var e=m.passiveEvents?{passive:!1}:null,t=m.passiveEvents?{passive:!0}:null;U(r,"click",x),U(u,"click",E),U(c,"click",C),U(d,"click",B),U(l,"contextmenu",A),U(r,"touchstart",T,t),U(r,"touchmove",N,e),U(r,"touchend",L),U(document,"focus",P,!0)}()}(),S(e),function s(e,a){var t=document.querySelectorAll(e),n={galleries:[],nodeList:t};return w[e]=n,[].forEach.call(t,function(e){a&&a.filter&&(y=a.filter);var t=[];if(t="A"===e.tagName?[e]:e.getElementsByTagName("a"),0!==(t=[].filter.call(t,function(e){if(-1===e.className.indexOf(a&&a.ignoreClass))return y.test(e.href)})).length){var i=[];[].forEach.call(t,function(e,t){var n=function(e){e.preventDefault?e.preventDefault():e.returnValue=!1,H(i,a),I(t)},o={eventHandler:n,imageElement:e};U(e,"click",n),i.push(o)}),n.galleries.push(i)}}),n.galleries}(e,t)},show:M,showNext:X,showPrevious:D,hide:j,destroy:function e(){!function n(){var e=m.passiveEvents?{passive:!1}:null,t=m.passiveEvents?{passive:!0}:null;W(r,"click",x),W(u,"click",E),W(c,"click",C),W(d,"click",B),W(l,"contextmenu",A),W(r,"touchstart",T,t),W(r,"touchmove",N,e),W(r,"touchend",L),W(document,"focus",P,!0)}(),function t(){for(var e in w)w.hasOwnProperty(e)&&S(e)}(),W(document,"keydown",F),document.getElementsByTagName("body")[0].removeChild(document.getElementById("baguetteBox-overlay")),w={},h=[],o=0}}})
タイトルとURLをコピーしました