こんにちは朱夏です。
今回はテキストをコピーするボタンを実装出来ないか頑張ってみたいと思います。
というのも、Webページからコードをコピペするって結構めんどくさいんですよね。
範囲選択で余分に選択しちゃったり最後のドットが選択されていないの見落としたり。
長いテキストだとスクロールの勢いが凄すぎて画面を行ったり来たり何て事もあったりします。
ワンクリックでコードだけコピー出来たらめちゃくちゃ楽なのになーと、このサイトを作り始めた当初から思っていました。
というわけで、以下の順に話していこうと思います。
- どうやったら実装できるか
- JavaScriptで実装
- WordPressのプラグインで実装
それでは、いきます。
1.どうやったら実装できるか
まず考えたのが、HTML、CSS、JavaScript辺りで実装出来ないかというところ。
あとは折角WordPressで作ってるので、プラグインで実装出来ないかなとも考えました。
実際にググってみると、JavaScriptで実装しているものが多かったです。
WordPressに関してはほぼ情報がなく・・・作ってる人とかいないのかな？
2.JavaScriptで実装
まずはJavaScriptを使っての実相を目指してみます。
サイトをいくつか渡り歩いて、とりあえず作ってみたのがこちら。
コードはこんな感じです。
<div class=”copybutton”>
<input id=”textcopy1″ type=”text” value=”このテキストをコピーします” />
<button class=”copybutton1″ data-clipboard-target=”#textcopy1″>COPY</button>
<script>
var clipboard = new ClipboardJS(‘.copybutton1’);
clipboard.on(‘success’, function(e) {
e.clearSelection();
});
clipboard.on(‘error’, function(e) {
});
</script>
</div>
そこまで難しい感じもなく、コピペは出来るようになりました。
とはいうものの・・・これ、1行しかコピペできないやつでは？
HTMLのコードが1行なんてことはほぼほぼあり得ないので・・・
調べてみたところ、複数行の文字列を選択できる方法を見つける事が出来ました。
こちらのサイト
`←この記号で囲むといいのね。OKOK
Shift+@で入力できる記号で、バッククォートと呼ぶらしいです。
では早速入力場所をくくっていた”(ダブルクォーテーション)をバッククォートへ変更して、入力されたテキストを適当に開業してテスト。
<div class=”copybutton”>
<input id=”textcopy1″ type=”text” value=`この
テキストを
コピーします` />
<button class=”copybutton1″ data-clipboard-target=”#textcopy1″>COPY</button>
<script>
var clipboard = new ClipboardJS(‘.copybutton1’);
clipboard.on(‘success’, function(e) {
e.clearSelection();
});
clipboard.on(‘error’, function(e) {
});
</script>
</div>
なんでや・・・
そもそも入力されてるテキストフィールドが1行にしか対応していないのかな？
というわけで、inputタグをtextareaタグに変更して試してみます。
<div class=”copybutton”>
<textarea name=”textcopy1″ cols=”30″ rows=”5″ readonly>
この
テキストを
コピーします</textarea>
<button class=”copybutton1″ data-clipboard-target=”#textcopy1″>COPY</button>
<script>
var clipboard = new ClipboardJS(‘.copybutton1’);
clipboard.on(‘success’, function(e) {
e.clearSelection();
});
clipboard.on(‘error’, function(e) {
});
</script>
</div>
こんな感じでタグを修正してみました。
結果は・・・
うーむ、うまくいかない・・・
テキストの表示エリアは大きくなったけど、テキストの後ろにタグの様なゴミが付いてるし、消えないし。
それと肝心のコピー自体出来なくなりました。
今回は一旦ここまでにします。
次回はこの続きからやっていきたいと思います。
まともに実装できるようになるのにどのくらいかかるかなぁ・・・
