Clipboard.js
Clipboard.jsライブラリをDrupalと統合し、テキストフィールドにクリップボードへのコピー機能を提供します。
clipboardjs
インストール
composer require 'drupal/clipboardjs:^2.0'
概要
Clipboard.jsモジュールは、人気のあるClipboard.js JavaScriptライブラリをDrupalとシームレスに統合します。これにより、サイト構築者はJavaScriptコードを一切書くことなく、あらゆるテキストベースのフィールドにモダンなクリップボードへのコピー機能を追加できます。
このモジュールは、フィールドフォーマッターを通じて複数の表示スタイルを提供します。シンプルなボタン、コピーボタン付きテキストフィールド、コピーボタン付きテキストエリア、コードスニペット表示などがあります。各スタイルは、異なるアラートフィードバックオプション（ツールチップ、ブラウザアラート、なし）とカスタムラベルでカスタマイズできます。
開発者は、提供されているテーマ関数をrender arrayやフォームで直接使用して、プログラム的にコピー可能な要素を作成することもでき、カスタム実装に柔軟に対応できます。
Features
- クリップボードへのコピー機能のための4つの異なるフィールドフォーマッターを提供：Button、Textfield、Textarea、Snippetスタイル
- email、link、string、string_longフィールドタイプをサポート
- ツールチップ、ブラウザアラート、サイレントモードで設定可能なコピー確認フィードバック
- 多言語対応のためのカスタマイズ可能なボタン/ホバーラベルとアラートテキスト
- フォームやrender arrayでプログラム的に使用できるテーマ関数
- ライブラリの簡単なダウンロードとインストールのためのDrushコマンド
- 視覚的なフィードバックのためのツールチップアニメーション付きフルCSSスタイリング
- Clipboard APIをサポートしていないデバイス向けのフォールバック指示による優雅なエラーハンドリング
Use Cases
APIキーの表示
Snippetフォーマッターを使用して、コピーボタン付きでAPIキーやトークンを表示します。ユーザーはテキストを手動で選択することなく簡単にキーをコピーでき、コピー＆ペースト操作でのエラーを減らせます。
共有リンク
URLやリンクフィールドにコピー機能を追加して、ユーザーが共有可能なリンクを素早くコピーできるようにします。最小限のフットプリントにはButtonフォーマッターを、URLを見える形で表示するにはTextfieldを使用します。
コード例
Snippetフォーマッターでコード例や埋め込みコードを表示し、開発者やコンテンツ編集者にワンクリックコピー機能付きのスタイル付きコードブロックを提供します。
連絡先情報
メールフィールドや電話番号フィールドにコピーボタンを追加し、訪問者が連絡先情報を直接クリップボードにコピーしやすくします。
カスタムフォーム要素
開発者はカスタムフォームやrender arrayでテーマ関数を直接使用して、追跡番号付きの注文確認ページなど、サイト内のどこにでもコピー可能な要素を追加できます。
Tips
- コードや技術的なコンテンツにはSnippetフォーマッターを使用すると、スタイル付きのpre/codeレンダリングが提供されます
- Buttonフォーマッターは最もコンパクトで、他のコンテンツとインラインで表示するのに適しています
- 異なる言語やコンテキストに合わせてalert_text設定をカスタマイズしてください（例：URLフィールドには「Link copied!」）
- 視覚的なフィードバックなしでサイレントコピーを行いたい場合は、alert_styleを「none」に設定します
- テーマ関数はプログラム的に使用できます：'#theme' => 'clipboardjs_button'と'#value'にコピーするテキストを含めて使用します
Technical Details
Hooks 2
hook_theme
すべてのクリップボード表示スタイルのテーマ実装を定義します。一貫した変数を持つbutton、textfield、textarea、snippet形式のtheme hookを提供します。
hook_library_info_alter
代替ライブラリインストールパスをサポートするためにライブラリ定義を変更します。ライブラリが「clipboard」ではなく「clipboard.js」にインストールされているかを自動検出します（Wikimedia composer assetの命名規則）。
Drush Commands 1
drush clipboardjs:download
Clipboard.jsライブラリをダウンロードしてlibrariesディレクトリにインストールします。wgetまたはcurlを使用してGitHubからライブラリアーカイブをダウンロードし、展開します。
Troubleshooting 3
Clipboard.jsライブラリが正しくインストールされていることを確認してください。「drush clipboardjs:download」を使用するか、Composer経由で「composer require npm-asset/clipboard:^2.0.11」でインストールします。ライブラリは /libraries/clipboard/dist/clipboard.js または /libraries/clipboard.js/dist/clipboard.js にある必要があります。
フィールドフォーマッター設定でalert_style設定が「tooltip」に設定されていることを確認してください。また、ページソースでclipboardjs/drupalライブラリを確認して、CSSが正しく読み込まれていることを確認してください。
iOS SafariにはHTML5 Clipboard APIに制限があります。このモジュールは、サポートされていないデバイスでは手動でコピーするよう指示する役立つメッセージを表示します。