標準で組み込まれたclipboard.jsを使ってみた

説明

5.2の新機能「サイトヘルス情報」では、現状のサイト情報をクリップボードにコピーする機能がある。この機能の実装方法を調べてみると、clipboard.jsが利用されていた。

サイト情報のコピー機能

まずは「サイトヘルス情報」ページを開いて、サイト情報のコピー機能がどのように実装されているのか調べていく。この機能としては「サイト情報をクリップボードにコピー」ボタンがクリックされると、サイト情報がクリップボードにコピーせれる仕組みである。

サイト情報をクリップボードにコピーしたところ

このボタン部分をブラウザの開発者向け機能で確認すると、data-clipboard-text属性にサイト情報が丸ごと入っていることがわかる。

<button type="button" class="button copy-button" data-clipboard-text="`
### wp-core ###

version: 5.2
site_language: ja
user_language: ja

(省略)

`">
<span class="success" aria-hidden="true">コピーしました。</span>

これに対し、/wp-admin/js/site-health.jsを覗いてJavaScript側がどのようになっているかを確認。次は関連する部分を抜粋したものとなる。

var clipboard = new ClipboardJS( '.site-health-copy-buttons .copy-button' );

clipboard.on( 'success', function( e ) {
	var $wrapper = $( e.trigger ).closest( 'div' );
	$( '.success', $wrapper ).addClass( 'visible' );

	wp.a11y.speak( __( 'Site information has been added to your clipboard.' ) );
} );

ClipboardJSクラスのインスタンスを生成し、'success'イベントでspan要素に対して操作している。肝となるクリップボードに対してテキストをコピーする部分はまったく見えない仕様のようだ。続いて、ClipboardJSクラスが定義されているファイルを調べると、/wp-includes/js/clipboard.jsが見つかった。

このclipboard.jsは、/wp-includes/script-loader.phpにて次のように登録されている。

$scripts->add( 'clipboard', "/wp-includes/js/clipboard$suffix.js", array(), false, 1 );

(省略)

$scripts->add( 'site-health', "/wp-admin/js/site-health$suffix.js", array( 'clipboard', 'jquery', 'wp-util', 'wp-a11y', 'wp-i18n' ), false, 1 );

clipboard.jsのハンドル名は'clipboard'として、site-health.jsはこの'clipboard'に依存する指定でハンドル名'site-health'として登録されている。

実際に使ってみた

実際にプラグインで使う場合はまず wp_enqueue_script関数を使用する。

if ( wp_script_is( 'clipboard', 'registered' ) ) {
	wp_enqueue_script( 'clipboard' );
}

HTML側はクリップボードにコピーする内容が決まっている場合は次のような感じになる。クリック対象の要素は、サイトヘルス機能のようにbutton要素でもよいが、その他の要素でも問題はなく、ここではspan要素を使っている。

<span class="dashicons dashicons-clipboard" data-clipboard-text="コピーする内容をここに!"></span>

クリップボードにコピーした際に表示を変更するようなことをしないのであればコードは1行でよい。

const clipboard = new ClipboardJS( '.dashicons-clipboard' );

応用例

HTMLを出力する際にコピーする内容が決まっていない場合は、data-clipboard-text属性ではなく、data-clipboard-target属性を使用すればよい。

<textarea id="memo"></textarea>

<span class="dashicons dashicons-clipboard" data-clipboard-target="#memo"></span>

この例であれば、クリック時にtextarea#memoの入力内容がクリップボードにコピーすることができる。

以上のように、clipboard.js(ClipboardJSクラス)はシンプルなコーディングでクリップボードのコピー機能を実装できる。Zeno Rochaさん、ありがとう。


最終更新 : 2019年05月15日 12:59



お勧め

4.2で始まるiOSの絵文字ケア(2018年5月27日 更新)

WordPress 4.2のベータ1、ベータ2が立て続けにリリースされ、4.2の正式版リリースが近づいています。4.2のポイントの1つは絵文字のクロスブラウザ対応です。ここでの絵文字とは、UTF-8で4バイトのコードが割り当てられている(基本的にはiOSの)絵文字を指します。この絵文字を含んだ投稿が正しく保存できなかったり、iOS以外の環境で意図した通りに表示できないといった問題があり、4.2ではそのような問題を対処をコードが組み込まれています。

投稿内容のid属性などを保存するための対策(2012年6月15日 更新)

WordPress 3.4にアップデートしたとある環境で投稿記事を保存すると、divタグなどのid属性がクリアされて保存するようになった(id属性が保存できなくなった)。ここでは、その対策方法の1つを紹介しておく。

カレンダーウィジェットをAjaxで切り替える(2011年8月22日 更新)

ウィジェットベースでテーマを構築していてカレンダーを表示してみた。標準では、前月や次月のリンク先はそれぞれの月のアーカイブページとなっているのだが、記事を探すだけであればカレンダー部分だけを更新するほうが便利なのではと考え、そのアイデアを実装してみた。

続テーマを変更せずにWebフォントを使ってみた(2022年2月8日 更新)

先日投稿した「テーマを変更せずにWebフォントを使ってみた」では、テーマ「Twenty Twenty One」でWebフォントを使うことができた。その後、ほかのテーマで試したところ、そのままではWebフォントを使うことができなかった。今回は、それらのテーマの対応について紹介する。

LevelとCapability(2018年5月27日 更新)

プラグインやテーマの管理ページを作成する際など、ユーザのレベルと権限を確認することがある。ここでは、権限グループ別のレベルと権限の有無を整理してみた。