Zenn
🔖

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

2024/03/25に公開
JavaScript
Markdown
#
bookmarklet
tech

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)})();
脚注

  1. 私は「cp」という短い名前にしてお気に入りバーに置いています。 ↩︎

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

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

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

Discussion