toggle
2014-03-13

今見ているページへのテキストリンクを簡単に作成できるブックマークレットを作ってみた

ブログを書いていると他のページ(もしくは他のサイト)へのリンクを作成する場面がよくあります。この時にaタグのHTMLを直書きし、リンク先のURLとページタイトルをコピペして・・という作業をしていると結構時間がかかって面倒。

そんな時、「今見ているページへのリンクを作成する」ブックマークレットやアドオンを利用するとかなり手間が軽減されます。

My Calculator Bookmarklet (I/II)
My Calculator Bookmarklet (I/II) / schoschie

アドオンではなくブックマークレットが必要な場面

ブラウザの拡張機能(アドオン)を使用すると「リンク作成→クリップボードへコピー」までがワンクリックで可能になるので、今まではSleipnirやChrome系のブラウザならCreate Link、Firefox系のブラウザならMake Linkを利用していました。

ただこれらのブラウザは高機能なあまり、低スペックパソコンでは全ての動きが重くなり、少し使いづらい。そこでそういったパソコン上ではAnciaburaなどの軽量ブラウザを使う事になります。

ところが、これらのTridentエンジンのブラウザでは、上記のようなアドオンが使えません。そんな時はブックマークレットを利用して対処します。

そこで今回、普段よく使うリンク作成用のブックマークレットを作ってみました。

ブックマークレットを作成

ブックマークレット作成にはこちらのサイトを利用しています。

My Utility-Make Link ジェネレータ

まずはデフォルトで用意されているブックマークレットをそのまま。

<a href="%url%">%title%</a>

作成されるブックマークレットコード

javascript:(function(){var ele=document.createElement('textarea');ele.style.width='100%';ele.value=''+document.title+'';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;}})()

続いて外部リンク用のコード。

このブログ内では外部リンクにはclass属性を付けて末尾に画像を表示、それに加えて別窓で開くようにしていますので、以下のようなHTMLコードが作成されるようにします。

<a href="%url%" target="_blank" class="outerlink">%title%</a>

作成されるブックマークレットコード

javascript:(function(){var ele=document.createElement('textarea');ele.style.width='100%';ele.value=''+document.title+'';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;}})()

あとは作成されたコードを、使用したいブラウザのお気に入り(ブックマーク)にわかりやすい名前をつけて登録。
利用したいページを開いた状態でブックマークを開くと画面上部に作成されたリンクが表示されます。

リンクのコードをCtrl+Cでコピーすると自動でリンク表示画面が閉じられるので、これもまた便利。

スポンサードリンク

関連記事

このブログの更新情報を配信しています!

follow us in feedly RSS twitter facebook google plus