クリップボードにコピーするボタンを作るプラグイン Copy To Clipboard

ブラウザでボタンを押したらクリップボードにコピーする、という機能を実現したくて色々紆余曲折しました。JQueryのライブラリーやjavascriptで行う方法を試しましたが色々あって(^_^;、WordPressのプラグインでなんとか思った感じに作ることができました。
その経緯と使ったプラグイン 「Copy To Clipboard – mobile + web」 の使い方を書いてみます。

JQueryとjavascriptでできないか検証したのですが

まず最初に見つけたのが、zClip というJQueryのライブラリーでした。情報も多くかなりの実績があるようだったのでこちらをダウンロードして、WordPressで動かそうとしたのですが色々エラーが出て(これは自分の力不足かも…)、うまく動かすことができませんでした。

また、ちょっと気になったのはAdobe Flashswfを使っているということでした。iPhoneだとFlashは動かないのでこれをうまく導入できてもiPhoneでは動かないのかなぁと。サンプルサイトをiPhoneで見てみたのですがうまくコピーできませんでした。

次にjavascriptで単純にできないかなと色々検索したのですが、過去にはできたらしいですが現在は…

クリップボードにコピーする方法 スタックオーバーフロー

こちらに書いてあるように、

Javascript からのコピー&ペーストの機能は用意されてはいますが、全てのブラウザで一貫して動くことがない手法になっています。

セキュリティが厳しく、ブラウザによって機能が安定しないため、コピー&ペーストを行うために、 Javascript ではなく Flash のコピー&ペースト機能を使うことが主流になりました。

という感じなのだなとかなり納得して、無理かなーと思いました。

WordPressで実現したかったのでプラグインを検索してみる

WordPressで実現したかったので、プラグインがあれば!と検索してみました。

クリップボードにコピーするボタンを作りたかったので

ダッシュボード プラグイン>新規追加 の検索窓で copy clipboard と入力してリターン

「 Copy To Clipboard – mobile + web 」を見つけました。というか、他には見当たりません(>_<)。

インストール数がそれほど多くなかったり、現在のバージョンのWordPressではテストされてなかったりという不安な情報ですがこれしかないのでとにかく試してみます。

いますぐインストール をクリック

プラグインを有効化 をクリック

インストールが終了しました。

ボタンを押したらコピーしたいところにショートコードを書く

このプラグインはショートコードでボタンを表示してくれます。形式は、
 

こんな感じです。実際に コワーキングスペース八王子 8Beat でこのプラグインを使ってみました。

Webサイトの右側一番下に住所などを表示しています。サイトを見ていて8Beatに行きたいな~と思った人はこの辺の住所や電話番号とかをコピーしたいと思うのです。なのでここにボタンを押したらコピーできるボタンを付けます。

ダッシュボード 外観>ウィジェット でこのウィジェットを開きます。

先ほどのショートコードの形式で、COPYというボタンをクリックしたらコピーさせたい文字を入力して 保存 をクリック

サイトを見ると COPY ボタンが表示されていました。このボタンをクリックして、ペーストすると

こんな感じにコピー&ペーストが実現できました(^^)/。最後の方の via のあとにurlが入っています。これはダッシュボードの設定で変更することが可能です。

ダッシュボード 設定>Copy To Clipboard をクリック

デフォルトでは post となっているようです。homepageにチェックを入れてみます。するとコピーペーストした文章は

 

となりました。この形が分かりやすくていいかなーと思います(^^)/。noneを選択すれば

このようにviaは表示されません。用途によってこのviaなしも色々使えそうです。

iPhoneでの使い勝手を確認してみる

このプラグインもFlashのファイルを使ってコピーペーストを実現しています。なのに、「Copy To Clipboard – mobile + web」と、モバイルでも使えることを強調しています。

一体どうやって?ということで動きを確認してみました。

このように、iPhoneで見たときもコピーボタンが出ています

ボタンをタップするとこのようにポップアップで コピーペーストしやすい 形で表示されました。な、なるほどー

全選択 して コピーをタップ

メモ帳に貼り付けてみました。ちゃんとコピーペーストできました。うんうん。

iPhoneだとFlashが動きませんが、このようにコピーペーストしやすい形で表示されるので良いな~と思いました。

まとめ:機能としてはこれが今時点では良いのではないかなと思います

「Copy To Clipboard – mobile + web」はPCではボタンをクリックしただけでクリップボードにコピーできるし、iPhoneではコピーペーストしやすい形の表示をしてくれるので、今時点ではベストチョイスかなと思います。

ちょっと気になったのがボタンの形を変えようとしたのですが、CSSではなくswf(Flashのファイル)でこのボタンの形も指定してるらしくカスタマイズすることができませんでした。ボタンの大きさはwidth、heightで指定できるので

大きくして、ボタンに表示する文字を多くしてみると、

こんな感じになります。ちょっと縁を細くしたいな、と思ってもswfファイルなのでいじることができません。

この辺は文字を短めにするなどで対応していくしかないかなと思います。

おまけ:twentyfifteenの子テーマのウィジェットにショートコードを書くとき

twentyfifteenの子テーマのウィジェットでショートコードを使うときに、うまくショートコードを認識してくれませんでした(ショートコードがそのまま表示されてしまう)。

そんなときはお使いの子テーマのfunctions.php

を追加します。twentyfifteenだけでなく他にもそのような状態になった場合は上記のようにコードを追加してみてください。

兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
ゆうそうとITブログはMIXHOSTで運営中
スポンサー広告
ブログをメールで購読

メールアドレスを記入して購読すれば、更新をメールで受信できます。

280人の購読者に加わりましょう

コメント

トップへ戻る