ブラウザでボタンを押したらクリップボードにコピーする、という機能を実現したくて色々紆余曲折しました。JQueryのライブラリーやjavascriptで行う方法を試しましたが色々あって(^_^;、WordPressのプラグインでなんとか思った感じに作ることができました。
その経緯と使ったプラグイン 「Copy To Clipboard – mobile + web」 の使い方を書いてみます。
JQueryとjavascriptでできないか検証したのですが
まず最初に見つけたのが、zClip というJQueryのライブラリーでした。情報も多くかなりの実績があるようだったのでこちらをダウンロードして、WordPressで動かそうとしたのですが色々エラーが出て(これは自分の力不足かも…)、うまく動かすことができませんでした。
また、ちょっと気になったのはAdobe Flashのswfを使っているということでした。iPhoneだとFlashは動かないのでこれをうまく導入できてもiPhoneでは動かないのかなぁと。サンプルサイトをiPhoneで見てみたのですがうまくコピーできませんでした。
次にjavascriptで単純にできないかなと色々検索したのですが、過去にはできたらしいですが現在は…
こちらに書いてあるように、
Javascript からのコピー＆ペーストの機能は用意されてはいますが、全てのブラウザで一貫して動くことがない手法になっています。
セキュリティが厳しく、ブラウザによって機能が安定しないため、コピー＆ペーストを行うために、 Javascript ではなく Flash のコピー＆ペースト機能を使うことが主流になりました。
という感じなのだなとかなり納得して、無理かなーと思いました。
WordPressで実現したかったのでプラグインを検索してみる
WordPressで実現したかったので、プラグインがあれば！と検索してみました。
クリップボードにコピーするボタンを作りたかったので
ダッシュボード プラグイン＞新規追加 の検索窓で copy clipboard と入力してリターン
「 Copy To Clipboard – mobile + web 」を見つけました。というか、他には見当たりません(>_<)。
インストール数がそれほど多くなかったり、現在のバージョンのWordPressではテストされてなかったりという不安な情報ですがこれしかないのでとにかく試してみます。
いますぐインストール をクリック
プラグインを有効化 をクリック
インストールが終了しました。
ボタンを押したらコピーしたいところにショートコードを書く
このプラグインはショートコードでボタンを表示してくれます。形式は、
[pw-clippy caption="ボタンに表示する文字"]クリップボードにコピーさせたい文字[/pw-clippy]
こんな感じです。実際に コワーキングスペース八王子 8Beat でこのプラグインを使ってみました。
Webサイトの右側一番下に住所などを表示しています。サイトを見ていて8Beatに行きたいな～と思った人はこの辺の住所や電話番号とかをコピーしたいと思うのです。なのでここにボタンを押したらコピーできるボタンを付けます。
ダッシュボード 外観＞ウィジェット でこのウィジェットを開きます。
先ほどのショートコードの形式で、COPYというボタンをクリックしたらコピーさせたい文字を入力して 保存 をクリック
サイトを見ると COPY ボタンが表示されていました。このボタンをクリックして、ペーストすると
こんな感じにコピー&ペーストが実現できました(^^)/。最後の方の via のあとにurlが入っています。これはダッシュボードの設定で変更することが可能です。
ダッシュボード 設定＞Copy To Clipboard をクリック
デフォルトでは post となっているようです。homepageにチェックを入れてみます。するとコピーペーストした文章は
コワーキングスペース八王子 8Beat 〒192-0084 東京都八王子市三崎町4-11 トーネンビル5F TEL:042-649-6681 FAX:042-649-6687 info@8beat.tokyo via http://8beat.tokyo
となりました。この形が分かりやすくていいかなーと思います(^^)/。noneを選択すれば
コワーキングスペース八王子 8Beat 〒192-0084 東京都八王子市三崎町4-11 トーネンビル5F TEL:042-649-6681 FAX:042-649-6687 info@8beat.tokyo
このようにviaは表示されません。用途によってこのviaなしも色々使えそうです。
iPhoneでの使い勝手を確認してみる
このプラグインもFlashのファイルを使ってコピーペーストを実現しています。なのに、「Copy To Clipboard – mobile + web」と、モバイルでも使えることを強調しています。
一体どうやって？ということで動きを確認してみました。
このように、iPhoneで見たときもコピーボタンが出ています
ボタンをタップするとこのようにポップアップで コピーペーストしやすい 形で表示されました。な、なるほどー
全選択 して コピーをタップ
メモ帳に貼り付けてみました。ちゃんとコピーペーストできました。うんうん。
iPhoneだとFlashが動きませんが、このようにコピーペーストしやすい形で表示されるので良いな～と思いました。
まとめ:機能としてはこれが今時点では良いのではないかなと思います
「Copy To Clipboard – mobile + web」はPCではボタンをクリックしただけでクリップボードにコピーできるし、iPhoneではコピーペーストしやすい形の表示をしてくれるので、今時点ではベストチョイスかなと思います。
ちょっと気になったのがボタンの形を変えようとしたのですが、CSSではなくswf(Flashのファイル)でこのボタンの形も指定してるらしくカスタマイズすることができませんでした。ボタンの大きさはwidth、heightで指定できるので
[pw-clippy caption="この情報をコピー" width="130" height="30"] コワーキングスペース八王子 8Beat 〒192-0084 東京都八王子市三崎町4-11 トーネンビル5F TEL:042-649-6681 FAX:042-649-6687 info@8beat.tokyo [/pw-clippy]
大きくして、ボタンに表示する文字を多くしてみると、
こんな感じになります。ちょっと縁を細くしたいな、と思ってもswfファイルなのでいじることができません。
この辺は文字を短めにするなどで対応していくしかないかなと思います。
おまけ:twentyfifteenの子テーマのウィジェットにショートコードを書くとき
twentyfifteenの子テーマのウィジェットでショートコードを使うときに、うまくショートコードを認識してくれませんでした(ショートコードがそのまま表示されてしまう)。
そんなときはお使いの子テーマのfunctions.phpに
add_filter('widget_text', 'do_shortcode' );
を追加します。twentyfifteenだけでなく他にもそのような状態になった場合は上記のようにコードを追加してみてください。
コメント
コメント一覧 （1件）
[…] 説明ページ […]