還暦過ぎたエンジニアの挑戦

いくつになっても好奇心だけは忘れないエンジニア Hikaruのブログ

MENU

Qiita風にコードをクリップボードにコピーする

解決したい事

以前からこれだけは作ろうと思っていたんです。

Qiitaのサイトだったら、
参考になるコードを見つけると、
「ありがとう」
と心の中でつぶやきつつ、
それをコピーしたいと思うわけです。

それで、

  1. コードのエリアにマウスオーバーさせると
  2. 「コピーできるよ」と、コピーボタンが表示され
  3. ボタンをクリックするとクリップボードに内容がコピーされる
  4. ついでにCopied!って表示してコピーされたことを教えてくれる

後は自分のエディタにペーストして。。。

とスムーズにいくわけです。

及ばずながら、
Hikaruもこのブログ上ではいろいろとソースコードを公開しているので
そんなQiitaのようにコピーできるようにしておけば
誰かの幸せにちょっとぐらい貢献できるかな
と思っていたのです。

と、いうわけで
「Qiita風にコードをクリップボードにコピーするコード」

「Qiita風にコードをクリップボードにコピーする機能も使って」
紹介します。

ソースコード

Qiita風にコードをクリップボードにコピーするコード
Copied!
file_copy
<link 
    href="https://fonts.googleapis.com/icon?family=Material+Icons" 
    rel="stylesheet">
<script 
    src="https://code.jquery.com/jquery-3.4.1.min.js" 
    integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" 
    crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<div>
    <style>
        #copy1 {
            position: relative;
            max-width: 800px;
            padding: 15px;
            background: #000;
            color: #fff;
        }

        .copyMessage {
            margin-top: 20px;
        }

        .copied,
        .showCopy {
            position: absolute;
            z-index: 10;
        }

        .showCopy {
            right: 20px;
        }

        .copied {
            right: 50px;
        }

        .material-icons {
            cursor: pointer;
        }
    </style>

    <div id="copy1" v-on:mouseover="mouseOver" v-on:mouseleave="mouseLeave">
        <div class="copied" v-if="copied">Copied!</div>
        <div class="showCopy" v-if="showCopy">
            <span class="material-icons">
                <span @click="toCopy">file_copy</span>
            </span>
            </button>
        </div>
        <div class="copyMessage">
              <pre>
            (ここにコードを書く)
              </pre>
        </div>
    </div>
</div>
<script>
    let copy1 = new Vue({
        el: '#copy1',
        data: {
            showCopy: false,
            copied: false
        },
        methods: {
            mouseOver() {
                this.showCopy = true;
            },
            mouseLeave() {
                this.showCopy = false;
                this.copied = false;
            },
            toCopy: function(e) {
                $('#copy1').append('<textarea id="forCopy" ></textarea>');
                $('#forCopy').html($('.copyMessage pre').html()).select();
                document.execCommand("copy");
                $('#forCopy').remove();
                this.copied = true;
            },
        }
    })
</script>

依存関係なく、そのままブログサイトなどにコピペして使えます。

(ここにコードを書く)  

という部分にコードを書くだけで実現します。

うんちくをちょっと

javascriptクリップボードにコピーする方法は
ネット上でいくつか紹介されていますが、
OSやブラウザ、「コピーするもの」
によってうまくいかないケースもあります。

それを回避するために
Hikaruのコード↑ では

$('#copy1').append('<textarea id="forCopy" ></textarea>'); 
    // 仮textareaを作っちゃう
$('#forCopy').html($('.copyMessage pre').html()).select(); 
    // ソースコードをtextareaにコピーして範囲選択
document.execCommand("copy"); 
    // クリップボードにコピー
$('#forCopy').remove(); 
    // 作った仮textareaを削除する

という風にしていますので、
ブラウザ環境の違いなどに影響はされないと思います。

さらに詳しい方は、
スタイルの記述などを外部ファイルにすると
すっきりして良いです。 (もちろん、Hikaruもそうしています)


あとがき

でも、ここまで書いてきて はたと思ったのですが、
こういう機能ははてなブログにも既にあるのかな?

Hikaruが知らないだけなら
それもバカみたいな話ですが。。。

それでも他のブログやサイトで使えますから

さっそく定型文*1に登録しておくことにします。

Hikaru

*1:はてなブログには定型文を登録しておいて貼り付ける機能があります