ページタイトルとページURLをクリップボードにコピーするJavaScript。

前回・前々回と、ウェブページに設置する「Blueskyでシェア」「Mastodonでシェア」ボタンを作ってみたのだけれど、SNSが乱立する今日この頃、SNSの数だけシェアボタンを設置するのはどうにもこうにも。

なので、ページタイトルとページURLをワンタップ / ワンクリックでクリップボードにコピーするようなスクリプトを設置して、訪問者がページを共有したい、と思ったときには

…という操作をお願いする、ほうが良いのかも。

そんなわけで、「クリップボードにコピー」ボタンを実装。以下のアイコンをクリック / タップすると、このページのタイトルとURLをクリップボードにコピーします。

JavaScriptには、指定されたテキスト文字列をクリップボードにコピーする：

navigator.clipboard.writeText('コピーするテキスト')

…というメソッドが用意されているので、こいつにページタイトルとページURLを渡してやれば良いですね。

このメソッドは、https接続時、または http://localhost/~ でアクセスした場合に動作します。

http接続の場合は、代替メソッドとして execCommand('copy') というのがあるのだけれど、これは既に非推奨扱いとなっています。利用すべきではありません。

ページのタイトルは

document.title

で参照できます。ページの URL は

window.location.href

これは、URL のクエリ部分（~.html?q=.... の ? 以降）も含めた全体を参照します。もしクエリ部分のコピーが不要ならば

window.location.origin + window.location.pathname

…で、クエリ部分を省いた URL を取得できます。

割と簡単に実装できますね。

うちのサイトで稼働しているスクリプト一式は、こちらからダウンロードできます。zipを展開して、cpUtil フォルダ内の index.html を読んでいただいて、設置方法などをご確認ください。

よろしくどうぞ。

freefielder.jp