API Usage Guide dengan Claude Code

clipboardAPIでpengguna体験を向上

ワンクリック コード コピー り、リッチテキスト ペースト り、clipboardAPI Webaplikasi 使い勝手 大きく向上させ.Claude Code 使えば、browserkompatibilitasやセキュリティ 考慮 implementasi 素早くpembangunan bisa dilakukan.

コピーtombol コードブロック

> コードブロック コピーtombol tambahkan.
> クリック後 「コピー済み」フィードバック tampilkan.

// components/CopyButton.tsx
import { useState, useCallback } from 'react';

interface CopyButtonProps {
  text: string;
}

export function CopyButton({ text }: CopyButtonProps) {
  const [copied, setCopied] = useState(false);

  const handleCopy = useCallback(async () => {
    try {
      await navigator.clipboard.writeText(text);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch (err) {
      // フォールバック
      fallbackCopy(text);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    }
  }, [text]);

  return (
    <button
      onClick={handleCopy}
      className="absolute right-2 top-2 rounded bg-gray-700 px-2 py-1 text-xs text-white
        transition-colors hover:bg-gray-600"
      aria-label={copied ? 'コピー済み' : 'コード コピー'}
    >
      {copied ? '✓ コピー済み' : 'コピー'}
    </button>
  );
}

function fallbackCopy(text: string): void {
  const textarea = document.createElement('textarea');
  textarea.value = text;
  textarea.style.position = 'fixed';
  textarea.style.opacity = '0';
  document.body.appendChild(textarea);
  textarea.select();
  document.execCommand('copy');
  document.body.removeChild(textarea);
}

コピー リッチテキスト

// utils/clipboard.ts
export async function copyRichText(html: string, plainText: string): Promise<void> {
  if (!navigator.clipboard?.write) {
    fallbackCopy(plainText);
    return;
  }

  const htmlBlob = new Blob([html], { type: 'text/html' });
  const textBlob = new Blob([plainText], { type: 'text/plain' });

  const item = new ClipboardItem({
    'text/html': htmlBlob,
    'text/plain': textBlob,
  });

  await navigator.clipboard.write([item]);
}

// Usage example：テーブルデータ コピー
async function copyTableAsHtml(data: string[][]) {
  const html = `<table>${data.map(row =>
    `<tr>${row.map(cell => `<td>${cell}</td>`).join('')}</tr>`
  ).join('')}</table>`;
  
  const text = data.map(row => row.join('\t')).join('\n');
  await copyRichText(html, text);
}

読み取り clipboard

// ペースト時 gambarpemrosesan
async function handlePaste(e: ClipboardEvent): Promise<void> {
  const items = e.clipboardData?.items;
  if (!items) return;

  for (const item of items) {
    if (item.type.startsWith('image/')) {
      e.preventDefault();
      const blob = item.getAsFile();
      if (blob) {
        const url = URL.createObjectURL(blob);
        insertImage(url);
      }
    }
  }
}

// Permissions API izinチェック
async function checkClipboardPermission(): Promise<boolean> {
  try {
    const result = await navigator.permissions.query({
      name: 'clipboard-read' as PermissionName,
    });
    return result.state === 'granted' || result.state === 'prompt';
  } catch {
    return false;
  }
}

コピー機能 berbagi用URL

function ShareUrl({ url, title }: { url: string; title: string }) {
  const [copied, setCopied] = useState(false);

  const handleCopy = async () => {
    await navigator.clipboard.writeText(url);
    setCopied(true);
    setTimeout(() => setCopied(false), 3000);
  };

  return (
    <div className="flex items-center gap-2 rounded-lg border p-3">
      <input
        type="text"
        value={url}
        readOnly
        className="flex-1 bg-transparent text-sm outline-none"
      />
      <button
        onClick={handleCopy}
        className="rounded bg-blue-600 px-3 py-1 text-sm text-white hover:bg-blue-700"
      >
        {copied ? 'コピー済み!' : 'URL コピー'}
      </button>
    </div>
  );
}

Pertimbangan Keamanan

// サニタイズpemrosesan付きペースト
function sanitizePastedContent(html: string): string {
  const div = document.createElement('div');
  div.innerHTML = html;
  
  // scriptタグ 除去
  div.querySelectorAll('script, iframe, object, embed').forEach(el => el.remove());
  
  // eventhandleratribut 除去
  div.querySelectorAll('*').forEach(el => {
    Array.from(el.attributes)
      .filter(attr => attr.name.startsWith('on'))
      .forEach(attr => el.removeAttribute(attr.name));
  });
  
  return div.innerHTML;
}

Summary

Untuk clipboardAPIのpemanfaatanで、コードブロックのコピーやberbagi機能などのUXを大幅にpeningkatanできます。Claude Codeを使えば、フォールバックpemrosesanやセキュリティ対策まで含めたrobustなimplementasiがdimungkinkanです。Web Share APIと組み合わせれば、さらにfleksibelなberbagi機能をpenyediaanできます。performaoptimasiの観点も忘れずに考慮しましょう。詳しい仕様, lihat MDN Web Docs.