[jQuery] “URLとタイトルをコピー” ボタンを実装する

[jQuery] “URLとタイトルをコピー” ボタンを実装する

web
42+ 41+ 9+ 12+ 10+ Chromeのみ
  • iOSは機種やブラウザに関わらずiOS10が必要みたい(要検証)
  • Androidの標準ブラウザは恐らく全滅、Chromeは新しめのものならだいじょうぶっぽい(要検証)
  • PCはモダンブラウザなら大体だいじょうぶ。

デモは下部のボタンから

シェアボタンってあんまり使わないよね

スマホでシェアボタンをタップすると、ブラウザでSNSが開いて、いちいちログインする必要がありますよね。
でも、SNSはアプリしか使わないので、ログイン情報なんて覚えていない……という人はかなり多いのです。
PCではURLは問題ないのだけど、タイトルがうまくコピー出来ないサイトが多い(どうしても周辺の余計な文字も選択してしまう)。

記事をシェアする場合、シェアボタンでSNSへ飛ぶのではなく“タイトルとURLをコピー”し、使い慣れた方法でSNSに投稿する、というほうが使いやすい人も多いのではないでしょうか。
色々調べてみると、クリップボードを操作するのは仕様上なかなかに面倒だけど、出来ないことはないみたい。
一部のブラウザやスマホは非対応なのだけど、この便利さには抗えません。
非対応だったり、エラーでコピーできなかった場合は「コピーできませんでした」というフィードバックをきちん返すことにしました。

実装

実装はjQueryとclipboard.jsというプラグインを使用します。
clipboard.js

スクリプトの読込

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.13/clipboard.min.js"></script>

まずはjQueryとclipboard.jsを読み込みます。

コピーボタン

<span id="share_btn" data-clipboard-text="<?php echo get_the_title(); ?> | <?php echo get_permalink(); ?>">この記事のURLとタイトルをコピー</span>

data-clipboard-textという属性にコピーしたい文字列を入れます。
この場合はタイトル | http://〜〜〜という形式でコピーされます。
WordPressの場合は上記のコピペで使用できるよ。
その他のCMSを使用している場合は<?php echo get_the_title(); ?>や<?php echo get_permalink(); ?>を相当する関数に書き換えて使用してください。

var clipboard = new Clipboard('#share_btn');
    clipboard.on('success', function(e) {
    //コピー成功時
    $("#share_btn").addClass('is-copied').text('コピーされました');
});
clipboard.on('error', function(e) {
    //エラー時
    $("#share_btn").addClass('is-copied').text('お使いの端末はこの機能に対応していません');
});

#share_btnの部分は任意のIDやclassに書き換えてください。
.on('success')で成功時の処理を書き、.on('error')で失敗時の処理を書きます。
この処理分けをしないと、コピー出来ていなかったときにイラッとしちゃう。
ボタンの文字列を変更する他、より明確なフィードバックがほしい場合はアラートを出してもよいと思います。

実際に使用してみた

試しにこのサイトに実装してみました。
大抵のPCブラウザやiOS10で動作しています。
iOSでは画面がガタガタするという謎の副作用があるけど、コピー機能自体に問題はないみたい。
コピーできた時は「コピーしました！」できなかった時は「お使いの端末はこの機能に対応していないようです」というダイアログを出しています。
iOS9以前や、Android標準ブラウザは対応していないようなのでエラーダイアログが表示されます。
Android版Chromeはだいじょうぶそう。標準ブラウザはたぶん全滅だ。

まとめ

こうした便利な機能は、非対応ブラウザに気を使って実装しないよりは、エラー時のフォローまで含めて実装してしまったほうがメリットが大きいように思う。
ただ、スクリプトからクリップボードを操作するのはセキュリティ上の問題があるようなので、OSやブラウザ側で仕様変更される可能性もあります。
クライアントワークでの実装は、慎重な検討が必要でしょう。

参考

clipboard.js
ブログに「記事タイトルとURLコピーする」だけのボタンを実装したら色々便利でした！

目次へ戻る