2012年11月22日

URLコピー用ブックマークレット

 ブログやTwitterを使っていると、ブラウザのページをコピー&ペーストの機会が多い。
 そこで、Javascriptを使って、ブラウザから簡単にコピーできるブックマークレットを作ってみた。

 動作としては、「表示されてるページのタイトルとURLを表示してコピー出来る形にする」というもので、本当はJavascriptだけでクリップボードにコピーするのが一番楽だけど、IEに限るとか色々あるので。

表示ページのタイトル・URLコピー用

// ブックマークレット //
javascript:(function(){window.prompt('Title+URL',document.title+' '+document.URL);})();

// コメント付解説 //
javascript:(function(){
window.prompt( // 入力ダイアログ
'Title+URL', // タイトル
document.title+' '+document.URL // コピー文字書式
);
})();
 この「ブックマークレット」に書かれている文字をコピーして、

20121122-01.png

 ブラウザで「新しいブックマーク」などで作成、URLにこれを貼り付ければ使用可能。
 どこかのページが表示されている状態でこのブックマークを実行すると、

20121122-02.png

 このように、文字入力ダイアログに表示され、文字が選択されている。ここで「Ctrl + C」や「Ctrl + Ins」などでコピーすればいい。

 コピーする部分の書式を変えてやれば、自由な形でコピーする事が可能。例えばこんな感じ。
// htmlタグ形式でコピー //
javascript:(function(){window.prompt('html形式','<a href=%22'+document.URL+'%22%20target=%22_blank%22>'+document.title+' </a>');})();


表示ページのURLを加工してコピー

 先に書いた、URLをそのままただコピーする方法では、パラメータなどが残っている事もある。
 例えば、GAME Watchなどインプレス社のニュースサイトをRSSリーダーに登録して、そこから該当記事に飛んだ場合、URLには、
http://game.watch.impress.co.jp/docs/news/20121121_574435.html?ref=rss
 RSSリーダーから来た意味らしい「?ref=rss」など、サイト独自のパラメータとして、URLの後に「?○○○=○○○」の形式で付けられる事が多い。

 普通はこのままでも問題無いけど、外して元の形にしたいという事で、次のブックマークレット。
// ブックマークレット //
javascript:(function(){u=document.URL.replace(/\?.+=[^/]*$/,"");window.prompt('Title+URL',document.title+' '+u);})();

// コメント付解説 //
javascript:(function(){
u=document.URL.replace
(/\?.+=[^/]*$/,""); // 不要文字削除
window.prompt( // 入力ダイアログ
'Title+URL', // タイトル
document.title+' '+u // コピー文字書式
);
})();
 方法としては、置換を利用して該当文字を消しているだけ。
 置換している部分の書式を変えれば他の文字にも対応出来るので、用途によって修正するのがいいと思う。

 また、若干余談だが、メモ書きとして。
 変換の際、正規表現リテラルをreplaceの中に直接入れているが、これをRegExp構文として入れた場合、若干注意が必要。例えば、
javascript:(function(){
re=new RegExp("\\?.+=[^/]*$", "i");
u=document.URL.replace
(re,"");
window.prompt(
'Title+URL',
document.title+' '+u
);
})();
 "?"の文字そのものを示す正規表現は"\?"だが、RegExpで「リテラルの先頭が"?"の場合のみ、"\\?"」と、"\"を2つ付けないと動作しなかった。
 まあこの場合も、RegExpを使わず"re=/\?.+=[^/]*$/i;"という書式にすればいいのだが、注意書きとして。

 という事で、ここに書いたブックマークレットをリンク形式で掲載。

Copy Title+URL
Copy html
Copy DelOpt

 これらを「お気に入り」や「ブックマーク」にドラッグ&ドロップで運ぶか、右クリックメニュー「お気に入りに追加」「このリンクをブックマーク」などに入れておくといい。


(2014/12/2 追記)
 URL加工を、正規表現を使った形式に修正、RegExpを使った注意書きを追加。

タグ:javascript

posted by 司隆 at 10:05 | Comment(0) | Internet
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]