クリップボードにコピー

コピーされるために存在する読み取り専用の値 — 共有 URL、API トークン、 生成された SQL / 設定スニペット — に、手動の全選択 + Ctrl/Cmd-C を 強いるべきではありません(タッチでは特に劣悪です)。installCopy ビヘイビアは、素の <button> を「名前で指した要素の値をコピーし、 成功を伝え、連鎖可能なイベントを発火する」ように配線します — すべて 宣言的なマークアップからなので、厳格な Content-Security-Policy: default-src 'self'(インライン JS なし)の 下でも機能します。

セットアップ

このレシピには installCopy() ビヘイビアが必要です。 import '@hypermedia-components/core/behaviors'; で全ビヘイビアを一括 インストールするか、これだけを:

import { installCopy } from '@hypermedia-components/core';
installCopy();

インストールを参照。

スキャフォールド

npx @hypermedia-components/cli add copy がこのレシピの スキャフォールド(recipe.html、expanded.html、contract.md、 checks.json)をコピーし、npx @hypermedia-components/cli validate が コピーを機械検証します。完全な契約は recipes/copy/contract.md にあります。

ライブデモ

このページのプレビューはすでにライブです — コピーは純粋にクライアント サイドで完結します(installCopy が指名された要素を読んで クリップボードへ書き込みます)。サーバ契約が存在しないため api/recipes/copy/ 名前空間もありません。他のレシピのライブデモは このサイトのデモ API と通信しますが、このレシピは以下のマークアップ 以外に何も必要としません。

マークアップ

data-hc-copy に、コピーする要素を CSS セレクタで指定します。 ビヘイビアは、フォームコントロールなら value (input / textarea / select)、それ以外の要素なら textContent をコピーします。

PreviewCode

Copy

<div class="hc-cluster">
  <input id="share-url" class="hc-input" type="text" readonly
         value="https://app.example.com/s/abc123" aria-label="Share URL">
  <button class="hc-button" data-variant="ghost" type="button"
          data-hc-copy="#share-url" data-hc-copy-ok="Copied">
    Copy
  </button>
</div>

参照した要素の代わりに固定文字列をコピーするには data-hc-copy-text を 使います:

PreviewCode

Copy install command

<button class="hc-button" type="button"
        data-hc-copy-text="npm i @hypermedia-components/core"
        data-hc-copy-ok="Copied">
  Copy install command
</button>

属性

属性	必須	備考
data-hc-copy	ソースを 1 つ	コピーする要素の CSS セレクタ(value または textContent)。
data-hc-copy-text	ソースを 1 つ	コピーするリテラル文字列(data-hc-copy の代わりに使用)。
data-hc-copy-ok	(任意)	支援技術へ通知する成功テキスト。デフォルトは i18n カタログの copy.ok(“Copied”)。

成功状態

コピーに成功すると、ビヘイビアは:

• ボタンに約 1.5 秒間 data-hc-copied を設定します — この一時的な 合図は好きなようにスタイルできます(ボタン自身のアクセシブルな名前は 決して変わりません):

  .hc-button[data-hc-copied] { /* e.g. show a check, tint the button */ }

• ビヘイビアが所有する視覚的に隠した role="status" ライブ領域を通じて 成功ラベルを読み上げさせます。

• detail: { text } を持つバブリングする hc:copied イベントを発火 します。

トーストへの連鎖

hc:copied は普通のバブリングイベントです — コピー自体が トーストを開くことは決して ありません。インライン JS なしでコピー時にトーストを上げるには、 イベントを待ち受けて hc:toast を発火します:

document.addEventListener('hc:copied', () => {
  document.body.dispatchEvent(new CustomEvent('hc:toast', {
    bubbles: true,
    detail: { message: 'Copied to clipboard', variant: 'success' },
  }));
});

サーバ契約なし

copy はキットで唯一の純粋にクライアントサイドなレシピです: installCopy() が名指しされた要素(または data-hc-copy-text の リテラル)を読んでクリップボードに書き込みます — リクエストは発生 しないため、実装すべきエンドポイントもレスポンスの形も api/recipes/copy/ 名前空間もありません。統合ポイントはページ上に だけあります: 上の属性と、連鎖のためのバブリングイベント hc:copied です。

アクセシビリティ

• トリガーは本物の <button> — キーボードで起動でき、タッチにも優しい (ホバーではなくクリック)。
• 成功は role="status" 領域で読み上げられます。ボタンは一貫して自身の アクセシブルな名前を保ちます(「Copied」に付け替えられることは ありません)。

プログレッシブエンハンスメント

Clipboard API にはセキュアコンテキスト(https / localhost)が必要です。 使えない環境ではクリックは穏やかな no-op になり、フォームコントロールが ターゲットの場合はベストエフォートでテキストを選択して手動コピーできる ようにします。背後の値は、ビヘイビアなしでも常に見えて選択可能です。

関連

• トースト — hc:copied と 組み合わせてコピーを確認。
• i18n — 成功ラベル copy.ok の翻訳。