🔖

タイトルとURLをMarkdown形式でコピーする(拡張機能不要)

2024/03/25に公開

ZennやQiitaを書いていると、Markdown形式([タイトル](URL))でリンクを記載する機会も多いと思います。そんなときに便利な方法を紹介します。ブラウザ拡張機能をインストールする必要はありません。

PC版Edgeで動作確認しています。PC版Chromeでも問題ないはずです。

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

便利な方法とは、ブックマークレットを使用する方法です。

ブラウザで、以下のように設定したお気に入り(ブックマーク)を作成してください。

  • 名前:任意[1]
  • URL
    javascript:(function(){var d = document; var e = d.createElement('textarea'); e.textContent = `[${d.title}](${d.URL})`; d.body.appendChild(e); e.select(); d.execCommand('copy'); d.body.removeChild(e);})();
    

タイトルとURLをコピーする

ウェブページを開き、作成したお気に入りをクリックします。これで、クリップボードにMarkdown形式のリンクがコピーされます。

備考:JavaScriptの内容

以下に読みやすく改行したものを掲載します。解説は、ChatGPT先生に聞いてみるとよいです[2]

javascript:(function(){
    var d = document;
    var e = d.createElement('textarea');
    e.textContent = `[${d.title}](${d.URL})`;
    d.body.appendChild(e);
    e.select();
    d.execCommand('copy');
    d.body.removeChild(e);
})();

余談:execCommand()を避ける

document.execCommand() はまだ動きますが、非推奨になっています。これを避けるには navigator.clipboard.writeText() を使うとよいようです。しかし、これはHTTP接続では動作しないため、動作しないときは手動でコピーできるように prompt() に表示します[3]。さらに、writeText()document にフォーカスされていないと動作しないため、回避策として少し待つようにします[4]

javascript:(function(){setTimeout(function(){var s = `[${document.title}](${document.URL})`; if (navigator.clipboard) {navigator.clipboard.writeText(s);} else {prompt('', s);}}, 100)})();
javascript:(function(){
    setTimeout(
        function(){
            var s = `[${document.title}](${document.URL})`;
            if (navigator.clipboard) {
                navigator.clipboard.writeText(s);
            } else {
                prompt('', s);
            }
        },
        100
    )
})();
脚注
  1. 私は「cp」という短い名前にしてお気に入りバーに置いています。 ↩︎

  2. 私がJavaScriptに詳しくないので…… ↩︎

  3. alert() でもよかったのですが、私の環境ではメッセージが長くなると?コピーできなかったため prompt() で代替。 ↩︎

  4. 文字列をコピーするブックマークレットで使うクリップボードのAPI改めて見てた - hogashi.* ↩︎

Discussion