jQuery + JavaScript + CSSでコピーボタンを実装。preの中のcodeをコピペできるように。|デザイナー、コーチ、ディレクターズメモ|井川igawa.

Memo

jQuery + JavaScript + CSSでコピーボタンを実装。preの中のcodeをコピペできるように。

buttonを付けたい。

jQuery + JavaScript + CSSでコピーボタンを実装。preの中のcodeをコピペできるように。

Codeのコピーボタン追加のWordPressプラグイン。

意外としっくりくる感じのものが見つからなかった。

ネット上でよく見る、コードをコピーできるボタンをWordPressのプラグインで実装しようとしたところ、なかなか見つからなかった。

「Copy Anything to Clipboard」ではうまくいかず。当サイトはもともとデザインのポートフォリオ用に作ったオリジナルテーマであり、他の目的のために優先しているコードがあるので、衝突している可能性もある。

「Highlighting Code Block」もうまくいかず。「Code Click to Copy」はすぐに実装できたが、ユーザビリティ的にちょっと躊躇した。シンタックスハイライト用の「highlight.js」や「prism.js」もコンフリクト。あれこれすると大丈夫だとは思うが、コードが長いので今回は見送り。

なので、シンプルなコードを自分でカスタマイズしたが早いと、ちょっとやってみることに。


jQuery + JavaScript + CSSでの実装方法。

jQueryとプレーンなJavaScriptとCSSでOK。

jQueryを使った方法で実装できた。下記のカスタマイズをしたコードでうまくいった。
このコードの右上にあるコピーボタンと同じものが実装される。(動作確認済み。)



$(function() {
  $("pre.copy code").append("<button>copy</button>");
});

$(function(){
  const copybtn = $("pre code button");
  copybtn.click(function(){
    const selection = window.getSelection();
    const code = this.parentNode;
    selection.selectAllChildren(code);
    selection.extend(code, code.childNodes.length-1);
    navigator.clipboard.writeText(selection);
  });
 });

$(function(){
$('pre code button').on('click', function () {
  if ($(this).text() === "copy") {
    $(this).text("copied");
  } else {
    $(this).text("copy");
  }
  });
});

コードの内容はざっくりと、、、

  1. jQueryのappendメソッドを使って、preタグ内のcodeタグ内に、buttonタグを追加する。
  2. 定数copybtnに、追加したbuttonタグを格納する。
  3. buttonタグがクリックされたら、codeタグを探す。
  4. window.getSelectionメソッドを、定数selectionに格納。codeタグのテキストを取得。
  5. 定数codeに、this.parentNodeを格納し、親要素(preタグ)を参照する。
  6. clipboard.writeText()で、定数selection内のテキストを取得。
  7. .textメソッドで、「copy」の文字列を探し、onメソッドとClickイベントで、「copy」と「copied」の文字列を切り替える。
  8. CSSで、コピーボタンの位置とデザインを整える。

という仕組みになる。


JavaScriptの補足。(非推奨メソッドを、別のメソッドで代替する。)

上記のJavaScriptのコードはネット上から拝借したものをカスタマイズしたのだが、MDNによると「document.execCommand」メソッドが非推奨となったとのことなので、今回自分で新たに「navigator.clipboard.writeText」メソッドで代替している。(VSCodeでも警告のような打ち消し線が表示される。)

「execCommand」に打ち消し線が出る↓

VSCodeからの警告。

JavaScriptのコードはこれで完成。あとはCSSでの装飾だ。


CSSは超シンプル。

CSSの方は、ただのボタンなので、特に難しいことはない。


pre {
 position: relative;
 background: rgba(0, 0, 0, 0.05);
 margin: 15px 0;
 border: 1px solid rgba(0, 0, 0, 0.1);
 border-radius: 5px;
 padding: 20px;
}

pre code button {
 display: inline-block;
 position: absolute;
 right: 10px;
 top: 10px;
 background: #777;
 border-radius: 3px;
 padding: 5px 10px;
 color: #fff;
 letter-spacing: 0.1rem;
}

↑CSSファイルなどにコピペするとpreの右上にボタンが表示される。色や配置場所などを変えたい場合は、値の変更でOKです。
(※シンタックスハイライトはしていないので、色分けをしたい場合はエディタへ貼り付けていただければ。)

参考:supilogさま 【highlight.js】第3回 コピーボタンを実装する
参考:yikegaya’s blogさま document.execCommandの代替(クリップボードへのコピー)

実装できたよ。


疲れた時は、栄養を。
ポスト投函で届く、人気のブドウ糖です。
砂糖の代わりにコーヒーや紅茶などに。

Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いています。(元々はメモ書きでしたので順次見直し、更新しています。) 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 写真や動画はフリー素材、購入素材、もしくは自前のものを使用しております。

井川 宜久 | Norihisa Igawa
デザイナー、ディレクター、講師、コーチ / 井川宜久

お問い合わせ CONTACT..

    Name(required)お名前 (必須)
    Furigana(required)ふりがな (必須)
    Email(required)メールアドレス (必須)
    Phone Number(required)電話番号 (必須)
    Message(required)ご質問・ご要望 (必須)


    免責事項について

    • 事実や経験、調査や検証を基にしていますが、私はただの人間です。万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。
    • 万一損害・トラブル等が発生した場合でも、一切の責任を負いかねます。