エンジニアの将来って?

現在7年目のCOBOL→Java→C#エンジニアが、将来への考えや勉強のアウトプット、たまに腎臓について書くブログです

【jQuery】クリップボードにコピーできるプラグイン[clipboard.js]のダウンロードの仕方を解説

こんにちは。たいら(@tairaengineer2)です。

この記事ではJavaScriptのフレームワークjQueryのプラグインclipboard.jsのダウンロードの解説記事です。

注意事項

この記事で紹介している内容は2018年11月27日現在の情報です。
日にちが経過している場合は、変更されている可能性もあります。
ご了承ください。

プラグイン[clipboard.js]とは

テキストをクリップボードにコピーできるプラグインです。

Copying text to the clipboard shouldn't be hard.
It shouldn't require dozens of steps to configure or hundreds of KBs to load.
But most of all, it shouldn't depend on Flash or any bloated framework.

That's why clipboard.js exists.

clipboard.js — Copy to clipboard without Flashから引用させて頂きました

Google翻訳をしてみると

クリップボードにテキストをコピーするのは難しいはずはありません。
構成に数十ステップを要したり、何百KBもロードする必要はありません。
しかし、何よりも、Flashや膨大なフレームワークに依存すべきではありません。

それがclipboard.jsが存在する理由です。

という理念のもと作成されたようです。

では、ダウンロードしてみましょう!

プラグイン[clipboard.js]をダウンロードする

まず、公式サイトclipboard.js — Copy to clipboard without Flashに行きます。

f:id:Tairax:20181127075447p:plain

下がっていくと

f:id:Tairax:20181127080242p:plain

Installの項目が出てきます。
赤枠で囲っている部分[download a ZIP]をクリックすると

f:id:Tairax:20181127082314p:plain

ダウンロード完了です!
ダウンロードフォルダに移動します。

f:id:Tairax:20181128081504p:plain

zipで保存されています。

f:id:Tairax:20181128081647p:plain

zipに右クリックをして、[すべて展開]を左クリックです。

f:id:Tairax:20181128082037p:plain

何も変更せずに、[展開]をクリックです。
もし、あなたの好きな場所に展開したい場合、[参照]をクリックして、場所を指定してください。

f:id:Tairax:20181128082501p:plain

すると、展開が始まります。
展開が終わると

f:id:Tairax:20181128082836p:plain

展開されたzipがポップアップされます。
この中を見てみます。

f:id:Tairax:20181128083346p:plain

いろいろ入っています。
この中の

f:id:Tairax:20181128083622p:plain

[dist]フォルダの中にある

f:id:Tairax:20181129082838p:plain

  • clipboard.js
  • clipboard.min.js

このどちらかを使います。
どちらも中身は同じですが、[clipboard.js]を圧縮したものが[clipboard.min.js]です。
私は[clipboard.min.js]を使うことをおすすめします!
それは容量が軽いからです。

[clipboard.js]の中身は

f:id:Tairax:20181129083354p:plain

キレイに書かれていますね。
人間にとって、とても読みやすいです。

では[clipboard.min.js]の中身は

f:id:Tairax:20181129083608p:plain

改行がありません。
何が書かれているか良く分かりません。
スペースや、コメントがなく、圧縮されています。

このように[clipboard.min.js]は改行がない分、容量が少ないので、動作が軽いです。

これで[clipboard.min.js]を使う準備ができました!

まとめ:[clipboard.js]を使ってみよう!

以上が[clipboard.js]をダウンロードするやり方の解説記事です。
ご参考になりましたか?
あなたのご参考になれば幸いです。

では、今度は実際に使ってみましょう!

【jQuery】プラグイン[clipboard.js]を使って、テキストボックスの値をクリップボードにコピーする