シェアしたいWebページのタイトルとURLを抽出するブックマークレット

ブログだけでなく、TwitterやSlackなどで、仲間とシェアしたいWebページのタイトルとURLを簡単に抽出したいときありませんか。URLだけだとOGPで自動でそれっぽくは出るのだけど、タイトルもちゃんとテキストでほしいんだよなぁと。そんな抽出ブックマークレットを作りました。

JavaScriptでタイトルとURLを抽出する

それぞれ用途によって2種類使い分けています。上は、ツイートなどで共有するとき、下はブログなどで記事でシェアするときなど。

タイトルとURLを二段で表示しコピーしやすくする

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

タイトルを含むAタグリングを作る

javascript:(function(){var ele=document.createElement("textarea");ele.style.width="100%";ele.value='<strong>＞＞'+'<a rel="nofollow" target="_blank" href="'+location.href+'">'+document.title+'</a></strong>'+'\n';document.body.insertBefore(ele,document.body.firstChild);ele.focus();ele.select();ele.ondblclick=function(){ele.parentNode.removeChild(ele);}})()

コードが汚くて申し訳ないのですが、上記のJavaScriptを適当なブックマークのURLに差し替えてもらえればOKです。

ブックマークレットの仕組み

• JavaScriptでURLとタイトルを取得
• タイトルなどの整形
• 簡単にコピーできるようタイトルとURLを改行して出力

とくにタイトルなどの文字列が必要なときに、便利に使えるはずです。セキュリティ上、OGPを自動で読み込んで表示できないケースに役立つかと思います。

タイトルとURLを抽出するブックマークレットの使い方

タイトルとURLを抽出したいサイトに行きましたら、ブックマークレットを起動するだけです。ブックマークバーに表示させているときは、一発クリックだけです。

するとタイトルとURLが選択された状態で、ぴょこん！と表示されます。あとは、[CTRL]+[C]など、コピーすればOKです。TwitterでもSLACKでもDISCORDでもWORDでも、好きなところに貼り付けれるだけです。

シンプルなだけに、わたしは一番頻度が高い、ずっと使い続けているブックマークレットの一つです。こうしたオープンな技術は本当に楽しいですね。

・　・　・　・　・

＞＞安っ！アマゾンで半額以下になっている食品タイムセール
セール特設ページを見る