やりたいこと
Webページを共有するときに、URLだけじゃなくてタイトル付きでコピーしたい。
これじゃなくて
https://qiita.com/
これをコピーしたい
Qiita
https://qiita.com/
結論
以下のコードをブックマークレットとして保存して実行する。
bookmarklet
javascript:(function(){const e = document.createElement('textarea');e.value = `${document.title}\n${location.href}\n`;document.querySelector('body').append(e);e.select();document.execCommand('copy');e.remove();})();
前提
- いちいち Console 開いてコード書いたりSnippet実行はしたくない。クリックでどうにかしたい。
-> ブックマークレットを使う。
-
JavaScript でクリップボードにテキストをコピーする方法は２つ。
-
Clipboard.writeText() - Web APIs | MDN
２つの方法のうち
Clipboard.writeText()では、
（誤解を恐れず言うと）マウスカーソルがWebページ上に乗ってないとエラーになる。
つまりブックマークレットでは使えない。（setTimeoutなどで回避する方法はあるけど使い勝手が悪い。）
参考：navigator.clipboard.writeText() で「Document is not focused.」エラー->
Document.execCommand()を使う。
-
Document.execCommand()では、DOM要素を作ってそのvalueをコピーできる。
ただしinputタグのvalueには改行（\n）を使えない。
-> textareaを使う。
結果
こんなコードを実行すれば解決！
(function() {
const e = document.createElement('textarea');
e.value = `${document.title}\n${location.href}\n`;
document.querySelector('body').append(e);
e.select();
document.execCommand('copy');
e.remove();
})();
ブックマークレットにコピーするためのコードはこちら。
bookmarklet
javascript:(function(){const e = document.createElement('textarea');e.value = `${document.title}\n${location.href}\n`;document.querySelector('body').append(e);e.select();document.execCommand('copy');e.remove();})();