はじめに
この記事では、特定のウェブページからリンクとタイトルを抜き出し、それを整形してクリップボードにコピーするブックマークレットをご紹介します。このブックマークレットを使用することで、ウェブページ内のリンクとそれに対応するタイトルを抜き出し、整形した結果をクリップボードにコピーすることができます。これにより、情報収集の手間を大幅に削減できます。
出力例
- WEBディレクターの業務効率化ブログ
https://lainy7.com/ - HOME
https://lainy7.com/ - ブックマークレット
https://lainy7.com/category/bookmarklet/ - ブックマークレット
https://lainy7.com/category/bookmarklet/
コードの全体像
// ページ内のリンクを取得
var links = document.querySelectorAll('a');
// 初期化
var output = '';
var counter = 0;
// カスタマイズ可能なフォーマット
var titleFormat = '{title}';
var linkFormat = '{index}. {title}\n {url}\n';
// 各リンクに対して処理を実行
links.forEach(function(link) {
// タイトルとURLを取得
var title = link.innerText.trim();
var url = link.href;
// タイトルとURLが存在する場合に処理を追加
if (title && url) {
// カウンターを増やし、フォーマットに従ってoutputに追加
counter++;
output += linkFormat.replace('{index}', counter).replace('{title}', title).replace('{url}', url);
}
});
// outputが空でない場合の処理
output = output || 'No links found on this page.';
// クリップボードにコピー
var dummy = document.createElement('textarea');
document.body.appendChild(dummy);
dummy.value = output;
dummy.select();
document.execCommand('copy');
document.body.removeChild(dummy);
// 結果を表示
alert('Links copied to clipboard:\n\n' + output);コードの詳細説明
ページ内のリンクを取得
var links = document.querySelectorAll('a');この行では、document.querySelectorAll を使用して、ページ内の全てのリンク（ <a>タグ）を取得しています。
タイトルとURLを取得
var title = link.innerText.trim();
var url = link.href;各リンクから、タイトルとURLを取得しています。タイトルは innerText を使用して取得し、不要なスペースを取り除くために trim() を使います。URLは href プロパティから取得します。
タイトルとURLが存在する場合の処理
if (title && url) {この条件文では、取得したタイトルとURLが存在するかどうかを確認しています。存在する場合にのみ次の処理に進みます。
カウンターを増やし、フォーマットに従ってoutputに追加
counter++;
output += linkFormat.replace('{index}', counter).replace('{title}', title).replace('{url}', url);タイトルとURLが存在する場合には、カウンターを増やし、リンクのフォーマットに基づいて output にタイトルとURLを整形して追加します。
クリップボードにコピー
output = output || 'No links found on this page.';もし output がまだ何も追加されていない場合は、デフォルトのメッセージを代入します。
var dummy = document.createElement('textarea');
document.body.appendChild(dummy);
dummy.value = output;
dummy.select();
document.execCommand('copy');
document.body.removeChild(dummy);最終的に、一時的なテキストエリアを作成し、その中に output を設定してクリップボードにコピーします。
結果を表示
alert('Links copied to clipboard:\n\n' + output);最後に、ユーザに output の内容をアラートで表示します。これにより、リンク情報がクリップボードにコピーされたことを通知します。
コピー用コード
ブックマークレットは1つの文字列として扱われ、改行やスペースが含まれると正しく機能しない可能性があるので、ご登録の際は下記コードをご使用いただけたらと思います。
var links=document.querySelectorAll('a');var output='';var counter=0;var titleFormat='{title}';var linkFormat='{index}. {title}\n {url}\n';links.forEach(function(link){var title=link.innerText.trim();var url=link.href;if(title&&url){counter++;output+=linkFormat.replace('{index}',counter).replace('{title}',title).replace('{url}',url);}});output=output||'No links found on this page.';var dummy=document.createElement('textarea');document.body.appendChild(dummy);dummy.value=output;dummy.select();document.execCommand('copy');document.body.removeChild(dummy);alert('Links copied to clipboard:\n\n'+output);登録手順
- ブラウザのブックマークバーに新しいブックマークを作成します。
- 名前欄に任意の名前を入力します。例: "テキスト挿入ブックマーク".
- URL欄に、上記で記述したブックマークレットのコードを貼り付けます。
- 作成したブックマークを選択すると、指定した処理が実行されます。
まとめ
最後に、本記事ではブックマークレットを使用してページ内のリンク情報を効率的に収集する方法を紹介しました。手軽に利用できるこのプログラムは、情報収集を効率化し、作業時間の削減できます。