はじめに
以下の環境で、以下に書いたような処理をするブックマークレットを作った際のメモです。
環境について（ざっくりなもの）
- OS： Windows
- ブラウザ
- Chrome
- Edge
- Edge での「Internet Explorerモード」
諸事情により、IEモードも含むという条件に...
やりたいこと
「Webサイトのタイトル・URLを、以下のような、記号・改行・全角スペースを含む形で、クリップボードにコピーする」という処理
●[ページタイトル]
[URL]
最終結果
最終的に、ブックマークレットの内容は以下にしました。
（※追記： コメントをいただき少し修正しました）
javascript:(function(t){t="\u25CF"+document.title+"\n\u3000"+location.href+"\n";navigator.clipboard?navigator.clipboard.writeText(t):window.clipboardData.setData("Text",t)})()
整形すると、こんな感じです。
javascript: (function (t) {
t = "\u25CF" + document.title + "\n\u3000" + location.href + "\n";
navigator.clipboard
? navigator.clipboard.writeText(t)
: window.clipboardData.setData("Text", t);
})();
補足
おおまかな流れ
作った内容の補足を、少し書いておきます。
まず、IEモードにも対応するという条件が前提に含まれているので、基本的に IEモードで動く処理で書いています（※ navigator.clipboard は除いて）。
やっていることは単純で、以下の流れの通りです。
- クリップボードに貼り付けたい文字列を変数に格納
- navigator.clipboard を用いた三項演算子で、クリップボードAPI の利用可否を判断
- クリップボードAPI が使える場合は、 navigator.clipboard.writeText() で、クリップボードへの文字列コピーを実行
- クリップボードAPI が使えない場合（IEモードの場合）は、
window.clipboardData.setData()で、クリップボードへの文字列コピーを実行
特定の文字列の扱い
また、上記の流れの最初の「クリップボードに貼り付けたい文字列を変数に格納」という部分では、文字列を "\u25CF" + document.title + "\n\u3000" + location.href + "\n" という内容にしていました。
その部分では「●」という記号を「\u25CF」で、「（全角スペース）」を「\u3000」にしています。
利用時の注意
以下の記事のよると、Webサイトの Document 以外にフォーカスがあたっている状態で使うとエラーになるようです。
●【Javascript】Markdown形式のウェブページのリンクを、ブックマークレットで取得する - Qiita
https://qiita.com/eyuta/items/859d1e8952eef4d8f061
その他： IEモード対応がない場合
上記について、IEモード対応という条件がありましたが、それがなければこんな感じで書けるかと思います。
IEモードを考慮しなくて良いなら、文字列を指定する部分でテンプレートリテラルも使えたり。
javascript: (function () {navigator.clipboard.writeText(`\u25CF${document.title}\n\u3000${location.href}\n`)})()
ブックマークレット関連の記事の話
Qiita でブックマークレットの記事を書いたのは、以下の記事を書いて以来でした。
●ブックマークレット・コンソールを使って Webページ内の複数の指定要素のテキストをファイルに保存 - Qiita
https://qiita.com/youtoy/items/7aaef1c44e0c77e0ced8
上記の記事を書いてた時に、以下の記事などを見てたのですが、またあらためて見直してみて活用できそうなことを考えてみたくなったりもしました。
余談： 文字コードやスペースの話
本文の内容を書くのにあれこれ調べていて、気になった記事があったので、メモとして残す意味で載せてみます。
●Word で文字コードを調べる / 活用する｜クリエアナブキのちょこテク
https://www.crie.co.jp/chokotech/detail/445/
●スペースの使い分け | 技術情報 | InDesign（インデザイン）専門の質の高いDTP制作会社―株式会社インフォルム
https://www.informe.co.jp/useful/character/character27/