開いているページのタイトルとURLを取得するブックマークレットを解説します。
ページタイトルとURLを取得するブックマークレット
以下は、現在表示しているWebページの「タイトル」と「URL」をMarkdown形式で簡単に取得できるブックマークレットです。
javascript:(()=>{navigator.clipboard.writeText(document.title+'\n'+document.URL+'\n\n');})();
ブログや記事の執筆、チャット内でWebページを引用する際などに便利です。
【使い方】
任意のWebページを開き、先ほど作成したブックマークレットをクリックします。ページのタイトルとURLがMarkdown形式でクリップボードにコピーされます。ブックマークレットの登録方法がわからない人は、以下ページを参照ください。
コードの解説
以下のコードは、先ほどの1行のブックマークレットのコードを見やすいように複数行表示にしたものです。
javascript:(() => {
// ページタイトルとURLを取得
let title = document.title;
let url = document.URL;
// タイトルとURLを改行で繋ぐ
let text = title + '\n' + url;
// クリップボードにコピー
navigator.clipboard.writeText(text);
})();
javascript:はブラウザに対して「この後に続く文字列はリンク先ではなく、JavaScriptのプログラムとして実行してね」と指示する宣言です。ブックマークレットには必須の記述です。
(() => { ... })();は、即時実行関数と呼ばれる書き方です。プログラムを定義すると同時に実行します。ページ内で元々動いている他のプログラムと干渉してエラーが起きるのを防ぐ、カプセル化（安全対策）の役割を果たしています。
document.title / document.URLは、現在開いているウェブページの情報を取得する命令です。
document.titleはページのタイトル（タブに表示されている文字）、document.URLはページのアドレス（URL）です。
+ '\n' +は、文字の足し算（結合）です。取得したタイトルとURLの間に改行コードである \n を挟むことで、タイトルのすぐ下の行にURLが配置されるように合体させています。
navigator.clipboard.writeText(...)は、カッコ内で組み立てたテキストを、パソコンやスマホのクリップボードにコピーする命令です。これにより、ユーザーが手動で「コピー」を選択したのと同じ状態になります。
関連ページ
コメント