#使用した経緯
Flashでクリップボードに文言をコピーするボタンを「ZeroClipboard」というライブラリを導入して開発をしていたが、Chrome69へのアップデートによって、これが無効化され、許可を得ないと動作しないようになっていた。
#対応方法
そもそもFlashっていう懐かしさを感じるものは使用しないで、違うやり方を選びました。
そこで使用したのがClipboard.jsというjQueryプラグインです。
#使い方とてもシンプル
- jsファイルをプロジェクト内に招待
2. 使用するのはdist/clipboard.min.jpだけでいいので、これをcpとかでルートディレクトリのjsディレクトリに配置 - HTMLのheadにて読み込み
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<script src="./js/clipboard.min.js"></script>
<script src="./js/jquery-3.3.1.min.js"></script>
</head>
- clipboardを使う
とりあえずボタンを配置する。
<button type="button" class="btn" data-clipboard-text="ピーコ内容">コピー</button>
data-clipboard-textに代入している文字列が、クリップボードにコピーされます。
var clipboard = new ClipboardJS('.btn');
// クリップ成功
clipboard.on('success', (e) => {
alert(e.text + 'をコピーしたよ');
});
インスタンスを生成して引数にはHTMLelement（クラス名とか）などを入れることができます。
具体的にはドキュメントをご覧あれ。
#しかし困った。
業務で実行したいのは、かなり長い文章をコピーするボタンで、アラートにはこちらで定めたタイトル的な短い文言を追加したいのだった。
直感で色々やって見た。
#やって見た1 : インスタンス生成時にコールバック関数にてtitleを定義する
var clipboard = new ClipboardJS('.btn', (e) => {
text: (e) => {
return e.text;
}
title: (e) => {
return 'タイトル';
}
});
// クリップ成功
clipboard.on('success', (e) => {
alert(e.title + 'をコピーしたよ');
});
こんな感じでやると、textやcontainer,triggerなど、もともと用意してある（eの直下にある）やつしか使用できない。
よって、これはundefinedでダメだった。
#やって見た2 : data-clipboard-titleを作っちゃおう
<button type="button" class="btn" data-clipboard-text="ピーコ内容" data-clipboard-title="タイトル">コピー</button>
これで指定すればe.titleとかできんじゃね？とか思ったが、またもやundefined
#ここで気づいた。俺はeと正面から向き合ってない
とりあえずconsole.log(e)としてログ出力。
こん感じで、自分でダメもとで作ったdata-clipboard-titleがちゃんと格納されている。
俺はこのclipboardTitleが欲しい。
#やって見た3 : 最終
var clipboard = new ClipboardJS('.btn');
// クリップ成功
clipboard.on('success', (e) => {
const title = e.trigger.dataset.clipboardTitle;
alert(title + 'をコピーしたよ');
});
これでちゃんと予期した動きをしてくれた。
貼り付けをしてもちゃんとdata-clipboard-textにて指定した文言が貼り付けられた。
結論、俺はeの直下しか踏み入れないようにしていたため、undefinedが表示され続けていた。
#結論
jsもっと勉強します。
当たり前かもしれないけど、data-clipboard-piyo='piyo'なんかで指定しても、
e.trigger.dataset.clipboardPiyoとして値を持つことができます。
たくさん持てますね