ページのタイトルをクリップボードにコピーするブックマークレットの作成

(結論だけ見たい方は6節を見てください)

1. はじめに

ページのタイトル(htmlのtitleタグに指定されているもの)をコピーする機会が結構ある。
しかし毎回ソースコードから持ってくるのは面倒である。
そのため、タイトルをコピーするブックマークレットを作成することにした。

2. 当方の環境

Windows 10 Home
バージョン: 21H1
Google Chrome(64bit)
バージョン: 95.0.4638.69(official build)

firefox(93.0, 64bit)でも動作確認済みである。

2022/06/07追記: Ubuntu22.04(LTS)上のVivaldi5.3.2679.38(stable channel, 64bit)では使えない．理由は暇なときに調査するつもり．

3. クリップボードへのコピー処理について

クリップボードへのコピーを行う際、従来はdocument.execCommand()を利用していた[1]らしい。
現在は廃止され、新たに"Clipboard API"なるものが登場した[1]ため、それを使うことにする。

4. 機能の定義

盛り込む機能は以下の通りである。

titleタグで指定されたタイトルを取得する
それをクリップボードにコピーする
コピーに成功したかどうか表示する

1はdocument.titleで取得できる。
2はClipboard APIを用いて実装する。navigator.clipboard.writeText()にコピーしたい文字列を与えればコピーできる[1]。
3は、2で述べたwriteText()を実行して返ってくるPromiseオブジェクトを操作して実装できるようだ[1] (非同期処理はやったことがないので詳しくないが)。

5. コード作成

後でブックマークレットに加工するため、変数定義などはせず、変形すれば1行に収まるように書いた。

navigator.clipboard.writeText(document.title).then(
    () => { alert("copied!"); },
    () => { alert("failed");  }
);

6. ブックマークレットに加工

上のコードを変形して、ひな形に入れるだけである。

javascript:(function(){navigator.clipboard.writeText(document.title).then(()=>{alert("copied!");},()=>{alert("failed");});})();

7. 注意点

このブックマークレットを実行する際、実行するブラウザのウィンドウにちゃんとフォーカスを当てていないと、正常にコピーできない(failedと表示される)。

8. 参考文献

[1] https://note.affi-sapo-sv.com/js-clipbord-copy.php

日記

日本語の勉強のためのブログ