開いているページのタイトルとURLをクリップボードにコピーする

プログラミング

タイトルを取得するのは案外難しい

ブログでも仕事でも情報を検索することはよくあります。

特にプログラミング系は公開されている情報が多いため、いま自分が求めている情報があるサイトは取っておいて手順を作成して参考サイトとして載せる、ということは多くあります。

載せる情報は参考にしたサイトのタイトルとURLですが、タイトルを取るのが案外難しいと思いませんか?

前述のように情報自体は多くありますが、自分が求めているものかは読み進めないとわかりません。

大抵の場合、タイトルはページの上部にありますが、これだ!と思ったときは下の方にいます。

そのため、タイトルをコピーするためにページの一番上に戻ります。

タイトルをコピーしてメモに貼り付け、元のページに戻って今度はURLをコピペすれば参考にしたページの情報の完成です。

もっと簡単に情報を取得したい

この動作を簡単にしたいと思っていました。

タイトルを取るのに一番良いのは、そのページのソース(HTML)からtitleタグの内容を取れば良い!と思い開発者コンソール開いてタグ検索してコピーしました。

この方法はタイトルを取る、ということに関しては非常に良いアイディアでした。

特にプロダクトの公式ドキュメントだと、タイトルの後ろに「- xxx」のように製品やサイト名が付けているので、今まで手で付け足していた僕としては一気に情報取得できるため快感でした。

ただし、このやり方は時間がかかります。

  1. 開発者コンソールを開く
  2. titleタグを検索する
  3. タグ内容をダブルクリックして選択状態にする
  4. コピーする

この時間を短縮できないかと思って辿り着いたのがブックマークレットです。

HTMLなんだからJavascript使えば抜いてこれるし、何ならクリップボードにコピーまでできるんじゃ?と閃いて(大げさ…)、早速検索してみたところ、同じこと考えた人は結構いるようで複数のページがヒットしました。

javascript:(function(){e = document.createElement('textarea');e.textContent = document.title + '\r' + document.URL;document.body.appendChild(e);e.select();document.execCommand('copy');e.remove();})();

Javascriptに整形すると以下のようになります。

e = document.createElement('textarea'); 
e.textContent = document.title + '\r' + document.URL; 
document.body.appendChild(e); 
e.select(); 
document.execCommand('copy'); 
e.remove();

参考

開いているWebページのタイトルとURLをクリップボードにコピーするブックマークレット(+ダイアログ版) - 晴歩雨描
https://2ndart.hatenablog.com/entry/2019/07/19/121348